@driftengine/core 4.4.2 → 4.6.0

package/src/render/backend/webgl2/renderer.ts

@@ -1,5 +1,6 @@
 import { FrameBudget } from '../budget.ts';
 import { MaterialChanges, ownsMaterial } from '../materialChanges.ts';
+import { FOG_RECEDE, fogModeOf } from '../drawFog.ts';
 import { mat4 } from 'gl-matrix';
 import {
   GL_DEPTH_REMAP,
@@ -13,6 +14,9 @@ import {
   glShadowDepthFunc,
 } from '../../depthConvention.ts';
 import type { FrameView } from '../../frameView.ts';
+import type { Mover } from '../../recon/mover.ts';
+import { resolveGlass } from '../../glass.ts';
+import type { GlassOptions, ResolvedGlass } from '../../glass.ts';
 import type { ClipControlExtension } from '../../depthConvention.ts';
 import type { ReadonlyMat4 } from 'gl-matrix';
 import type { Camera } from '../../camera.ts';
@@ -46,6 +50,7 @@ import { TranslucentQueue } from '../../translucentQueue.ts';
 import { createFrustum, frustumFromViewProjection } from '../../../math/frustum.ts';
 import type { Frustum } from '../../../math/frustum.ts';
 import type { Bounds } from '../../../math/bounds.ts';
+import { batchBoxVisible, cullsInstances } from '../../instanceCull.ts';
 import { OcclusionBuffer } from '../../occlusion.ts';
 import { boundsVisible } from '../../visibility.ts';
 import { createPassRegistry, drainRegistry, passAt, registerIn, unregisterIn } from '../../pass.ts';
@@ -90,6 +95,10 @@ import {
 } from '../../emptyTexture.ts';
 import { LightField } from '../../driftLight/lightField.ts';
 import type { LightFieldOptions, LightFieldSource } from '../../driftLight/lightField.ts';
+import type { DriftLightVolumes } from '../../driftLight/presence.ts';
+import type { DenseLightVolume } from '../../driftLight/denseField.ts';
+import { WorldLightField } from '../../driftLight/worldLightField.ts';
+import type { WorldLightFieldOptions } from '../../driftLight/worldLightField.ts';
 import { createDriftLightUniforms, resolveDriftLight } from '../../driftLight/uniforms.ts';
 
 /**
@@ -126,6 +135,8 @@ import { ProbeSweeps } from '../../probeSweeps.ts';
 import { octahedralEdgeFor } from '../../prefilterEnvMap.ts';
 import { EnvironmentPrefilterPass } from '../../prefilterPass.ts';
 import { packIesAtlas } from '../../iesProfile.ts';
+import { fixtureAtlasLayout, fixtureAtlasTexels } from '../../fixtureAtlas.ts';
+import { resolveSurfaceScene } from '../../surfaceScene.ts';
 import type { AreaLightBuffer, AreaLightSource } from '../../areaLights.ts';
 import { MAX_AREA_LIGHTS } from '../../areaLights.ts';
 import {
@@ -148,12 +159,16 @@ import {
   DEPTH_SKINNED_VERT,
   DEPTH_VERT,
 } from '../../shaders/depth.ts';
-import { PointShadowArray } from '../../pointShadowArray.ts';
-import { ShadowMap } from '../../shadowMap.ts';
+import { OCTAHEDRAL_EDGE, PointShadowArray, strideLayers } from '../../pointShadowArray.ts';
+import { SunShadowArray, type SunShadowLayer } from '../../shadowMap.ts';
 import { POINT_SHADOW_SAMPLER, PointShadowSystem } from '../../pointShadowSystem.ts';
 import type { ShadowLight } from '../../pointShadowSystem.ts';
+import { castsDepth, glassOf } from '../../shadowCasters.ts';
+import { GlassCasterList, type GlassReplaySink } from '../../glassCasters.ts';
+import { SunGlassTint } from '../../sunGlassTint.ts';
+import { GlassTintPrograms, type GlassTintProgram } from './glassTintPrograms.ts';
 import type { SceneCasterMaterial, ShadowCasterSink, ShadowCasters } from '../../shadowCasters.ts';
-import { FACE_COUNT, PointShadowMap } from '../../pointShadowMap.ts';
+import { FACE_COUNT, PointShadowMap, type PointGlassDraw } from '../../pointShadowMap.ts';
 import { createResolvedPointShadows, DEFAULT_SOURCE_RADIUS } from '../../pointShadowImage.ts';
 import {
   createBakeScratch,
@@ -162,6 +177,8 @@ import {
 } from '../../pointShadowBudget.ts';
 import {
   DIRECTIONAL_SHADOW_UNITS,
+  SUN_GLASS_TINT_TEXTURE_UNIT,
+  POINT_GLASS_TINT_TEXTURE_UNIT,
   LIVE_POINT_SHADOW_MAPS,
   MAX_POINT_LIGHTS,
   NORMAL_TEXTURE_UNIT,
@@ -173,12 +190,12 @@ import {
   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,
+  FIXTURE_ATLAS_TEXTURE_UNIT,
+  SURFACE_EFFECTS_TEXTURE_UNIT,
   bindAreaLights,
   bindAreaShadows,
   openCones,
@@ -235,7 +252,7 @@ import type { WindStreakOptions } from '../../windStreakRenderer.ts';
 import type { WindField } from '../../windField.ts';
 import type { FlockParams } from '../../flockRenderer.ts';
 import { InstancedBatch } from './instanced.ts';
-import type { MeshInstances } from '../../instances.ts';
+import type { InstancedOptions, MeshInstances } from '../../instances.ts';
 import { cutoutOf } from '../../cutoutCaster.ts';
 import type { CutoutCaster } from '../../cutoutCaster.ts';
 import type { SurfaceTextureHandle } from '../api.ts';
@@ -287,6 +304,29 @@ export interface Environment extends Atmosphere {
    * how strongly.
    */
   nightFactor: number;
+  /**
+   * Seconds on the caller's clock, for the surfaces that animate — a sign's pulse, a ticker's
+   * scroll, a flipbook. The caller's rather than a clock read here, so a held clock holds every
+   * surface still and a replay replays them. 0 unless stated.
+   */
+  surfaceTime?: number;
+  /**
+   * How wet the world is, 0 to 1: upward surfaces darken and polish, except materials that say
+   * they stay dry. The scene-wide counterpart of `drawFilm`, which stays for a puddle. 0 unless
+   * stated.
+   */
+  wetness?: number;
+  /**
+   * The share of facade windows lit, 0 to 1, which a scene sets from its time of day. Windows switch
+   * on in steps by a per-window hash, so a rising share lights more windows rather than brightening
+   * the ones already lit. 0 unless stated.
+   */
+  litWindows?: number;
+  /**
+   * The share of windows that stay lit however late it gets, 0 to 1, so the small hours are not a
+   * dark city. 0 unless stated.
+   */
+  lateWindows?: number;
   /**
    * Emission that only shows where the dominant light does not reach, 0 and off by default.
    *
@@ -547,6 +587,8 @@ export { MAX_DEPTH_LAYER } from '../../depthConvention.ts';
 
 /** 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);
 
 /**
  * What a film should do beyond shimmering, which until now was nothing.
@@ -698,6 +740,31 @@ export interface LightVolumeDrawOptions {
  * boolean is refused everywhere else in this file.
  */
 export interface TranslucentMeshOptions {
+  /**
+   * Add this surface's light to what is behind it instead of covering it: a glow, a beam, a pool
+   * of light under a lamp. Its colour times its opacity is added and nothing is darkened, so black
+   * is invisible and overlapping glows brighten — which is why such surfaces are authored nearly
+   * black where they fade. **Order does not matter** to a sum, so an additive draw is never held
+   * for the order-independent pass; it is drawn where it is asked for. Write depth off with it
+   * (`depthWrite: false`) or a glow hides the glows behind it.
+   */
+  /**
+   * Drawn into the picture a reconstruction resolves, rather than after it. For a surface that
+   * moves with what it lies on — a glow on a wall, a pane in a window — whose one motion is that
+   * surface's, so the resolve can carry it with the surface.
+   *
+   * **Late is the default, and it is right for anything else.** A translucent surface writes no
+   * depth the motion pass could test and may move apart from what shows through it — a caption
+   * over a moving car — so a history can only smear it; after the upscale it is sharp and has none.
+   * **What late gives up** is the edge: drawn unjittered against a depth the jittered render
+   * covered, it meets a silhouette the render drew differently every frame, and a glow along an
+   * edge is let through on one frame and not the next. Reconstructed, it is resolved with the edge.
+   *
+   * Only a reconstructing frame draws anything late, so this changes nothing on WebGL2 or with
+   * `reconstruction` off. An order-independent blended set replays where it replays.
+   */
+  readonly reconstructed?: boolean;
+  readonly additive?: boolean;
   /**
    * `false` draws the mesh exactly its own vertex colour times its own texture, with no
    * ambient, sun, point lights, specular, reflectivity, grain or emissive touching it —
@@ -780,6 +847,13 @@ export interface TranslucentMeshOptions {
    * clear, and it is the whole difference between this and a flat tint.
    */
   readonly thicknessM?: number;
+  /**
+   * Glass: the pane shows what is behind it, by how much it lets through and how little it reflects
+   * at the view angle, blurred by how frosted it is, tinted, and glowing with the lights behind it.
+   * It keeps its own lighting and highlight, which `refraction` alone replaces. Absent, or letting
+   * nothing through, is not glass. See `glass.ts`; `refraction` still bends what a pane shows.
+   */
+  readonly glass?: GlassOptions;
   /**
    * Whether this draw writes depth. `true`, which is what it has always done, unless a caller
    * says otherwise.
@@ -1114,11 +1188,13 @@ export class WebGL2Renderer implements RendererApi {
   private skinPaletteSet = false;
 
   private readonly emptyTexture2D: WebGLTexture;
+  /** One glass resolution reused by every draw, so a pane allocates nothing. See `glass.ts`. */
+  private readonly glassScratch: ResolvedGlass = { transmission: 0, frost: 0, tint: [1, 1, 1] };
   /** DriftLight's stand-ins while no field is whole: no brick anywhere, and no light. */
   private readonly emptyDriftIndex: WebGLTexture;
   private readonly emptyDriftAtlas: WebGLTexture;
   /** The scene's DriftLight field, and its two volumes once it is whole. See `createLightField`. */
-  private lightField: LightField | null = null;
+  private lightField: DriftLightVolumes | null = null;
   private driftIndex: WebGLTexture | null = null;
   private driftAtlas: WebGLTexture | null = null;
   private readonly driftUniforms = createDriftLightUniforms();
@@ -1165,6 +1241,11 @@ export class WebGL2Renderer implements RendererApi {
   private oitActive = false;
   /** True while the queue is being replayed, so a replayed draw does not record itself again. */
   private oitReplaying = false;
+  /** `uSurfaceScene`, resolved once a pass. See `surfaceScene.ts`. */
+  private readonly surfaceScene = new Float32Array(4);
+  /** The two halves of `uWriteMode`, kept here because a `vec2` is written whole. */
+  private oitWeight = 0;
+  private ditherFade = 0;
   /** Said once, not per frame, where the context cannot give the float target the sum needs. */
   private oitRefused = false;
   /** Said once for the whole renderer. See `refuseOitMultisampled`. */
@@ -1186,6 +1267,7 @@ export class WebGL2Renderer implements RendererApi {
     refraction: number;
     refractTint: Vec3 | undefined;
     thicknessM: number;
+    glass: GlassOptions | undefined;
   } = {
     lit: true,
     fog: true,
@@ -1196,6 +1278,7 @@ export class WebGL2Renderer implements RendererApi {
     refraction: 0,
     refractTint: undefined,
     thicknessM: 0,
+    glass: undefined,
   };
 
   private motionBlurScale = 1;
@@ -1268,6 +1351,8 @@ export class WebGL2Renderer implements RendererApi {
   private readonly taaDepthToViewZ = Float32Array.of(0, 0, 0, 1);
   private readonly aoInvProjection = mat4.create();
   private readonly aoProjScale = new Float32Array(2);
+  /** Where this frame's jitter put the occlusion, in the composite's uv. See `uAoOffset`. */
+  private readonly aoOffset = new Float32Array(2);
   /**
    * Whether this frame has already been resolved to the canvas.
    *
@@ -1324,9 +1409,8 @@ export class WebGL2Renderer implements RendererApi {
   private readonly depthInstancedCutoutUniforms: Record<string, WebGLUniformLocation>;
   private readonly scatterDepthProgram: WebGLProgram;
   private readonly scatterDepthUniforms: Record<string, WebGLUniformLocation>;
-  private readonly shadowMap: ShadowMap | null;
-  private readonly peeledShadowMap: ShadowMap | null;
-  private readonly dynamicShadowMap: ShadowMap | null;
+  /** The sun's static, moving and peeled maps, as layers of one array. See `shadowMap.ts`. */
+  private readonly sunShadows: SunShadowArray | null;
   private readonly pointShadows: PointShadowSystem<PointShadowMap> | null;
   /**
    * The layers a world's casting rectangles hold, above the point pool in the same array.
@@ -1360,12 +1444,15 @@ export class WebGL2Renderer implements RendererApi {
    * world. See `prepareStaticPointShadows`.
    */
   private pointShadowArray: PointShadowArray | null = null;
-  /** The photometric atlas, allocated on first use. See `setIesProfiles`. */
-  private iesTexture: WebGLTexture | null = 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`. */
+  private fixtureTexture: WebGLTexture | null = null;
+  /** The profiles as packed, kept so a new set of cookies can rebuild the atlas around them. */
+  private iesAtlas = packIesAtlas([]);
+  /** The cookie images, kept so a new set of profiles can rebuild the atlas around them. */
+  private cookieImages: readonly TexImageSource[] = [];
+  /** Rows of profile in the atlas. One until a consumer loads a profile, which is the row of ones. */
   private iesRows = 1;
-  private cookieTexture: WebGLTexture | null = 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. */
   private cookieTiles = 0;
   /** Horizontal planes each profile occupies. 1 unless something asymmetric was loaded. */
   private iesPlanes = 1;
@@ -1551,7 +1638,7 @@ export class WebGL2Renderer implements RendererApi {
   /** Non-zero while the drawing buffer is pinned; see `lockDrawingBuffer`. */
   private lockedWidth = 0;
   private lockedHeight = 0;
-  private activeShadowMap: ShadowMap | null = null;
+  private activeSunLayer: SunShadowLayer | null = null;
   private reflectionPassActive = false;
   private reflectionReadyThisFrame = false;
   private reflectionAtmosphereY = 0;
@@ -1575,7 +1662,7 @@ export class WebGL2Renderer implements RendererApi {
    *
    * **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.
    */
@@ -1602,8 +1689,34 @@ export class WebGL2Renderer implements RendererApi {
    * 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`. */
+  private sunGlassTint: SunGlassTint | null = null;
+  /** The five programs a pane casts its colour through, compiled the first time glass casts. */
+  private glassTintPrograms: GlassTintPrograms | null = null;
+  /** True while the glass list is replayed into the glass depth layer through `casterSink`. */
+  private drawingGlassDepth = false;
+  /** How many times a shadow array grew its glass layers: once per family, and never again. */
+  private sunGlassRebuilds = 0;
+  /** The light a tint pass is drawn for, and one pane's colour and clarity: uploaded per entry. */
+  private readonly glassLight = new Float32Array(4);
+  private readonly glassPane = new Float32Array(4);
+  /** The glass the open shadow pass was offered, kept for its own passes: `glassCasters.ts`. */
+  private readonly glassCasters = new GlassCasterList();
+  /** One resolution every glass caster is read through, so recording one allocates nothing. */
+  private readonly glassCasterScratch: ResolvedGlass = {
+    transmission: 0,
+    frost: 0,
+    tint: [1, 1, 1],
+  };
   private readonly casterSink: ShadowCasterSink = {
     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. */
@@ -1639,6 +1752,12 @@ export class WebGL2Renderer implements RendererApi {
      * 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 as InstancedBatch;
       const count = Math.min(data.count, gpuBatch.capacity);
@@ -1650,7 +1769,7 @@ export class WebGL2Renderer implements RendererApi {
       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);
         this.restoreSurfaceTextureUnit();
@@ -1661,11 +1780,17 @@ export class WebGL2Renderer implements RendererApi {
       gl.uniformMatrix4fv(u['uLightViewProj'] ?? null, false, this.activeDepthViewProj);
       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;
@@ -1748,9 +1873,60 @@ export class WebGL2Renderer implements RendererApi {
     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.
+   */
+  private readonly pointGlassDraw: 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. */
+  private get pointGlass(): PointGlassDraw | null {
+    return this.quality.glassShadows === 'off' ? null : this.pointGlassDraw;
+  }
+
   /**
    * Viewport in CSS pixels rather than device pixels.
    *
@@ -1883,6 +2059,14 @@ export class WebGL2Renderer implements RendererApi {
     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: ArrayLike<number>, max: ArrayLike<number>): boolean {
+    return this.occlusion?.occludedBox(min, max) ?? false;
+  }
+
   /* -- Registered passes ---------------------------------------------------------------- */
 
   private readonly passes: PassRegistry = createPassRegistry();
@@ -2073,106 +2257,67 @@ export class WebGL2Renderer implements RendererApi {
    * `createSurfaceTexture` and the material maps take.
    */
   setSpotCookies(images: readonly TexImageSource[]): void {
-    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: readonly PhotometricProfile[]): void {
+    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.
+   */
+  private buildFixtureAtlas(): void {
     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.
-     */
-    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.
-     */
+    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.R16F,
-      atlas.width,
-      atlas.height,
+      gl.RGBA16F,
+      layout.width,
+      layout.height,
       0,
-      gl.RED,
+      gl.RGBA,
       gl.FLOAT,
-      atlas.data,
+      fixtureAtlasTexels(layout, this.iesAtlas),
     );
-    this.iesRows = atlas.height;
-    this.iesPlanes = atlas.planes;
+    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);
+    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. */
   private bindIesAtlas(u: Record<string, WebGLUniformLocation>): void {
     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);
   }
@@ -2716,20 +2861,18 @@ export class WebGL2Renderer implements RendererApi {
       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.
@@ -2921,16 +3064,15 @@ export class WebGL2Renderer implements RendererApi {
        * 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);
     }
 
@@ -3087,6 +3229,19 @@ export class WebGL2Renderer implements RendererApi {
     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: readonly TexImageSource[],
+    options: SurfaceTextureOptions = {},
+  ): SurfaceTexture {
+    return new SurfaceTexture(this.gl, sources, options);
+  }
+
   /**
    * Replace a surface texture's pixels, keeping the GPU object and its sampler state.
    *
@@ -3204,7 +3359,7 @@ export class WebGL2Renderer implements RendererApi {
      * 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);
     gl.uniform1f(
@@ -3225,7 +3380,7 @@ export class WebGL2Renderer implements RendererApi {
      */
     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);
     gl.uniform1i(u['uOrmEnabled'] ?? null, orm === null ? 0 : 1);
@@ -3248,7 +3403,7 @@ export class WebGL2Renderer implements RendererApi {
      */
     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);
     gl.uniform1i(u['uEmissiveMapEnabled'] ?? null, emissiveMap === null ? 0 : 1);
@@ -3270,7 +3425,20 @@ export class WebGL2Renderer implements RendererApi {
     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;
     }
@@ -3307,7 +3475,7 @@ export class WebGL2Renderer implements RendererApi {
       return;
     }
     gl.activeTexture(gl.TEXTURE0 + SURFACE_TEXTURE_UNIT);
-    gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
   }
 
   /**
@@ -3335,8 +3503,7 @@ export class WebGL2Renderer implements RendererApi {
   setSurfaceReflectivity(amount: number): void {
     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)));
   }
 
   /**
@@ -3354,8 +3521,7 @@ export class WebGL2Renderer implements RendererApi {
   setEnvironmentGain(gain: number): void {
     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));
   }
 
   /**
@@ -3382,10 +3548,55 @@ export class WebGL2Renderer implements RendererApi {
   }
 
   setSurfaceGrain(amount: number): void {
+    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.
+   */
+  private writeFlatFloat(name: string, value: number): void {
+    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: number): void {
     if (this.contextLost) return;
     this.materials.dirty();
     this.useFlatProgram();
-    this.gl.uniform1f(this.flatUniforms['uGrain'] ?? null, Math.min(1, Math.max(0, amount)));
+    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();
+  }
+
+  /** `uWriteMode`: the order-independent weight and the dither, which share one uniform row. */
+  private writeMode(u: Record<string, WebGLUniformLocation>): void {
+    this.gl.uniform2f(u['uWriteMode'] ?? null, this.oitWeight, this.ditherFade);
   }
 
   /**
@@ -3414,10 +3625,8 @@ export class WebGL2Renderer implements RendererApi {
   setSurfaceRelief(amount: number, cyclesPerMetre = 60): void {
     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));
   }
 
   /**
@@ -3448,11 +3657,7 @@ export class WebGL2Renderer implements RendererApi {
   setSurfaceTextureRelief(scale: number): void {
     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);
   }
 
   /**
@@ -3479,8 +3684,7 @@ export class WebGL2Renderer implements RendererApi {
   setEmissiveGain(gain: number): void {
     if (this.contextLost) return;
     this.materials.dirty();
-    this.useFlatProgram();
-    this.gl.uniform1f(this.flatUniforms['uEmissiveGain'] ?? null, gain);
+    this.writeFlatFloat('uEmissiveGain', gain);
   }
 
   /* -- Instanced meshes --------------------------------------------------------------- */
@@ -3528,7 +3732,7 @@ export class WebGL2Renderer implements RendererApi {
    * 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: Mesh, capacity: number): InstancedBatch {
+  createInstanced(mesh: Mesh, capacity: number, options: InstancedOptions = {}): InstancedBatch {
     /* 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) {
@@ -3538,7 +3742,7 @@ export class WebGL2Renderer implements RendererApi {
       );
     }
     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. */
@@ -3593,6 +3797,11 @@ export class WebGL2Renderer implements RendererApi {
     if (!mesh.complete) return;
     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;
@@ -3604,10 +3813,13 @@ export class WebGL2Renderer implements RendererApi {
     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();
     const depthWrite = options.depthWrite ?? true;
@@ -3627,27 +3839,18 @@ export class WebGL2Renderer implements RendererApi {
      * **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);
     }
     /* The sign follows the compare, which `depthOffsetForLayer` owns — see `drawMesh`, where the
@@ -3658,7 +3861,12 @@ export class WebGL2Renderer implements RendererApi {
       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);
@@ -3673,18 +3881,61 @@ export class WebGL2Renderer implements RendererApi {
     if (opacity < 1) 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.
+   */
+  private bindSeeThrough(
+    u: Record<string, WebGLUniformLocation>,
+    options: TranslucentMeshOptions,
+  ): boolean {
+    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). */
+  private unbindSeeThrough(u: Record<string, WebGLUniformLocation>): void {
+    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: Mesh): void {
     /*
      * Nothing to release when the context is gone: it took every buffer and VAO with it,
@@ -4353,6 +4604,13 @@ export class WebGL2Renderer implements RendererApi {
      */
     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. */
@@ -4726,21 +4984,17 @@ export class WebGL2Renderer implements RendererApi {
     lightViewProj: ReadonlyMat4,
     layer: 'static' | 'static-peel' | 'dynamic' = 'static',
   ): void {
-    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;
     /*
@@ -4767,16 +5021,16 @@ export class WebGL2Renderer implements RendererApi {
     // 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
@@ -4888,18 +5142,165 @@ export class WebGL2Renderer implements RendererApi {
     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.
+   */
+  private flushSunGlass(which: 'static' | 'dynamic'): void {
+    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] as number, m[6] as number, m[10] as number) || 1;
+    this.glassLight[0] = (m[2] as number) / length;
+    this.glassLight[1] = (m[6] as number) / length;
+    this.glassLight[2] = (m[10] as number) / 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. */
+  private readonly glassDepthSink: GlassReplaySink = {
+    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. */
+  private bindGlassTint(
+    program: GlassTintProgram,
+    glass: ResolvedGlass,
+    cutout: CutoutCaster<SurfaceTextureHandle> | null,
+  ): void {
+    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 as SurfaceTexture).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.
+   */
+  private readonly glassTintSink: GlassReplaySink = {
+    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 as 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 as InstancedBatch;
+      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 as Mesh).draw(gl);
+      if (this.depthPassCullsFaces) gl.enable(gl.CULL_FACE);
+    },
+  };
+
   endShadowPass(): void {
     if (this.contextLost) return;
-    const shadowMap = this.activeShadowMap;
-    if (!this.shadowPassActive || shadowMap === null) return;
-    shadowMap.end(this.gl);
-    if (shadowMap === this.peeledShadowMap) this.peelFilled = true;
+    const sun = this.sunShadows;
+    const layer = this.activeSunLayer;
+    if (!this.shadowPassActive || sun === null || layer === null) return;
+    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();
   }
@@ -4938,6 +5339,8 @@ export class WebGL2Renderer implements RendererApi {
       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: LightBudget): string =>
       flatFrag({ ...variant, maxLights: budget.maxLights, maxAreaLights: budget.maxAreaLights });
@@ -5254,6 +5657,8 @@ export class WebGL2Renderer implements RendererApi {
         this.bakeOne(map, light, casters as ShadowCasters, 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();
   }
 
@@ -5314,6 +5719,10 @@ export class WebGL2Renderer implements RendererApi {
      * 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);
   }
 
   /**
@@ -5378,6 +5787,7 @@ export class WebGL2Renderer implements RendererApi {
         near,
         DEFAULT_SOURCE_RADIUS,
         maxFaces,
+        this.pointGlass,
       ),
     );
   }
@@ -5401,6 +5811,7 @@ export class WebGL2Renderer implements RendererApi {
         light.shadowNear,
         light.sourceRadius,
         maxFaces,
+        this.pointGlass,
       ),
     );
   }
@@ -5635,6 +6046,10 @@ export class WebGL2Renderer implements RendererApi {
    *
    * 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(): void {
     this.hasPreviousView = false;
@@ -6266,6 +6681,7 @@ export class WebGL2Renderer implements RendererApi {
           radius: number;
           projScale: Float32Array;
           invProjection: Float32Array;
+          offset: Float32Array;
         }
       | undefined;
     if (aoStrength > 0 && projection !== null) {
@@ -6275,11 +6691,20 @@ export class WebGL2Renderer implements RendererApi {
          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 as Float32Array,
+        offset: this.aoOffset,
       };
     }
 
@@ -6425,11 +6850,14 @@ export class WebGL2Renderer implements RendererApi {
        * 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;
@@ -6442,10 +6870,12 @@ export class WebGL2Renderer implements RendererApi {
           options.refraction = draw.refraction;
           options.refractTint = draw.refractTint as unknown as Vec3 | undefined;
           options.thicknessM = draw.thicknessM;
+          options.glass = draw.glass ?? undefined;
           this.drawTranslucentMesh(draw.mesh as 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();
@@ -6504,9 +6934,7 @@ export class WebGL2Renderer implements RendererApi {
             /* 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,
           },
         );
@@ -6633,7 +7061,14 @@ export class WebGL2Renderer implements RendererApi {
      * 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. */
@@ -6747,6 +7182,23 @@ export class WebGL2Renderer implements RendererApi {
     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: DenseLightVolume,
+    options: WorldLightFieldOptions = {},
+  ): WorldLightField {
+    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(): void {
     this.forgetLightFieldVolumes();
@@ -6766,11 +7218,11 @@ export class WebGL2Renderer implements RendererApi {
    */
   private uploadLightField(): void {
     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(
@@ -6783,7 +7235,7 @@ export class WebGL2Renderer implements RendererApi {
       0,
       gl.RED_INTEGER,
       gl.UNSIGNED_INT,
-      field.layout.index,
+      field.index,
     );
     gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
@@ -6853,9 +7305,11 @@ export class WebGL2Renderer implements RendererApi {
     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);
@@ -6921,6 +7375,10 @@ export class WebGL2Renderer implements RendererApi {
     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`. */
@@ -6930,11 +7388,14 @@ export class WebGL2Renderer implements RendererApi {
     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,
@@ -6957,7 +7418,7 @@ export class WebGL2Renderer implements RendererApi {
      * 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);
@@ -6984,16 +7445,12 @@ export class WebGL2Renderer implements RendererApi {
      */
     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) {
@@ -7006,6 +7463,10 @@ export class WebGL2Renderer implements RendererApi {
     } 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
@@ -7103,9 +7564,13 @@ export class WebGL2Renderer implements RendererApi {
     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);
@@ -7130,20 +7595,20 @@ export class WebGL2Renderer implements RendererApi {
      * 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);
@@ -7223,13 +7688,14 @@ export class WebGL2Renderer implements RendererApi {
      */
     tint: Vec3 | null = 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: ReadonlyMat4 | null = null,
+    _previousModel: ReadonlyMat4 | Mover | null = null,
   ): void {
     if (this.contextLost) return;
     /* Geometry that has not all arrived is not drawn. See `Mesh.complete`. */
@@ -7429,7 +7895,7 @@ export class WebGL2Renderer implements RendererApi {
      * 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;
     }
@@ -7448,10 +7914,11 @@ export class WebGL2Renderer implements RendererApi {
      * 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. */
@@ -7474,19 +7941,7 @@ export class WebGL2Renderer implements RendererApi {
      * 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
@@ -7501,7 +7956,9 @@ export class WebGL2Renderer implements RendererApi {
     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
@@ -7529,10 +7986,11 @@ export class WebGL2Renderer implements RendererApi {
     if (ownsState) gl.disable(gl.BLEND);
     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) this.materials.dirty();
   }
@@ -7916,16 +8374,8 @@ export class WebGL2Renderer implements RendererApi {
         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);
       }
     }