@driftengine/core 4.4.2 → 4.6.0

package/dist/render/backend/webgl2/renderer.js

@@ -1,7 +1,9 @@
 import { FrameBudget } from '../budget.js';
 import { MaterialChanges, ownsMaterial } from '../materialChanges.js';
+import { FOG_RECEDE, fogModeOf } from '../drawFog.js';
 import { mat4 } from 'gl-matrix';
 import { GL_DEPTH_REMAP, MAX_DEPTH_LAYER, depthClearFor, depthOffsetForLayer, GL_SHADOW_REMAP, REVERSED_DEPTH, SHADOW_DEPTH_CLEAR, glDepthFuncEqual, glShadowDepthFunc, } from '../../depthConvention.js';
+import { resolveGlass } from '../../glass.js';
 import { PickableSet } from '../../pickable.js';
 import { TEMPORAL_HISTORY_BLEND, TemporalHistory, jitterOffset, jitterProjection, } from '../../temporalAa.js';
 import { DecalPass } from '../../decalPass.js';
@@ -15,6 +17,7 @@ import { OIT_MULTISAMPLE_REFUSAL } from '../../orderIndependent.js';
 import { INDIRECT_LIGHT_WEBGL2_REFUSAL } from '../../gi/probeTrace.js';
 import { TranslucentQueue } from '../../translucentQueue.js';
 import { createFrustum, frustumFromViewProjection } from '../../../math/frustum.js';
+import { batchBoxVisible, cullsInstances } from '../../instanceCull.js';
 import { OcclusionBuffer } from '../../occlusion.js';
 import { boundsVisible } from '../../visibility.js';
 import { createPassRegistry, drainRegistry, passAt, registerIn, unregisterIn } from '../../pass.js';
@@ -31,6 +34,7 @@ import { FILM_LOOK_WITHOUT_COMPOSITE } from '../../shaders/filmLook.js';
 import { bloomProfileWarning, bloomThresholdOf } from '../../bloomChain.js';
 import { createEmptyTexture2D, createEmptyTexture2DArray, createEmptyTexture3D, createEmptyTextureCube, } from '../../emptyTexture.js';
 import { LightField } from '../../driftLight/lightField.js';
+import { WorldLightField } from '../../driftLight/worldLightField.js';
 import { createDriftLightUniforms, resolveDriftLight } from '../../driftLight/uniforms.js';
 import { flatFrag, flatVert } from '../../shaders/flat/index.js';
 import { MORPH_DELTA_TEXTURE_UNIT, SKIN_PALETTE_TEXTURE_UNIT } from '../../lightBudget.js';
@@ -46,18 +50,24 @@ import { ProbeSweeps } from '../../probeSweeps.js';
 import { octahedralEdgeFor } from '../../prefilterEnvMap.js';
 import { EnvironmentPrefilterPass } from '../../prefilterPass.js';
 import { packIesAtlas } from '../../iesProfile.js';
+import { fixtureAtlasLayout, fixtureAtlasTexels } from '../../fixtureAtlas.js';
+import { resolveSurfaceScene } from '../../surfaceScene.js';
 import { MAX_AREA_LIGHTS } from '../../areaLights.js';
 import { areaShadowLayerCount, castingRange, createResolvedAreaShadows, firstAreaShadowLayer, AreaShadowSet, } from '../../areaShadowSet.js';
 import { equirectToCubeFaces } from '../../equirectToCube.js';
 import { SKY_FRAG, skyVertFor } from '../../shaders/sky.js';
 import { DEPTH_CUTOUT_FRAG, DEPTH_CUTOUT_VERT, DEPTH_FRAG, DEPTH_INSTANCED_CUTOUT_VERT, DEPTH_INSTANCED_VERT, DEPTH_SKINNED_VERT, DEPTH_VERT, } from '../../shaders/depth.js';
-import { PointShadowArray } from '../../pointShadowArray.js';
-import { ShadowMap } from '../../shadowMap.js';
+import { OCTAHEDRAL_EDGE, PointShadowArray, strideLayers } from '../../pointShadowArray.js';
+import { SunShadowArray } from '../../shadowMap.js';
 import { POINT_SHADOW_SAMPLER, PointShadowSystem } from '../../pointShadowSystem.js';
+import { castsDepth, glassOf } from '../../shadowCasters.js';
+import { GlassCasterList } from '../../glassCasters.js';
+import { SunGlassTint } from '../../sunGlassTint.js';
+import { GlassTintPrograms } from './glassTintPrograms.js';
 import { FACE_COUNT, PointShadowMap } from '../../pointShadowMap.js';
 import { createResolvedPointShadows, DEFAULT_SOURCE_RADIUS } from '../../pointShadowImage.js';
 import { createBakeScratch, runPointShadowBakes, selectCastingLights, } from '../../pointShadowBudget.js';
-import { DIRECTIONAL_SHADOW_UNITS, LIVE_POINT_SHADOW_MAPS, MAX_POINT_LIGHTS, NORMAL_TEXTURE_UNIT, ORM_TEXTURE_UNIT, POINT_SHADOW_POOL, POINT_SHADOW_UNITS, CLUSTER_TABLE_TEXTURE_UNIT, EMISSIVE_TEXTURE_UNIT, ENVIRONMENT_TEXTURE_UNIT, SURFACE_TEXTURE_UNIT, bindPointLights, COOKIE_ATLAS_TEXTURE_UNIT, REFRACT_SCENE_TEXTURE_UNIT, DRIFT_LIGHT_ATLAS_TEXTURE_UNIT, DRIFT_LIGHT_INDEX_TEXTURE_UNIT, COOKIE_TILE, IES_ATLAS_TEXTURE_UNIT, bindAreaLights, bindAreaShadows, openCones, } from '../../lightBudget.js';
+import { DIRECTIONAL_SHADOW_UNITS, SUN_GLASS_TINT_TEXTURE_UNIT, POINT_GLASS_TINT_TEXTURE_UNIT, LIVE_POINT_SHADOW_MAPS, MAX_POINT_LIGHTS, NORMAL_TEXTURE_UNIT, ORM_TEXTURE_UNIT, POINT_SHADOW_POOL, POINT_SHADOW_UNITS, CLUSTER_TABLE_TEXTURE_UNIT, EMISSIVE_TEXTURE_UNIT, ENVIRONMENT_TEXTURE_UNIT, SURFACE_TEXTURE_UNIT, bindPointLights, REFRACT_SCENE_TEXTURE_UNIT, DRIFT_LIGHT_ATLAS_TEXTURE_UNIT, DRIFT_LIGHT_INDEX_TEXTURE_UNIT, COOKIE_TILE, FIXTURE_ATLAS_TEXTURE_UNIT, SURFACE_EFFECTS_TEXTURE_UNIT, bindAreaLights, bindAreaShadows, openCones, } from '../../lightBudget.js';
 import { resolveRenderQuality } from '../../renderQuality.js';
 import { drawingBufferSize } from '../../drawingBuffer.js';
 import { Mesh, createMeshIncremental } from '../../mesh.js';
@@ -231,6 +241,8 @@ const IDENTITY_MAT4 = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 export { MAX_DEPTH_LAYER } from '../../depthConvention.js';
 /** The identity tint, handed back after any draw that asked for one. See `drawMesh`. */
 const WHITE_TINT = new Float32Array([1, 1, 1]);
+/** The lit stage's clip plane when there is no mirror: zero, which clips nothing. */
+const NO_CLIP_PLANE = new Float32Array(4);
 /** Handed to the shader when a batch has no press field. See `drawScatter`. */
 /**
  * What a contributed pass pre-multiplies its projection by on this backend: nothing.
@@ -488,6 +500,8 @@ export class WebGL2Renderer {
     /** Whether a palette is currently chosen. Distinct from whether one was ever uploaded. */
     skinPaletteSet = false;
     emptyTexture2D;
+    /** One glass resolution reused by every draw, so a pane allocates nothing. See `glass.ts`. */
+    glassScratch = { transmission: 0, frost: 0, tint: [1, 1, 1] };
     /** DriftLight's stand-ins while no field is whole: no brick anywhere, and no light. */
     emptyDriftIndex;
     emptyDriftAtlas;
