@driftengine/core 4.4.2 → 4.6.0

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

@@ -2,19 +2,17 @@ import { mat4 } from 'gl-matrix';
 import type { ProbeBakeOptions } from '../../reflectionProbe.ts';
 import { probeFaceRange } from '../../reflectionProbe.ts';
 import {
+  TEMPORAL_FLICKER,
   TEMPORAL_HISTORY_BLEND,
   TemporalHistory,
+  flickerRule,
   jitterOffset,
   jitterProjection,
 } from '../../temporalAa.ts';
+import type { FlickerRule } from '../../temporalAa.ts';
 import { OIT_MULTISAMPLE_REFUSAL } from '../../orderIndependent.ts';
 import { TranslucentQueue } from '../../translucentQueue.ts';
-import {
-  DEPTH_CLEAR,
-  DEPTH_COMPARE_EQUAL,
-  MAX_DEPTH_LAYER,
-  REVERSED_DEPTH,
-} from '../../depthConvention.ts';
+import { DEPTH_CLEAR, MAX_DEPTH_LAYER, REVERSED_DEPTH } from '../../depthConvention.ts';
 import { RECONSTRUCTION_MULTISAMPLE_REFUSAL, reconRenderSize } from '../../recon/frameSizes.ts';
 import { jitterOffset as jitterOffsetFor, reconJitterPhases } from '../../recon/jitter.ts';
 import {
@@ -23,16 +21,25 @@ import {
   RECON_WORKGROUP,
   reconResolveWgsl,
 } from '../../shaders/recon/resolve.wgsl.ts';
-import {
-  MOTION_DRAW_FLOATS,
-  MOTION_DRAW_STRIDE,
-  MOTION_FRAME_FLOATS,
-  MOTION_TARGET_FORMAT,
-  RECON_MOTION_WGSL,
-} from '../../shaders/recon/motion.wgsl.ts';
+import { MotionPass } from './motionPass.ts';
+import { LatePass } from './latePass.ts';
+import { SnapshotMips } from './snapshotMips.ts';
+import { resolveGlass } from '../../glass.ts';
+import type { GlassOptions, ResolvedGlass } from '../../glass.ts';
+import { routesLate, tracksMotion } from '../../recon/lateRouting.ts';
+import { frameOfChange, keepsPrevious, pairedInstances } from '../../recon/changeFrames.ts';
+import { INSTANCE_STRIDE } from '../../instances.ts';
 import { DEFAULT_DISOCCLUSION } from '../../recon/disocclusion.ts';
 import { DEFAULT_RECON_QUALITY } from '../../recon/resolve.ts';
 import type { ReadonlyMat4 } from 'gl-matrix';
+import {
+  MOVER_MOTION,
+  MOVER_TWICE,
+  advanceMover,
+  claimRendererId,
+  isMover,
+} from '../../recon/mover.ts';
+import type { Mover } from '../../recon/mover.ts';
 
 import type { Vec3 } from '../../../math/color.ts';
 import { clamp } from '../../../math/scalar.ts';
@@ -99,6 +106,8 @@ import { ProbeSweeps } from '../../probeSweeps.ts';
 import { ggxMaxLevelFor, irradianceLevelFor, octahedralEdgeFor } from '../../prefilterEnvMap.ts';
 import { environmentTexels } from './environmentTexels.ts';
 import { packIesAtlas } from '../../iesProfile.ts';
+import { fixtureAtlasLayout, fixtureAtlasTexels } from '../../fixtureAtlas.ts';
+import { resolveSurfaceScene } from '../../surfaceScene.ts';
 import { COOKIE_TILE } from '../../lightBudget.ts';
 import { FULL_LIGHT_BUDGET } from '../../uniformVectorBudget.ts';
 import { toHalfFloats } from '../../halfFloat.ts';
@@ -128,6 +137,7 @@ import {
   type ShadowLight,
 } from '../../pointShadowSystem.ts';
 import { GpuPointShadowArray, GpuPointShadowMap } from './pointShadowPass.ts';
+import { OCTAHEDRAL_EDGE, strideLayers } from '../../pointShadowArray.ts';
 import {
   createPanelBindGroup,
   createPanelBindGroupLayout,
@@ -326,6 +336,16 @@ import {
 } from '../../globalMedium.ts';
 import type { GlobalMediumOptions } from '../../globalMedium.ts';
 import type { MeshData } from '../../mesh.ts';
+import { castsDepth, glassOf } from '../../shadowCasters.ts';
+import { GlassCasterList, type GlassReplaySink } from '../../glassCasters.ts';
+import { GpuGlassTint } from './glassTintPass.ts';
+import {
+  SUN_DYNAMIC_LAYER,
+  SUN_GLASS_MOVING_LAYER,
+  SUN_GLASS_STATIC_LAYER,
+  SUN_PEELED_LAYER,
+  SUN_STATIC_LAYER,
+} from '../../shadowMap.ts';
 import type { SceneCasterMaterial, ShadowCasterSink, ShadowCasters } from '../../shadowCasters.ts';
 import { VERTEX_LAYOUT, createGpuMesh, createGpuMeshIncremental, type GpuMesh } from './buffers.ts';
 import type { GpuSurface } from './device.ts';
@@ -470,6 +490,7 @@ import {
 import { aimReflection, createGpuReflection, type GpuReflection } from './reflectionPass.ts';
 import { FrameBudget } from '../budget.ts';
 import { MaterialChanges, ownsMaterial } from '../materialChanges.ts';
+import { FOG_RECEDE, fogModeOf } from '../drawFog.ts';
 import { DYNAMIC_ALIGNMENT as DYNAMIC_UNIFORM_ALIGNMENT, UniformRing } from './uniformRing.ts';
 import { DecalQueue, MAX_DRAWN_DECALS } from '../../decalQueue.ts';
 import { DistanceFieldScene } from '../../gi/fieldScene.ts';
@@ -525,6 +546,9 @@ import {
 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 { InstanceCullPass, MAX_CULL_SLOTS } from './instanceCullPass.ts';
+import type { CullSlot } from './instanceCullPass.ts';
 import { OcclusionBuffer } from '../../occlusion.ts';
 import { boundsVisible } from '../../visibility.ts';
 import { createPassRegistry, drainRegistry, passAt, registerIn, unregisterIn } from '../../pass.ts';
@@ -550,11 +574,15 @@ import type {
 } from '../../pass.ts';
 import type { Arena, FlushSchedule, ScheduledPass } from '../../frame/index.ts';
 import { GpuInstancedBatch } 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 { 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';
 
 /**
@@ -1308,6 +1336,49 @@ function padded(direction: ArrayLike<number>): Float32Array {
   return SCRATCH_VEC4;
 }
 
+/** The sun texture's usage: attached, sampled, and copied both ways when glass grows it. */
+const SUN_USAGE = 0x10 | 0x4 | 0x1 | 0x2; // RENDER_ATTACHMENT | TEXTURE_BINDING | COPY_SRC | COPY_DST
+
+/** Every view of the sun's texture a pass reads or attaches, for `maps` of its layers. */
+function sunViewsOf(
+  texture: GPUTexture,
+  maps: number,
+  layers: number,
+): {
+  array: GPUTextureView;
+  staticArray: GPUTextureView;
+  static: GPUTextureView;
+  dynamic: GPUTextureView | null;
+  peel: GPUTextureView | null;
+  glass: readonly [GPUTextureView, GPUTextureView] | null;
+} {
+  const layer = (index: number): GPUTextureView =>
+    texture.createView({ dimension: '2d', baseArrayLayer: index, arrayLayerCount: 1 });
+  return {
+    array: texture.createView({ dimension: '2d-array' }),
+    staticArray: texture.createView({
+      dimension: '2d-array',
+      baseArrayLayer: SUN_STATIC_LAYER,
+      arrayLayerCount: 1,
+    }),
+    static: layer(SUN_STATIC_LAYER),
+    dynamic: maps > SUN_DYNAMIC_LAYER ? layer(SUN_DYNAMIC_LAYER) : null,
+    peel: maps > SUN_PEELED_LAYER ? layer(SUN_PEELED_LAYER) : null,
+    glass: layers > maps ? [layer(SUN_GLASS_STATIC_LAYER), layer(SUN_GLASS_MOVING_LAYER)] : null,
+  };
+}
+
+/**
+ * What the sun keeps through glass: two `rgba8unorm` layers, attached one at a time at level 0,
+ * sampled whole with their mip chains, which are rebuilt after each layer is drawn.
+ */
+interface SunTintTarget {
+  readonly texture: GPUTexture;
+  readonly layers: readonly [GPUTextureView, GPUTextureView];
+  readonly array: GPUTextureView;
+  readonly mips: readonly [SnapshotMips, SnapshotMips];
+}
+
 export class WebGPURenderer implements RendererApi {
   /**
    * Real timestamp queries, where the adapter offers them.
@@ -1417,6 +1488,8 @@ export class WebGPURenderer implements RendererApi {
    * caller who passed null gets — rather than reading a slot this frame has already re-let.
    */
   private skinPaletteSlot = -1;
+  /** The palette `skinPaletteSlot` was uploaded from, for a skinned mover to copy. See `Mover`. */
+  private skinPaletteData: Float32Array | null = null;
 
   private readonly surface: GpuSurface;
   /** The encoder for the frame in flight, or null between frames. */
@@ -1426,6 +1499,27 @@ export class WebGPURenderer implements RendererApi {
   private pass: GPURenderPassEncoder | null = null;
 
   private readonly pipelines: PipelineCache;
+  /**
+   * The pipelines a reconstructing frame's blended draws are built for: the reconstructed picture's
+   * format at one sample, which is where `LatePass` draws them. Aliased to `pipelines` when the
+   * world already lands on exactly that, as `overlayPipelines` is.
+   */
+  private readonly latePipelines: PipelineCache;
+  /** The blended draws of a reconstructing frame, drawn after the upscale. See `LatePass`. */
+  private latePass: LatePass | null = null;
+  /** A late draw asked to refract: `runLate` copies the reconstructed picture before replaying. */
+  private lateRefractWanted = false;
+  /** The refraction copy's mip chain, recorded after each copy: what frosted glass reads. */
+  private refractMips: SnapshotMips | null = null;
+  /**
+   * The refraction copy's sampler: filtering, and **between levels as well**, so a frosted pane's
+   * level falls smoothly between two blurs rather than stepping from one to the next.
+   */
+  private refractSampler: GPUSampler | null = null;
+  /** 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] };
+  /** `issueCommand` bound once, so the late replay allocates no closure per frame. */
+  private readonly issueBound: (pass: GPURenderPassEncoder, command: DrawCommand) => void;
   /**
    * The same pipelines again, built for the canvas, for anything drawn after `endFrame`.
    *
@@ -1818,6 +1912,12 @@ export class WebGPURenderer implements RendererApi {
    * what the layout already declares.
    */
   private bloomGroups: GPUBindGroup[] = [];
+  /**
+   * The picture the bloom reads, and its size: the scene target, or while reconstructing the
+   * resolved picture at the drawing buffer's size. See `rebuildBloomGroups`.
+   */
+  private bloomSourceWidth = 1;
+  private bloomSourceHeight = 1;
   private frameWidth = 1;
   private frameHeight = 1;
   /**
@@ -1971,13 +2071,25 @@ export class WebGPURenderer implements RendererApi {
    * the *unsharpened* result — sharpening into the history would sharpen a sharpened picture every
    * frame, which is the halo the reference's own clamp exists to prevent, compounded.
    *
-   * The motion target is render size and carries a drawn object's own motion where something wrote
-   * one. **Nothing writes it yet**, so it is cleared every frame and every pixel takes the camera's
-   * motion, which the resolve derives from the depth and the reprojection. Static geometry is
-   * exact that way and a moving object ghosts until the motion pass lands.
+   * The motion target is render size and carries a drawn object's own motion where the motion pass
+   * wrote one — a draw that named its mover, or passed last frame's matrix. Every other texel is
+   * cleared, and the resolve takes the camera's motion there, derived from the depth and the
+   * reprojection: exact for anything that did not move. See `MotionPass`.
    */
   private reconHistories: (GPUTexture | null)[] = [null, null];
   private reconHistoryViews: (GPUTextureView | null)[] = [null, null];
+  /**
+   * Each output pixel's flicker record, a pair swapped with the histories: the temporal resolve's
+   * anti-flicker, over the reconstruction's own period (`recon/resolve.ts`).
+   */
+  private reconFlickers: (GPUTexture | null)[] = [null, null];
+  private reconFlickerViews: (GPUTextureView | null)[] = [null, null];
+  /** Each output pixel's held depth swing, a pair of its own: see `recon/resolve.ts`. */
+  private reconSwings: (GPUTexture | null)[] = [null, null];
+  private reconSwingViews: (GPUTextureView | null)[] = [null, null];
+  /** The anti-flicker's rule for the period last asked for, kept so a frame makes none. */
+  private reconFlickerPhases = 0;
+  private reconFlickerRule: FlickerRule = TEMPORAL_FLICKER;
   private reconWrite = 0;
   private reconHasHistory = false;
   private reconShown: GPUTexture | null = null;
@@ -1996,40 +2108,24 @@ export class WebGPURenderer implements RendererApi {
   private reconGroups: (GPUBindGroup | null)[] = [null, null];
   private reconSharpenGroups: (GPUBindGroup | null)[] = [null, null];
   private reconRushGroup: GPUBindGroup | null = null;
-  /**
-   * What the motion pass will draw, recorded by `drawMesh` and spent once a frame.
-   *
-   * A parallel array of meshes and one flat matrix buffer rather than an array of objects, because
-   * this is written on the frame's hot path and the house rule about allocating there binds it: the
-   * matrices are copied into a buffer that only ever grows, and the count is what resets.
-   */
-  private readonly motionMeshes: GpuMesh[] = [];
-  private motionMatrices = new Float32Array(0);
-  private motionCount = 0;
-  private motionLayout: GPUBindGroupLayout | null = null;
-  /**
-   * One pipeline per vertex stride, because a stride is a property of the *mesh*.
-   *
-   * Which optional attributes a mesh supplied decides how far apart its positions are, and this
-   * pass reads nothing but positions — so two meshes drawn by the same shader still need two
-   * vertex layouts. A map rather than a cache key on the pipeline cache: there is one shader here
-   * and a handful of strides in any scene.
-   */
-  private readonly motionPipelines = new Map<number, GPURenderPipeline>();
-  private motionModule: GPUShaderModule | null = null;
-  private motionPipelineLayout: GPUPipelineLayout | null = null;
-  private motionFrameBuffer: GPUBuffer | null = null;
-  private motionDrawBuffer: GPUBuffer | null = null;
-  private motionDrawCapacity = 0;
-  private motionGroup: GPUBindGroup | null = null;
-  private readonly motionFrameStaging = new Float32Array(MOTION_FRAME_FLOATS);
-  private motionDrawStaging = new Uint8Array(0);
+  /** The motion pass, made with the reconstruction's targets. See `MotionPass`. */
+  private motionPass: MotionPass | null = null;
+  /** This renderer's identity to a `Mover`. See `claimRendererId`. */
+  private readonly moverRenderer = claimRendererId();
+  /** Frames begun, so a mover can tell last frame from any other. Advanced in `beginFrame`. */
+  private moverFrame = 0;
+  /** Between `beginFrame` and `endFrame`. A change outside it is the next frame's. */
+  private inFrame = false;
+  private warnedMoverTwice = false;
   /** The scene's own clip transform with the generated shaders' y negation folded in. */
   private readonly motionRaster = mat4.create();
   private reconSizeKey = '';
   /** Last frame's raw view-projection and its inverse, and the two eyes. */
   private readonly reconPreviousRawViewProj = mat4.create();
   private readonly reconInverseViewProj = mat4.create();
+  /** The inverse and the reprojection, multiplied in double precision. See `runReconstruction`. */
+  private readonly reconInverse64 = new Float64Array(16);
+  private readonly reconReprojection64 = new Float64Array(16);
   private readonly reconPreviousInverseViewProj = mat4.create();
   private readonly reconEye = new Float32Array(3);
   private readonly reconPreviousEye = new Float32Array(3);
@@ -2181,6 +2277,8 @@ export class WebGPURenderer implements RendererApi {
   /** Said once for the whole renderer. See `refuseOitMultisampled`. */
   private oitMultisampleRefused = false;
   private oitReplaying = false;
+  /** `uSurfaceScene`, resolved once a pass. See `surfaceScene.ts`. */
+  private readonly surfaceScene = new Float32Array(4);
   /** Which buffer the replay is filling, which the pipeline key must carry. */
   private oitMode: OitTarget = 'none';
   /**
@@ -2276,6 +2374,7 @@ export class WebGPURenderer implements RendererApi {
     refraction: number;
     refractTint: Vec3 | undefined;
     thicknessM: number;
+    glass: GlassOptions | undefined;
   } = {
     lit: true,
     fog: true,
@@ -2286,6 +2385,7 @@ export class WebGPURenderer implements RendererApi {
     refraction: 0,
     refractTint: undefined,
     thicknessM: 0,
+    glass: undefined,
   };
 
   private reflectionPassActive = false;
@@ -2470,6 +2570,8 @@ export class WebGPURenderer implements RendererApi {
   }
 
   private flushRings(): void {
+    /* Culls first: a submit that follows may carry a draw reading what they write. */
+    this.instanceCulls?.flush();
     for (const ring of this.rings()) ring.flush();
   }
 
@@ -2591,7 +2693,7 @@ export class WebGPURenderer implements RendererApi {
     this.filmFrags.writeBlock(fragmentSlot, this.filmFragInts);
 
     const filmPipe = filmPipeline(
-      this.pipelines,
+      this.blendedPipelines(),
       this.surface.device,
       this.filmLayout,
       `film|${geometry.key ?? ''}`,
@@ -2605,10 +2707,7 @@ export class WebGPURenderer implements RendererApi {
      * holds the mirror's colour whatever `uReflectionEnabled` says, and WebGPU validates the
      * binding rather than the read — the argument `filmBindGroupBlank` exists for.
      */
-    const filmCommand = this.recordDraw(
-      filmGroup === this.filmBindGroup ? MIRROR_COLOR : 0,
-      this.currentTarget(),
-    );
+    const filmCommand = this.recordBlended(filmGroup === this.filmBindGroup ? MIRROR_COLOR : 0);
     if (filmCommand !== null) {
       filmCommand.pipeline = filmPipe;
       filmCommand.bindGroup = filmGroup;
@@ -2710,6 +2809,14 @@ export class WebGPURenderer implements RendererApi {
     return new GpuSurfaceTexture(this.surface.device, this.pipelines, source, options);
   }
 
+  /** Several images of one size as an array's layers. See `RendererApi.createSurfaceTextureArray`. */
+  createSurfaceTextureArray(
+    sources: readonly TexImageSource[],
+    options: SurfaceTextureOptions = {},
+  ): GpuSurfaceTexture {
+    return new GpuSurfaceTexture(this.surface.device, this.pipelines, sources, options);
+  }
+
   /**
    * GPU textures an `updateSurfaceTexture` replaced, destroyed when the next frame begins.
    *
@@ -2799,6 +2906,7 @@ export class WebGPURenderer implements RendererApi {
    */
   setSkinPalette(palette: Float32Array | null): void {
     if (this.surface.lost) return;
+    this.skinPaletteData = palette;
     if (palette === null) {
       this.skinPaletteSlot = -1;
       return;
@@ -2987,6 +3095,19 @@ export class WebGPURenderer implements RendererApi {
     });
   }
 
+  /**
+   * How much of the surfaces drawn next survives a screen-door dither. See `renderer.ts`.
+   *
+   * Written straight into the scratch block rather than through `material()`'s callback, because
+   * this one is called per crossfading region per frame and a closure per call is an allocation.
+   */
+  setDitherFade(amount: number): void {
+    if (this.surface.lost) return;
+    /* The second half of `uWriteMode`, which the order-independent weight shares. */
+    this.perFrameFloats[this.materialField('uWriteMode') + 1] = Math.min(1, Math.max(-1, amount));
+    this.materials.dirty();
+  }
+
   /**
    * How strong the microscopic relief on the surfaces drawn next is, and how coarse.
    *
@@ -3167,7 +3288,8 @@ export class WebGPURenderer implements RendererApi {
    * no-op before the first `bindMeshPass` of a session, same as every other pass that reads it.
    */
   drawSdfText(text: GpuSdfText, model: Float32Array, color: Vec3, opacity: number): void {
-    const viewProj = this.viewProj;
+    /* Unjittered when it lands after the upscale, like every late draw. See `drawsLate`. */
+    const viewProj = this.drawsLate() ? this.correctedViewProj : this.viewProj;
     if (!this.canDraw() || viewProj === null) return;
     const font = text.font;
     const atlas = text.atlas;
@@ -3201,12 +3323,12 @@ export class WebGPURenderer implements RendererApi {
     this.sdfTextFrags.writeFloat(fragmentSlot, fragAt('uOutputExposure'), this.gradeExposure());
 
     const sdfPipe = sdfTextPipeline(
-      this.targetPipelines(),
+      this.blendedPipelines(),
       this.surface.device,
       this.sdfTextLayout,
     );
     const sdfGroup = this.sdfTextBindGroupFor(atlas);
-    const sdfCommand = this.recordDraw(0, this.currentTarget());
+    const sdfCommand = this.recordBlended(0);
     if (sdfCommand !== null) {
       sdfCommand.pipeline = sdfPipe;
       sdfCommand.bindGroup = sdfGroup;
@@ -3322,8 +3444,8 @@ export class WebGPURenderer implements RendererApi {
 
     const pass = this.openTextPass();
     if (pass === null) return;
-    const textPipe = textPipeline(this.targetPipelines(), this.surface.device, this.textLayout);
-    const textCommand = this.recordDraw(0, this.currentTarget());
+    const textPipe = textPipeline(this.blendedPipelines(), this.surface.device, this.textLayout);
+    const textCommand = this.recordBlended(0);
     if (textCommand !== null) {
       textCommand.pipeline = textPipe;
       textCommand.bindGroup = this.textBindGroup;
@@ -3773,13 +3895,13 @@ export class WebGPURenderer implements RendererApi {
 
     const layout = this.particleLayoutFor(batch.material).layout;
     const particlePipe = particlePipeline(
-      this.pipelines,
+      this.blendedPipelines(),
       device,
       layout,
       batch.material,
       batch.blend,
     );
-    const particleCommand = this.recordDraw(0, this.currentTarget());
+    const particleCommand = this.recordBlended(0);
     if (particleCommand !== null) {
       particleCommand.pipeline = particlePipe;
       particleCommand.bindGroup = batch.bindGroup;
@@ -3924,13 +4046,13 @@ export class WebGPURenderer implements RendererApi {
     frags.writeFloats(fragmentSlot, atF('uTint'), plumes.tint);
 
     const plumePipe = plumePipeline(
-      this.pipelines,
+      this.blendedPipelines(),
       this.surface.device,
       this.plumeLayout,
       plumes.material,
       plumes.blend,
     );
-    const plumeCommand = this.recordDraw(0, this.currentTarget());
+    const plumeCommand = this.recordBlended(0);
     if (plumeCommand !== null) {
       plumeCommand.pipeline = plumePipe;
       plumeCommand.bindGroup = this.plumeBindGroup;
@@ -4485,9 +4607,13 @@ export class WebGPURenderer implements RendererApi {
     this.windStreakVerts.writeBlock(vertexSlot, this.windStreakVertBlock);
     this.windStreakFrags.writeBlock(fragmentSlot, this.windStreakFragBlock);
 
-    const windPipe = windStreakPipeline(this.pipelines, this.surface.device, this.windStreakLayout);
+    const windPipe = windStreakPipeline(
+      this.blendedPipelines(),
+      this.surface.device,
+      this.windStreakLayout,
+    );
     /* Two uniform buffers and two vertex buffers. Nothing is sampled, so nothing is read. */
-    const windCommand = this.recordDraw(0, this.currentTarget());
+    const windCommand = this.recordBlended(0);
     if (windCommand !== null) {
       windCommand.pipeline = windPipe;
       windCommand.bindGroup = this.windStreakBindGroup;
@@ -4715,8 +4841,8 @@ export class WebGPURenderer implements RendererApi {
     this.boltVerts.writeBlock(vertexSlot, this.boltVertBlock);
     this.boltFrags.writeBlock(fragmentSlot, this.boltFragInts);
 
-    const boltPipe = boltPipeline(this.pipelines, this.surface.device, this.boltLayout);
-    const boltCommand = this.recordDraw(0, this.currentTarget());
+    const boltPipe = boltPipeline(this.blendedPipelines(), this.surface.device, this.boltLayout);
+    const boltCommand = this.recordBlended(0);
     if (boltCommand !== null) {
       boltCommand.pipeline = boltPipe;
       boltCommand.bindGroup = this.boltBindGroup;
@@ -4853,9 +4979,14 @@ export class WebGPURenderer implements RendererApi {
     this.lineFrags.writeFloat(fragmentSlot, atF('uFogNear'), medium.fogNear);
     this.lineFrags.writeFloat(fragmentSlot, atF('uFogFar'), medium.fogFar);
 
-    const linePipe = linePipeline(this.pipelines, this.surface.device, this.lineLayout, additive);
+    const linePipe = linePipeline(
+      this.blendedPipelines(),
+      this.surface.device,
+      this.lineLayout,
+      additive,
+    );
     /* Two uniform blocks and three vertex buffers, and no attachment among them. */
-    const lineCommand = this.recordDraw(0, this.currentTarget());
+    const lineCommand = this.recordBlended(0);
     if (lineCommand !== null) {
       lineCommand.pipeline = linePipe;
       lineCommand.bindGroup = this.lineBindGroup;
@@ -4900,6 +5031,8 @@ export class WebGPURenderer implements RendererApi {
   private readonly waterLayout: GPUBindGroupLayout;
   /** The one-pixel stand-in, kept so the water bind group can be rebuilt without one. */
   private readonly blankView: GPUTextureView;
+  /** The blank texel as a one-layer array: the stand-in every surface-texture binding takes. */
+  private readonly blankSurfaceView: GPUTextureView;
   private readonly blankSampler: GPUSampler;
   /**
    * A slot per body, not one buffer rewritten before each draw.
@@ -5078,8 +5211,39 @@ export class WebGPURenderer implements RendererApi {
 
   /* -- The shadow pass -------------------------------------------------------------- */
 
-  private readonly shadowMap: GPUTexture;
-  private readonly shadowView: GPUTextureView;
+  /**
+   * The sun's static, moving and peeled maps, as layers of one texture (`shadowMap.ts`). The three
+   * views below are single layers, what each pass attaches; the two here are what is sampled.
+   */
+  private sunShadowTexture: GPUTexture;
+  /** Every layer, for the lit pass, the light volumes and the medium. */
+  private sunArrayView: GPUTextureView;
+  /**
+   * The static layer alone, as an array, for the peel: it draws into another layer of the same
+   * texture, and a view covering that layer too would put it in two usages in one pass.
+   */
+  private sunStaticArrayView: GPUTextureView;
+  /** How many layers the sun's texture holds: its maps, and the two glass layers once glass casts. */
+  private sunLayerCount: number;
+  /** The glass depth layers, static then moving, once glass has cast. See `growSunForGlass`. */
+  private sunGlassViews: readonly [GPUTextureView, GPUTextureView] | null = null;
+  /** The texture a growth replaced, destroyed once the encoder that copied out of it is submitted. */
+  private retiredSunTexture: GPUTexture | null = null;
+  /** What the sun's light keeps through glass: two `rgba8unorm` layers, made when glass first casts. */
+  private sunTint: SunTintTarget | null = null;
+  /** The tint pass's layouts, per-draw block, groups and pipelines, made when glass first casts. */
+  private glassTint: GpuGlassTint | null = null;
+  /** The tint pass open while the glass list is replayed into it. */
+  private tintPass: GPURenderPassEncoder | null = null;
+  /** True while the glass list is replayed into a glass depth layer through `casterSink`. */
+  private drawingGlassDepth = false;
+  /** Whether the open sun pass is the movers' layer, whose glass goes to the moving glass layer. */
+  private shadowLayerIsDynamic = false;
+  /** The glass tints' sampler: filtering, and between levels, for frost's coarser reads. */
+  private readonly tintSampler: GPUSampler;
+  /** The light a tint pass is drawn for: xyz a direction (w 0) or a position (w 1). */
+  private readonly glassLight = new Float32Array(4);
+  private shadowView: GPUTextureView;
   private readonly shadowLayout: GPUBindGroupLayout;
   /** The same layout plus the joint palette. See `createDepthBindGroupLayout`. */
   private readonly shadowSkinnedLayout: GPUBindGroupLayout;
@@ -5105,8 +5269,7 @@ export class WebGPURenderer implements RendererApi {
    * read twice — so a profile that switches peeling off gets no map and no pass on either
    * backend rather than a map nothing writes.
    */
-  private readonly peelMap: GPUTexture | null;
-  private readonly peelView: GPUTextureView | null;
+  private peelView: GPUTextureView | null;
   /**
    * The movers' own layer: the character, the rope it swings on, and anything else that walks.
    *
@@ -5127,10 +5290,9 @@ export class WebGPURenderer implements RendererApi {
    * and therefore as lit — so nothing looked broken, only empty, which is why it survived the
    * port and every gate in it.
    */
-  private readonly dynamicMap: GPUTexture | null;
-  private readonly dynamicView: GPUTextureView | null;
+  private dynamicView: GPUTextureView | null;
   /** The peel's own bind groups: `uPeelShadowLayer` at 1, and the static map to peel against. */
-  private readonly shadowPeelBindGroup: GPUBindGroup | null;
+  private shadowPeelBindGroup: GPUBindGroup | null;
   /**
    * The cutout casters' layout, and a bind group per cutout map for each layer, built the first
    * time a map casts and kept: a `createBindGroup` per draw is the allocation the house rules forbid.
@@ -5142,7 +5304,7 @@ export class WebGPURenderer implements RendererApi {
   private readonly cutoutPeelGroups = new Map<GpuSurfaceTexture, GPUBindGroup>();
   private shadowPeelPassUniforms: GPUBuffer | null = null;
   private shadowPeelSampler: GPUSampler | null = null;
-  private readonly scatterDepthPeelBindGroup: GPUBindGroup | null;
+  private scatterDepthPeelBindGroup: GPUBindGroup | null;
   /** Which layer the open pass is writing, so the sink picks the bindings that match it. */
   private shadowLayerIsPeel = false;
   /**
@@ -5201,7 +5363,7 @@ export class WebGPURenderer implements RendererApi {
     const held = groups.get(texture);
     if (held !== undefined) return held;
     const passUniforms = peel ? this.shadowPeelPassUniforms : this.shadowPassUniforms;
-    const previousView = peel ? this.shadowView : this.shadowBlankView;
+    const previousView = peel ? this.sunStaticArrayView : this.shadowBlankView;
     const previousSampler = peel ? this.shadowPeelSampler : this.shadowBlankSampler;
     if (passUniforms === null || previousView === null || previousSampler === null) return null;
     const group = createDepthBindGroup(
@@ -5279,8 +5441,23 @@ export class WebGPURenderer implements RendererApi {
    * Built once and held, rather than made per call: it closes over `this` and a fresh one
    * every frame would be an allocation in a per-frame path.
    */
+  /** 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;
+      }
       const pass = this.shadowPass;
       if (pass === null) return;
       /* A cutout caster's group is looked up before a slot is spent, so a miss costs nothing. */
@@ -5330,6 +5507,12 @@ export class WebGPURenderer implements RendererApi {
      * uses — one draw, however many instances, exactly as the colour pass does it.
      */
     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 pass = this.shadowPass;
       if (pass === null) return;
       const gpuBatch = batch as GpuInstancedBatch;
@@ -5378,7 +5561,13 @@ export class WebGPURenderer implements RendererApi {
       pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
       pass.drawIndexed(geometry.indexCount, count);
     },
-    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;
+      }
       const pass = this.shadowPass;
       if (pass === null) return;
       /* Its own slot, so two characters casting into one bake do not both take the second one's
@@ -5762,10 +5951,13 @@ export class WebGPURenderer implements RendererApi {
      * nothing at all under the default profile, which is on. The cache carries it for the same
      * reason it carries the sample count: no pass can then disagree with the attachment.
      */
+    /* Off compiles none of the glass lookup into a lit pipeline: see `PipelineCache.glassShadows`. */
+    const glassShadows = quality.glassShadows !== 'off';
     this.pipelines = new PipelineCache(
       device,
       quality.screenEffects ? sceneColorFormat(quality.hdrScene) : surface.format,
       this.samples,
+      glassShadows,
     );
     /*
      * The canvas' own state, for the pass `ensurePass` reopens after `endFrame`.
@@ -5778,7 +5970,12 @@ export class WebGPURenderer implements RendererApi {
     this.overlayPipelines =
       this.pipelines.format === surface.format && this.samples === 1
         ? this.pipelines
-        : new PipelineCache(device, surface.format, 1);
+        : new PipelineCache(device, surface.format, 1, glassShadows);
+    this.latePipelines =
+      this.pipelines.format === RECON_HISTORY_FORMAT && this.samples === 1
+        ? this.pipelines
+        : new PipelineCache(device, RECON_HISTORY_FORMAT, 1, glassShadows);
+    this.issueBound = this.issueCommand.bind(this);
     this.pipelineTargets =
       this.overlayPipelines === this.pipelines
         ? [this.pipelines]
@@ -5866,6 +6063,9 @@ export class WebGPURenderer implements RendererApi {
      * `uStaticShadowMap` rather than by anything here changing shape.
      */
     const blankView = blank.createView();
+    /* The same texel as a one-layer array, for the four material maps, which are arrays now. */
+    const blankSurfaceView = blank.createView({ dimension: '2d-array' });
+    this.blankSurfaceView = blankSurfaceView;
     const blankSampler = device.createSampler({ label: 'flat.sampler' });
 
     /*
@@ -5929,42 +6129,35 @@ export class WebGPURenderer implements RendererApi {
     const blankDriftIndexView = blankVolume('flat.emptyDriftLightIndex', 'r32uint');
     const blankDriftAtlasView = blankVolume('flat.emptyDriftLightAtlas', 'rgba16float');
 
-    this.shadowMap = device.createTexture({
-      label: 'shadow.static',
-      size: [this.quality.directionalShadowMapSize, 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 texture, on the conditions `renderer.ts` builds its array on: one
+     * decision read twice. Same size and format throughout, because the shader samples every
+     * layer with one \`uShadowMapSize\` and one set of filter offsets.
+     */
+    const sunLayers = this.quality.directionalShadows
+      ? this.quality.directionalShadowDepthLayers > 1
+        ? 3
+        : 2
+      : 1;
+    this.sunShadowTexture = device.createTexture({
+      label: 'shadow.sun',
+      size: [
+        this.quality.directionalShadowMapSize,
+        this.quality.directionalShadowMapSize,
+        sunLayers,
+      ],
       format: SHADOW_FORMAT,
-      usage: 0x10 | 0x4, // RENDER_ATTACHMENT | TEXTURE_BINDING
+      /* Copyable both ways, because the first glass grows it by copying every layer across. */
+      usage: SUN_USAGE,
     });
-    this.shadowView = this.shadowMap.createView();
-    /*
-     * The peel layer, on the condition `renderer.ts` builds its own on: more than one depth
-     * layer asked for. `depth.ts` fills it by discarding every fragment at or in front of what
-     * the static pass stored, so what lands here is the second independently fading occluder.
-     */
-    this.peelMap =
-      this.quality.directionalShadowDepthLayers > 1
-        ? device.createTexture({
-            label: 'shadow.peel',
-            size: [this.quality.directionalShadowMapSize, this.quality.directionalShadowMapSize],
-            format: SHADOW_FORMAT,
-            usage: 0x10 | 0x4, // RENDER_ATTACHMENT | TEXTURE_BINDING
-          })
-        : null;
-    this.peelView = this.peelMap === null ? null : this.peelMap.createView();
-    /*
-     * The movers' layer, on the condition `renderer.ts` builds its own on: directional shadows
-     * at all. Same size and same format as the static map, because the shader samples all three
-     * with one `uShadowMapSize` and one set of PCF offsets.
-     */
-    this.dynamicMap = this.quality.directionalShadows
-      ? device.createTexture({
-          label: 'shadow.dynamic',
-          size: [this.quality.directionalShadowMapSize, this.quality.directionalShadowMapSize],
-          format: SHADOW_FORMAT,
-          usage: 0x10 | 0x4, // RENDER_ATTACHMENT | TEXTURE_BINDING
-        })
-      : null;
-    this.dynamicView = this.dynamicMap === null ? null : this.dynamicMap.createView();
+    this.sunLayerCount = sunLayers;
+    const views = sunViewsOf(this.sunShadowTexture, sunLayers, sunLayers);
+    this.sunArrayView = views.array;
+    this.sunStaticArrayView = views.staticArray;
+    this.shadowView = views.static;
+    this.dynamicView = views.dynamic;
+    this.peelView = views.peel;
 
     /*
      * **Cleared once, here, because a texture no pass has written reads as zero**, which the
@@ -6005,6 +6198,14 @@ export class WebGPURenderer implements RendererApi {
      * rather than the hardware's.
      */
     const shadowSampler = device.createSampler({ label: 'shadow.sampler' });
+    this.tintSampler = device.createSampler({
+      label: 'shadow.tintSampler',
+      magFilter: 'linear',
+      minFilter: 'linear',
+      mipmapFilter: 'linear',
+      addressModeU: 'clamp-to-edge',
+      addressModeV: 'clamp-to-edge',
+    });
     /*
      * The photometric atlas's own sampler, **created here rather than reusing `postSampler`.**
      *
@@ -6026,14 +6227,17 @@ export class WebGPURenderer implements RendererApi {
     });
 
     this.flatTextures = (name) => {
-      if (name === 'uStaticShadowMap') return { view: this.shadowView, sampler: shadowSampler };
-      /*
-       * The movers' layer. Cleared at construction like the others, so a profile with
-       * directional shadows on that never opens the layer reads the far plane and therefore
-       * "nothing moving is in the way" — not whatever the allocation happened to contain.
-       */
-      if (name === 'uDynamicShadowMap' && this.dynamicView !== null) {
-        return { view: this.dynamicView, sampler: shadowSampler };
+      if (name === 'uSunShadows') return { view: this.sunArrayView, sampler: shadowSampler };
+      /* What the sun keeps through glass, or the one-texel stand-in the lookup reads as none. */
+      if (name === 'uSunGlassTints') {
+        return { view: this.sunTint?.array ?? blankArrayView, sampler: this.tintSampler };
+      }
+      /* What the lamps keep through glass, one layer a light, or the same stand-in. */
+      if (name === 'uPointGlassTints') {
+        return {
+          view: this.pointShadowArray?.glassTint?.view ?? blankArrayView,
+          sampler: this.tintSampler,
+        };
       }
       /*
        * The caller's image, or the stand-in. Read from the field rather than passed in, because
@@ -6048,7 +6252,7 @@ export class WebGPURenderer implements RendererApi {
       if (name === 'uNormalMap') {
         const map = this.normalMap;
         return map === null
-          ? { view: blankView, sampler: blankSampler }
+          ? { view: blankSurfaceView, sampler: blankSampler }
           : { view: map.view, sampler: map.sampler };
       }
       /* The caller's ORM map, or the stand-in, for the reason `uNormalMap` gives just above. */
@@ -6056,24 +6260,25 @@ export class WebGPURenderer implements RendererApi {
       if (name === 'uEmissiveMap') {
         const map = this.emissiveMap;
         return map === null
-          ? { view: blankView, sampler: blankSampler }
+          ? { view: blankSurfaceView, sampler: blankSampler }
           : { view: map.view, sampler: map.sampler };
       }
       if (name === 'uOrmMap') {
         const map = this.ormMap;
         return map === null
-          ? { view: blankView, sampler: blankSampler }
+          ? { view: blankSurfaceView, sampler: blankSampler }
           : { view: map.view, sampler: map.sampler };
       }
       if (name === 'uAlbedo') {
         const albedo = this.albedo;
         return albedo === null
-          ? { view: blankView, sampler: blankSampler }
+          ? { view: blankSurfaceView, sampler: blankSampler }
           : { view: albedo.view, sampler: albedo.sampler };
       }
-      /* The peel, where the profile asked for one. `uPeeledShadowEnabled` gates the sample. */
-      if (name === 'uPeeledShadowMap' && this.peelView !== null) {
-        return { view: this.peelView, sampler: shadowSampler };
+      /* The albedo's effects table, or a one-texel stand-in the shader's size test reads as none.
+         The albedo is the group's key, so its table needs no key of its own. */
+      if (name === 'uSurfaceEffects') {
+        return { view: this.albedo?.effectsView ?? blankView, sampler: blankSampler };
       }
       /*
        * The room, once a bake has filled it. Unbaked reads as the blank cube: nothing to mirror.
@@ -6106,18 +6311,8 @@ export class WebGPURenderer implements RendererApi {
        * this one is a curve sampled between two angles rather than data addressed by index, so
        * interpolation across a row is the point. `postSampler` is linear and clamped.
        */
-      if (name === 'uIesAtlas') {
-        return { view: this.iesView ?? blankView, sampler: iesSampler };
-      }
-      /*
-       * The cookie atlas, or the single white texel a scene with no cookie falls back to.
-       *
-       * A filtering sampler, like the photometric atlas and unlike the froxel table: a cookie is
-       * an image and its whole point is that it is soft at the edges. The shader's own half-texel
-       * inset is what keeps one tile out of the next; a clamp cannot, the seam being interior.
-       */
-      if (name === 'uCookieAtlas') {
-        return { view: this.cookieView ?? blankView, sampler: iesSampler };
+      if (name === 'uFixtureAtlas') {
+        return { view: this.fixtureAtlasView(), sampler: iesSampler };
       }
       /*
        * DriftLight's brick index, read by `texelFetch` alone, so it shares the shadow group's
@@ -6143,7 +6338,15 @@ export class WebGPURenderer implements RendererApi {
        * texels by construction, an offset that snapped to one being no offset at all.
        */
       if (name === 'uRefractScene') {
-        return { view: this.refractSnapshotView ?? blankView, sampler: iesSampler };
+        this.refractSampler ??= device.createSampler({
+          label: 'refract.sampler',
+          magFilter: 'linear',
+          minFilter: 'linear',
+          mipmapFilter: 'linear',
+          addressModeU: 'clamp-to-edge',
+          addressModeV: 'clamp-to-edge',
+        });
+        return { view: this.refractSnapshotView ?? blankView, sampler: this.refractSampler };
       }
       /*
        * Every point light's shadow, in one binding.
@@ -6369,9 +6572,7 @@ export class WebGPURenderer implements RendererApi {
      */
     this.mediumLayout = createPostStageLayout(device, MEDIUM_UNIFORMS, MEDIUM_FRAG_SIZE, [
       { binding: MEDIUM_TEXTURES.uDepth, filterable: false },
-      { binding: MEDIUM_TEXTURES.uStaticShadowMap, filterable: false },
-      { binding: MEDIUM_TEXTURES.uPeeledShadowMap, filterable: false },
-      { binding: MEDIUM_TEXTURES.uDynamicShadowMap, filterable: false },
+      { binding: MEDIUM_TEXTURES.uSunShadows, filterable: false, dimension: '2d-array' },
     ]);
     this.mediumUniforms = device.createBuffer({
       label: 'post.mediumUniforms',
@@ -6603,7 +6804,7 @@ export class WebGPURenderer implements RendererApi {
       this.scatterDepthDraws.buffer,
       { binding: DEPTH_FRAG_BINDING, buffer: depthPassUniforms, size: DEPTH_FRAG_SIZE },
       DEPTH_PREVIOUS_BINDING,
-      blankView,
+      blankArrayView,
       blankSampler,
     );
     this.shadowBindGroup = createDepthBindGroup(
@@ -6611,10 +6812,10 @@ export class WebGPURenderer implements RendererApi {
       this.shadowLayout,
       this.shadowDraws.buffer,
       depthPassUniforms,
-      blankView,
+      blankArrayView,
       blankSampler,
     );
-    this.shadowBlankView = blankView;
+    this.shadowBlankView = blankArrayView;
     this.shadowBlankSampler = blankSampler;
     this.shadowPassUniforms = depthPassUniforms;
 
@@ -6652,7 +6853,7 @@ export class WebGPURenderer implements RendererApi {
             this.shadowLayout,
             this.shadowDraws.buffer,
             peelPassUniforms,
-            this.shadowView,
+            this.sunStaticArrayView,
             shadowSampler,
           );
     this.scatterDepthPeelBindGroup =
@@ -6664,7 +6865,7 @@ export class WebGPURenderer implements RendererApi {
             this.scatterDepthDraws.buffer,
             { binding: DEPTH_FRAG_BINDING, buffer: peelPassUniforms, size: DEPTH_FRAG_SIZE },
             DEPTH_PREVIOUS_BINDING,
-            this.shadowView,
+            this.sunStaticArrayView,
             shadowSampler,
           );
 
@@ -6964,6 +7165,8 @@ export class WebGPURenderer implements RendererApi {
       if (!attribute.optional) continue;
       present[String(attribute.name)] = key.includes(`:${String(attribute.name)}`);
     }
+    /* Not a layout entry of its own — it widens `uvs` — so read from the key beside them. */
+    present['layers'] = key.includes(':layers');
     return present;
   }
 
@@ -6976,6 +7179,7 @@ export class WebGPURenderer implements RendererApi {
    * uncaught exceptions a second in somebody's error reporting.
    */
   beginFrame(clearColor: Vec3): void {
+    this.cullFrame += 1;
     /* Whatever an update replaced during the last frame; nothing recorded can read it now. */
     for (const texture of this.retiredTextures) texture.destroy();
     this.retiredTextures.length = 0;
@@ -7070,7 +7274,10 @@ export class WebGPURenderer implements RendererApi {
     this.perFrame.reset();
     this.materials.dirty();
     /* Spent by `runMotion` at the end of the last frame; a frame states its movers afresh. */
-    this.motionCount = 0;
+    this.motionPass?.reset();
+    this.latePass?.reset();
+    this.moverFrame += 1;
+    this.inFrame = true;
     /*
      * The canvas rather than the swap chain's texture, and the difference is that reading this
      * does not *acquire* anything. See `swapView`.
@@ -7235,6 +7442,15 @@ export class WebGPURenderer implements RendererApi {
       present[String(attribute.name)] = supplied;
       key += supplied ? `:${String(attribute.name)}` : '';
     }
+    /*
+     * Texture-array layers widen the UV field to three floats (`LAYERED_UVS`), which is a different
+     * vertex layout, so the key has to say so or a layered and a plain mesh would share a pipeline
+     * and one of them would read every field after the UVs from the wrong offset.
+     */
+    if (data.layers !== undefined) {
+      present['layers'] = true;
+      key += ':layers';
+    }
     const fullKey = `${this.variant}|${key}`;
     /*
      * **For every target this mesh can land on, which is two when the overlay is its own.**
@@ -7391,7 +7607,27 @@ export class WebGPURenderer implements RendererApi {
           'what is kept and what a buffer is hinted as.',
       );
     }
-    mesh.update(this.surface.device, positions, normals);
+    /*
+     * **The rows before this rewrite are last frame's**, kept only for a reconstruction and only
+     * on the first rewrite of a frame — a second must not replace where the vertices were last
+     * frame with where they were a moment ago. A rewrite between frames is the next frame's. See
+     * `changeFrames.ts`.
+     */
+    const motion = mesh.motion;
+    let previous: GPUBuffer | null = null;
+    if (motion !== null && this.reconstructionWanted) {
+      const frame = frameOfChange(this.moverFrame, this.inFrame);
+      if (keepsPrevious(motion.changed, frame)) {
+        motion.previous ??= this.surface.device.createBuffer({
+          label: 'recon.dynamicPrevious',
+          size: mesh.vertexBuffers[0]?.size ?? 0,
+          usage: 0x0020 | 0x0008, // VERTEX | COPY_DST
+        });
+        previous = motion.previous;
+      }
+      motion.changed = frame;
+    }
+    mesh.update(this.surface.device, positions, normals, previous);
   }
 
   /**
@@ -7440,62 +7676,15 @@ export class WebGPURenderer implements RendererApi {
      * Its sequence is its own: `reconJitterPhases` takes eight positions for every output pixel a
      * render pixel covers, where the temporal resolve's eight are enough at one to one.
      */
-    this.reconstructing = this.reconstructionWanted && !this.reflectionPassActive;
-    if (this.quality.reconstruction > 0 && this.samples > 1 && !this.reconMultisampleSaid) {
-      this.reconMultisampleSaid = true;
-      console.warn(RECONSTRUCTION_MULTISAMPLE_REFUSAL);
-    }
-    if (this.reconstructing) {
-      /*
-       * The offset `settleReconJitter` chose for the frame at `beginFrame`, applied here and not
-       * advanced here: a frame binding its mesh pass twice is one frame of the sequence.
-       *
-       * **The y offset is negated on the way in, and that is not a preference.** This shifts the
-       * *corrected* matrix, whose y `CLIP_CORRECTION` has already negated so that the negation
-       * every generated vertex stage ends with cancels out — §3 row 56. So an offset added here
-       * arrives on screen with its sign reversed, while x, which nothing negates, arrives as
-       * given. The temporal resolve cannot see this because its shader never reads the offset; the
-       * reconstruction reads it at every texel it unprojects, and a sign error there moves every
-       * sample two jitters away from where the depth says it is.
-       */
-      this.viewProj = jitterProjection(
-        this.jitteredViewProj,
-        this.correctedViewProj,
-        this.reconJitter[0] as number,
-        -(this.reconJitter[1] as number),
-        this.renderWidth,
-        this.renderHeight,
-      ) as Float32Array;
-      this.temporalJittering = false;
-      this.temporalHistoryUsable = false;
-    }
-    this.temporalJittering =
-      !this.reconstructing &&
-      this.quality.temporalAa &&
-      this.quality.screenEffects &&
-      !this.reflectionPassActive;
-    if (this.temporalJittering) {
-      /* The scene's size, not the drawing buffer's: the history is a picture of the render. */
-      this.temporalHistoryUsable = this.temporalHistory.openFrame(
-        this.renderWidth,
-        this.renderHeight,
-      );
-      const [jx, jy] = jitterOffset(this.temporalHistory.frameIndex);
-      this.temporalJitterX = jx;
-      this.temporalJitterY = jy;
-      /* A jitter is half a *render* texel, which is what the sequence is spread over. */
-      this.viewProj = jitterProjection(
-        this.jitteredViewProj,
-        this.correctedViewProj,
-        jx,
-        jy,
-        this.renderWidth,
-        this.renderHeight,
-      ) as Float32Array;
-    } else if (!this.reconstructing) {
-      this.temporalHistoryUsable = false;
-      this.viewProj = this.correctedViewProj;
-    }
+    /*
+     * **After the present there is no jitter to add and no temporal frame to open.** A mesh pass
+     * bound then is the interface's, drawn over a picture already resolved: jittered, a map and every
+     * edge of it moved by a fraction of a pixel each frame with nothing to resolve it; and opening a
+     * second temporal frame stepped the sequence twice a frame, so the world saw every other
+     * position and the anti-flicker's period never started.
+     */
+    if (this.framePresented) this.viewProj = this.correctedViewProj;
+    else this.jitterFrame();
     /*
      * The frustum, once a frame, and from the **uncorrected** matrix.
      *
@@ -7595,8 +7784,14 @@ export class WebGPURenderer implements RendererApi {
      * frame either way, because an unwritten one is four zeroes and `dot(p, 0) < 0` is false,
      * so the term would silently pass everything the first time somebody enabled it.
      */
-    i[at('uClipEnabled')] = this.reflectionPassActive ? 1 : 0;
-    f.set(this.reflection?.clipPlane ?? NO_CLIP_PLANE, at('uClipPlane'));
+    /* The mirror's plane in a reflection pass and zero, which clips nothing, in every other: the lit
+       stage has no flag beside the plane. See `uClipPlane` in `flat/preamble.ts`. */
+    f.set(
+      this.reflectionPassActive ? (this.reflection?.clipPlane ?? NO_CLIP_PLANE) : NO_CLIP_PLANE,
+      at('uClipPlane'),
+    );
+    resolveSurfaceScene(env, this.surfaceScene);
+    f.set(this.surfaceScene, at('uSurfaceScene'));
 
     /*
      * The material and grading terms, matching `renderer.ts` value for value.
@@ -7617,6 +7812,9 @@ export class WebGPURenderer implements RendererApi {
      */
     f[at('uGrain')] = 1;
     f[at('uReflectivity')] = 0;
+    /* No weighting and no dither until a pass or a crossfade asks. See `setDitherFade`. */
+    f[at('uWriteMode')] = 0;
+    f[at('uWriteMode') + 1] = 0;
     /* 1, not 0: a multiplier's identity is one. See `setEnvironmentGain`. */
     f[at('uEnvironmentGain')] = 1;
     /*
@@ -8050,7 +8248,7 @@ export class WebGPURenderer implements RendererApi {
     depthLayer = 0,
     tint: Vec3 | null = null,
     /** Where it was last frame. See `RendererApi.drawMesh`, and `runMotion` for what reads it. */
-    previousModel: ArrayLike<number> | null = null,
+    previousModel: ArrayLike<number> | Mover | null = null,
   ): void {
     /*
      * Skipped where the flag asks and the bounds say so.
@@ -8075,7 +8273,7 @@ export class WebGPURenderer implements RendererApi {
      * depth, so a motion pass drawing it would either be depth-rejected everywhere — wasted — or,
      * where it happened to pass, write motion for a surface no pixel of the frame belongs to.
      */
-    if (previousModel !== null) this.recordMotion(mesh, model, previousModel);
+    if (this.tracksMotionNow()) this.recordDrawMotion(mesh, model, previousModel);
     this.submitMesh(mesh, model, tint, 1, false, { depthLayer });
   }
 
@@ -8176,7 +8374,7 @@ export class WebGPURenderer implements RendererApi {
      * **Recorded rather than drawn**, when the effect is on and this is not already the replay.
      * Everything is copied — see `TranslucentQueue`, and the scratch matrix that made it necessary.
      */
-    if (this.oitActive && !this.oitReplaying) {
+    if (this.oitActive && !this.oitReplaying && options.additive !== true) {
       this.translucentQueue.record(mesh, model, opacity, options);
       return;
     }
@@ -8238,7 +8436,16 @@ export class WebGPURenderer implements RendererApi {
       return;
     }
 
-    this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, this.viewProj);
+    /* A blended draw landing after the upscale is drawn into an unjittered picture. */
+    /* Unless it moves with what it lies on, which the resolve reconstructs it with. See
+       `TranslucentMeshOptions.reconstructed`. */
+    const lands = blend && options.reconstructed !== true && this.drawsLate();
+    const late = lands || (blend && this.oitReplaying && this.reconstructing);
+    this.perDraw.writeFloats(
+      slot,
+      FLAT_VERT_FIELDS.uViewProj.offset,
+      late ? this.correctedViewProj : this.viewProj,
+    );
     this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uModel.offset, model);
     this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uTint.offset, tint ?? WHITE);
     /* The frame's wind, for a mesh carrying a sway lane. Written on this path and not the
@@ -8272,17 +8479,18 @@ export class WebGPURenderer implements RendererApi {
       this.perFrameFloats[this.materialField('uOpacity')] = opacity;
       /* Material state exactly like `uOpacity`, dirtied for the accumulation pass and restored
          below — the revealage pass draws with it at zero and its colour multiplied away. */
-      this.perFrameFloats[this.materialField('uOitWeighted')] = this.oitMode === 'accum' ? 1 : 0;
+      this.perFrameFloats[this.materialField('uWriteMode')] = this.oitMode === 'accum' ? 1 : 0;
     }
     /* Same shape as `dimmed`: a slot is only worth taking when either differs from the default
        `bindMeshPass` already wrote, and both are put back together once the draw is submitted. */
     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;
-    const unlitOrUnfogged = !lit || !fog;
+    const unlitOrUnfogged = !lit || fog !== FOG_RECEDE;
     if (unlitOrUnfogged) {
       if (!lit) this.perFrameInts[this.materialField('uLightingEnabled')] = 0;
-      if (!fog) this.perFrameInts[this.materialField('uFogEnabled')] = 0;
+      this.perFrameInts[this.materialField('uFogEnabled')] = fog;
     }
     /* `1` is sRGB alone: the conversion without the curve. `Math.min` rather than a literal, so
        a renderer asked for `none` stays at none. See `TranslucentMeshOptions.toneMapped`. */
@@ -8298,17 +8506,7 @@ export class WebGPURenderer implements RendererApi {
      * shades as an ordinary translucent one rather than sampling a texture holding the frame
      * before last. That is the defined state the two-backends rule asks for.
      */
-    const refraction = options.refraction ?? 0;
-    const refracting = refraction > 0 && this.takeRefractSnapshot();
-    if (refracting) {
-      this.perFrameFloats[this.materialField('uRefractStrength')] = refraction;
-      const refractTint = options.refractTint;
-      const tintAt = this.materialField('uRefractTint');
-      this.perFrameFloats[tintAt] = refractTint?.[0] ?? 1;
-      this.perFrameFloats[tintAt + 1] = refractTint?.[1] ?? 1;
-      this.perFrameFloats[tintAt + 2] = refractTint?.[2] ?? 1;
-      this.perFrameFloats[this.materialField('uRefractThickness')] = options.thicknessM ?? 0;
-    }
+    const refracting = this.bindSeeThrough(options);
     /* Taken for itself when any of those differs from the pass, and put back below: the rule both
        backends count material changes by. See `materialChanges.ts`. */
     const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
@@ -8337,8 +8535,10 @@ export class WebGPURenderer implements RendererApi {
      */
     const depthWrite = options.depthWrite ?? true;
     const layer = Math.min(Math.max(Math.round(options.depthLayer ?? 0), 0), MAX_DEPTH_LAYER);
+    /* Added rather than blended over: its own blend state, so its own pipeline. */
+    const adds = blend && options.additive === true;
     const key =
-      `${keyed}${blend ? '|blend' : ''}` +
+      `${keyed}${blend ? (adds ? '|add' : '|blend') : ''}` +
       `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
       /* The two order-independent buffers are two formats and two blend states, so a draw into
          one must never share a cached pipeline with the same mesh drawn into the other. */
@@ -8368,7 +8568,7 @@ export class WebGPURenderer implements RendererApi {
      * pays the compile it was trying to avoid. That is a slow frame; the alternative is a
      * thrown error in the middle of one.
      */
-    const pipelines = this.targetPipelines();
+    const pipelines = blend ? this.blendedPipelines(lands) : this.targetPipelines();
     let pipeline = pipelines.peek(key);
     if (pipeline === undefined) {
       const present = this.meshPresent.get(base);
@@ -8382,7 +8582,7 @@ export class WebGPURenderer implements RendererApi {
         this.variant,
         key,
         present,
-        blend,
+        adds ? 'additive' : blend,
         skinned,
         morphed,
         depthWrite,
@@ -8416,7 +8616,9 @@ export class WebGPURenderer implements RendererApi {
        * the uniform rings are the state arena this design would otherwise have had to build —
        * so the command carries them as its two dynamic offsets.
        */
-      const command = this.recordDraw(0, this.currentTarget());
+      const command = blend
+        ? this.recordBlended(0, lands)
+        : this.recordDraw(0, this.currentTarget());
       if (command !== null) {
         command.pipeline = pipeline;
         command.bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
@@ -8447,17 +8649,15 @@ export class WebGPURenderer implements RendererApi {
        whether or not this one found a slot to draw with. */
     if (dimmed) {
       this.perFrameFloats[this.materialField('uOpacity')] = 1;
-      this.perFrameFloats[this.materialField('uOitWeighted')] = 0;
+      this.perFrameFloats[this.materialField('uWriteMode')] = 0;
     }
     if (unlitOrUnfogged) {
       if (!lit) this.perFrameInts[this.materialField('uLightingEnabled')] = 1;
-      if (!fog) this.perFrameInts[this.materialField('uFogEnabled')] = 1;
-    }
-    if (refracting) {
-      /* Back to off for every other draw in the frame, exactly as `uOpacity` is: this scratch is
-         shared, so a strength left set is worn by everything drawn after it. */
-      this.perFrameFloats[this.materialField('uRefractStrength')] = 0;
+      this.perFrameInts[this.materialField('uFogEnabled')] = FOG_RECEDE;
     }
+    /* Back to off for every other draw in the frame, exactly as `uOpacity` is: this scratch is
+       shared, so a strength left set is worn by everything drawn after it. */
+    if (refracting) this.releaseSeeThrough();
     if (!toneMapped) {
       this.perFrameInts[this.materialField('uOutputTransform')] = this.gradeCode();
     }
@@ -8479,7 +8679,11 @@ export class WebGPURenderer implements RendererApi {
    * anyway, because WebGL2 *cannot* and a capability one backend has and the other does not is
    * the shape this repository spent a week removing.
    */
-  createInstanced(mesh: GpuMesh, capacity: number): GpuInstancedBatch {
+  createInstanced(
+    mesh: GpuMesh,
+    capacity: number,
+    options: InstancedOptions = {},
+  ): GpuInstancedBatch {
     /*
      * **A skinned mesh cannot be instanced, and the reason is the vertex layout rather than the
      * shader.** An instanced pipeline reclaims locations 11 and 12 from the joint indices and
@@ -8509,34 +8713,53 @@ export class WebGPURenderer implements RendererApi {
           'instanced pipeline.',
       );
     }
-    if (this.instanced.has(mesh)) {
-      throw new Error(
-        'WebGPU: this mesh already has an instanced batch — a mesh may have one, because the ' +
-          "other backend binds the attributes to the mesh's own vertex array.",
-      );
-    }
     const batch = new GpuInstancedBatch(
       this.surface.device,
       mesh,
       capacity,
       `flat.instances:${(mesh as GpuMesh & { key?: string }).key ?? 'mesh'}`,
+      options.cull ?? false,
     );
-    this.instanced.set(mesh, batch);
     return batch;
   }
 
-  /** Which meshes already carry a batch, so a second is refused rather than silently shared. */
-  private readonly instanced = new Map<GpuMesh, GpuInstancedBatch>();
+  /** The device instance culls, built on the first culling draw. See `InstanceCullPass`. */
+  private instanceCulls: InstanceCullPass | null = null;
+  /** Counts frames, so a batch knows when its cull slots were last taken. */
+  private cullFrame = 0;
 
   /** Push placement and colour. Only the live prefix; see `GpuInstancedBatch.upload`. */
   uploadInstanced(batch: GpuInstancedBatch, data: MeshInstances): void {
     if (this.surface.lost) return;
-    batch.upload(this.surface.device.queue, data);
+    /*
+     * **The placement before this upload is last frame's**, kept only for a reconstruction and only
+     * on a frame's first upload, for the reason `updateMesh` gives. See `changeFrames.ts`.
+     */
+    let previous: GPUBuffer | null = null;
+    if (this.reconstructionWanted) {
+      const frame = frameOfChange(this.moverFrame, this.inFrame);
+      if (keepsPrevious(batch.changed, frame)) {
+        batch.previousBuffer ??= this.surface.device.createBuffer({
+          label: 'recon.instancesPrevious',
+          size: batch.capacity * INSTANCE_STRIDE,
+          usage: 0x0020 | 0x0008, // VERTEX | COPY_DST
+        });
+        previous = batch.previousBuffer;
+      }
+      batch.changed = frame;
+    }
+    batch.upload(this.surface.device.queue, data, previous);
   }
 
   /** Draw every live instance, opaque. */
   drawInstanced(batch: GpuInstancedBatch, data: MeshInstances): void {
     this.submitInstanced(batch, data, 1, false, {});
+    /* A batch that moved this frame pairs each slot with last frame's; the batch is the identity. */
+    const previous = batch.previousBuffer;
+    if (previous !== null && batch.changed === this.moverFrame && this.tracksMotionNow()) {
+      const paired = pairedInstances(batch.previousCount, Math.min(data.count, batch.capacity));
+      if (paired > 0) this.motionPass?.recordInstanced(batch.mesh, batch.buffer, previous, paired);
+    }
   }
 
   /** Draw every live instance, blended. See `drawTranslucentMesh` for what the options mean. */
@@ -8551,10 +8774,48 @@ export class WebGPURenderer implements RendererApi {
 
   /** Release the placement. The mesh is the caller's and is not released. */
   disposeInstanced(batch: GpuInstancedBatch): void {
-    this.instanced.delete(batch.mesh);
     batch.dispose();
   }
 
+  /**
+   * Write what a translucent draw shows through it into the material scratch: refraction's bend and
+   * absorption, and glass. Returns whether the frame's copy is there to read, and so whether
+   * `releaseSeeThrough` owes the scratch back.
+   *
+   * **A glass draw takes the copy even when it does not bend**, since a pane shows what is behind it
+   * either way. A copy that cannot be taken — a mirror, a probe bake — leaves both off, so the pane
+   * shades as ordinary translucency rather than sampling a stand-in. See `glass.ts`.
+   */
+  private bindSeeThrough(options: TranslucentMeshOptions): boolean {
+    const refraction = options.refraction ?? 0;
+    const glassy = resolveGlass(options.glass, this.glassScratch);
+    if ((refraction <= 0 && !glassy) || !this.takeRefractSnapshot()) return false;
+    const glass = this.glassScratch;
+    /* Strength, path thickness, transmission, frost: one vector, for the budget the shader states. */
+    const seeAt = this.materialField('uSeeThrough');
+    this.perFrameFloats[seeAt] = Math.max(refraction, 0);
+    this.perFrameFloats[seeAt + 1] = options.thicknessM ?? 0;
+    this.perFrameFloats[seeAt + 2] = glass.transmission;
+    this.perFrameFloats[seeAt + 3] = glass.frost;
+    const refractTint = options.refractTint;
+    const tintAt = this.materialField('uRefractTint');
+    this.perFrameFloats[tintAt] = refractTint?.[0] ?? 1;
+    this.perFrameFloats[tintAt + 1] = refractTint?.[1] ?? 1;
+    this.perFrameFloats[tintAt + 2] = refractTint?.[2] ?? 1;
+    const glassTintAt = this.materialField('uGlassTint');
+    this.perFrameFloats[glassTintAt] = glass.tint[0];
+    this.perFrameFloats[glassTintAt + 1] = glass.tint[1];
+    this.perFrameFloats[glassTintAt + 2] = glass.tint[2];
+    return true;
+  }
+
+  /** Put the scratch back after `bindSeeThrough`: refraction and glass off. */
+  private releaseSeeThrough(): void {
+    const seeAt = this.materialField('uSeeThrough');
+    this.perFrameFloats[seeAt] = 0;
+    this.perFrameFloats[seeAt + 2] = 0;
+  }
+
   /**
    * One draw, one material slot, one uniform slot, however many instances.
    *
@@ -8567,6 +8828,37 @@ export class WebGPURenderer implements RendererApi {
    * **What it gives up** against `drawMesh` is skinning and morphing, refused where the variant
    * is built, and a per-instance opacity: `opacity` here dims the whole batch.
    */
+  /**
+   * The next of a batch's cull slots this frame, with its cull queued against the current view; null
+   * when the batch has drawn from `MAX_CULL_SLOTS` views already or the frame's job ring is full,
+   * and the draw then takes every instance.
+   */
+  private takeCullSlot(batch: GpuInstancedBatch, count: number): CullSlot | null {
+    if (batch.slotFrame !== this.cullFrame) {
+      batch.slotFrame = this.cullFrame;
+      batch.slotsTaken = 0;
+    }
+    if (batch.slotsTaken >= MAX_CULL_SLOTS) return null;
+    this.instanceCulls ??= new InstanceCullPass(this.surface.device);
+    let slot = batch.slots[batch.slotsTaken];
+    if (slot === undefined) {
+      slot = this.instanceCulls.createSlot(batch.buffer, batch.capacity, 'flat.instances');
+      batch.slots.push(slot);
+    }
+    const bounds = batch.mesh.bounds;
+    const queued = this.instanceCulls.queue(
+      slot,
+      this.frustum,
+      bounds.centre,
+      bounds.radius,
+      count,
+      batch.mesh.indexCount,
+    );
+    if (!queued) return null;
+    batch.slotsTaken += 1;
+    return slot;
+  }
+
   private submitInstanced(
     batch: GpuInstancedBatch,
     data: MeshInstances,
@@ -8579,6 +8871,14 @@ export class WebGPURenderer 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 on the CPU,
+       then instance by instance on the device into an indirect draw. 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;
+    const cut =
+      culling && cullsInstances(count, mesh.indexCount) ? this.takeCullSlot(batch, count) : null;
+    const instanceBuffer = cut === null ? batch.buffer : cut.instances;
 
     const slot = this.perDraw.allocate();
     if (slot === null) {
@@ -8591,7 +8891,13 @@ export class WebGPURenderer implements RendererApi {
       return;
     }
 
-    this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, this.viewProj);
+    /* Late unless it moves with what it lies on. See `TranslucentMeshOptions.reconstructed`. */
+    const lands = blend && options.reconstructed !== true && this.drawsLate();
+    this.perDraw.writeFloats(
+      slot,
+      FLAT_VERT_FIELDS.uViewProj.offset,
+      lands ? this.correctedViewProj : this.viewProj,
+    );
     this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
     this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
     this.perDraw.writeInt(slot, FLAT_VERT_FIELDS.uHasTangents.offset, mesh.hasTangents ? 1 : 0);
@@ -8601,12 +8907,12 @@ export class WebGPURenderer implements RendererApi {
       this.perFrameFloats[this.materialField('uOpacity')] = opacity;
     }
     const lit = options.lit ?? true;
-    const fog = options.fog ?? true;
+    const fog = fogModeOf(options.fog ?? true, blend && options.additive === true);
     const toneMapped = options.toneMapped ?? true;
-    const unlitOrUnfogged = !lit || !fog;
+    const unlitOrUnfogged = !lit || fog !== FOG_RECEDE;
     if (unlitOrUnfogged) {
       if (!lit) this.perFrameInts[this.materialField('uLightingEnabled')] = 0;
-      if (!fog) this.perFrameInts[this.materialField('uFogEnabled')] = 0;
+      this.perFrameInts[this.materialField('uFogEnabled')] = fog;
     }
     if (!toneMapped) {
       this.perFrameInts[this.materialField('uOutputTransform')] = Math.min(this.gradeCode(), 1);
@@ -8614,19 +8920,21 @@ export class WebGPURenderer implements RendererApi {
 
     const depthWrite = options.depthWrite ?? true;
     const layer = Math.min(Math.max(Math.round(options.depthLayer ?? 0), 0), MAX_DEPTH_LAYER);
-    /* 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. */
+    const refracting = blend && this.bindSeeThrough(options);
+    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
     if (own) this.materials.dirty();
     const base = (mesh as GpuMesh & { key?: string }).key ?? 'flat:s0:u0';
     /* `|inst` in the key, for the reason every other suffix is there: an instanced pipeline binds
        a third vertex buffer and a different vertex module, and sharing a cache entry with the
        plain one would hand a draw the wrong layout. */
+    const adds = blend && options.additive === true;
     const key =
-      `${base}|inst${blend ? '|blend' : ''}` +
+      `${base}|inst${blend ? (adds ? '|add' : '|blend') : ''}` +
       `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
       `${this.materialDoubleSided ? '|2s' : ''}`;
 
-    const pipelines = this.targetPipelines();
+    const pipelines = blend ? this.blendedPipelines(lands) : this.targetPipelines();
     let pipeline = pipelines.peek(key);
     if (pipeline === undefined) {
       const present = this.meshPresent.get(base);
@@ -8640,7 +8948,7 @@ export class WebGPURenderer implements RendererApi {
         this.variant,
         key,
         present,
-        blend,
+        adds ? 'additive' : blend,
         false,
         false,
         depthWrite,
@@ -8653,7 +8961,9 @@ export class WebGPURenderer implements RendererApi {
 
     const material = this.materialSlotForDraw();
     if (material !== null) {
-      const command = this.recordDraw(0, this.currentTarget());
+      const command = blend
+        ? this.recordBlended(0, lands)
+        : this.recordDraw(0, this.currentTarget());
       if (command !== null) {
         command.pipeline = pipeline;
         command.bindGroup = this.flatBindGroupFor(false, false, null);
@@ -8664,12 +8974,13 @@ export class WebGPURenderer implements RendererApi {
         for (; index < mesh.vertexBuffers.length; index++) {
           command.vertexBuffers[index] = mesh.vertexBuffers[index] as GPUBuffer;
         }
-        command.vertexBuffers[index] = batch.buffer;
+        command.vertexBuffers[index] = instanceBuffer;
         command.vertexCount = mesh.vertexBuffers.length + 1;
         command.indexBuffer = mesh.indexBuffer;
         command.indexed = true;
         command.count = mesh.indexCount;
         command.instances = count;
+        command.indirect = cut === null ? null : cut.args;
       } else {
         const pass = this.openPass();
         if (pass === null) return;
@@ -8679,9 +8990,10 @@ export class WebGPURenderer implements RendererApi {
         for (; index < mesh.vertexBuffers.length; index++) {
           pass.setVertexBuffer(index, mesh.vertexBuffers[index] as GPUBuffer);
         }
-        pass.setVertexBuffer(index, batch.buffer);
+        pass.setVertexBuffer(index, instanceBuffer);
         pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
-        pass.drawIndexed(mesh.indexCount, count);
+        if (cut === null) pass.drawIndexed(mesh.indexCount, count);
+        else pass.drawIndexedIndirect(cut.args, 0);
       }
     }
     /* Back to the defaults, unconditionally and for the reason `drawMesh` gives at length: this
@@ -8692,11 +9004,12 @@ export class WebGPURenderer implements RendererApi {
     }
     if (unlitOrUnfogged) {
       this.perFrameInts[this.materialField('uLightingEnabled')] = 1;
-      this.perFrameInts[this.materialField('uFogEnabled')] = 1;
+      this.perFrameInts[this.materialField('uFogEnabled')] = FOG_RECEDE;
     }
     if (!toneMapped) {
       this.perFrameInts[this.materialField('uOutputTransform')] = this.gradeCode();
     }
+    if (refracting) this.releaseSeeThrough();
     if (own) this.materials.dirty();
   }
 
@@ -8890,6 +9203,8 @@ export class WebGPURenderer implements RendererApi {
     this.lightViewProj.set(lightViewProj as Float32Array);
     mat4.multiply(this.correctedLightViewProj, SHADOW_CLIP_CORRECTION, lightViewProj);
     this.shadowLayerIsPeel = peel;
+    this.shadowLayerIsDynamic = dynamic;
+    this.glassCasters.clear();
     /*
      * A frame's peel is only as good as the pass that fills it, and the static layer is the one
      * that opens first.
@@ -8997,48 +9312,387 @@ export class WebGPURenderer implements RendererApi {
   }
 
   /** Close the shadow pass and submit it, so the frame can sample what it wrote. */
-  endShadowPass(): void {
-    if (this.surface.lost || this.shadowPass === null || this.shadowEncoder === null) return;
-    this.shadowDraws.flush();
-    this.scatterDepthDraws.flush();
-    this.shadowPass.end();
-    this.surface.device.queue.submit([this.shadowEncoder.finish()]);
-    /* The map now holds a rendered peel rather than whatever it was created with. */
-    if (this.shadowLayerIsPeel) this.peelFilled = true;
-    this.shadowLayerIsPeel = false;
-    this.shadowPass = null;
-    this.shadowEncoder = null;
-    this.gpuTimer.end();
+  /**
+   * Add the sun's two glass layers, once, carrying every layer it holds across on `encoder`.
+   *
+   * **Copied rather than re-baked**, for the reason `SunShadowArray.growForGlass` gives: the static
+   * map is the consumer's to bake and may be baked once, and the glass that grows the texture
+   * arrives in the very pass that drew it. Every view of the old texture is stale afterwards, so
+   * every group holding one is rebuilt here — the lit pass's, the volumes', the medium's and the
+   * peel's — and the old texture is destroyed only once this encoder is submitted.
+   */
+  private growSunForGlass(encoder: GPUCommandEncoder): void {
+    if (this.sunGlassViews !== null) return;
+    const device = this.surface.device;
+    const size = this.quality.directionalShadowMapSize;
+    const maps = this.sunLayerCount;
+    /* The glass layers at their fixed places after the three maps: see `SUN_GLASS_STATIC_LAYER`. */
+    const layers = SUN_GLASS_MOVING_LAYER + 1;
+    const old = this.sunShadowTexture;
+    const texture = device.createTexture({
+      label: 'shadow.sun',
+      size: [size, size, layers],
+      format: SHADOW_FORMAT,
+      usage: SUN_USAGE,
+    });
+    for (let layer = 0; layer < maps; layer++) {
+      encoder.copyTextureToTexture(
+        { texture: old, origin: { x: 0, y: 0, z: layer } },
+        { texture, origin: { x: 0, y: 0, z: layer } },
+        [size, size, 1],
+      );
+    }
+    this.retiredSunTexture = old;
+    this.sunShadowTexture = texture;
+    this.sunLayerCount = layers;
+    const views = sunViewsOf(texture, maps, layers);
+    this.sunArrayView = views.array;
+    this.sunStaticArrayView = views.staticArray;
+    this.shadowView = views.static;
+    this.dynamicView = views.dynamic;
+    this.peelView = views.peel;
+    this.sunGlassViews = views.glass;
+    /* Both glass layers born at the far plane: nothing is nearer the sun than a pane not drawn. */
+    for (const view of views.glass ?? []) {
+      encoder
+        .beginRenderPass({
+          label: 'shadow.glass.clear',
+          colorAttachments: [],
+          depthStencilAttachment: {
+            view,
+            depthClearValue: 1,
+            depthLoadOp: 'clear',
+            depthStoreOp: 'store',
+          },
+        })
+        .end();
+    }
+    this.rebuildSunGroups();
   }
 
-  /* -- Point shadows ------------------------------------------------------------------ */
+  /** Every group that holds a view of the sun's texture, rebuilt after it has been replaced. */
+  private rebuildSunGroups(): void {
+    const device = this.surface.device;
+    const peelUniforms = this.shadowPeelPassUniforms;
+    const peelSampler = this.shadowPeelSampler;
+    if (peelUniforms !== null && peelSampler !== null) {
+      this.shadowPeelBindGroup = createDepthBindGroup(
+        device,
+        this.shadowLayout,
+        this.shadowDraws.buffer,
+        peelUniforms,
+        this.sunStaticArrayView,
+        peelSampler,
+      );
+      this.scatterDepthPeelBindGroup = createScatterDepthBindGroup(
+        device,
+        this.scatterDepthLayout,
+        this.scatterDepthDraws.buffer,
+        { binding: DEPTH_FRAG_BINDING, buffer: peelUniforms, size: DEPTH_FRAG_SIZE },
+        DEPTH_PREVIOUS_BINDING,
+        this.sunStaticArrayView,
+        peelSampler,
+      );
+    }
+    this.cutoutPeelGroups.clear();
+    this.rebuildFlatGroupsForNewRings();
+    this.lightVolumeBindGroup = this.buildLightVolumeBindGroup();
+    this.mediumBindGroup = this.buildMediumBindGroup();
+  }
+
+  /** The sun's tint target, made the first time glass casts and born clear on `encoder`. */
+  private ensureSunTint(encoder: GPUCommandEncoder): SunTintTarget {
+    if (this.sunTint !== null) return this.sunTint;
+    const size = this.quality.directionalShadowMapSize;
+    const edge = this.quality.glassShadows === 'half' ? Math.max(1, size >> 1) : size;
+    const device = this.surface.device;
+    const texture = device.createTexture({
+      label: 'shadow.sunTint',
+      size: [edge, edge, 2],
+      format: 'rgba8unorm',
+      mipLevelCount: Math.floor(Math.log2(edge)) + 1,
+      usage: 0x10 | 0x4, // RENDER_ATTACHMENT | TEXTURE_BINDING
+    });
+    const layer = (index: number): GPUTextureView =>
+      texture.createView({
+        dimension: '2d',
+        baseArrayLayer: index,
+        arrayLayerCount: 1,
+        baseMipLevel: 0,
+        mipLevelCount: 1,
+      });
+    const mips = (index: number): SnapshotMips =>
+      new SnapshotMips(device, this.pipelines, texture, 'rgba8unorm', index, 'shadow.tint.mips');
+    const target: SunTintTarget = {
+      texture,
+      layers: [layer(0), layer(1)],
+      array: texture.createView({ dimension: '2d-array' }),
+      mips: [mips(0), mips(1)],
+    };
+    for (const view of target.layers) {
+      encoder
+        .beginRenderPass({
+          label: 'shadow.tint.clear',
+          colorAttachments: [{ view, loadOp: 'clear', clearValue: [1, 1, 1, 1], storeOp: 'store' }],
+        })
+        .end();
+    }
+    this.sunTint = target;
+    this.rebuildFlatGroupsForNewRings();
+    return target;
+  }
 
   /**
-   * The pool, or null where the profile switched cube shadows off.
+   * Draw the pass's glass twice: where the nearest pane is, and what the panes let through.
    *
-   * `PointShadowSystem` over `GpuPointShadowMap`: the pooling, the staleness and the crossfade
-   * are the same code the WebGL2 path runs, and only the cubemap is this backend's. See
-   * `PointShadowSource`.
+   * After the opaque casters, on the pass's own encoder. A layer that has held glass is redrawn
+   * even when this pass offered none, so glass that has gone takes its colour with it.
    */
-  private readonly pointShadows: PointShadowSystem<GpuPointShadowMap> | null;
-  /** A world's casting rectangles, on layers above the pool in the same array. See `renderer.ts`. */
-  private readonly areaShadows: AreaShadowSet<GpuPointShadowMap> | null;
-  private readonly resolvedAreaShadows = createResolvedAreaShadows(MAX_AREA_LIGHTS);
-  private readonly areaBakeScratch = createBakeScratch(MAX_AREA_LIGHTS);
-  private warnedAreaShadowRange = false;
-  private warnedAreaShadowsOff = false;
-  private warnedAreaShadowLayers = false;
-  /** How many point lights the array was last sized for; see the other backend's copy. */
-  private preparedPointLightCount = 0;
-  /** See `renderer.ts`: built when a world reports its lights, and rebuilt only to grow. */
-  private pointShadowArray: GpuPointShadowArray | null = null;
-  private readonly bakeScratch = createBakeScratch(POINT_SHADOW_POOL);
-  /** Said once per renderer; see `updatePointShadows`. */
-  private warnedNoPointShadowArray = false;
-  /** Said once, for the retired ambient dial. */
-  private warnedEnvironmentAmbient = false;
-  private readonly castingWorldIndices = new Int32Array(POINT_SHADOW_POOL).fill(-1);
-  private readonly resolvedPointShadows = createResolvedPointShadows(MAX_POINT_LIGHTS);
+  private flushSunGlass(encoder: GPUCommandEncoder, which: 'static' | 'dynamic'): void {
+    const list = this.glassCasters;
+    if (this.quality.glassShadows === 'off') return;
+    if (list.count === 0 && this.sunGlassViews === null) return;
+    if (list.count > 0) this.growSunForGlass(encoder);
+    const glassViews = this.sunGlassViews;
+    if (glassViews === null) return;
+
+    /* Where the nearest pane is: the depth pipelines, through the sink every opaque caster took. */
+    this.shadowPass = encoder.beginRenderPass({
+      label: 'shadow.glass',
+      colorAttachments: [],
+      depthStencilAttachment: {
+        view: glassViews[which === 'static' ? 0 : 1],
+        depthClearValue: 1,
+        depthLoadOp: 'clear',
+        depthStoreOp: 'store',
+      },
+    });
+    this.drawingGlassDepth = true;
+    list.replay(this.glassDepthSink);
+    this.drawingGlassDepth = false;
+    this.shadowPass.end();
+    this.shadowPass = null;
+
+    /* What the panes let through, every one on a ray, multiplied. */
+    const target = this.ensureSunTint(encoder);
+    const tint = (this.glassTint ??= new GpuGlassTint(this.surface.device));
+    tint.frag.reset();
+    /* The direction the light travels, off the light matrix's depth row; the sign is immaterial,
+       since the tint takes the cosine absolutely, and w 0 says it is a direction. */
+    const m = this.correctedLightViewProj;
+    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;
+    this.tintPass = encoder.beginRenderPass({
+      label: 'shadow.tint',
+      colorAttachments: [
+        {
+          view: target.layers[which === 'static' ? 0 : 1],
+          loadOp: 'clear',
+          clearValue: [1, 1, 1, 1],
+          storeOp: 'store',
+        },
+      ],
+    });
+    list.replay(this.glassTintSink);
+    this.tintPass.end();
+    this.tintPass = null;
+    tint.frag.flush();
+    /* The chain frost reads, for the layer just drawn. */
+    target.mips[which === 'static' ? 0 : 1].record(encoder);
+  }
+
+  /** The glass list into a 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),
+  };
+
+  /**
+   * The glass list into a tint layer, through the tint pipelines, **culling nothing**: every pane on
+   * a ray counts, whichever way it faces. See the other backend's `glassTintSink`.
+   */
+  private readonly glassTintSink: GlassReplaySink = {
+    mesh: (mesh, model, material, glass) => {
+      const pass = this.tintPass;
+      const tint = this.glassTint;
+      if (pass === null || tint === null) return;
+      const geometry = mesh as GpuMesh & { key?: string };
+      if (geometry.vertexBuffers === undefined) return;
+      const cutout = cutoutOf(material);
+      const albedo = cutout === null ? null : (cutout.albedo as unknown as GpuSurfaceTexture);
+      const slot = this.shadowDraws.allocate();
+      const pane = tint.frag.allocate();
+      if (slot === null || pane === null) return;
+      this.shadowDraws.writeFloats(
+        slot,
+        DEPTH_VERT_FIELDS.uLightViewProj.offset,
+        this.correctedLightViewProj,
+      );
+      this.shadowDraws.writeFloats(slot, DEPTH_VERT_FIELDS.uModel.offset, model as Float32Array);
+      this.writeShadowWind(slot);
+      if (cutout !== null) this.writeCutout(slot, cutout, DEPTH_CUTOUT_VERT_FIELDS);
+      tint.writePane(pane, glass, this.glassLight);
+      pass.setPipeline(
+        tint.pipeline(
+          this.pipelines,
+          albedo === null ? 'rigid' : 'cutout',
+          geometry.key ?? '',
+          this.presentOf(geometry),
+          'none',
+        ),
+      );
+      pass.setBindGroup(
+        0,
+        albedo === null
+          ? tint.group(this.shadowDraws.buffer)
+          : tint.cutoutGroup(this.shadowDraws.buffer, albedo.view, albedo.sampler),
+        [slot, pane],
+      );
+      for (let index = 0; index < geometry.vertexBuffers.length; index++) {
+        pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
+      }
+      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.drawIndexed(geometry.indexCount);
+    },
+    instanced: (batch, data, material, glass) => {
+      const pass = this.tintPass;
+      const tint = this.glassTint;
+      if (pass === null || tint === null) return;
+      const gpuBatch = batch as GpuInstancedBatch;
+      const geometry = gpuBatch.mesh as GpuMesh & { key?: string };
+      if (geometry.vertexBuffers === undefined) return;
+      const count = Math.min(data.count, gpuBatch.capacity);
+      if (count === 0) return;
+      const cutout = cutoutOf(material);
+      const albedo = cutout === null ? null : (cutout.albedo as unknown as GpuSurfaceTexture);
+      const slot = this.shadowDraws.allocate();
+      const pane = tint.frag.allocate();
+      if (slot === null || pane === null) return;
+      this.shadowDraws.writeFloats(
+        slot,
+        DEPTH_VERT_FIELDS.uLightViewProj.offset,
+        this.correctedLightViewProj,
+      );
+      if (cutout !== null) this.writeCutout(slot, cutout, DEPTH_INSTANCED_CUTOUT_VERT_FIELDS);
+      tint.writePane(pane, glass, this.glassLight);
+      pass.setPipeline(
+        tint.pipeline(
+          this.pipelines,
+          albedo === null ? 'instanced' : 'instancedCutout',
+          geometry.key ?? '',
+          this.presentOf(geometry),
+          'none',
+        ),
+      );
+      pass.setBindGroup(
+        0,
+        albedo === null
+          ? tint.group(this.shadowDraws.buffer)
+          : tint.cutoutGroup(this.shadowDraws.buffer, albedo.view, albedo.sampler),
+        [slot, pane],
+      );
+      let index = 0;
+      for (; index < geometry.vertexBuffers.length; index++) {
+        pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
+      }
+      pass.setVertexBuffer(index, gpuBatch.buffer);
+      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.drawIndexed(geometry.indexCount, count);
+    },
+    skinnedMesh: (mesh, model, palette, _material, glass) => {
+      const pass = this.tintPass;
+      const tint = this.glassTint;
+      if (pass === null || tint === null) return;
+      const geometry = mesh as GpuMesh & { key?: string };
+      if (geometry.vertexBuffers === undefined) return;
+      const paletteSlot = this.skinPalettes.take(this.surface.device, palette);
+      const view = paletteSlot === null ? null : this.skinPalettes.view(paletteSlot);
+      if (view === null) return;
+      const slot = this.shadowDraws.allocate();
+      const pane = tint.frag.allocate();
+      if (slot === null || pane === null) return;
+      this.shadowDraws.writeFloats(
+        slot,
+        DEPTH_VERT_FIELDS.uLightViewProj.offset,
+        this.correctedLightViewProj,
+      );
+      this.shadowDraws.writeFloats(slot, DEPTH_VERT_FIELDS.uModel.offset, model as Float32Array);
+      this.writeShadowWind(slot);
+      tint.writePane(pane, glass, this.glassLight);
+      pass.setPipeline(
+        tint.pipeline(
+          this.pipelines,
+          'skinned',
+          geometry.key ?? '',
+          this.presentOf(geometry),
+          'none',
+        ),
+      );
+      pass.setBindGroup(0, tint.skinnedGroup(this.shadowDraws.buffer, view), [slot, pane]);
+      for (let index = 0; index < geometry.vertexBuffers.length; index++) {
+        pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
+      }
+      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.drawIndexed(geometry.indexCount);
+    },
+  };
+
+  endShadowPass(): void {
+    if (this.surface.lost || this.shadowPass === null || this.shadowEncoder === null) return;
+    this.shadowPass.end();
+    /* The peel keeps no glass: its layer is the second opaque occluder and nothing else. */
+    if (!this.shadowLayerIsPeel) {
+      this.flushSunGlass(this.shadowEncoder, this.shadowLayerIsDynamic ? 'dynamic' : 'static');
+    }
+    this.shadowDraws.flush();
+    this.scatterDepthDraws.flush();
+    this.surface.device.queue.submit([this.shadowEncoder.finish()]);
+    /* A growth's old texture, copied out of by what was just submitted and needed no longer. */
+    this.retiredSunTexture?.destroy();
+    this.retiredSunTexture = null;
+    /* The map now holds a rendered peel rather than whatever it was created with. */
+    if (this.shadowLayerIsPeel) this.peelFilled = true;
+    this.shadowLayerIsPeel = false;
+    this.shadowPass = null;
+    this.shadowEncoder = null;
+    this.gpuTimer.end();
+  }
+
+  /* -- Point shadows ------------------------------------------------------------------ */
+
+  /**
+   * The pool, or null where the profile switched cube shadows off.
+   *
+   * `PointShadowSystem` over `GpuPointShadowMap`: the pooling, the staleness and the crossfade
+   * are the same code the WebGL2 path runs, and only the cubemap is this backend's. See
+   * `PointShadowSource`.
+   */
+  private readonly pointShadows: PointShadowSystem<GpuPointShadowMap> | null;
+  /** A world's casting rectangles, on layers above the pool in the same array. See `renderer.ts`. */
+  private readonly areaShadows: AreaShadowSet<GpuPointShadowMap> | null;
+  private readonly resolvedAreaShadows = createResolvedAreaShadows(MAX_AREA_LIGHTS);
+  private readonly areaBakeScratch = createBakeScratch(MAX_AREA_LIGHTS);
+  private warnedAreaShadowRange = false;
+  private warnedAreaShadowsOff = false;
+  private warnedAreaShadowLayers = false;
+  /** How many point lights the array was last sized for; see the other backend's copy. */
+  private preparedPointLightCount = 0;
+  /** See `renderer.ts`: built when a world reports its lights, and rebuilt only to grow. */
+  private pointShadowArray: GpuPointShadowArray | null = null;
+  /** The array glass replaced, destroyed once the round that copied out of it is submitted. */
+  private retiredPointTexture: GPUTexture | null = null;
+  private readonly bakeScratch = createBakeScratch(POINT_SHADOW_POOL);
+  /** Said once per renderer; see `updatePointShadows`. */
+  private warnedNoPointShadowArray = false;
+  /** Said once, for the retired ambient dial. */
+  private warnedEnvironmentAmbient = false;
+  private readonly castingWorldIndices = new Int32Array(POINT_SHADOW_POOL).fill(-1);
+  private readonly resolvedPointShadows = createResolvedPointShadows(MAX_POINT_LIGHTS);
   /** One face's view-projection, rebuilt per face rather than allocated. */
   private readonly faceViewProj = mat4.create();
   /** The corrected copy the vertex stage is handed. See `SHADOW_CLIP_CORRECTION`. */
@@ -9217,6 +9871,7 @@ export class WebGPURenderer implements RendererApi {
      */
     this.shadowDraws.reset();
     this.scatterDepthDraws.reset();
+    this.glassTint?.frag.reset();
     this.shadowEncoder = this.surface.device.createCommandEncoder({ label: 'pointShadow' });
     /* A cube face is a shadow pass like any other, and the courtyard is where it matters: six of
        them a frame is the difference this slot exists to make visible. */
@@ -9244,7 +9899,7 @@ export class WebGPURenderer implements RendererApi {
             light.z,
             light.radius,
             (view, viewProj) => this.bakeFace(view, viewProj, casters as ShadowCasters),
-            (layer, face, far, near) => this.resolveFace(layer, face, far, near),
+            (layer, face, far, near, x, y, z) => this.resolveFace(layer, face, far, near, x, y, z),
             this.faceViewProj,
             light.shadowNear,
             light.sourceRadius,
@@ -9258,10 +9913,13 @@ export class WebGPURenderer implements RendererApi {
        * encoder, a second submit and a second `shadows` timer slot for work that is the same work.
        */
       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?.glassTint?.recordMips(this.shadowEncoder);
     } finally {
       this.depthCullMode = 'back';
       this.shadowDraws.flush();
       this.scatterDepthDraws.flush();
+      this.glassTint?.frag.flush();
       /*
        * **Before the submit, and that ordering is the whole point of the ring.** A write to the
        * queue lands ahead of the encoder's commands whenever it is issued, so uploading per
@@ -9273,6 +9931,9 @@ export class WebGPURenderer implements RendererApi {
       this.shadowEncoder = null;
       this.shadowPass = null;
       this.gpuTimer.end();
+      /* An interleaving's old array, copied out of by what was just submitted. */
+      this.retiredPointTexture?.destroy();
+      this.retiredPointTexture = null;
     }
 
     /*
@@ -9283,6 +9944,10 @@ export class WebGPURenderer implements RendererApi {
      * written every frame regardless.
      */
     pool.resolve(this.resolvedPointShadows);
+    /* As the array stores them: 2L once glass has interleaved it. See `strideLayers`. */
+    const stride = this.pointShadowArray.stride;
+    strideLayers(this.resolvedPointShadows.layers, stride);
+    strideLayers(this.resolvedPointShadows.liveLayers, stride);
   }
 
   /**
@@ -9327,7 +9992,8 @@ export class WebGPURenderer implements RendererApi {
           light.z,
           range,
           (view, viewProj) => this.bakeFace(view, viewProj, casters as ShadowCasters),
-          (layer, face, far, mapNear) => this.resolveFace(layer, face, far, mapNear),
+          (layer, face, far, mapNear, x, y, z) =>
+            this.resolveFace(layer, face, far, mapNear, x, y, z),
           this.faceViewProj,
           near,
           /* The filter reads the emitter's size, never the bake. See `renderer.ts`'s copy. */
@@ -9336,6 +10002,9 @@ export class WebGPURenderer implements RendererApi {
         ),
     );
     set.resolve(areaLights, this.resolvedAreaShadows);
+    const stride = this.pointShadowArray?.stride ?? 1;
+    strideLayers(this.resolvedAreaShadows.layer, stride);
+    strideLayers(this.resolvedAreaShadows.liveLayer, stride);
   }
 
   /**
@@ -9363,9 +10032,27 @@ export class WebGPURenderer implements RendererApi {
         depthStoreOp: 'store',
       },
     });
+    /* A face is an enumeration of its own: its glass is its own. */
+    this.glassCasters.clear();
     casters(this.casterSink);
     this.shadowPass.end();
     this.shadowPass = null;
+    /*
+     * The first face to offer glass interleaves the array, before its opaque depth is resolved:
+     * `PointShadowArray.growForGlass`. The lit pass's groups hold the old array's view, so they
+     * are rebuilt, and the old texture goes once this round's encoder — which copies out of it —
+     * is submitted.
+     */
+    const array = this.pointShadowArray;
+    if (array !== null && this.glassCasters.count > 0 && this.quality.glassShadows !== 'off') {
+      const tintEdge =
+        this.quality.glassShadows === 'half' ? OCTAHEDRAL_EDGE >> 1 : OCTAHEDRAL_EDGE;
+      const old = array.growForGlass(encoder, tintEdge, this.pipelines);
+      if (old !== null) {
+        this.retiredPointTexture = old;
+        this.rebuildFlatBindGroup();
+      }
+    }
   }
 
   /**
@@ -9375,11 +10062,70 @@ export class WebGPURenderer implements RendererApi {
    * serve every light: the face is consumed before the next one is drawn. See
    * `pointShadowArray.ts` for why the regions are disjoint.
    */
-  private resolveFace(layer: number, face: number, far: number, near: number): void {
+  private resolveFace(
+    layer: number,
+    face: number,
+    far: number,
+    near: number,
+    x: number,
+    y: number,
+    z: number,
+  ): void {
     const encoder = this.shadowEncoder;
     const array = this.pointShadowArray;
     if (encoder === null || array === null) return;
     array.resolve(encoder, layer, face, far, near);
+    const tintTarget = array.glassTint;
+    if (tintTarget === null || this.quality.glassShadows === 'off') return;
+    /*
+     * The face's glass, twice, as `PointShadowMap.bakeGlassFace` draws it on the other backend. A
+     * face that offers none still clears a region a previous owner's glass is in, from scratches
+     * cleared and not drawn into, because a pool slot changes hands with its layer.
+     */
+    const offered = this.glassCasters.count > 0;
+    if (!offered && !tintTarget.held(layer, face)) return;
+    this.shadowPass = encoder.beginRenderPass({
+      label: 'pointShadow.glass',
+      colorAttachments: [],
+      depthStencilAttachment: {
+        view: array.scratchView,
+        depthClearValue: 1,
+        depthLoadOp: 'clear',
+        depthStoreOp: 'store',
+      },
+    });
+    if (offered) {
+      this.drawingGlassDepth = true;
+      this.glassCasters.replay(this.glassDepthSink);
+      this.drawingGlassDepth = false;
+    }
+    this.shadowPass.end();
+    this.shadowPass = null;
+    array.resolveGlass(encoder, layer, face, far, near);
+
+    this.tintPass = encoder.beginRenderPass({
+      label: 'pointShadow.tint',
+      colorAttachments: [
+        {
+          view: tintTarget.scratchView,
+          loadOp: 'clear',
+          clearValue: [1, 1, 1, 1],
+          storeOp: 'store',
+        },
+      ],
+    });
+    if (offered) {
+      this.glassTint ??= new GpuGlassTint(this.surface.device);
+      /* A place, w 1: each pane's angle to the lamp comes 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);
+    }
+    this.tintPass.end();
+    this.tintPass = null;
+    tintTarget.resolve(encoder, layer, face, offered);
   }
 
   private buildFlatBindGroup(): GPUBindGroup {
@@ -9739,8 +10485,9 @@ export class WebGPURenderer implements RendererApi {
      * drawn over a reflective floor rather than under it.
      */
     this.runReflections(encoder);
-    /* The translucent set, into its two buffers and back over the scene. */
-    this.runOit(encoder);
+    /* The translucent set, into its two buffers and back over the scene — after the upscale instead
+       while reconstructing, where `runLate` draws the rest of the blended frame. */
+    if (!this.reconstructing) this.runOit(encoder);
     /*
      * **The medium, after everything that draws and before anything that composites.**
      *
@@ -9761,6 +10508,8 @@ export class WebGPURenderer implements RendererApi {
      */
     this.runMotion(encoder);
     this.runReconstruction(encoder);
+    this.runLate(encoder);
+    if (this.reconstructing) this.runOit(encoder);
     const aoStrength = this.quality.ambientOcclusion;
     if (aoStrength > 0 && this.frameProjection !== null) this.runOcclusion(encoder);
     const bloomStrength = this.quality.bloom * this.bloomScale;
@@ -9793,6 +10542,23 @@ export class WebGPURenderer implements RendererApi {
     f[at('uMotionStrength')] = motionStrength;
     f[at('uMotionMax')] = MOTION_BLUR_MAX_UV;
     f[at('uAoStrength')] = this.frameProjection === null ? 0 : aoStrength;
+    /*
+     * The occlusion read where this frame's jitter put it (`uAoOffset`): measured from the jittered
+     * depth and applied to a picture the jitter has been taken out of. A texel stands at its index
+     * plus a half less the jitter, so the occlusion of a point is a jitter further on. The
+     * reconstruction's y is given upward and negated into the corrected matrix, which this pass's
+     * rows run down from; the temporal resolve's goes in as it is, and arrives as it is.
+     */
+    f[at('uAoOffset')] = this.reconstructing
+      ? (this.reconJitter[0] as number) / this.renderWidth
+      : this.temporalJittering
+        ? this.temporalJitterX / this.renderWidth
+        : 0;
+    f[at('uAoOffset') + 1] = this.reconstructing
+      ? -(this.reconJitter[1] as number) / this.renderHeight
+      : this.temporalJittering
+        ? this.temporalJitterY / this.renderHeight
+        : 0;
     f[at('uDofStrength')] = dofStrength;
     if (dofStrength > 0 && this.frameProjection !== null) {
       mat4.invert(this.dofInvProjection, this.frameProjection);
@@ -9952,6 +10718,8 @@ export class WebGPURenderer implements RendererApi {
 
     for (const dead of [
       ...this.reconHistories,
+      ...this.reconFlickers,
+      ...this.reconSwings,
       this.reconShown,
       this.reconMotion,
       this.reconPreviousDepth,
@@ -9960,6 +10728,10 @@ export class WebGPURenderer implements RendererApi {
     }
     this.reconHistories = [null, null];
     this.reconHistoryViews = [null, null];
+    this.reconFlickers = [null, null];
+    this.reconFlickerViews = [null, null];
+    this.reconSwings = [null, null];
+    this.reconSwingViews = [null, null];
     this.reconShown = null;
     this.reconShownView = null;
     this.reconMotion = null;
@@ -9984,24 +10756,44 @@ export class WebGPURenderer implements RendererApi {
       });
       this.reconHistories[i] = texture;
       this.reconHistoryViews[i] = texture.createView();
+      const record = device.createTexture({
+        label: `recon.flicker${String(i)}`,
+        size: [outputWidth, outputHeight],
+        format: RECON_HISTORY_FORMAT,
+        usage: HISTORY_USAGE,
+      });
+      this.reconFlickers[i] = record;
+      this.reconFlickerViews[i] = record.createView();
+      const swing = device.createTexture({
+        label: `recon.swing${String(i)}`,
+        size: [outputWidth, outputHeight],
+        format: 'r32float',
+        usage: HISTORY_USAGE,
+      });
+      this.reconSwings[i] = swing;
+      this.reconSwingViews[i] = swing.createView();
     }
     this.reconShown = device.createTexture({
       label: 'recon.shown',
       size: [outputWidth, outputHeight],
       format: RECON_HISTORY_FORMAT,
-      usage: HISTORY_USAGE,
+      /* An attachment too, because the blended draws land on it after the upscale, and a copy
+         source for the panes that refract it. See `runLate`. */
+      usage: HISTORY_USAGE | 0x10 | 0x1, // RENDER_ATTACHMENT | COPY_SRC
     });
     this.reconShownView = this.reconShown.createView();
     this.reconMotion = device.createTexture({
       label: 'recon.motion',
       size: [renderWidth, renderHeight],
       format: RECON_HISTORY_FORMAT,
-      /* An attachment as well, because the pass that will write it is a draw. Nothing writes it
-         today and nothing needs to clear it either: WebGPU zero-initialises a new texture, and
-         a zero in the fourth channel is what tells the resolve to derive the camera's motion. */
+      /* An attachment as well, because the pass that writes it is a draw. It is cleared every
+         frame by that pass, and a zero in the fourth channel is what tells the resolve to derive
+         the camera's motion. */
       usage: 0x4 | 0x10,
     });
     this.reconMotionView = this.reconMotion.createView();
+    this.motionPass ??= new MotionPass(device);
+    this.latePass ??= new LatePass(device);
     this.reconPreviousDepth = device.createTexture({
       label: 'recon.previousDepth',
       size: [renderWidth, renderHeight],
@@ -10056,6 +10848,26 @@ export class WebGPURenderer implements RendererApi {
             viewDimension: '2d' as const,
           },
         },
+        sampled(8, 'float'),
+        {
+          binding: 9,
+          visibility: COMPUTE,
+          storageTexture: {
+            access: 'write-only' as const,
+            format: RECON_HISTORY_FORMAT,
+            viewDimension: '2d' as const,
+          },
+        },
+        sampled(10, 'unfilterable-float'),
+        {
+          binding: 11,
+          visibility: COMPUTE,
+          storageTexture: {
+            access: 'write-only' as const,
+            format: 'r32float' as const,
+            viewDimension: '2d' as const,
+          },
+        },
       ],
     });
     const module = device.createShaderModule({ label: 'recon.resolve', code: reconResolveWgsl() });
@@ -10087,7 +10899,15 @@ export class WebGPURenderer implements RendererApi {
     if (this.reconMotionView === null || this.reconPreviousDepthView === null) return;
     if (this.reconShownView === null) return;
     const { device } = this.surface;
-    const build = (label: string, history: GPUTextureView, target: GPUTextureView) =>
+    const build = (
+      label: string,
+      history: GPUTextureView,
+      target: GPUTextureView,
+      records: GPUTextureView,
+      nextRecords: GPUTextureView,
+      swings: GPUTextureView,
+      nextSwings: GPUTextureView,
+    ) =>
       device.createBindGroup({
         label,
         layout,
@@ -10100,242 +10920,298 @@ export class WebGPURenderer implements RendererApi {
           { binding: 5, resource: this.postSampler },
           { binding: 6, resource: { buffer: params } },
           { binding: 7, resource: target },
+          { binding: 8, resource: records },
+          { binding: 9, resource: nextRecords },
+          { binding: 10, resource: swings },
+          { binding: 11, resource: nextSwings },
         ],
       });
     for (let write = 0; write < 2; write += 1) {
       const read = this.reconHistoryViews[1 - write];
       const target = this.reconHistoryViews[write];
-      if (read === null || target === null) continue;
-      this.reconGroups[write] = build(`recon.resolve${String(write)}`, read, target);
+      const records = this.reconFlickerViews[1 - write];
+      const nextRecords = this.reconFlickerViews[write];
+      const swings = this.reconSwingViews[1 - write];
+      const nextSwings = this.reconSwingViews[write];
+      if (read === null || target === null || records === null || nextRecords === null) continue;
+      if (swings === null || nextSwings === null) continue;
+      this.reconGroups[write] = build(
+        `recon.resolve${String(write)}`,
+        read,
+        target,
+        records,
+        nextRecords,
+        swings,
+        nextSwings,
+      );
+      /* The sharpen reads no record, but one layout serves both dispatches: the same pair, so no
+         texture is both read and written. */
       this.reconSharpenGroups[write] = build(
         `recon.sharpen${String(write)}`,
         target,
         this.reconShownView,
+        records,
+        nextRecords,
+        swings,
+        nextSwings,
       );
     }
     /* The composite's own group, over the resolved picture instead of the scene target. */
     this.reconRushGroup = this.buildRushBindGroup('recon.rushBindGroup', this.reconShownView);
     /* And the scene's, because `ensureComposite` built it before this one existed. */
     this.rebuildRushBindGroup();
+    /* And the bloom's, which blooms the resolved picture: see `rebuildBloomGroups`. */
+    this.rebuildBloomGroups();
+  }
+
+  /** This frame's jitter and temporal frame, decided where its scene camera is bound. See `bindMeshPass`. */
+  private jitterFrame(): void {
+    this.reconstructing = this.reconstructionWanted && !this.reflectionPassActive;
+    if (this.quality.reconstruction > 0 && this.samples > 1 && !this.reconMultisampleSaid) {
+      this.reconMultisampleSaid = true;
+      console.warn(RECONSTRUCTION_MULTISAMPLE_REFUSAL);
+    }
+    if (this.reconstructing) {
+      /*
+       * The offset `settleReconJitter` chose for the frame at `beginFrame`, applied here and not
+       * advanced here: a frame binding its mesh pass twice is one frame of the sequence.
+       *
+       * **The y offset is negated on the way in, and that is not a preference.** This shifts the
+       * *corrected* matrix, whose y `CLIP_CORRECTION` has already negated so that the negation
+       * every generated vertex stage ends with cancels out — §3 row 56. So an offset added here
+       * arrives on screen with its sign reversed, while x, which nothing negates, arrives as
+       * given. The temporal resolve cannot see this because its shader never reads the offset; the
+       * reconstruction reads it at every texel it unprojects, and a sign error there moves every
+       * sample two jitters away from where the depth says it is.
+       */
+      this.viewProj = jitterProjection(
+        this.jitteredViewProj,
+        this.correctedViewProj,
+        this.reconJitter[0] as number,
+        -(this.reconJitter[1] as number),
+        this.renderWidth,
+        this.renderHeight,
+      ) as Float32Array;
+      this.temporalJittering = false;
+      this.temporalHistoryUsable = false;
+    }
+    this.temporalJittering =
+      !this.reconstructing &&
+      this.quality.temporalAa &&
+      this.quality.screenEffects &&
+      !this.reflectionPassActive;
+    if (this.temporalJittering) {
+      /* The scene's size, not the drawing buffer's: the history is a picture of the render. */
+      this.temporalHistoryUsable = this.temporalHistory.openFrame(
+        this.renderWidth,
+        this.renderHeight,
+      );
+      const [jx, jy] = jitterOffset(this.temporalHistory.frameIndex);
+      this.temporalJitterX = jx;
+      this.temporalJitterY = jy;
+      /* A jitter is half a *render* texel, which is what the sequence is spread over. */
+      this.viewProj = jitterProjection(
+        this.jitteredViewProj,
+        this.correctedViewProj,
+        jx,
+        jy,
+        this.renderWidth,
+        this.renderHeight,
+      ) as Float32Array;
+    } else if (!this.reconstructing) {
+      this.temporalHistoryUsable = false;
+      this.viewProj = this.correctedViewProj;
+    }
   }
 
   /**
-   * Remember that this mesh moved, so the motion pass can draw where it was.
+   * Whether a blended draw recorded now lands after the upscale. See `lateRouting.ts`.
    *
-   * Silent unless a reconstruction is running: a scene that always states its previous transforms
-   * — which is the right thing for a scene to do, the alternative being to know what the renderer
-   * is configured as — must cost nothing at all when nobody is going to read them.
+   * Not during the order-independent replay, which owns its pass and issues into it directly.
    */
-  private recordMotion(
-    mesh: GpuMesh,
-    model: ArrayLike<number>,
-    previousModel: ArrayLike<number>,
-  ): void {
-    if (!this.reconstructing) return;
-    const at = this.motionCount;
-    const wanted = (at + 1) * MOTION_DRAW_FLOATS;
-    if (this.motionMatrices.length < wanted) {
-      /* Doubling, so a scene settles on one allocation rather than one a draw. */
-      const grown = new Float32Array(Math.max(wanted, this.motionMatrices.length * 2, 64));
-      grown.set(this.motionMatrices);
-      this.motionMatrices = grown;
-    }
-    this.motionMatrices.set(model as ArrayLike<number> & Iterable<number>, at * MOTION_DRAW_FLOATS);
-    this.motionMatrices.set(
-      previousModel as ArrayLike<number> & Iterable<number>,
-      at * MOTION_DRAW_FLOATS + 16,
+  private drawsLate(): boolean {
+    return (
+      this.latePass !== null &&
+      this.oitEncoder === null &&
+      routesLate(
+        this.reconstructing,
+        this.reflectionPassActive,
+        this.probePassActive,
+        this.framePresented,
+      )
     );
-    this.motionMeshes[at] = mesh;
-    this.motionCount = at + 1;
   }
 
   /**
-   * The pipeline the motion pass draws with, built once.
-   *
-   * **The position buffer alone**, because that is all the shader reads and a mesh keeps one buffer
-   * an attribute — so this binds buffer zero and nothing else, whatever else the mesh carries.
+   * The command a blended draw records into: the late pool while reconstructing, the frame graph
+   * otherwise. **Late draws record whatever `quality.frameGraph` says**, since the late replay is
+   * the only moment they can land; everything else keeps the path it has.
    */
-  private buildMotionPipeline(): void {
-    if (this.motionLayout !== null) return;
-    const { device } = this.surface;
-    this.motionLayout = device.createBindGroupLayout({
-      label: 'recon.motion.layout',
-      entries: [
-        { binding: 0, visibility: 0x1, buffer: { type: 'uniform' as const } },
-        {
-          binding: 1,
-          visibility: 0x1,
-          buffer: { type: 'uniform' as const, hasDynamicOffset: true },
-        },
-      ],
-    });
-    this.motionModule = device.createShaderModule({
-      label: 'recon.motion',
-      code: RECON_MOTION_WGSL,
-    });
-    this.motionPipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [this.motionLayout],
-    });
+  private recordBlended(reads: number, lands = this.drawsLate()): DrawCommand | null {
+    const late = this.latePass;
+    if (late !== null && lands) return late.take();
+    return this.recordDraw(reads, this.currentTarget());
   }
 
-  /** The pipeline for one vertex stride, built on first sight of it. */
-  private motionPipelineFor(stride: number): GPURenderPipeline | null {
-    const held = this.motionPipelines.get(stride);
-    if (held !== undefined) return held;
-    const module = this.motionModule;
-    const layout = this.motionPipelineLayout;
-    if (module === null || layout === null) return null;
-    const { device } = this.surface;
-    const pipeline = device.createRenderPipeline({
-      label: `recon.motion.${String(stride)}`,
-      layout,
-      vertex: {
-        module,
-        entryPoint: 'motionVert',
-        /* Positions are the layout's first attribute and are never optional, so they are at offset
-           zero of every stride this can be handed. */
-        buffers: [
-          {
-            arrayStride: stride,
-            attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x3' }],
-          },
-        ],
-      },
-      fragment: { module, entryPoint: 'motionFrag', targets: [{ format: MOTION_TARGET_FORMAT }] },
-      /*
-       * **The scene's own winding**, because this draws the scene's geometry through the scene's
-       * clip transform — the product the renderer hands over already carries the negation that
-       * `naga` writes into every generated vertex stage, so the faces come out the way they did
-       * and a `cw` front face here would draw the inside of every mesh. §3 row 57.
-       */
-      primitive: { topology: 'triangle-list', cullMode: 'back' },
-      depthStencil: {
-        format: DEPTH_FORMAT,
-        /*
-         * **Tested and not written.** The frame's depth is finished; this pass only wants the
-         * pixels the scene actually kept, and `DEPTH_COMPARE_EQUAL` is the comparison that admits
-         * exactly them — the same transform on the same positions gives the same depth, which is
-         * why the rasterisation matrix is handed over whole rather than rebuilt here.
-         *
-         * **And the equality is not fragile here**, which was worth measuring rather than
-         * assuming: this driver contracts multiply-adds (§3 row 107) and two shader modules can
-         * contract a matrix product differently, so an equality across them could have admitted
-         * only some of a surface. Run with `greater-equal` instead, the ghost measured the same
-         * to the pixel — 5,942 either way — so nothing is being dropped.
-         */
-        depthWriteEnabled: false,
-        depthCompare: DEPTH_COMPARE_EQUAL,
-      },
-    });
-    this.motionPipelines.set(stride, pipeline);
-    return pipeline;
+  /** The pipelines a blended draw is built for: the reconstructed picture's while late. */
+  private blendedPipelines(lands = this.drawsLate()): PipelineCache {
+    return lands ? this.latePipelines : this.targetPipelines();
   }
 
   /**
-   * Where every mover was last frame, into the motion target.
-   *
-   * **After everything that draws and before the resolve reads it.** The frame's depth has to be
-   * finished for the equality test to mean anything, and the resolve is what consumes the result.
+   * The blended draws of a reconstructing frame, over the reconstructed picture at the output size
+   * and unjittered, against the render's depth taken up to that size. Before occlusion, bloom and
+   * the grade, so they are graded exactly as they were when they were drawn into the scene.
    */
-  private runMotion(encoder: GPUCommandEncoder): void {
-    const target = this.reconMotionView;
+  private runLate(encoder: GPUCommandEncoder): void {
+    const late = this.latePass;
+    const shown = this.reconShownView;
     const depth = this.depthView;
-    if (!this.reconstructing || target === null || depth === null) return;
-    const { device } = this.surface;
-    this.buildMotionPipeline();
-    const layout = this.motionLayout;
-    if (layout === null) return;
-
-    /*
-     * **Cleared every frame, even when nothing moved.** A texel left from last frame is a flag
-     * saying "a draw wrote this", and the resolve would take a motion belonging to a surface that
-     * is no longer there. The clear is the pass's own load operation, so an empty queue still runs
-     * it — which is why this is not returned from before the pass is opened.
-     */
+    if (!this.reconstructing || late === null || shown === null || depth === null) return;
+    const oitSet = this.oitActive && this.translucentQueue.length > 0;
+    if (late.pending === 0 && !oitSet) return;
+    const width = Math.max(1, this.surface.canvas.width);
+    const height = Math.max(1, this.surface.canvas.height);
+    /* The order-independent set tests against this depth too, so it is made for either. */
+    late.upscale(
+      encoder,
+      depth,
+      this.renderWidth,
+      this.renderHeight,
+      width,
+      height,
+      this.reconJitter[0] as number,
+      this.reconJitter[1] as number,
+    );
+    if (this.lateRefractWanted && this.refractSnapshot !== null && this.reconShown !== null) {
+      encoder.copyTextureToTexture(
+        { texture: this.reconShown },
+        { texture: this.refractSnapshot },
+        [this.refractSnapshot.width, this.refractSnapshot.height],
+      );
+      this.refractMips?.record(encoder);
+      this.refractSnapshotTaken = true;
+    }
+    this.lateRefractWanted = false;
+    if (late.pending === 0) return;
     const pass = encoder.beginRenderPass({
-      label: 'recon.motion',
+      label: 'recon.late',
       timestampWrites: this.gpuTimer.writesFor(),
-      colorAttachments: [
-        { view: target, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 0] },
-      ],
+      colorAttachments: [{ view: shown, loadOp: 'load', storeOp: 'store' }],
       depthStencilAttachment: {
-        view: depth,
+        view: late.depthView(width, height),
         depthLoadOp: 'load',
+        /* Kept: the order-independent set replays against it after this pass. */
         depthStoreOp: 'store',
-        depthReadOnly: false,
       },
     });
+    late.replay(pass, this.issueBound);
+    pass.end();
+  }
 
-    const count = this.motionCount;
-    if (count > 0) {
-      const bytes = count * MOTION_DRAW_STRIDE;
-      if (this.motionDrawCapacity < count) {
-        this.motionDrawBuffer?.destroy();
-        this.motionDrawCapacity = Math.max(count, this.motionDrawCapacity * 2, 16);
-        this.motionDrawBuffer = device.createBuffer({
-          label: 'recon.motion.draws',
-          size: this.motionDrawCapacity * MOTION_DRAW_STRIDE,
-          usage: 0x40 | 0x8, // UNIFORM | COPY_DST
-        });
-        this.motionDrawStaging = new Uint8Array(this.motionDrawCapacity * MOTION_DRAW_STRIDE);
-        this.motionGroup = null;
-      }
-      this.motionFrameBuffer ??= device.createBuffer({
-        label: 'recon.motion.frame',
-        size: MOTION_FRAME_FLOATS * 4,
-        usage: 0x40 | 0x8,
-      });
-      this.motionGroup ??= device.createBindGroup({
-        label: 'recon.motion.group',
-        layout,
-        entries: [
-          { binding: 0, resource: { buffer: this.motionFrameBuffer } },
-          {
-            binding: 1,
-            resource: { buffer: this.motionDrawBuffer as GPUBuffer, size: MOTION_DRAW_STRIDE },
-          },
-        ],
-      });
-
-      /* The scene's clip transform, with the generated stages' y negation folded in. */
-      mat4.multiply(this.motionRaster, MOTION_CLIP_FLIP, this.viewProj ?? this.correctedViewProj);
-      this.motionFrameStaging.set(this.motionRaster as Float32Array, 0);
-      this.motionFrameStaging.set(this.frameRawViewProj as Float32Array, 16);
-      this.motionFrameStaging.set(this.reconPreviousRawViewProj as Float32Array, 32);
-      device.queue.writeBuffer(this.motionFrameBuffer, 0, this.motionFrameStaging);
-
-      const draws = new Float32Array(this.motionDrawStaging.buffer);
-      for (let i = 0; i < count; i += 1) {
-        draws.set(
-          this.motionMatrices.subarray(i * MOTION_DRAW_FLOATS, (i + 1) * MOTION_DRAW_FLOATS),
-          (i * MOTION_DRAW_STRIDE) / 4,
-        );
-      }
-      device.queue.writeBuffer(
-        this.motionDrawBuffer as GPUBuffer,
-        0,
-        this.motionDrawStaging,
-        0,
-        bytes,
-      );
+  /** Whether this draw lands in the reconstructed picture. See `lateRouting.ts`. */
+  private tracksMotionNow(): boolean {
+    return tracksMotion(
+      this.reconstructing,
+      this.reflectionPassActive,
+      this.probePassActive,
+      this.framePresented,
+    );
+  }
 
-      let bound: GPURenderPipeline | null = null;
-      for (let i = 0; i < count; i += 1) {
-        const mesh = this.motionMeshes[i];
-        if (mesh === undefined) continue;
-        const pipeline = this.motionPipelineFor(mesh.vertexStride);
-        if (pipeline === null) continue;
-        if (pipeline !== bound) {
-          pass.setPipeline(pipeline);
-          bound = pipeline;
-        }
-        pass.setBindGroup(0, this.motionGroup, [i * MOTION_DRAW_STRIDE]);
-        pass.setVertexBuffer(0, mesh.vertexBuffers[0] as GPUBuffer);
-        pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
-        pass.drawIndexed(mesh.indexCount);
-      }
+  /**
+   * What this draw's motion is, recorded for the motion pass.
+   *
+   * A mesh rewritten this frame carries its vertex motion whatever else the draw says — under last
+   * frame's model where a mover or a matrix knows it, under this frame's where nothing does. A
+   * mover otherwise carries a rigid draw's last model or a skinned draw's last pose; a matrix
+   * carries a rigid draw's. A draw that says nothing and moved no vertex takes the camera's motion.
+   */
+  private recordDrawMotion(
+    mesh: GpuMesh,
+    model: ArrayLike<number>,
+    previous: ArrayLike<number> | Mover | null,
+  ): void {
+    const dynamic = mesh.motion;
+    const rows = dynamic?.previous ?? null;
+    const rewritten = rows !== null && dynamic !== null && dynamic.changed === this.moverFrame;
+    if (previous === null) {
+      if (rewritten) this.motionPass?.recordDynamic(mesh, model, model, rows);
+      return;
     }
-    pass.end();
+    if (!isMover(previous)) {
+      if (rewritten) this.motionPass?.recordDynamic(mesh, model, previous, rows);
+      else this.motionPass?.recordRigid(mesh, model, previous);
+      return;
+    }
+    /* A rig is only followed where the draw really skins: a palette set, a mesh with joints. */
+    const skinned =
+      !rewritten && this.skinPaletteSlot >= 0 && mesh.isSkinned && mesh.skinOffsets !== null;
+    const verdict = advanceMover(
+      previous,
+      this.moverRenderer,
+      this.moverFrame,
+      model,
+      skinned ? this.skinPaletteData : null,
+    );
+    if (verdict === MOVER_TWICE) {
+      this.warnMoverTwice();
+      return;
+    }
+    if (rewritten) {
+      const was = verdict === MOVER_MOTION ? previous.previousModel : model;
+      this.motionPass?.recordDynamic(mesh, model, was, rows);
+      return;
+    }
+    if (verdict !== MOVER_MOTION) return;
+    if (skinned) this.recordSkinnedMotion(mesh, model, previous);
+    else this.motionPass?.recordRigid(mesh, model, previous.previousModel);
+  }
+
+  /**
+   * A skinned mover's motion: this frame's palette is the draw's own slot, and last frame's takes a
+   * slot of its own, like any palette a draw binds — so it is uploaded once and nothing overwrites
+   * it before the motion pass reads it. See `SkinPaletteRing`.
+   */
+  private recordSkinnedMotion(mesh: GpuMesh, model: ArrayLike<number>, mover: Mover): void {
+    const now = this.skinPalettes.view(this.skinPaletteSlot);
+    const slot = this.skinPalettes.take(this.surface.device, mover.previousPalette);
+    const was = slot === null ? null : this.skinPalettes.view(slot);
+    if (now === null || was === null) return;
+    this.motionPass?.recordSkinned(mesh, model, mover.previousModel, now, was);
+  }
+
+  private warnMoverTwice(): void {
+    if (this.warnedMoverTwice) return;
+    this.warnedMoverTwice = true;
+    console.warn(
+      'WebGPU: a Mover was drawn twice in one frame. A mover is one object; the second draw ' +
+        'records no motion. Give each moving object its own `createMover()`.',
+    );
+  }
+
+  /**
+   * Where every mover was last frame, into the motion target. See `MotionPass`.
+   *
+   * **After everything that draws and before the resolve reads it.** The frame's depth has to be
+   * finished for the pass's equality test to mean anything, and the resolve is what consumes it.
+   */
+  private runMotion(encoder: GPUCommandEncoder): void {
+    const target = this.reconMotionView;
+    const depth = this.depthView;
+    const motion = this.motionPass;
+    if (!this.reconstructing || target === null || depth === null || motion === null) return;
+    /* The scene's clip transform, with the generated stages' y negation folded in. */
+    mat4.multiply(this.motionRaster, MOTION_CLIP_FLIP, this.viewProj ?? this.correctedViewProj);
+    motion.run(
+      encoder,
+      target,
+      depth,
+      this.motionRaster as Float32Array,
+      this.frameRawViewProj as Float32Array,
+      this.reconPreviousRawViewProj as Float32Array,
+      this.gpuTimer.writesFor(),
+    );
   }
 
   /**
@@ -10365,7 +11241,16 @@ export class WebGPURenderer implements RendererApi {
      * OpenGL's depth convention — which is the convention the shader's accessor converts the
      * renderer's reversed buffer into.
      */
-    mat4.invert(this.reconInverseViewProj, this.frameRawViewProj);
+    /*
+     * The inverse and the reprojection in double precision, rounded once on the way into the
+     * uniform: the product of two single-precision matrices this far apart in depth is not the
+     * identity for a still camera, and the resolve read the difference as motion.
+     */
+    mat4.invert(this.reconInverse64, this.frameRawViewProj);
+    mat4.multiply(this.reconReprojection64, this.reconPreviousRawViewProj, this.reconInverse64);
+    for (let i = 0; i < 16; i += 1) {
+      this.reconInverseViewProj[i] = this.reconInverse64[i] as number;
+    }
     const f = this.reconFloats;
     const u = this.reconInts;
     u[0] = this.renderWidth;
@@ -10389,6 +11274,17 @@ export class WebGPURenderer implements RendererApi {
     f[69] = DEFAULT_DISOCCLUSION.motionScale;
     f[70] = DEFAULT_DISOCCLUSION.normalFloor;
     f[71] = DEFAULT_DISOCCLUSION.normalCeiling;
+    /* The anti-flicker over the reconstruction's own period, its rule made once a period. */
+    const phases = reconJitterPhases(this.renderWidth, outputWidth);
+    if (phases !== this.reconFlickerPhases) {
+      this.reconFlickerPhases = phases;
+      this.reconFlickerRule = flickerRule(phases);
+    }
+    u[72] = this.reconFrameIndex % phases === 0 ? 1 : 0;
+    u[73] = 1;
+    f[74] = this.reconFlickerRule.memory;
+    f[75] = this.reconFlickerRule.width;
+    f.set(this.reconReprojection64, 76);
     device.queue.writeBuffer(params, 0, this.reconStaging);
 
     const groupsX = Math.ceil(outputWidth / RECON_WORKGROUP);
@@ -10781,9 +11677,15 @@ export class WebGPURenderer implements RendererApi {
     if (!this.oitActive || this.translucentQueue.length === 0) return;
     const accum = this.oitAccumView;
     const reveal = this.oitRevealView;
-    const scene = this.sceneColorView;
+    /* After the upscale while reconstructing: over the reconstructed picture, against its depth. */
+    const scene = this.reconstructing ? this.reconShownView : this.sceneColorView;
     const group = this.oitResolveGroup;
-    const depth = this.depthView;
+    const depth = this.reconstructing
+      ? (this.latePass?.depthView(
+          Math.max(1, this.surface.canvas.width),
+          Math.max(1, this.surface.canvas.height),
+        ) ?? null)
+      : this.depthView;
     if (accum === null || reveal === null || scene === null || group === null || depth === null) {
       return;
     }
@@ -10797,12 +11699,13 @@ export class WebGPURenderer implements RendererApi {
      */
     if (this.translucentQueue.refracts && !this.refractSnapshotTaken) {
       const snapshot = this.refractSnapshot;
-      const source = this.sceneColor;
+      const source = this.reconstructing ? this.reconShown : this.sceneColor;
       if (snapshot !== null && source !== null) {
         encoder.copyTextureToTexture({ texture: source }, { texture: snapshot }, [
           snapshot.width,
           snapshot.height,
         ]);
+        this.refractMips?.record(encoder);
         this.refractSnapshotTaken = true;
       }
     }
@@ -10843,6 +11746,7 @@ export class WebGPURenderer 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 GpuMesh, draw.model, draw.opacity, options);
       });
       this.oitReplaying = false;
@@ -10873,9 +11777,9 @@ export class WebGPURenderer implements RendererApi {
         this.pipelines,
         device,
         this.oitResolveLayout,
-        'post.oitResolve',
+        this.reconstructing ? 'post.oitResolve.recon' : 'post.oitResolve',
         OIT_RESOLVE_FRAG_WGSL,
-        sceneColorFormat(this.quality.hdrScene),
+        this.reconstructing ? RECON_HISTORY_FORMAT : sceneColorFormat(this.quality.hdrScene),
         OIT_COMPOSITE_BLEND,
       ),
     );
@@ -11265,18 +12169,14 @@ export class WebGPURenderer implements RendererApi {
       this.lightVolumeVertices.buffer,
       this.lightVolumeFragments.buffer,
       (name) =>
-        name === 'uStaticShadowMap'
-          ? { view: this.shadowView, sampler: this.volumeShadowSampler }
-          : name === 'uPeeledShadowMap' && this.peelView !== null
-            ? { view: this.peelView, sampler: this.volumeShadowSampler }
-            : name === 'uDynamicShadowMap' && this.dynamicView !== null
-              ? { view: this.dynamicView, sampler: this.volumeShadowSampler }
-              : /* The frame's own depth, snapshotted before the first volume of the frame draws.
+        name === 'uSunShadows'
+          ? { view: this.sunArrayView, sampler: this.volumeShadowSampler }
+          : /* The frame's own depth, snapshotted before the first volume of the frame draws.
                    Null under a profile with no composite, and then `uSceneDepthEnabled` is 0 and
                    the stand-in is never sampled. */
-                name === 'uSceneDepth' && this.resolvedDepthView !== null
-                ? { view: this.resolvedDepthView, sampler: this.postDepthSampler }
-                : this.volumeBlank,
+            name === 'uSceneDepth' && this.resolvedDepthView !== null
+            ? { view: this.resolvedDepthView, sampler: this.postDepthSampler }
+            : this.volumeBlank,
     );
   }
 
@@ -11302,6 +12202,12 @@ export class WebGPURenderer implements RendererApi {
   private takeRefractSnapshot(): boolean {
     if (this.reflectionPassActive || this.probePassActive) return false;
     if (this.refractSnapshotTaken) return true;
+    /* A late draw refracts the reconstructed picture, which does not exist until the resolve has
+       run; `runLate` takes the copy then, once, before any late draw is replayed. */
+    if (this.drawsLate()) {
+      this.lateRefractWanted = true;
+      return true;
+    }
     /* The replay of an order-independent set runs after the scene's pass has ended, and `runOit`
        took the copy for it before it began; there is no pass here to end and reopen. */
     if (this.oitReplaying) return false;
@@ -11340,6 +12246,8 @@ export class WebGPURenderer implements RendererApi {
       snapshot.width,
       snapshot.height,
     ]);
+    /* The chain, between the passes, where nothing is attached: what frosted glass reads. */
+    this.refractMips?.record(encoder);
     const multisampled = this.compositeMsaa() !== null;
     this.pass = encoder.beginRenderPass({
       label: 'refract.snapshotTaken',
@@ -11676,6 +12584,7 @@ export class WebGPURenderer implements RendererApi {
     command.indexBuffer = null;
     command.indexed = false;
     command.instances = 1;
+    command.indirect = null;
     recordNode(this.arena, VERB_DRAW, reads, writes, at, 0);
     return command;
   }
@@ -11701,8 +12610,13 @@ export class WebGPURenderer implements RendererApi {
     }
     if (verb !== VERB_DRAW) return;
     const command = this.commands.commands[nodeState(this.arena, at)];
-    if (command === undefined || command.pipeline === null || command.bindGroup === null) return;
+    if (command === undefined) return;
+    this.issueCommand(pass, command);
+  }
 
+  /** One recorded draw, issued into an open pass. Shared by the graph's replay and `runLate`. */
+  private issueCommand(pass: GPURenderPassEncoder, command: DrawCommand): void {
+    if (command.pipeline === null || command.bindGroup === null) return;
     pass.setPipeline(command.pipeline);
     if (command.offsetCount === 2) {
       pass.setBindGroup(0, command.bindGroup, [command.offsetA, command.offsetB]);
@@ -11717,7 +12631,8 @@ export class WebGPURenderer implements RendererApi {
     }
     if (command.indexed && command.indexBuffer !== null) {
       pass.setIndexBuffer(command.indexBuffer, 'uint32');
-      pass.drawIndexed(command.count, command.instances);
+      if (command.indirect !== null) pass.drawIndexedIndirect(command.indirect, 0);
+      else pass.drawIndexed(command.count, command.instances);
     } else {
       pass.draw(command.count, command.instances);
     }
@@ -11946,6 +12861,7 @@ export class WebGPURenderer implements RendererApi {
   }
 
   endFrame(): void {
+    this.inFrame = false;
     if (this.surface.lost || this.encoder === null) return;
     /*
      * Anything still recorded goes now.
@@ -12373,6 +13289,11 @@ export class WebGPURenderer implements RendererApi {
    * declares nothing behaves exactly as it did before. Read it beside `visible`, which answers the
    * other half of the same question.
    */
+  /** Whether a world-space box is wholly behind the declared occluders. See `Renderer.occludedBox`. */
+  occludedBox(min: ArrayLike<number>, max: ArrayLike<number>): boolean {
+    return this.occlusion?.occludedBox(min, max) ?? false;
+  }
+
   occluded(bounds: Bounds, model: ReadonlyMat4): boolean {
     return this.occlusion?.occluded(bounds, model) ?? false;
   }
@@ -12828,12 +13749,14 @@ export class WebGPURenderer implements RendererApi {
     const cssHeight = Math.max(canvas.clientHeight, 1);
     const origin = canvas.getBoundingClientRect();
     /*
-     * **CSS pixels to the scene's pixels, not the viewer's.** A viewport is state on the frame's
-     * own pass, which draws into the render-size targets, so a box measured in the drawing buffer
-     * would be scaled by the reconstruction ratio and land off the side of a smaller attachment.
+     * **CSS pixels to the pixels of the attachment this pass draws into.** Mid-frame that is the
+     * scene's render size, which a reconstruction makes smaller than the drawing buffer; after the
+     * present it is the swap image, the drawing buffer itself. Measured against the scene's size
+     * there, an interface's inset landed two thirds of the way to where it was asked for.
      */
-    const scaleX = this.renderWidth / cssWidth;
-    const scaleY = this.renderHeight / cssHeight;
+    const target = this.passSize();
+    const scaleX = target[0] / cssWidth;
+    const scaleY = target[1] / cssHeight;
     const left = rect.left - origin.left;
     const top = rect.top - origin.top;
     const w = Math.max(1, Math.round(rect.width * scaleX));
@@ -12861,9 +13784,8 @@ export class WebGPURenderer implements RendererApi {
      * edge for the frames it is half-off. That asymmetry is the cost of the clamp, it is
      * recorded in the parity ledger, and the alternative was an exception.
      */
-    /* The attachment this pass draws into, which is the scene's size — see `renderWidth`. */
-    const targetWidth = this.renderWidth;
-    const targetHeight = this.renderHeight;
+    const targetWidth = target[0];
+    const targetHeight = target[1];
     const clampedX = Math.max(0, Math.min(x, targetWidth));
     const clampedY = Math.max(0, Math.min(y, targetHeight));
     const clampedW = Math.max(0, Math.min(x + w, targetWidth) - clampedX);
@@ -12940,11 +13862,31 @@ export class WebGPURenderer implements RendererApi {
     if (this.quality.frameGraph) this.flushGraph();
     const pass = this.pass;
     if (this.surface.lost || pass === null) return;
-    /* The whole of what this pass draws into, which is the scene's size and not the viewer's. */
-    pass.setViewport(0, 0, this.renderWidth, this.renderHeight, 0, 1);
-    pass.setScissorRect(0, 0, this.renderWidth, this.renderHeight);
+    /* The whole of what this pass draws into: the scene's size mid-frame, the canvas after. */
+    const [width, height] = this.passSize();
+    pass.setViewport(0, 0, width, height, 0, 1);
+    pass.setScissorRect(0, 0, width, height);
   }
 
+  /**
+   * The size of the attachment the open pass draws into: the swap image — the drawing buffer —
+   * in the overlay after the present, the scene's render size in the frame's own pass. A tuple
+   * held once rather than a new array a call.
+   */
+  private passSize(): readonly [number, number] {
+    const size = this.passSizeOut;
+    if (this.overlayActive) {
+      size[0] = Math.max(1, this.surface.canvas.width);
+      size[1] = Math.max(1, this.surface.canvas.height);
+    } else {
+      size[0] = this.renderWidth;
+      size[1] = this.renderHeight;
+    }
+    return size;
+  }
+
+  private readonly passSizeOut: [number, number] = [0, 0];
+
   /**
    * Copy a rectangle of the frame into a 2D canvas, pixel for pixel.
    *
@@ -13212,6 +14154,10 @@ export class WebGPURenderer 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;
@@ -13421,9 +14367,13 @@ export class WebGPURenderer implements RendererApi {
     this.causticsVerts.writeBlock(vertexSlot, this.causticsVertBlock);
     this.causticsFrags.writeBlock(fragmentSlot, this.causticsFragInts);
 
-    const causticsPipe = causticsPipeline(this.pipelines, this.surface.device, this.causticsLayout);
+    const causticsPipe = causticsPipeline(
+      this.blendedPipelines(),
+      this.surface.device,
+      this.causticsLayout,
+    );
     /* The pattern is generated in the shader from the two uniform blocks; nothing is sampled. */
-    const causticsCommand = this.recordDraw(0, this.currentTarget());
+    const causticsCommand = this.recordBlended(0);
     if (causticsCommand !== null) {
       causticsCommand.pipeline = causticsPipe;
       causticsCommand.bindGroup = this.causticsBindGroup;
@@ -13527,10 +14477,14 @@ export class WebGPURenderer implements RendererApi {
   private probeView: GPUTextureView | null = null;
   private readonly probeSize: number;
   private readonly probeMipLayout: GPUBindGroupLayout;
-  /** The photometric atlas, allocated on first use. See `setIesProfiles`. */
-  private iesTexture: GPUTexture | null = null;
+  /** The fixture atlas — cookies over profiles — built on first use. See `fixtureAtlas.ts`. */
+  private fixtureTexture: GPUTexture | null = null;
+  private fixtureView: GPUTextureView | null = null;
+  /** The profiles as packed and the cookie images, kept so either can rebuild the atlas. */
+  private iesAtlas = packIesAtlas([]);
+  private cookieImages: readonly TexImageSource[] = [];
   /** 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: GPUTexture | null = null;
   private driftAtlas: GPUTexture | null = null;
   private driftIndexView: GPUTextureView | null = null;
@@ -13542,10 +14496,7 @@ export class WebGPURenderer implements RendererApi {
   /** The frame's exact lights packed for the traced bake. See `gi/bounceLights.ts`. */
   private readonly bounceLights = createBounceLights();
   private readonly bakeLamps = { data: this.bounceLights, count: 0, falloff: 0 };
-  private iesView: GPUTextureView | null = null;
-  private cookieTexture: GPUTexture | null = null;
-  private cookieView: GPUTextureView | 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;
   /** Rows in that atlas. One until a consumer loads a profile, which is the row of ones. */
   private iesRows = 1;
@@ -14033,42 +14984,58 @@ export class WebGPURenderer implements RendererApi {
    */
   setSpotCookies(images: readonly TexImageSource[]): void {
     if (this.surface.lost) return;
+    this.cookieImages = images.slice();
+    this.forgetFixtureAtlas();
+    this.rebuildFlatBindGroup();
+  }
+
+  /** Let the atlas go, to be built again from what is in hand the next time it is bound. */
+  private forgetFixtureAtlas(): void {
+    this.fixtureTexture?.destroy();
+    this.fixtureTexture = null;
+    this.fixtureView = null;
+  }
+
+  /**
+   * The fixture atlas's view, built from the profiles and cookies in hand if it is not already: the
+   * profiles' rows at the bottom, the cookies' tiles on top. See `renderer.ts` and `fixtureAtlas.ts`.
+   *
+   * **`rgba16float`, not `rgba32float`**: a 32-bit float texture is not filterable in core WebGPU,
+   * and binding one to a filtering sampler takes the whole bind group with it. Both tables want
+   * linear filtering. `RENDER_ATTACHMENT` because `copyExternalImageToTexture` writes through one.
+   */
+  private fixtureAtlasView(): GPUTextureView {
+    if (this.fixtureView !== null) return this.fixtureView;
     const { device } = this.surface;
-    const tiles = images.length;
-    const width = tiles === 0 ? 1 : COOKIE_TILE * tiles;
-    const height = tiles === 0 ? 1 : COOKIE_TILE;
-    if (this.cookieTexture === null || this.cookieTexture.width !== width) {
-      this.cookieTexture?.destroy();
-      this.cookieTexture = device.createTexture({
-        label: 'cookie.atlas',
-        size: [width, height],
-        format: 'rgba8unorm',
-        /* `RENDER_ATTACHMENT` because `copyExternalImageToTexture` writes through one. */
-        usage: 0x4 | 0x2 | 0x10,
-      });
-      this.cookieView = this.cookieTexture.createView();
-    }
-    if (tiles === 0) {
-      /* White, not black: this multiplies a light's colour. */
-      device.queue.writeTexture(
-        { texture: this.cookieTexture },
-        new Uint8Array([255, 255, 255, 255]),
-        { bytesPerRow: 4, rowsPerImage: 1 },
-        { width: 1, height: 1, depthOrArrayLayers: 1 },
+    const layout = fixtureAtlasLayout(this.iesAtlas.height, this.cookieImages.length);
+    const texture = device.createTexture({
+      label: 'fixture.atlas',
+      size: [layout.width, layout.height],
+      format: 'rgba16float',
+      usage: 0x4 | 0x2 | 0x10,
+    });
+    device.queue.writeTexture(
+      { texture },
+      /* Converted, because `writeTexture` does not — see `environmentTexels`. */
+      toHalfFloats(fixtureAtlasTexels(layout, this.iesAtlas)),
+      { bytesPerRow: layout.width * 8, rowsPerImage: layout.height },
+      { width: layout.width, height: layout.height, depthOrArrayLayers: 1 },
+    );
+    for (let tile = 0; tile < this.cookieImages.length; tile++) {
+      const source = this.cookieImages[tile];
+      if (source === undefined) continue;
+      device.queue.copyExternalImageToTexture(
+        { source: source as GPUCopyExternalImageSource },
+        { texture, origin: { x: tile * COOKIE_TILE, y: 0 } },
+        { width: COOKIE_TILE, height: COOKIE_TILE },
       );
-    } else {
-      for (let tile = 0; tile < tiles; tile++) {
-        const source = images[tile];
-        if (source === undefined) continue;
-        device.queue.copyExternalImageToTexture(
-          { source: source as GPUCopyExternalImageSource },
-          { texture: this.cookieTexture, origin: { x: tile * COOKIE_TILE, y: 0 } },
-          { width: COOKIE_TILE, height: COOKIE_TILE },
-        );
-      }
     }
-    this.cookieTiles = tiles;
-    this.rebuildFlatBindGroup();
+    this.fixtureTexture = texture;
+    this.fixtureView = texture.createView();
+    this.iesRows = this.iesAtlas.height;
+    this.iesPlanes = this.iesAtlas.planes;
+    this.cookieTiles = this.cookieImages.length;
+    return this.fixtureView;
   }
 
   /**
@@ -14085,6 +15052,23 @@ export class WebGPURenderer 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();
@@ -14111,12 +15095,12 @@ export class WebGPURenderer 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;
     }
     if (this.surface.lost) return;
     const { device } = this.surface;
-    const [ix, iy, iz] = field.layout.dims;
+    const [ix, iy, iz] = field.indexDims;
     const index = device.createTexture({
       label: 'driftLight.index',
       size: [ix, iy, iz],
@@ -14126,7 +15110,7 @@ export class WebGPURenderer implements RendererApi {
     });
     device.queue.writeTexture(
       { texture: index },
-      field.layout.index,
+      field.index,
       { bytesPerRow: ix * 4, rowsPerImage: iy },
       [ix, iy, iz],
     );
@@ -14159,45 +15143,8 @@ export class WebGPURenderer implements RendererApi {
 
   setIesProfiles(profiles: readonly PhotometricProfile[]): void {
     if (this.surface.lost) return;
-    const { device } = this.surface;
-    const atlas = packIesAtlas(profiles);
-    /*
-     * Reallocated when the row count changes, because a texture's size is immutable. A set of the
-     * same size overwrites in place, which is the common case of a consumer swapping one fixture.
-     */
-    if (this.iesTexture === null || this.iesTexture.height !== atlas.height) {
-      this.iesTexture?.destroy();
-      this.iesTexture = device.createTexture({
-        label: 'ies.atlas',
-        size: [atlas.width, atlas.height],
-        /*
-         * **`r16float`, not `r32float`, and that is a filtering constraint rather than a size
-         * choice.** A 32-bit float texture is not filterable in core WebGPU — it needs the
-         * optional `float32-filterable` feature — and binding one to a filtering sampler is a
-         * validation failure that takes the whole bind group with it. This row *wants* linear
-         * filtering: it is a curve sampled between two angles, which is the entire reason it is
-         * not `NEAREST` like the froxel table beside it.
-         *
-         * Half precision holds a normalised intensity to about three decimal digits, which is far
-         * finer than the eight-bit frame it ends up in. **What would make it wrong** is a profile
-         * carrying absolute candela rather than a normalised curve, which would run out of range —
-         * and `packIesAtlas` normalises for its own reasons.
-         */
-        format: 'r16float',
-        usage: 0x4 | 0x2, // TEXTURE_BINDING | COPY_DST
-      });
-      this.iesView = this.iesTexture.createView();
-    }
-    device.queue.writeTexture(
-      { texture: this.iesTexture },
-      /* Converted, because `writeTexture` does not — see `environmentTexels` for what handing it
-         the wrong width silently produces. */
-      toHalfFloats(atlas.data),
-      { bytesPerRow: atlas.width * 2, rowsPerImage: atlas.height },
-      { width: atlas.width, height: atlas.height, depthOrArrayLayers: 1 },
-    );
-    this.iesRows = atlas.height;
-    this.iesPlanes = atlas.planes;
+    this.iesAtlas = packIesAtlas(profiles);
+    this.forgetFixtureAtlas();
     this.rebuildFlatBindGroup();
   }
 
@@ -14418,6 +15365,33 @@ export class WebGPURenderer implements RendererApi {
    * The occlusion and bloom targets are half size. Both are blurs read back at full size, so a
    * full-resolution intermediate buys nothing a bilinear fetch does not already give.
    */
+  /**
+   * The medium's march group, holding the shadow views it reads — built with the composite, and
+   * again when the sun's texture grows its glass layers and every view of the old one is stale.
+   *
+   * **The stand-in has to read as unoccluded and not as absent**, which is `emptyTexture.ts`'s
+   * point and `createLightVolumeBindGroup`'s: `occlusion()` calls any stored depth below the
+   * receiver's a blocker — so a black stand-in would put the whole medium in shadow, which is a
+   * picture rather than an error. `volumeBlank` is the white one-texel texture built for this.
+   */
+  private buildMediumBindGroup(): GPUBindGroup | null {
+    if (this.resolvedDepthView === null) return null;
+    return this.surface.device.createBindGroup({
+      label: 'post.mediumBindGroup',
+      layout: this.mediumLayout,
+      entries: [
+        {
+          binding: MEDIUM_UNIFORMS,
+          resource: { buffer: this.mediumUniforms, size: MEDIUM_FRAG_SIZE },
+        },
+        { binding: MEDIUM_TEXTURES.uDepth.texture, resource: this.resolvedDepthView },
+        { binding: MEDIUM_TEXTURES.uDepth.sampler, resource: this.postDepthSampler },
+        { binding: MEDIUM_TEXTURES.uSunShadows.texture, resource: this.sunArrayView },
+        { binding: MEDIUM_TEXTURES.uSunShadows.sampler, resource: this.volumeShadowSampler },
+      ],
+    });
+  }
+
   private ensureComposite(width: number, height: number): void {
     if (!this.hasComposite) return;
     if (this.sceneColor !== null && this.frameWidth === width && this.frameHeight === height)
@@ -14471,13 +15445,39 @@ export class WebGPURenderer implements RendererApi {
      * the allocation the house rules are about. A frame that never refracts pays the memory and
      * takes no copy.
      */
+    /*
+     * **At the output size and the reconstructed picture's format while reconstructing**, because
+     * every refracting draw is then blended, drawn after the upscale, and reads the reconstructed
+     * picture rather than the render. See `runLate`.
+     */
+    const reconstructed = this.reconstructionWanted;
     this.refractSnapshot = device.createTexture({
       label: 'refract.snapshot',
-      size: [width, height],
-      format,
-      usage: 0x4 | 0x2,
+      size: reconstructed
+        ? [Math.max(1, this.surface.canvas.width), Math.max(1, this.surface.canvas.height)]
+        : [width, height],
+      format: reconstructed ? RECON_HISTORY_FORMAT : format,
+      /*
+       * **Every level, so glass can read a blurrier one**, and a render attachment so `SnapshotMips`
+       * can fill them. Plain refraction reads level 0, as it always has. See `glass.ts`.
+       */
+      mipLevelCount:
+        Math.floor(
+          Math.log2(
+            reconstructed
+              ? Math.max(1, this.surface.canvas.width, this.surface.canvas.height)
+              : Math.max(1, width, height),
+          ),
+        ) + 1,
+      usage: 0x4 | 0x2 | 0x10, // TEXTURE_BINDING | COPY_DST | RENDER_ATTACHMENT
     });
     this.refractSnapshotView = this.refractSnapshot.createView();
+    this.refractMips = new SnapshotMips(
+      device,
+      this.pipelines,
+      this.refractSnapshot,
+      reconstructed ? RECON_HISTORY_FORMAT : format,
+    );
     /*
      * **Every cached flat bind group is stale the moment this view changes**, and the failure is
      * silent: `flatTextures` resolves `uRefractScene` to the one-texel white stand-in when there is
@@ -14619,10 +15619,14 @@ export class WebGPURenderer implements RendererApi {
      * that range — a step of 1/255 in how much scene shows through, below what a viewer can see
      * against a blended surface.
      */
+    /* At the output size while reconstructing, where the set is replayed after the upscale. */
+    const oitSize: [number, number] = this.reconstructionWanted
+      ? [Math.max(1, this.surface.canvas.width), Math.max(1, this.surface.canvas.height)]
+      : [width, height];
     this.oitAccum?.destroy();
     this.oitAccum = device.createTexture({
       label: 'post.oitAccum',
-      size: [width, height],
+      size: oitSize,
       format: 'rgba16float',
       usage: USAGE,
     });
@@ -14630,7 +15634,7 @@ export class WebGPURenderer implements RendererApi {
     this.oitReveal?.destroy();
     this.oitReveal = device.createTexture({
       label: 'post.oitReveal',
-      size: [width, height],
+      size: oitSize,
       format: 'r8unorm',
       usage: USAGE,
     });
@@ -14644,7 +15648,10 @@ export class WebGPURenderer implements RendererApi {
      * An empty list is a real answer for a frame too small to hold one, and `runBloom` reads it
      * as no bloom rather than as a target it should have had.
      */
-    this.bloomLevels = bloomLevelSizes(width, height).map((size, index) => {
+    /* The resolved picture's size while reconstructing, as the order-independent pair above is. */
+    this.bloomSourceWidth = oitSize[0];
+    this.bloomSourceHeight = oitSize[1];
+    this.bloomLevels = bloomLevelSizes(oitSize[0], oitSize[1]).map((size, index) => {
       const texture = device.createTexture({
         label: `post.bloom${index}`,
         size: [size.width, size.height],
@@ -14735,42 +15742,7 @@ export class WebGPURenderer implements RendererApi {
         ...entry(AO_TEXTURES.uDepth, this.resolvedDepthView, true),
       ],
     });
-    /*
-     * The medium's two groups, holding the shadow views the march reads.
-     *
-     * **The stand-in has to read as unoccluded and not as absent**, which is `emptyTexture.ts`'s
-     * point and `createLightVolumeBindGroup`'s: the dynamic layer is sampled unconditionally, and
-     * `occlusion()` calls any stored depth below the receiver's a blocker — so a black stand-in
-     * would put the whole medium in shadow, which is a picture rather than an error. `volumeBlank`
-     * is the white one-texel texture already built for exactly this.
-     */
-    const shadowPair = (
-      b: { texture: number; sampler: number },
-      view: GPUTextureView | null,
-    ): GPUBindGroupEntry[] => [
-      { binding: b.texture, resource: view ?? this.volumeBlank.view },
-      {
-        binding: b.sampler,
-        resource: view === null ? this.volumeBlank.sampler : this.volumeShadowSampler,
-      },
-    ];
-    this.mediumBindGroup =
-      this.resolvedDepthView === null
-        ? null
-        : device.createBindGroup({
-            label: 'post.mediumBindGroup',
-            layout: this.mediumLayout,
-            entries: [
-              {
-                binding: MEDIUM_UNIFORMS,
-                resource: { buffer: this.mediumUniforms, size: MEDIUM_FRAG_SIZE },
-              },
-              ...entry(MEDIUM_TEXTURES.uDepth, this.resolvedDepthView, true),
-              ...shadowPair(MEDIUM_TEXTURES.uStaticShadowMap, this.shadowView),
-              ...shadowPair(MEDIUM_TEXTURES.uPeeledShadowMap, this.peelView),
-              ...shadowPair(MEDIUM_TEXTURES.uDynamicShadowMap, this.dynamicView),
-            ],
-          });
+    this.mediumBindGroup = this.buildMediumBindGroup();
     this.mediumUpsampleGroup =
       this.resolvedDepthView === null || this.mediumTargetView === null
         ? null
@@ -14852,13 +15824,31 @@ export class WebGPURenderer implements RendererApi {
     /* The volume's group holds the depth snapshot, which is one of the targets just replaced.
        Keeping the old group would clamp every beam against a destroyed texture. */
     this.lightVolumeBindGroup = this.buildLightVolumeBindGroup();
-    /*
-     * One group per source the chain reads, in the order `runBloom` indexes them: the scene
-     * first, then every level. The prefilter reads the scene; the downsample into level `i`
-     * reads level `i - 1`, which is group `i`; the upsample into level `i - 1` reads level
-     * `i`, which is group `i + 1`.
-     */
-    this.bloomGroups = [this.sceneColorView, ...this.bloomLevels.map((level) => level.view)].map(
+    this.rebuildBloomGroups();
+    this.writeBloomBlocks();
+  }
+
+  /**
+   * One group per source the bloom chain reads, in the order `runBloom` indexes them: the picture
+   * first, then every level. The prefilter reads the picture; the downsample into level `i` reads
+   * level `i - 1`, which is group `i`; the upsample into level `i - 1` reads level `i`, which is
+   * group `i + 1`.
+   *
+   * **While reconstructing the picture is the resolved one**, which `ensureReconstruction` makes
+   * after this runs and rebuilds these over. The scene target is the jittered render then: a bright
+   * thing smaller than a render texel is caught in some phases and missed in others, and its halo,
+   * wide and over everything round it, flashed with it — a night street's panels breathing a few
+   * levels of luma frame to frame. Built at the drawing buffer's size, which `ensureComposite`
+   * already sized the pyramid for.
+   */
+  private rebuildBloomGroups(): void {
+    const picture =
+      this.reconstructionWanted && this.reconShownView !== null
+        ? this.reconShownView
+        : this.sceneColorView;
+    if (picture === null) return;
+    const { device } = this.surface;
+    this.bloomGroups = [picture, ...this.bloomLevels.map((level) => level.view)].map(
       (view, index) =>
         device.createBindGroup({
           label: `post.bloomGroup${index}`,
@@ -14868,11 +15858,11 @@ export class WebGPURenderer implements RendererApi {
               binding: BLOOM_UNIFORMS,
               resource: { buffer: this.bloomUniforms, size: BLOOM_STAGE_SIZE },
             },
-            ...entry(BLOOM_TEXTURES.uSource, view),
+            { binding: BLOOM_TEXTURES.uSource.texture, resource: view },
+            { binding: BLOOM_TEXTURES.uSource.sampler, resource: this.postSampler },
           ],
         }),
     );
-    this.writeBloomBlocks();
   }
 
   /**
@@ -14890,12 +15880,12 @@ export class WebGPURenderer implements RendererApi {
     if (levels.length === 0) return;
     const slot = (index: number): number => (index * BLOOM_SLOT) / 4;
 
-    /* The prefilter reads the *scene*, so its texel is the frame's rather than a level's.
+    /* The prefilter reads the *picture*, so its texel is the picture's rather than a level's.
        `uTexel`, not `uTexelSize`, and the block carries no strength at all: the composite
        applies that when it adds the result back. Both were written wrong here first. */
     const prefilter = (name: string): number => this.postField(BLOOM_PREFILTER_FIELDS, name);
-    f[slot(0) + prefilter('uTexel')] = 1 / Math.max(1, this.frameWidth);
-    f[slot(0) + prefilter('uTexel') + 1] = 1 / Math.max(1, this.frameHeight);
+    f[slot(0) + prefilter('uTexel')] = 1 / Math.max(1, this.bloomSourceWidth);
+    f[slot(0) + prefilter('uTexel') + 1] = 1 / Math.max(1, this.bloomSourceHeight);
     /* In scene units, which is why an HDR target is what makes a threshold above 1 mean
        anything: against a clamped buffer nothing is ever brighter than white. */
     f[slot(0) + prefilter('uThreshold')] = this.bloomThresholdSet ?? this.quality.bloomThreshold;
@@ -15002,6 +15992,10 @@ export class WebGPURenderer implements RendererApi {
    * the 2026-08-13 rule asks for — one decision, bound twice.
    */
   dispose(): void {
+    this.motionPass?.dispose();
+    this.motionPass = null;
+    this.latePass?.dispose();
+    this.latePass = null;
     for (const texture of this.retiredTextures) texture.destroy();
     this.retiredTextures.length = 0;
     const passDevice = this.passDevice();
@@ -15018,6 +16012,13 @@ export class WebGPURenderer implements RendererApi {
     this.fieldComposer = null;
     this.driftIndex?.destroy();
     this.driftAtlas?.destroy();
+    this.forgetFixtureAtlas();
+    this.sunTint?.texture.destroy();
+    this.sunTint = null;
+    this.glassTint?.dispose();
+    this.glassTint = null;
+    this.retiredSunTexture?.destroy();
+    this.retiredSunTexture = null;
 
     this.pass = null;
     this.encoder = null;