@@ -539,6 +553,11 @@ export class WebGL2Renderer {
     oitActive = false;
     /** True while the queue is being replayed, so a replayed draw does not record itself again. */
     oitReplaying = false;
+    /** `uSurfaceScene`, resolved once a pass. See `surfaceScene.ts`. */
+    surfaceScene = new Float32Array(4);
+    /** The two halves of `uWriteMode`, kept here because a `vec2` is written whole. */
+    oitWeight = 0;
+    ditherFade = 0;
     /** Said once, not per frame, where the context cannot give the float target the sum needs. */
     oitRefused = false;
     /** Said once for the whole renderer. See `refuseOitMultisampled`. */
@@ -560,6 +579,7 @@ export class WebGL2Renderer {
         refraction: 0,
         refractTint: undefined,
         thicknessM: 0,
+        glass: undefined,
     };
     motionBlurScale = 1;
     /** How much of the bloom ceiling this frame takes. See `setBloom`. */
@@ -631,6 +651,8 @@ export class WebGL2Renderer {
     taaDepthToViewZ = Float32Array.of(0, 0, 0, 1);
     aoInvProjection = mat4.create();
     aoProjScale = new Float32Array(2);
+    /** Where this frame's jitter put the occlusion, in the composite's uv. See `uAoOffset`. */
+    aoOffset = new Float32Array(2);
     /**
      * Whether this frame has already been resolved to the canvas.
      *
@@ -687,9 +709,8 @@ export class WebGL2Renderer {
     depthInstancedCutoutUniforms;
     scatterDepthProgram;
     scatterDepthUniforms;
-    shadowMap;
-    peeledShadowMap;
-    dynamicShadowMap;
+    /** The sun's static, moving and peeled maps, as layers of one array. See `shadowMap.ts`. */
+    sunShadows;
     pointShadows;
     /**
      * The layers a world's casting rectangles hold, above the point pool in the same array.
@@ -723,12 +744,15 @@ export class WebGL2Renderer {
      * world. See `prepareStaticPointShadows`.
      */
     pointShadowArray = null;
-    /** The photometric atlas, allocated on first use. See `setIesProfiles`. */
-    iesTexture = null;
-    /** Rows in that atlas. One until a consumer loads a profile, which is the row of ones. */
+    /** The fixture atlas — cookies over profiles — allocated on first use. See `fixtureAtlas.ts`. */
+    fixtureTexture = null;
+    /** The profiles as packed, kept so a new set of cookies can rebuild the atlas around them. */
+    iesAtlas = packIesAtlas([]);
+    /** The cookie images, kept so a new set of profiles can rebuild the atlas around them. */
+    cookieImages = [];
+    /** Rows of profile in the atlas. One until a consumer loads a profile, which is the row of ones. */
     iesRows = 1;
-    cookieTexture = null;
-    /** Tiles in the cookie atlas. 0 is the white placeholder and the whole off path. */
+    /** Cookie tiles in the atlas. 0 is none, and the whole off path. */
     cookieTiles = 0;
     /** Horizontal planes each profile occupies. 1 unless something asymmetric was loaded. */
     iesPlanes = 1;
@@ -895,7 +919,7 @@ export class WebGL2Renderer {
     /** Non-zero while the drawing buffer is pinned; see `lockDrawingBuffer`. */
     lockedWidth = 0;
     lockedHeight = 0;
-    activeShadowMap = null;
+    activeSunLayer = null;
     reflectionPassActive = false;
     reflectionReadyThisFrame = false;
     reflectionAtmosphereY = 0;
@@ -917,7 +941,7 @@ export class WebGL2Renderer {
      *
      * **Not whether the map exists.** That was the test here, on the belief that a GL texture is
      * born reading as the far plane; it is born zeroed, and a scene that built the layer and never
-     * peeled it sampled an occluder at the light. `ShadowMap` now clears itself at birth, so an
+     * peeled it sampled an occluder at the light. `SunShadowArray` clears itself at birth, so an
      * unfilled layer would read as lit either way — this is what keeps the two backends one
      * decision, and a frame that does not peel from paying a fetch per tap for nothing.
      */
@@ -943,8 +967,34 @@ export class WebGL2Renderer {
      * Built once at construction, arrow properties closing over `this`: a sink created
      * per pass would allocate six objects per light per frame.
      */
+    /** What the sun's light keeps through glass, made the first time glass casts: `sunGlassTint.ts`. */
+    sunGlassTint = null;
+    /** The five programs a pane casts its colour through, compiled the first time glass casts. */
+    glassTintPrograms = null;
+    /** True while the glass list is replayed into the glass depth layer through `casterSink`. */
+    drawingGlassDepth = false;
+    /** How many times a shadow array grew its glass layers: once per family, and never again. */
+    sunGlassRebuilds = 0;
+    /** The light a tint pass is drawn for, and one pane's colour and clarity: uploaded per entry. */
+    glassLight = new Float32Array(4);
+    glassPane = new Float32Array(4);
+    /** The glass the open shadow pass was offered, kept for its own passes: `glassCasters.ts`. */
+    glassCasters = new GlassCasterList();
+    /** One resolution every glass caster is read through, so recording one allocates nothing. */
+    glassCasterScratch = {
+        transmission: 0,
+        frost: 0,
+        tint: [1, 1, 1],
+    };
     casterSink = {
         mesh: (mesh, model, material) => {
+            if (!this.drawingGlassDepth && !castsDepth(material)) {
+                /* Glass: kept aside for its own two passes rather than dropped. See `glassCasters.ts`. */
+                if (this.quality.glassShadows !== 'off' && glassOf(material, this.glassCasterScratch)) {
+                    this.glassCasters.recordMesh(mesh, model, material, this.glassCasterScratch);
+                }
+                return;
+            }
             this.shadowDrawBudget.ask();
             const { gl } = this;
             /* A two-sided caster casts from whichever face the light sees: nothing culled. */
@@ -984,6 +1034,12 @@ export class WebGL2Renderer {
          * columns the batch's own buffer supplies.
          */
         instanced: (batch, data, material) => {
+            if (!this.drawingGlassDepth && !castsDepth(material)) {
+                if (this.quality.glassShadows !== 'off' && glassOf(material, this.glassCasterScratch)) {
+                    this.glassCasters.recordInstanced(batch, data, material, this.glassCasterScratch);
+                }
+                return;
+            }
             const { gl } = this;
             const gpuBatch = batch;
             const count = Math.min(data.count, gpuBatch.capacity);
@@ -997,7 +1053,7 @@ export class WebGL2Renderer {
             if (cutout !== null) {
                 gl.useProgram(this.depthInstancedCutoutProgram);
                 this.bindCutoutDepth(this.depthInstancedCutoutUniforms, cutout);
-                gpuBatch.mesh.drawInstances(gl, count);
+                gpuBatch.draw(gl, count);
                 if (twoSided && this.depthPassCullsFaces)
                     gl.enable(gl.CULL_FACE);
                 gl.useProgram(this.depthProgram);
@@ -1010,12 +1066,18 @@ export class WebGL2Renderer {
             gl.uniform1i(u['uPeelShadowLayer'] ?? null, this.activeDepthPeel ? 1 : 0);
             if (this.activeDepthPeel)
                 gl.uniform1i(u['uPreviousShadowMap'] ?? null, 0);
-            gpuBatch.mesh.drawInstances(gl, count);
+            gpuBatch.draw(gl, count);
             if (twoSided && this.depthPassCullsFaces)
                 gl.enable(gl.CULL_FACE);
             gl.useProgram(this.depthProgram);
         },
-        skinnedMesh: (mesh, model, palette) => {
+        skinnedMesh: (mesh, model, palette, material) => {
+            if (!this.drawingGlassDepth && !castsDepth(material)) {
+                if (this.quality.glassShadows !== 'off' && glassOf(material, this.glassCasterScratch)) {
+                    this.glassCasters.recordSkinned(mesh, model, palette, material, this.glassCasterScratch);
+                }
+                return;
+            }
             this.shadowDrawBudget.ask();
             const { gl } = this;
             const u = this.depthSkinnedUniforms;
@@ -1098,8 +1160,52 @@ export class WebGL2Renderer {
         gl.useProgram(this.depthProgram);
         gl.uniform1i(this.depthUniforms['uPeelShadowLayer'] ?? null, 0);
         gl.uniformMatrix4fv(this.depthUniforms['uLightViewProj'] ?? null, false, faceViewProj);
+        /* A face is an enumeration of its own: its glass is its own. */
+        this.glassCasters.clear();
         casters(this.casterSink);
+        /*
+         * The first face to offer glass interleaves the array, before its opaque depth is resolved:
+         * `PointShadowArray.growForGlass`. Nothing baked before this saw glass, so nothing re-bakes.
+         */
+        if (this.glassCasters.count > 0 && this.quality.glassShadows !== 'off') {
+            const tintEdge = this.quality.glassShadows === 'half' ? OCTAHEDRAL_EDGE >> 1 : OCTAHEDRAL_EDGE;
+            this.pointShadowArray?.growForGlass(gl, tintEdge);
+        }
+    };
+    /**
+     * A lamp's glass, after each face's opaque depth: `PointShadowMap.bake` asks and binds, this
+     * draws, through the same sinks the sun's glass takes and in the face's own matrix.
+     */
+    pointGlassDraw = {
+        offered: () => this.glassCasters.count > 0,
+        draw: (pass, x, y, z) => {
+            const { gl } = this;
+            if (pass === 'depth') {
+                /* Nothing on the unit the depth programs declare a previous map on: see `flushSunGlass`. */
+                gl.activeTexture(gl.TEXTURE0);
+                gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
+                this.activeDepthPeel = false;
+                gl.useProgram(this.depthProgram);
+                gl.uniform1i(this.depthUniforms['uPeelShadowLayer'] ?? null, 0);
+                gl.uniformMatrix4fv(this.depthUniforms['uLightViewProj'] ?? null, false, this.activeDepthViewProj ?? IDENTITY_MAT4);
+                this.drawingGlassDepth = true;
+                this.glassCasters.replay(this.glassDepthSink);
+                this.drawingGlassDepth = false;
+                return;
+            }
+            this.glassTintPrograms ??= new GlassTintPrograms(gl);
+            /* A place, w 1: the tint takes each pane's angle to the lamp from its own position. */
+            this.glassLight[0] = x;
+            this.glassLight[1] = y;
+            this.glassLight[2] = z;
+            this.glassLight[3] = 1;
+            this.glassCasters.replay(this.glassTintSink);
+        },
     };
+    /** The glass hook a bake is handed: none at all when glass shadows are off. */
+    get pointGlass() {
+        return this.quality.glassShadows === 'off' ? null : this.pointGlassDraw;
+    }
     /**
      * Viewport in CSS pixels rather than device pixels.
      *
@@ -1216,6 +1322,13 @@ export class WebGL2Renderer {
     occluded(bounds, model) {
         return this.occlusion?.occluded(bounds, model) ?? false;
     }
+    /**
+     * Whether a world-space box is wholly behind the declared occluders — the tighter question for
+     * something that is a box, such as a region. False with no occlusion buffer. See `occluded`.
+     */
+    occludedBox(min, max) {
+        return this.occlusion?.occludedBox(min, max) ?? false;
+    }
     /* -- Registered passes ---------------------------------------------------------------- */
     passes = createPassRegistry();
     /** Built once so invoking somebody else's pass allocates nothing. See `PassDefinition.draw`. */
@@ -1389,80 +1502,57 @@ export class WebGL2Renderer {
      * `createSurfaceTexture` and the material maps take.
      */
     setSpotCookies(images) {
-        const { gl } = this;
-        this.cookieTiles = images.length;
-        if (this.cookieTexture === null)
-            this.cookieTexture = gl.createTexture();
-        gl.activeTexture(gl.TEXTURE0 + COOKIE_ATLAS_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.cookieTexture);
-        if (images.length === 0) {
-            /* White, not black: this multiplies a light's colour. */
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]));
-        }
-        else {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, COOKIE_TILE * images.length, COOKIE_TILE, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-            for (let tile = 0; tile < images.length; tile++) {
-                const image = images[tile];
-                if (image === undefined)
-                    continue;
-                gl.texSubImage2D(gl.TEXTURE_2D, 0, tile * COOKIE_TILE, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
-            }
-        }
-        /* Linear and clamped: a cookie is an image, and the shader's own inset is what keeps a tile
-           from reaching its neighbour — clamping alone cannot, the seam being interior to the row. */
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.activeTexture(gl.TEXTURE0);
+        this.cookieImages = images.slice();
+        this.buildFixtureAtlas();
     }
     setIesProfiles(profiles) {
+        this.iesAtlas = packIesAtlas(profiles);
+        this.buildFixtureAtlas();
+    }
+    /**
+     * The fixture atlas from the profiles and cookies in hand: the profiles' rows at the bottom, the
+     * cookies' tiles on top, one `RGBA16F` texture. See `fixtureAtlas.ts` for the layout.
+     *
+     * **Half float, matching what the other backend must use**: a 32-bit float texture is not
+     * filterable in core WebGPU, and both tables are curves and images that want linear filtering.
+     * Linear and clamped: a profile is sampled between two angles, and a cookie's own inset is what
+     * keeps a tile from its neighbour — clamping alone cannot, the seam being interior to the row.
+     */
+    buildFixtureAtlas() {
         const { gl } = this;
-        const atlas = packIesAtlas(profiles);
-        if (this.iesTexture === null)
-            this.iesTexture = gl.createTexture();
-        gl.activeTexture(gl.TEXTURE0 + IES_ATLAS_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.iesTexture);
-        /*
-         * `LINEAR` across a row and clamped, unlike the froxel table's `NEAREST`. This one *is* a
-         * curve rather than data addressed by index: interpolating between two columns is sampling
-         * the distribution between two angles, which is exactly what is wanted, and clamping stops a
-         * row bleeding into its neighbour at the edges.
-         */
+        const layout = fixtureAtlasLayout(this.iesAtlas.height, this.cookieImages.length);
+        if (this.fixtureTexture === null)
+            this.fixtureTexture = gl.createTexture();
+        gl.activeTexture(gl.TEXTURE0 + FIXTURE_ATLAS_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, this.fixtureTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, layout.width, layout.height, 0, gl.RGBA, gl.FLOAT, fixtureAtlasTexels(layout, this.iesAtlas));
+        for (let tile = 0; tile < this.cookieImages.length; tile++) {
+            const image = this.cookieImages[tile];
+            if (image === undefined)
+                continue;
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, tile * COOKIE_TILE, 0, gl.RGBA, gl.HALF_FLOAT, image);
+        }
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        /*
-         * One channel, because a row holds one number per angle and the other three would be three
-         * quarters of the upload spent on nothing — and **half float rather than full**, matching what
-         * the other backend must use: a 32-bit float texture is not filterable in core WebGPU, and this
-         * row is a curve that wants linear filtering. Keeping the two formats the same is the
-         * 2026-08-13 rule rather than tidiness; the driver converts the float data on the way in.
-         */
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, atlas.width, atlas.height, 0, gl.RED, gl.FLOAT, atlas.data);
-        this.iesRows = atlas.height;
-        this.iesPlanes = atlas.planes;
+        this.iesRows = this.iesAtlas.height;
+        this.iesPlanes = this.iesAtlas.planes;
+        this.cookieTiles = this.cookieImages.length;
         gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.activeTexture(gl.TEXTURE0);
     }
-    /** Bind the atlas and say how many rows it has. Always, for the reason `bindClusters` gives. */
+    /** Bind the fixture atlas and say what is in it. Always, for the reason `bindClusters` gives. */
     bindIesAtlas(u) {
         const { gl } = this;
-        if (this.iesTexture === null)
-            this.setIesProfiles([]);
-        gl.activeTexture(gl.TEXTURE0 + IES_ATLAS_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.iesTexture);
-        gl.uniform1i(u['uIesAtlas'] ?? null, IES_ATLAS_TEXTURE_UNIT);
+        /* Built on demand rather than at construction, for the reason the grade's placeholder is. */
+        if (this.fixtureTexture === null)
+            this.buildFixtureAtlas();
+        gl.activeTexture(gl.TEXTURE0 + FIXTURE_ATLAS_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, this.fixtureTexture);
+        gl.uniform1i(u['uFixtureAtlas'] ?? null, FIXTURE_ATLAS_TEXTURE_UNIT);
         gl.uniform1f(u['uIesAtlasRows'] ?? null, this.iesRows);
         gl.uniform1f(u['uIesPlaneCount'] ?? null, this.iesPlanes);
-        /* Built on demand rather than at construction, for the reason the grade's placeholder is: a
-           scene that never projects a cookie should not carry a texture, and a declared sampler still
-           needs a complete one. */
-        if (this.cookieTexture === null)
-            this.setSpotCookies([]);
-        gl.activeTexture(gl.TEXTURE0 + COOKIE_ATLAS_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.cookieTexture);
-        gl.uniform1i(u['uCookieAtlas'] ?? null, COOKIE_ATLAS_TEXTURE_UNIT);
         gl.uniform1f(u['uCookieTiles'] ?? null, this.cookieTiles);
         gl.activeTexture(gl.TEXTURE0);
     }
@@ -1906,20 +1996,14 @@ export class WebGL2Renderer {
             gl.uniform1i(uniforms['uCutoutMap'] ?? null, SURFACE_TEXTURE_UNIT);
         }
         gl.useProgram(null);
-        this.shadowMap = this.quality.directionalShadows
-            ? new ShadowMap(gl, this.quality.directionalShadowMapSize)
-            : null;
-        // A second static depth layer preserves both occluders where two world
-        // shadows overlap. It is depth-peeled from the first map below.
-        this.peeledShadowMap =
-            this.quality.directionalShadows && this.quality.directionalShadowDepthLayers > 1
-                ? new ShadowMap(gl, this.quality.directionalShadowMapSize)
-                : null;
-        // Movers get an independent layer. It preserves distance fading when a
-        // moving and a static caster overlap: their transmissions multiply rather
-        // than one depth replacing the other.
-        this.dynamicShadowMap = this.quality.directionalShadows
-            ? new ShadowMap(gl, this.quality.directionalShadowMapSize)
+        /*
+         * The static world, its movers and — where more than one static depth layer is asked for —
+         * the peel, as layers of one array. Movers get a layer of their own so a moving and a static
+         * caster that overlap keep both distance fades: their transmissions multiply rather than one
+         * depth replacing the other. The peel keeps the second static occluder the same way.
+         */
+        this.sunShadows = this.quality.directionalShadows
+            ? new SunShadowArray(gl, this.quality.directionalShadowMapSize, this.quality.directionalShadowDepthLayers > 1)
             : null;
         // Static maps are allocated once the world reports its light count. No
         // cubemap resources exist at all when the quality profile disables them.
@@ -2088,19 +2172,17 @@ export class WebGL2Renderer {
              * every one of them, per renderer, for as long as it lived; `renderer.test.ts` counts them.
              */
             this.sceneTarget?.dispose();
-            this.shadowMap?.dispose(gl);
-            this.peeledShadowMap?.dispose(gl);
-            this.dynamicShadowMap?.dispose(gl);
+            this.sunShadows?.dispose(gl);
+            this.sunGlassTint?.dispose(gl);
+            this.glassTintPrograms?.dispose(gl);
             this.planarReflection?.dispose(gl);
             this.pointShadows?.dispose();
             gl.deleteVertexArray(this.panelVao);
             gl.deleteVertexArray(this.skyVao);
             if (this.panelBuffer !== null)
                 gl.deleteBuffer(this.panelBuffer);
-            if (this.cookieTexture !== null)
-                gl.deleteTexture(this.cookieTexture);
-            if (this.iesTexture !== null)
-                gl.deleteTexture(this.iesTexture);
+            if (this.fixtureTexture !== null)
+                gl.deleteTexture(this.fixtureTexture);
             if (this.clusterTexture !== null)
                 gl.deleteTexture(this.clusterTexture);
         }
@@ -2248,6 +2330,15 @@ export class WebGL2Renderer {
     createSurfaceTexture(source, options = {}) {
         return new SurfaceTexture(this.gl, source, options);
     }
+    /**
+     * Upload several images of one size as the layers of one array, for a merged mesh that names a
+     * layer per vertex (`MeshData.layers`). One material binding then covers every image, which is
+     * what makes a block wearing forty facades one draw. Every layer must be the same size, and the
+     * refusal names the first that is not.
+     */
+    createSurfaceTextureArray(sources, options = {}) {
+        return new SurfaceTexture(this.gl, sources, options);
+    }
     /**
      * Replace a surface texture's pixels, keeping the GPU object and its sampler state.
      *
@@ -2361,7 +2452,7 @@ export class WebGL2Renderer {
          * page-faulted an RDNA4 card and wedged the device. See `emptyTexture.ts`.
          */
         gl.activeTexture(gl.TEXTURE0 + NORMAL_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         if (normal !== null)
             normal.bind(gl, NORMAL_TEXTURE_UNIT);
         gl.uniform1i(u['uNormalMap'] ?? null, NORMAL_TEXTURE_UNIT);
@@ -2379,7 +2470,7 @@ export class WebGL2Renderer {
          */
         const orm = material?.orm ?? null;
         gl.activeTexture(gl.TEXTURE0 + ORM_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         if (orm !== null)
             orm.bind(gl, ORM_TEXTURE_UNIT);
         gl.uniform1i(u['uOrmMap'] ?? null, ORM_TEXTURE_UNIT);
@@ -2397,7 +2488,7 @@ export class WebGL2Renderer {
          */
         const emissiveMap = material?.emissive ?? null;
         gl.activeTexture(gl.TEXTURE0 + EMISSIVE_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         if (emissiveMap !== null)
             emissiveMap.bind(gl, EMISSIVE_TEXTURE_UNIT);
         gl.uniform1i(u['uEmissiveMap'] ?? null, EMISSIVE_TEXTURE_UNIT);
@@ -2413,7 +2504,21 @@ export class WebGL2Renderer {
          */
         gl.uniform2f(u['uUvScale'] ?? null, material?.uScale ?? 1, material?.vScale ?? 1);
         gl.uniform1i(u['uDoubleSided'] ?? null, material?.doubleSided === true ? 1 : 0);
+        /* The albedo's effects table, or the stand-in the shader reads as none. Before the early
+           return, so a material with no albedo still leaves a complete texture on the unit. */
+        if (albedo === null) {
+            gl.activeTexture(gl.TEXTURE0 + SURFACE_EFFECTS_TEXTURE_UNIT);
+            gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        }
+        else {
+            albedo.bindEffects(gl, SURFACE_EFFECTS_TEXTURE_UNIT, this.emptyTexture2D);
+        }
+        gl.uniform1i(u['uSurfaceEffects'] ?? null, SURFACE_EFFECTS_TEXTURE_UNIT);
         if (albedo === null) {
+            /* The array stand-in, for the reason the maps above take one: a sampler reads its unit's
+               array target, and with nothing there it is incomplete. */
+            gl.activeTexture(gl.TEXTURE0 + SURFACE_TEXTURE_UNIT);
+            gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
             gl.uniform1i(u['uAlbedoEnabled'] ?? null, 0);
             return;
         }
@@ -2448,7 +2553,7 @@ export class WebGL2Renderer {
             return;
         }
         gl.activeTexture(gl.TEXTURE0 + SURFACE_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
     }
     /**
      * A pass-level scale over the grain the geometry itself declared, 0 to 1.
@@ -2476,8 +2581,7 @@ export class WebGL2Renderer {
         if (this.contextLost)
             return;
         this.materials.dirty();
-        this.useFlatProgram();
-        this.gl.uniform1f(this.flatUniforms['uReflectivity'] ?? null, Math.min(1, Math.max(0, amount)));
+        this.writeFlatFloat('uReflectivity', Math.min(1, Math.max(0, amount)));
     }
     /**
      * How bright the environment the surfaces drawn next reflect is. 1 is the default and identity.
@@ -2495,8 +2599,7 @@ export class WebGL2Renderer {
         if (this.contextLost)
             return;
         this.materials.dirty();
-        this.useFlatProgram();
-        this.gl.uniform1f(this.flatUniforms['uEnvironmentGain'] ?? null, Math.max(0, gain));
+        this.writeFlatFloat('uEnvironmentGain', Math.max(0, gain));
     }
     /**
      * Kept as a no-op that says so once, because it was a stand-in for a term that now exists.
@@ -2523,8 +2626,51 @@ export class WebGL2Renderer {
         if (this.contextLost)
             return;
         this.materials.dirty();
+        this.writeFlatFloat('uGrain', Math.min(1, Math.max(0, amount)));
+    }
+    /**
+     * One float of material state, into every flat program.
+     *
+     * **Every one, for `setMaterial`'s reason**: an instanced or skinned draw runs a program of its
+     * own and is entitled to the material its caller set before it. These setters wrote the plain
+     * program alone until 2026-09-30, so on this backend a batch drew with the pass defaults — grain
+     * full, no reflection, no relief — while the other backend, whose material block every variant
+     * reads, drew what was asked.
+     */
+    writeFlatFloat(name, value) {
+        for (const target of this.flatTargets) {
+            this.gl.useProgram(target.program);
+            this.gl.uniform1f(target.uniforms[name] ?? null, value);
+        }
+        this.useFlatProgram();
+    }
+    /**
+     * How much of the surfaces drawn next survives a screen-door dither, for crossfading two levels
+     * of detail of one thing.
+     *
+     * 0 is off and is what `bindMeshPass` restores. A positive amount keeps that share of the
+     * pattern's cells, a negative one keeps the complement, so the level fading in drawn at `t` and
+     * the one fading out at `-t` cover every pixel exactly once — no hole, no pixel drawn twice.
+     * Material state like `setSurfaceGrain`; instanced draws read it too, and shadow casters, which
+     * are a pass of their own, do not. See `uDither` in `flat/preamble.ts` for what it costs.
+     */
+    setDitherFade(amount) {
+        if (this.contextLost)
+            return;
+        this.materials.dirty();
+        this.useFlatProgram();
+        this.ditherFade = Math.min(1, Math.max(-1, amount));
+        /* Every flat program, as `setMaterial` writes them: an instanced or skinned draw is entitled
+           to the fade the caller set before it, and a second program holding none draws whole. */
+        for (const target of this.flatTargets) {
+            this.gl.useProgram(target.program);
+            this.writeMode(target.uniforms);
+        }
         this.useFlatProgram();
-        this.gl.uniform1f(this.flatUniforms['uGrain'] ?? null, Math.min(1, Math.max(0, amount)));
+    }
+    /** `uWriteMode`: the order-independent weight and the dither, which share one uniform row. */
+    writeMode(u) {
+        this.gl.uniform2f(u['uWriteMode'] ?? null, this.oitWeight, this.ditherFade);
     }
     /**
      * How strong the microscopic relief on the surfaces drawn next is, and how coarse.
@@ -2553,10 +2699,8 @@ export class WebGL2Renderer {
         if (this.contextLost)
             return;
         this.materials.dirty();
-        this.useFlatProgram();
-        const u = this.flatUniforms;
-        this.gl.uniform1f(u['uRelief'] ?? null, Math.min(1, Math.max(0, amount)));
-        this.gl.uniform1f(u['uReliefCycles'] ?? null, Math.max(0.01, cyclesPerMetre));
+        this.writeFlatFloat('uRelief', Math.min(1, Math.max(0, amount)));
+        this.writeFlatFloat('uReliefCycles', Math.max(0.01, cyclesPerMetre));
     }
     /**
      * How hard the bound surface texture's own luminance turns the shading normal, 0 for not at all.
@@ -2587,8 +2731,7 @@ export class WebGL2Renderer {
         if (this.contextLost)
             return;
         this.materials.dirty();
-        this.useFlatProgram();
-        this.gl.uniform1f(this.flatUniforms['uTextureRelief'] ?? null, Number.isFinite(scale) ? scale : 0);
+        this.writeFlatFloat('uTextureRelief', Number.isFinite(scale) ? scale : 0);
     }
     /**
      * Release a mesh's GPU buffers.
@@ -2615,8 +2758,7 @@ export class WebGL2Renderer {
         if (this.contextLost)
             return;
         this.materials.dirty();
-        this.useFlatProgram();
-        this.gl.uniform1f(this.flatUniforms['uEmissiveGain'] ?? null, gain);
+        this.writeFlatFloat('uEmissiveGain', gain);
     }
     /* -- Instanced meshes --------------------------------------------------------------- */
     /** The instanced program, compiled on first use. See `ensureInstancedProgram`. */
@@ -2655,7 +2797,7 @@ export class WebGL2Renderer {
      * One batch per mesh: the attributes bind to the mesh's own vertex array, of which a mesh has
      * one. `Mesh.attachInstances` is what refuses a second, and says why.
      */
-    createInstanced(mesh, capacity) {
+    createInstanced(mesh, capacity, options = {}) {
         /* The same refusal as the other backend, for the same reason: the instanced attributes take
            the two locations a skinned mesh's joints and weights already occupy. */
         if (mesh.isSkinned) {
@@ -2663,7 +2805,7 @@ export class WebGL2Renderer {
                 'locations the joint indices and weights occupy, and this mesh supplies them.');
         }
         this.ensureInstancedProgram();
-        return new InstancedBatch(this.gl, mesh, capacity);
+        return new InstancedBatch(this.gl, mesh, capacity, options.cull ?? false);
     }
     /** Push placement and colour. Only the live prefix. */
     uploadInstanced(batch, data) {
@@ -2707,6 +2849,12 @@ export class WebGL2Renderer {
         const count = Math.min(data.count, batch.capacity);
         if (count === 0)
             return;
+        /* A culling batch's camera draw: the whole batch against the view and the occluders first,
+           then instance by instance where it survives. Blended draws keep every instance and their
+           order. See `InstancedOptions.cull`. */
+        const culling = !blend && batch.cull;
+        if (culling && !batchBoxVisible(batch.box, this.frustum, this.occlusion))
+            return;
         this.drawBudget.ask();
         this.ensureInstancedProgram();
         const program = this.flatInstancedProgram;
@@ -2717,10 +2865,13 @@ export class WebGL2Renderer {
         gl.useProgram(program);
         gl.uniform1i(u['uHasTangents'] ?? null, mesh.hasTangents ? 1 : 0);
         const lit = options.lit ?? true;
-        const fog = options.fog ?? true;
+        /* Added light fades in the medium rather than receding into it. See `drawFog.ts`. */
+        const fog = fogModeOf(options.fog ?? true, blend && options.additive === true);
         const toneMapped = options.toneMapped ?? true;
-        /* An instanced draw does not refract. See `materialChanges.ts`. */
-        const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting: false });
+        /* A blended batch shows what is behind it — refraction or glass — as a single draw does, and
+           counts a material of its own for it by the rule both backends share (`materialChanges.ts`). */
+        const refracting = blend && this.bindSeeThrough(u, options);
+        const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
         if (own)
             this.materials.dirty();
         this.takeMaterial();
@@ -2741,29 +2892,21 @@ export class WebGL2Renderer {
          * **A null snapshot leaves the strength at zero**, so the draw shades as an ordinary
          * translucent one rather than sampling a black texture and painting the pane the colour of a
          * hole. That is the defined state the two-backends rule asks for instead of a silent no-op.
+         * The copy is bound above, before the material is counted, because whether it was taken is
+         * part of what the count asks.
          */
-        const refraction = options.refraction ?? 0;
-        let refracting = false;
-        if (refraction > 0) {
-            const snapshot = this.sceneTarget?.snapshotColor() ?? null;
-            if (snapshot !== null) {
-                refracting = true;
-                gl.activeTexture(gl.TEXTURE0 + REFRACT_SCENE_TEXTURE_UNIT);
-                gl.bindTexture(gl.TEXTURE_2D, snapshot);
-                gl.uniform1f(u['uRefractStrength'] ?? null, refraction);
-                gl.uniform3fv(u['uRefractTint'] ?? null, options.refractTint ?? WHITE_TINT);
-                gl.uniform1f(u['uRefractThickness'] ?? null, options.thicknessM ?? 0);
-            }
-        }
         if (!lit)
             gl.uniform1i(u['uLightingEnabled'] ?? null, 0);
-        if (!fog)
-            gl.uniform1i(u['uFogEnabled'] ?? null, 0);
+        if (fog !== FOG_RECEDE)
+            gl.uniform1i(u['uFogEnabled'] ?? null, fog);
         if (!toneMapped)
             gl.uniform1i(u['uOutputTransform'] ?? null, Math.min(this.gradeCode(), 1));
         if (blend) {
             gl.enable(gl.BLEND);
-            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            if (options.additive === true)
+                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ZERO, gl.ONE);
+            else
+                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
             if (!depthWrite)
                 gl.depthMask(false);
         }
@@ -2774,7 +2917,16 @@ export class WebGL2Renderer {
             gl.enable(gl.POLYGON_OFFSET_FILL);
             gl.polygonOffset(offset.slope, offset.units);
         }
-        mesh.drawInstances(gl, count);
+        /* Both sides of a double-sided material, as every mesh path does and WebGPU's pipeline does
+           for both: without it a batch's far faces were culled here alone. */
+        if (this.materialDoubleSided)
+            gl.disable(gl.CULL_FACE);
+        if (culling && cullsInstances(count, mesh.indexCount))
+            batch.drawCulled(gl, data, this.frustum);
+        else
+            batch.draw(gl, count);
+        if (this.materialDoubleSided)
+            gl.enable(gl.CULL_FACE);
         if (layer > 0) {
             gl.polygonOffset(0, 0);
             gl.disable(gl.POLYGON_OFFSET_FILL);
@@ -2790,21 +2942,57 @@ export class WebGL2Renderer {
             gl.uniform1f(u['uOpacity'] ?? null, 1);
         /* The binding is released with the uniform, which is the 2026-08-27 rule: a WebGL2 binding
            outlives its frame, so a snapshot left on unit 14 is held against the next frame's copy. */
-        if (refracting) {
-            gl.uniform1f(u['uRefractStrength'] ?? null, 0);
-            gl.activeTexture(gl.TEXTURE0 + REFRACT_SCENE_TEXTURE_UNIT);
-            gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
-        }
+        if (refracting)
+            this.unbindSeeThrough(u);
         if (!lit)
             gl.uniform1i(u['uLightingEnabled'] ?? null, 1);
-        if (!fog)
-            gl.uniform1i(u['uFogEnabled'] ?? null, 1);
+        if (fog !== FOG_RECEDE)
+            gl.uniform1i(u['uFogEnabled'] ?? null, FOG_RECEDE);
         if (!toneMapped)
             gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
         if (own)
             this.materials.dirty();
         this.useFlatProgram();
     }
+    /**
+     * Bind what a translucent draw shows through it: the frame's copy, refraction's bend and absorption,
+     * and glass. Returns whether the copy is bound, and so whether `unbindSeeThrough` owes it back.
+     *
+     * **A glass draw takes the copy even when it does not bend**, since a pane shows what is behind it
+     * either way, and asks for the copy's mip chain, which a frosted pane reads blurred. A null copy
+     * leaves both off, so the pane shades as ordinary translucency rather than sampling black.
+     *
+     * **Refused inside a probe's face or a mirror**, as WebGPU's `takeRefractSnapshot` refuses: the
+     * copy is of the frame drawn to the screen, so a pane there would show the wrong picture, and
+     * taking it mid-bake is how a probe's next face came to be attached to the scene's framebuffer.
+     */
+    bindSeeThrough(u, options) {
+        const { gl } = this;
+        const refraction = options.refraction ?? 0;
+        const glassy = resolveGlass(options.glass, this.glassScratch);
+        if (refraction <= 0 && !glassy)
+            return false;
+        if (this.probePassActive || this.reflectionPassActive)
+            return false;
+        const snapshot = this.sceneTarget?.snapshotColor(false, glassy) ?? null;
+        if (snapshot === null)
+            return false;
+        gl.activeTexture(gl.TEXTURE0 + REFRACT_SCENE_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, snapshot);
+        const glass = this.glassScratch;
+        /* Strength, path thickness, transmission, frost: one vector, for the budget the shader states. */
+        gl.uniform4f(u['uSeeThrough'] ?? null, Math.max(refraction, 0), options.thicknessM ?? 0, glass.transmission, glass.frost);
+        gl.uniform3fv(u['uRefractTint'] ?? null, options.refractTint ?? WHITE_TINT);
+        gl.uniform3fv(u['uGlassTint'] ?? null, glass.tint);
+        return true;
+    }
+    /** Put back what `bindSeeThrough` bound: the binding outlives its frame (the 2026-08-27 rule). */
+    unbindSeeThrough(u) {
+        const { gl } = this;
+        gl.uniform4f(u['uSeeThrough'] ?? null, 0, 0, 0, 0);
+        gl.activeTexture(gl.TEXTURE0 + REFRACT_SCENE_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+    }
     disposeMesh(mesh) {
         /*
          * Nothing to release when the context is gone: it took every buffer and VAO with it,
@@ -3338,6 +3526,10 @@ export class WebGL2Renderer {
          */
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.pointShadowArray?.texture ?? this.emptyTexture2DArray);
         gl.uniform1i(uniforms[POINT_SHADOW_SAMPLER] ?? null, firstUnit);
+        /* What the lamps keep through glass: the one-texel stand-in, read as none, until glass casts. */
+        gl.activeTexture(gl.TEXTURE0 + POINT_GLASS_TINT_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.pointShadowArray?.tintTexture ?? this.emptyTexture2DArray);
+        gl.uniform1i(uniforms['uPointGlassTints'] ?? null, POINT_GLASS_TINT_TEXTURE_UNIT);
         gl.uniform1iv(uniforms['uPointShadowLayer[0]'] ?? null, resolved.layers);
         /* Origin and far plane in one row; see `uPointShadowProjection` in the preamble. */
         gl.uniform4fv(uniforms['uPointShadowProjection[0]'] ?? null, resolved.projections);
@@ -3614,20 +3806,17 @@ export class WebGL2Renderer {
      * emitting, because a stale map must never be sampled.
      */
     beginShadowPass(lightViewProj, layer = 'static') {
-        const shadowMap = layer === 'static'
-            ? this.shadowMap
-            : layer === 'static-peel'
-                ? this.peeledShadowMap
-                : this.dynamicShadowMap;
-        if (shadowMap === null) {
+        const sun = this.sunShadows;
+        if (sun === null || (layer === 'static-peel' && sun.layers < 3)) {
             this.shadowPassActive = false;
-            this.activeShadowMap = null;
+            this.activeSunLayer = null;
             return;
         }
         const { gl } = this;
         this.gpuTimer.begin('shadows');
         this.shadowPassActive = true;
-        this.activeShadowMap = shadowMap;
+        this.activeSunLayer = layer;
+        this.glassCasters.clear();
         /* The static layer opens first, so a frame's peel counts from here. See `peelFilled`. */
         if (layer === 'static')
             this.peelFilled = false;
@@ -3655,16 +3844,16 @@ export class WebGL2Renderer {
         // The previous mesh pass left all directional maps bound for sampling.
         // A texture cannot be sampled while it is attached to the active depth
         // target, even when the shader branch would skip that sample.
-        const targetUnit = layer === 'static' ? 0 : layer === 'static-peel' ? 1 : 2;
-        gl.activeTexture(gl.TEXTURE0 + targetUnit);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        shadowMap.begin(gl);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
+        sun.begin(gl, layer);
         gl.useProgram(this.depthProgram);
         const peel = layer === 'static-peel';
         gl.uniform1i(this.depthUniforms['uPeelShadowLayer'] ?? null, peel ? 1 : 0);
         if (peel) {
+            /* The static layer, read while the peel is drawn aside: see `SunShadowArray`. */
             gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, this.shadowMap?.texture ?? null);
+            gl.bindTexture(gl.TEXTURE_2D_ARRAY, sun.texture);
             gl.uniform1i(this.depthUniforms['uPreviousShadowMap'] ?? null, 0);
         }
         /* The corrected one, matching `activeDepthViewProj` above: a pass must render its map with the
@@ -3770,21 +3959,158 @@ export class WebGL2Renderer {
             return;
         casters(this.casterSink);
     }
+    /**
+     * Draw the pass's glass twice: where the nearest pane is, and what the panes let through.
+     *
+     * After the opaque casters, in the pass's own light matrix. A layer that has held glass is
+     * redrawn even when this pass offered none, so glass that has gone takes its colour with it. The
+     * first glass grows the array (`SunShadowArray.growForGlass`) and makes the tint target.
+     */
+    flushSunGlass(which) {
+        const sun = this.sunShadows;
+        const list = this.glassCasters;
+        if (sun === null || this.quality.glassShadows === 'off')
+            return;
+        if (list.count === 0 && !sun.hasGlass)
+            return;
+        const { gl } = this;
+        if (list.count > 0 && sun.growForGlass(gl))
+            this.sunGlassRebuilds++;
+        /* Where the nearest pane is: the depth programs, through the sink every opaque caster took. */
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
+        sun.beginGlass(gl, which);
+        this.activeDepthPeel = false;
+        gl.useProgram(this.depthProgram);
+        gl.uniform1i(this.depthUniforms['uPeelShadowLayer'] ?? null, 0);
+        gl.uniformMatrix4fv(this.depthUniforms['uLightViewProj'] ?? null, false, this.activeDepthViewProj ?? IDENTITY_MAT4);
+        this.drawingGlassDepth = true;
+        list.replay(this.glassDepthSink);
+        this.drawingGlassDepth = false;
+        sun.end(gl);
+        /* What the panes let through, every one on a ray, multiplied. */
+        this.glassTintPrograms ??= new GlassTintPrograms(gl);
+        const size = this.quality.glassShadows === 'half' ? Math.max(1, sun.size >> 1) : sun.size;
+        const tint = (this.sunGlassTint ??= new SunGlassTint(gl, size));
+        /*
+         * The direction the light travels, off the light matrix's depth row: an orthographic
+         * projection's depth grows along it. The sign is immaterial — the tint takes the cosine
+         * absolutely — and w 0 says it is a direction rather than a place.
+         */
+        const m = this.activeDepthViewProj ?? IDENTITY_MAT4;
+        const length = Math.hypot(m[2], m[6], m[10]) || 1;
+        this.glassLight[0] = m[2] / length;
+        this.glassLight[1] = m[6] / length;
+        this.glassLight[2] = m[10] / length;
+        this.glassLight[3] = 0;
+        tint.begin(gl, which === 'static' ? 0 : 1);
+        list.replay(this.glassTintSink);
+        tint.end(gl);
+        gl.useProgram(this.depthProgram);
+    }
+    /** The glass list into the glass depth layer: `casterSink` itself, with glass let through. */
+    glassDepthSink = {
+        mesh: (mesh, model, material) => this.casterSink.mesh(mesh, model, material),
+        instanced: (batch, data, material) => this.casterSink.instanced?.(batch, data, material),
+        skinnedMesh: (mesh, model, palette, material) => this.casterSink.skinnedMesh(mesh, model, palette, material),
+    };
+    /** One pane's tint uniforms, and its cutout where it has one. */
+    bindGlassTint(program, glass, cutout) {
+        const { gl } = this;
+        const u = program.uniforms;
+        gl.useProgram(program.program);
+        gl.uniformMatrix4fv(u['uLightViewProj'] ?? null, false, this.activeDepthViewProj ?? IDENTITY_MAT4);
+        this.uploadWind(u, this.frameWind);
+        this.glassPane[0] = glass.transmission * glass.tint[0];
+        this.glassPane[1] = glass.transmission * glass.tint[1];
+        this.glassPane[2] = glass.transmission * glass.tint[2];
+        this.glassPane[3] = 1 - glass.frost;
+        gl.uniform4fv(u['uGlassPane'] ?? null, this.glassPane);
+        gl.uniform4fv(u['uGlassLight'] ?? null, this.glassLight);
+        if (cutout !== null) {
+            gl.uniform2f(u['uUvScale'] ?? null, cutout.u, cutout.v);
+            gl.uniform1f(u['uAlphaCutout'] ?? null, cutout.cutoff);
+            cutout.albedo.bind(gl, SURFACE_TEXTURE_UNIT);
+            gl.uniform1i(u['uCutoutMap'] ?? null, SURFACE_TEXTURE_UNIT);
+        }
+    }
+    /**
+     * The glass list into the tint layer, through the tint programs, **culling nothing**: a light
+     * crosses a pane whichever way the pane faces, and a closed glass object has two surfaces on a
+     * ray, so every one counts. What that asks of a model is that a pane be one surface — two-sided
+     * glass says so with `doubleSided`, and a second copy of its triangles is a second pane.
+     */
+    glassTintSink = {
+        mesh: (mesh, model, material, glass) => {
+            const programs = this.glassTintPrograms;
+            if (programs === null)
+                return;
+            const { gl } = this;
+            const cutout = cutoutOf(material);
+            const program = cutout !== null ? programs.cutout : programs.rigid;
+            this.bindGlassTint(program, glass, cutout);
+            gl.uniformMatrix4fv(program.uniforms['uModel'] ?? null, false, model);
+            gl.disable(gl.CULL_FACE);
+            mesh.draw(gl);
+            if (this.depthPassCullsFaces)
+                gl.enable(gl.CULL_FACE);
+            if (cutout !== null)
+                this.restoreSurfaceTextureUnit();
+        },
+        instanced: (batch, data, material, glass) => {
+            const programs = this.glassTintPrograms;
+            if (programs === null)
+                return;
+            const { gl } = this;
+            const gpuBatch = batch;
+            const count = Math.min(data.count, gpuBatch.capacity);
+            if (count === 0)
+                return;
+            const cutout = cutoutOf(material);
+            this.bindGlassTint(cutout !== null ? programs.instancedCutout : programs.instanced, glass, cutout);
+            gl.disable(gl.CULL_FACE);
+            gpuBatch.draw(gl, count);
+            if (this.depthPassCullsFaces)
+                gl.enable(gl.CULL_FACE);
+            if (cutout !== null)
+                this.restoreSurfaceTextureUnit();
+        },
+        skinnedMesh: (mesh, model, palette, _material, glass) => {
+            const programs = this.glassTintPrograms;
+            if (programs === null)
+                return;
+            const { gl } = this;
+            const program = programs.skinned;
+            this.bindGlassTint(program, glass, null);
+            gl.uniformMatrix4fv(program.uniforms['uModel'] ?? null, false, model);
+            this.skinPalette.update(gl, palette);
+            this.skinPalette.bind(gl, SKIN_PALETTE_TEXTURE_UNIT);
+            gl.uniform1i(program.uniforms['uJointPalette'] ?? null, SKIN_PALETTE_TEXTURE_UNIT);
+            gl.disable(gl.CULL_FACE);
+            mesh.draw(gl);
+            if (this.depthPassCullsFaces)
+                gl.enable(gl.CULL_FACE);
+        },
+    };
     endShadowPass() {
         if (this.contextLost)
             return;
-        const shadowMap = this.activeShadowMap;
-        if (!this.shadowPassActive || shadowMap === null)
+        const sun = this.sunShadows;
+        const layer = this.activeSunLayer;
+        if (!this.shadowPassActive || sun === null || layer === null)
             return;
-        shadowMap.end(this.gl);
-        if (shadowMap === this.peeledShadowMap)
+        sun.end(this.gl);
+        if (layer === 'static-peel')
             this.peelFilled = true;
+        /* The peel keeps no glass: its layer is the second opaque occluder and nothing else. */
+        else
+            this.flushSunGlass(layer === 'dynamic' ? 'dynamic' : 'static');
         /* Back to the frame's sense; see `beginShadowPass` for why it left it. */
         this.gl.depthFunc(glDepthFuncEqual(this.gl));
         this.gl.clearDepth(this.depthClear);
         this.gpuTimer.end();
         this.shadowPassActive = false;
-        this.activeShadowMap = null;
+        this.activeSunLayer = null;
         // Restore the drawing-buffer viewport the shadow pass overrode.
         this.restoreViewport();
     }
@@ -3818,6 +4144,8 @@ export class WebGL2Renderer {
             directionalShadows: this.quality.directionalShadows,
             environmentProbe: this.probeCapture !== null,
             nightEmissive: this.quality.nightEmissive,
+            /* Off compiles none of the glass lookup: see `FlatShaderOptions.glassShadows`. */
+            glassShadows: this.quality.glassShadows !== 'off',
         };
         const build = (budget) => flatFrag({ ...variant, maxLights: budget.maxLights, maxAreaLights: budget.maxAreaLights });
         const vert = flatVert({ skinned: false, morphed: false, instanced: false });
@@ -4081,6 +4409,8 @@ export class WebGL2Renderer {
          */
         runPointShadowBakes(pointShadows, lights, this.quality.pointShadowFacesPerFrame, this.quality.liveShadowFacesPerFrame, this.quality.pointShadowRebakeDistance, FACE_COUNT, this.bakeScratch, staticCasters, dynamicCasters, (map, light, casters, maxFaces) => this.bakeOne(map, light, casters, maxFaces));
         this.updateAreaShadows(areaLights, frameDt, staticCasters, dynamicCasters);
+        /* The chain frost reads, once for the round, for the lights whose glass it drew or cleared. */
+        this.pointShadowArray.finishTints(this.gl);
         this.restoreViewport();
     }
     /**
@@ -4127,6 +4457,10 @@ export class WebGL2Renderer {
          * reason: it already holds everything it needs.
          */
         set.resolve(areaLights, this.resolvedAreaShadows);
+        /* As the array stores them: 2L once glass has interleaved it. See `strideLayers`. */
+        const stride = this.pointShadowArray?.stride ?? 1;
+        strideLayers(this.resolvedAreaShadows.layer, stride);
+        strideLayers(this.resolvedAreaShadows.liveLayer, stride);
     }
     /**
      * Every point-shadow bake, under the one set of conventions all of them need.
@@ -4172,12 +4506,12 @@ export class WebGL2Renderer {
          * map is stale on every frame it is checked — `pointShadowImage.ts` records that exact bug
          * from two readers disagreeing about this argument's default.
          */
-        return this.bakePointShadow(drawCasters, () => map.bake(gl, light.x, light.y, light.z, range, this.drawPointShadowFace, near, DEFAULT_SOURCE_RADIUS, maxFaces));
+        return this.bakePointShadow(drawCasters, () => map.bake(gl, light.x, light.y, light.z, range, this.drawPointShadowFace, near, DEFAULT_SOURCE_RADIUS, maxFaces, this.pointGlass));
     }
     /** Spend up to `maxFaces` on this map, returning how many it used. */
     bakeOne(map, light, drawCasters, maxFaces) {
         const { gl } = this;
-        return this.bakePointShadow(drawCasters, () => map.bake(gl, light.x, light.y, light.z, light.radius, this.drawPointShadowFace, light.shadowNear, light.sourceRadius, maxFaces));
+        return this.bakePointShadow(drawCasters, () => map.bake(gl, light.x, light.y, light.z, light.radius, this.drawPointShadowFace, light.shadowNear, light.sourceRadius, maxFaces, this.pointGlass));
     }
     /**
      * Draw into a rectangle of the canvas, on its own terms.
@@ -4388,6 +4722,10 @@ export class WebGL2Renderer {
      *
      * What it gives up is one frame of history: the frame after a cut has no blur and no temporal
      * blend, as the first frame of a session has none. Nothing else is reset.
+     *
+     * **A reconstructing renderer depends on it**: its history is the last shot's, and without this
+     * call a cut blends that shot into the first frames of the next. Nothing detects a cut on the
+     * caller's behalf, deliberately — a fast pan and a cut look alike from here.
      */
     cameraCut() {
         this.hasPreviousView = false;
@@ -4981,11 +5319,20 @@ export class WebGL2Renderer {
                metres into a radius in UV. */
             this.aoProjScale[0] = projection[0] ?? 1;
             this.aoProjScale[1] = projection[5] ?? 1;
+            /* The occlusion read where this frame's jitter put it (`uAoOffset`): a texel stands at its
+               index plus a half less the jitter, in the drawing buffer the jitter was spread over. */
+            this.aoOffset[0] = this.temporalJittering
+                ? this.temporalJitterX / Math.max(1, this.gl.drawingBufferWidth)
+                : 0;
+            this.aoOffset[1] = this.temporalJittering
+                ? this.temporalJitterY / Math.max(1, this.gl.drawingBufferHeight)
+                : 0;
             ao = {
                 strength: aoStrength,
                 radius: this.quality.ambientOcclusionRadius,
                 projScale: this.aoProjScale,
                 invProjection: this.aoInvProjection,
+                offset: this.aoOffset,
             };
         }
         /*
@@ -5103,12 +5450,14 @@ export class WebGL2Renderer {
              * flat paint with the effect on. The opaque frame is finished here, which is what a pane
              * should show; the latch then serves every pane in the replay. Only when something refracts.
              */
-            if (this.translucentQueue.refracts)
-                this.sceneTarget?.snapshotColor();
+            if (this.translucentQueue.refracts) {
+                this.sceneTarget?.snapshotColor(false, this.translucentQueue.glassy);
+            }
             this.oit.accumulateOit(this.canvas.width, this.canvas.height, oitDepth, (weighted) => {
                 this.oitReplaying = true;
                 this.useFlatProgram();
-                this.gl.uniform1f(flat['uOitWeighted'] ?? null, weighted ? 1 : 0);
+                this.oitWeight = weighted ? 1 : 0;
+                this.writeMode(flat);
                 this.translucentQueue.replay((draw) => {
                     options.lit = draw.lit;
                     options.fog = draw.fog;
@@ -5121,10 +5470,12 @@ export class WebGL2Renderer {
                     options.refraction = draw.refraction;
                     options.refractTint = draw.refractTint;
                     options.thicknessM = draw.thicknessM;
+                    options.glass = draw.glass ?? undefined;
                     this.drawTranslucentMesh(draw.mesh, draw.model, draw.opacity, options);
                 });
                 /* Back to zero for every other draw in the frame, exactly as `uOpacity` and `uTint` are. */
-                this.gl.uniform1f(flat['uOitWeighted'] ?? null, 0);
+                this.oitWeight = 0;
+                this.writeMode(flat);
                 this.oitReplaying = false;
             });
             this.sceneTarget?.bind();
@@ -5170,9 +5521,7 @@ export class WebGL2Renderer {
                     /* The placeholder rather than null where a map is merely absent, for the reason
                        `emptyTexture.ts` gives. It is black, which as a depth is an occluder at the light,
                        so it is safe only because `sunShadow` is 0 whenever these maps do not exist. */
-                    staticShadowMap: this.shadowMap?.texture ?? this.emptyTexture2D,
-                    peeledShadowMap: this.peeledShadowMap?.texture ?? this.emptyTexture2D,
-                    dynamicShadowMap: this.dynamicShadowMap?.texture ?? this.emptyTexture2D,
+                    sunShadows: this.sunShadows?.texture ?? this.emptyTexture2DArray,
                     peeledEnabled: this.peelFilled,
                 });
                 if (marched) {
@@ -5285,7 +5634,15 @@ export class WebGL2Renderer {
          * A reflection pass binds its own camera and is skipped: blurring toward a mirror's
          * previous view is not what a viewer moved through.
          */
-        if (!this.reflectionPassActive && !this.probePassActive) {
+        /*
+         * **Not after the present**: a mesh pass bound then is the interface's, over a picture already
+         * resolved. Deciding the frame again drew the interface jittered with nothing to resolve it,
+         * and opened a second temporal frame, so the sequence stepped twice a frame, the world saw every
+         * other position, and the anti-flicker's period never started.
+         */
+        if (this.framePresented)
+            this.temporalJittering = false;
+        if (!this.reflectionPassActive && !this.probePassActive && !this.framePresented) {
             this.frameViewProj = camera.viewProjection;
             /* Copied rather than referenced: a caller moves its camera in place, and the decal pass
                reads this at the end of the frame. */
@@ -5391,6 +5748,19 @@ export class WebGL2Renderer {
         this.lightField = field;
         return field;
     }
+    /**
+     * Hand a world's DriftLight volume to the renderer: every fixed light of a city, summed offline by
+     * `bakeDenseField`, standing in past the frame's exact choice. Replaces any field made before, of
+     * either kind; the scene calls `field.follow(buffer.complete, ...)` each frame as it would for
+     * `createLightField`, and marks the lights the volume summed `inLightField` so none is counted
+     * twice. See `driftLight/worldLightField.ts`.
+     */
+    createWorldLightField(volume, options = {}) {
+        this.forgetLightFieldVolumes();
+        const field = new WorldLightField(volume, options);
+        this.lightField = field;
+        return field;
+    }
     /** Let go of the field and its volumes; the scene's lights are all exact again. */
     disposeLightField() {
         this.forgetLightFieldVolumes();
@@ -5410,14 +5780,14 @@ export class WebGL2Renderer {
      */
     uploadLightField() {
         const field = this.lightField;
-        if (field === null || this.driftAtlas !== null || !field.ready || field.layout.count === 0) {
+        if (field === null || this.driftAtlas !== null || !field.ready || field.empty) {
             return;
         }
         const { gl } = this;
-        const [ix, iy, iz] = field.layout.dims;
+        const [ix, iy, iz] = field.indexDims;
         const index = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_3D, index);
-        gl.texImage3D(gl.TEXTURE_3D, 0, gl.R32UI, ix, iy, iz, 0, gl.RED_INTEGER, gl.UNSIGNED_INT, field.layout.index);
+        gl.texImage3D(gl.TEXTURE_3D, 0, gl.R32UI, ix, iy, iz, 0, gl.RED_INTEGER, gl.UNSIGNED_INT, field.index);
         gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         const [aw, ah, ad] = field.atlasSize;
@@ -5475,9 +5845,11 @@ export class WebGL2Renderer {
         gl.activeTexture(gl.TEXTURE0 + REFRACT_SCENE_TEXTURE_UNIT);
         gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
         gl.uniform1i(u['uRefractScene'] ?? null, REFRACT_SCENE_TEXTURE_UNIT);
-        gl.uniform1f(u['uRefractStrength'] ?? null, 0);
+        /* Neither refracting nor glass, which is every draw that does not say otherwise. See
+           `bindSeeThrough` for the four numbers in the one vector. */
+        gl.uniform4f(u['uSeeThrough'] ?? null, 0, 0, 0, 0);
         gl.uniform3fv(u['uRefractTint'] ?? null, WHITE_TINT);
-        gl.uniform1f(u['uRefractThickness'] ?? null, 0);
+        gl.uniform3fv(u['uGlassTint'] ?? null, WHITE_TINT);
         gl.uniform3fv(u['uDirectionalDir'] ?? null, env.directionalDir);
         gl.uniform3fv(u['uDirectionalColor'] ?? null, env.directionalColor);
         gl.uniform3fv(u['uAmbient'] ?? null, env.ambient);
@@ -5543,6 +5915,10 @@ export class WebGL2Renderer {
         gl.uniform1i(u['uFogEnabled'] ?? null, 1);
         /* Grain on by default, so every scene written before it was a choice looks unchanged. */
         gl.uniform1f(u['uGrain'] ?? null, 1);
+        /* No dither and no weighting: every draw whole, until a crossfade asks. See `setDitherFade`. */
+        this.oitWeight = 0;
+        this.ditherFade = 0;
+        gl.uniform2f(u['uWriteMode'] ?? null, 0, 0);
         /* No environment reflection unless a caller asks, so existing scenes are unchanged. */
         gl.uniform1f(u['uReflectivity'] ?? null, 0);
         /* 1, not 0: this one is a multiplier and its identity is one. See `setEnvironmentGain`. */
@@ -5552,11 +5928,11 @@ export class WebGL2Renderer {
         gl.uniform1f(u['uReliefCycles'] ?? null, 60);
         /* And no relief read off a surface texture either, for the same reason. */
         gl.uniform1f(u['uTextureRelief'] ?? null, 0);
-        gl.uniform1i(u['uClipEnabled'] ?? null, this.reflectionPassActive ? 1 : 0);
+        /* The mirror's plane in a reflection pass, and zero — which clips nothing — in every other. */
         const reflection = this.planarReflection;
-        if (this.reflectionPassActive && reflection !== null) {
-            gl.uniform4fv(u['uClipPlane'] ?? null, reflection.clipPlane);
-        }
+        gl.uniform4fv(u['uClipPlane'] ?? null, this.reflectionPassActive && reflection !== null ? reflection.clipPlane : NO_CLIP_PLANE);
+        resolveSurfaceScene(env, this.surfaceScene);
+        gl.uniform4fv(u['uSurfaceScene'] ?? null, this.surfaceScene);
         bindAtmosphere(gl, u, env, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.quality.underwaterAtmosphere);
         gl.uniform1f(u['uEmissiveGain'] ?? null, env.emissiveGain);
         gl.uniform1f(u['uNightFactor'] ?? null, env.nightFactor);
@@ -5573,7 +5949,7 @@ export class WebGL2Renderer {
          * its own copy of this lookup; the two backends have to project the same way.
          */
         gl.uniformMatrix4fv(u['uLightViewProj'] ?? null, false, env.lightViewProj);
-        gl.uniform1f(u['uShadowStrength'] ?? null, this.shadowMap === null ? 0 : env.shadowStrength);
+        gl.uniform1f(u['uShadowStrength'] ?? null, this.sunShadows === null ? 0 : env.shadowStrength);
         gl.uniform1f(u['uShadowMapSize'] ?? null, this.quality.directionalShadowMapSize);
         gl.uniform1f(u['uShadowDepthSpan'] ?? null, env.shadowDepthSpan);
         gl.uniform1f(u['uShadowMaxDistance'] ?? null, this.quality.directionalShadowMaxDistance);
@@ -5598,14 +5974,12 @@ export class WebGL2Renderer {
          */
         if (this.quality.directionalShadows) {
             gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, this.shadowMap?.texture ?? this.emptyTexture2D);
-            gl.uniform1i(u['uStaticShadowMap'] ?? null, 0);
-            gl.activeTexture(gl.TEXTURE1);
-            gl.bindTexture(gl.TEXTURE_2D, this.peeledShadowMap?.texture ?? this.emptyTexture2D);
-            gl.uniform1i(u['uPeeledShadowMap'] ?? null, 1);
-            gl.activeTexture(gl.TEXTURE2);
-            gl.bindTexture(gl.TEXTURE_2D, this.dynamicShadowMap?.texture ?? this.emptyTexture2D);
-            gl.uniform1i(u['uDynamicShadowMap'] ?? null, 2);
+            gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.sunShadows?.texture ?? this.emptyTexture2DArray);
+            gl.uniform1i(u['uSunShadows'] ?? null, 0);
+            /* What the sun keeps through glass, or the one-texel stand-in the lookup reads as none. */
+            gl.activeTexture(gl.TEXTURE0 + SUN_GLASS_TINT_TEXTURE_UNIT);
+            gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.sunGlassTint?.texture ?? this.emptyTexture2DArray);
+            gl.uniform1i(u['uSunGlassTints'] ?? null, SUN_GLASS_TINT_TEXTURE_UNIT);
         }
         if (this.pointShadows === null) {
             /*
@@ -5618,6 +5992,10 @@ export class WebGL2Renderer {
         else {
             /* Chosen in `pointShadowSystem.ts` and bound here; see `resolve` for the split. */
             this.pointShadows.resolve(this.resolvedPointShadows);
+            /* As the array stores them: 2L once glass has interleaved it. See `strideLayers`. */
+            const stride = this.pointShadowArray?.stride ?? 1;
+            strideLayers(this.resolvedPointShadows.layers, stride);
+            strideLayers(this.resolvedPointShadows.liveLayers, stride);
             this.bindPointShadows(u, DIRECTIONAL_SHADOW_UNITS);
             /*
              * The rectangles' layers, into the array `bindPointShadows` just put on its unit. Resolved
@@ -5711,9 +6089,13 @@ export class WebGL2Renderer {
         }
         this.bindDriftLight(u, camera.position);
         gl.activeTexture(gl.TEXTURE0 + SURFACE_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         gl.uniform1i(u['uAlbedo'] ?? null, SURFACE_TEXTURE_UNIT);
         gl.uniform1i(u['uAlbedoEnabled'] ?? null, 0);
+        /* No albedo, so no effects table: the stand-in, which the shader reads as none. */
+        gl.activeTexture(gl.TEXTURE0 + SURFACE_EFFECTS_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.uniform1i(u['uSurfaceEffects'] ?? null, SURFACE_EFFECTS_TEXTURE_UNIT);
         gl.uniform2f(u['uUvScale'] ?? null, 1, 1);
         gl.uniform1f(u['uAlbedoCutout'] ?? null, 0);
         gl.uniform1i(u['uDoubleSided'] ?? null, 0);
@@ -5737,18 +6119,18 @@ export class WebGL2Renderer {
          * fetch a sampler's descriptor before it evaluates the branch that would have skipped the read.
          */
         gl.activeTexture(gl.TEXTURE0 + NORMAL_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         gl.uniform1i(u['uNormalMap'] ?? null, NORMAL_TEXTURE_UNIT);
         gl.uniform1f(u['uNormalStrength'] ?? null, 0);
         /* And the ORM map, for the reason directly above and the one above that. */
         gl.activeTexture(gl.TEXTURE0 + ORM_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         gl.uniform1i(u['uOrmMap'] ?? null, ORM_TEXTURE_UNIT);
         gl.uniform1i(u['uOrmEnabled'] ?? null, 0);
         gl.uniform3f(u['uOrmScale'] ?? null, 1, 1, 1);
         /* And the emissive map. The scale goes back to one, which is the identity it multiplies by. */
         gl.activeTexture(gl.TEXTURE0 + EMISSIVE_TEXTURE_UNIT);
-        gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         gl.uniform1i(u['uEmissiveMap'] ?? null, EMISSIVE_TEXTURE_UNIT);
         gl.uniform1i(u['uEmissiveMapEnabled'] ?? null, 0);
         gl.uniform3f(u['uEmissiveScale'] ?? null, 1, 1, 1);
@@ -5823,11 +6205,12 @@ export class WebGL2Renderer {
      */
     tint = null, 
     /**
-     * Where the mesh was last frame, which this backend takes and ignores.
+     * Where the mesh was last frame — a `Mover` or a matrix — which this backend takes and ignores.
      *
      * Accepted rather than absent so that one scene draws through both renderers unchanged — the
      * parity rule this repository is built on. Reconstruction is WebGPU's, having no compute stage
-     * here, so there is no motion target for this to be written into.
+     * here, so there is no motion target for this to be written into, and a mover passed here is
+     * neither read nor advanced.
      */
     _previousModel = null) {
         if (this.contextLost)
@@ -6033,7 +6416,7 @@ export class WebGL2Renderer {
          * The two buffers are two blend states over the same geometry, so the set has to survive until
          * the end of the pass. Everything is copied — see `TranslucentQueue`.
          */
-        if (this.oitActive && !this.oitReplaying) {
+        if (this.oitActive && !this.oitReplaying && options.additive !== true) {
             this.translucentQueue.record(mesh, model, opacity, options);
             return;
         }
@@ -6051,12 +6434,13 @@ export class WebGL2Renderer {
          * drew with, and only a caller that asks pays for the branch that skips them.
          */
         const lit = options.lit ?? true;
-        const fog = options.fog ?? true;
+        /* Added light fades in the medium rather than receding into it. See `drawFog.ts`. */
+        const fog = fogModeOf(options.fog ?? true, options.additive === true);
         const toneMapped = options.toneMapped ?? true;
         if (!lit)
             gl.uniform1i(u['uLightingEnabled'] ?? null, 0);
-        if (!fog)
-            gl.uniform1i(u['uFogEnabled'] ?? null, 0);
+        if (fog !== FOG_RECEDE)
+            gl.uniform1i(u['uFogEnabled'] ?? null, fog);
         /* `1` is sRGB alone: the conversion without the curve, which is what dropping the tone map
            means rather than dropping the whole transform. `Math.min` rather than a literal, so a
            renderer asked for `none` stays at none and one asked for `srgb` is already there. */
@@ -6081,19 +6465,7 @@ export class WebGL2Renderer {
          * translucent one rather than sampling a black texture and painting the pane the colour of a
          * hole. That is the defined state the two-backends rule asks for instead of a silent no-op.
          */
-        const refraction = options.refraction ?? 0;
-        let refracting = false;
-        if (refraction > 0) {
-            const snapshot = this.sceneTarget?.snapshotColor() ?? null;
-            if (snapshot !== null) {
-                refracting = true;
-                gl.activeTexture(gl.TEXTURE0 + REFRACT_SCENE_TEXTURE_UNIT);
-                gl.bindTexture(gl.TEXTURE_2D, snapshot);
-                gl.uniform1f(u['uRefractStrength'] ?? null, refraction);
-                gl.uniform3fv(u['uRefractTint'] ?? null, options.refractTint ?? WHITE_TINT);
-                gl.uniform1f(u['uRefractThickness'] ?? null, options.thicknessM ?? 0);
-            }
-        }
+        const refracting = this.bindSeeThrough(u, options);
         /*
          * **The blend and the depth mask belong to whoever owns the pass.** In the ordinary case that
          * is this draw; during an order-independent replay it is `OitPass`, which has set an additive
@@ -6109,7 +6481,11 @@ export class WebGL2Renderer {
         const ownsState = !this.oitReplaying;
         if (ownsState) {
             gl.enable(gl.BLEND);
-            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            /* Added, where asked: colour times alpha onto what is there, and the target's alpha kept. */
+            if (options.additive === true)
+                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ZERO, gl.ONE);
+            else
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         }
         /*
          * The two depth options, both scoped to this draw and handed straight back — the same
@@ -6143,12 +6519,14 @@ export class WebGL2Renderer {
         gl.uniform1f(u['uOpacity'] ?? null, 1);
         if (tint !== null)
             gl.uniform3fv(u['uTint'] ?? null, WHITE_TINT);
+        if (refracting)
+            this.unbindSeeThrough(u);
         /* Put back for whatever is drawn next, exactly as `uOpacity` and `uTint` are — a pass
            cannot inherit a material from the draw before it. */
         if (!lit)
             gl.uniform1i(u['uLightingEnabled'] ?? null, 1);
-        if (!fog)
-            gl.uniform1i(u['uFogEnabled'] ?? null, 1);
+        if (fog !== FOG_RECEDE)
+            gl.uniform1i(u['uFogEnabled'] ?? null, FOG_RECEDE);
         if (!toneMapped)
             gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
         if (own)
@@ -6479,14 +6857,8 @@ export class WebGL2Renderer {
                 gl.uniform1f(u['uShadowMapSize'] ?? null, this.quality.directionalShadowMapSize);
                 gl.uniform1i(u['uPeeledShadowEnabled'] ?? null, this.peelFilled ? 1 : 0);
                 gl.activeTexture(gl.TEXTURE0);
-                gl.bindTexture(gl.TEXTURE_2D, this.shadowMap?.texture ?? this.emptyTexture2D);
-                gl.uniform1i(u['uStaticShadowMap'] ?? null, 0);
-                gl.activeTexture(gl.TEXTURE1);
-                gl.bindTexture(gl.TEXTURE_2D, this.peeledShadowMap?.texture ?? this.emptyTexture2D);
-                gl.uniform1i(u['uPeeledShadowMap'] ?? null, 1);
-                gl.activeTexture(gl.TEXTURE2);
-                gl.bindTexture(gl.TEXTURE_2D, this.dynamicShadowMap?.texture ?? this.emptyTexture2D);
-                gl.uniform1i(u['uDynamicShadowMap'] ?? null, 2);
+                gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.sunShadows?.texture ?? this.emptyTexture2DArray);
+                gl.uniform1i(u['uSunShadows'] ?? null, 0);
             }
         }
         gl.uniform3fv(u['uCameraLocal'] ?? null, cameraLocal);