@driftengine/core 4.4.2 → 4.6.0

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

@@ -1,15 +1,22 @@
 import { mat4 } from 'gl-matrix';
 import { probeFaceRange } from '../../reflectionProbe.js';
-import { TEMPORAL_HISTORY_BLEND, TemporalHistory, jitterOffset, jitterProjection, } from '../../temporalAa.js';
+import { TEMPORAL_FLICKER, TEMPORAL_HISTORY_BLEND, TemporalHistory, flickerRule, jitterOffset, jitterProjection, } from '../../temporalAa.js';
 import { OIT_MULTISAMPLE_REFUSAL } from '../../orderIndependent.js';
 import { TranslucentQueue } from '../../translucentQueue.js';
-import { DEPTH_CLEAR, DEPTH_COMPARE_EQUAL, MAX_DEPTH_LAYER, REVERSED_DEPTH, } from '../../depthConvention.js';
+import { DEPTH_CLEAR, MAX_DEPTH_LAYER, REVERSED_DEPTH } from '../../depthConvention.js';
 import { RECONSTRUCTION_MULTISAMPLE_REFUSAL, reconRenderSize } from '../../recon/frameSizes.js';
 import { jitterOffset as jitterOffsetFor, reconJitterPhases } from '../../recon/jitter.js';
 import { RECON_HISTORY_FORMAT, RECON_PARAM_FLOATS, RECON_WORKGROUP, reconResolveWgsl, } from '../../shaders/recon/resolve.wgsl.js';
-import { MOTION_DRAW_FLOATS, MOTION_DRAW_STRIDE, MOTION_FRAME_FLOATS, MOTION_TARGET_FORMAT, RECON_MOTION_WGSL, } from '../../shaders/recon/motion.wgsl.js';
+import { MotionPass } from './motionPass.js';
+import { LatePass } from './latePass.js';
+import { SnapshotMips } from './snapshotMips.js';
+import { resolveGlass } from '../../glass.js';
+import { routesLate, tracksMotion } from '../../recon/lateRouting.js';
+import { frameOfChange, keepsPrevious, pairedInstances } from '../../recon/changeFrames.js';
+import { INSTANCE_STRIDE } from '../../instances.js';
 import { DEFAULT_DISOCCLUSION } from '../../recon/disocclusion.js';
 import { DEFAULT_RECON_QUALITY } from '../../recon/resolve.js';
+import { MOVER_MOTION, MOVER_TWICE, advanceMover, claimRendererId, isMover, } from '../../recon/mover.js';
 import { clamp } from '../../../math/scalar.js';
 import { Camera } from '../../camera.js';
 import { PickableSet } from '../../pickable.js';
@@ -29,6 +36,8 @@ import { ProbeSweeps } from '../../probeSweeps.js';
 import { ggxMaxLevelFor, irradianceLevelFor, octahedralEdgeFor } from '../../prefilterEnvMap.js';
 import { environmentTexels } from './environmentTexels.js';
 import { packIesAtlas } from '../../iesProfile.js';
+import { fixtureAtlasLayout, fixtureAtlasTexels } from '../../fixtureAtlas.js';
+import { resolveSurfaceScene } from '../../surfaceScene.js';
 import { COOKIE_TILE } from '../../lightBudget.js';
 import { FULL_LIGHT_BUDGET } from '../../uniformVectorBudget.js';
 import { toHalfFloats } from '../../halfFloat.js';
@@ -38,6 +47,7 @@ import { areaShadowLayerCount, castingRange, createResolvedAreaShadows, firstAre
 import { createBakeScratch, runPointShadowBakes, selectCastingLights, } from '../../pointShadowBudget.js';
 import { POINT_SHADOW_SAMPLER, PointShadowSystem, } from '../../pointShadowSystem.js';
 import { GpuPointShadowArray, GpuPointShadowMap } from './pointShadowPass.js';
+import { OCTAHEDRAL_EDGE, strideLayers } from '../../pointShadowArray.js';
 import { createPanelBindGroup, createPanelBindGroupLayout, createPanelCorners, panelPipeline, PANEL_FRAG_FIELDS, PANEL_FRAG_SIZE, PANEL_VERTEX_COUNT, PANEL_VERT_FIELDS, PANEL_VERT_SIZE, } from './panelPass.js';
 import { createGpuTextCube, createTextBindGroup, createTextBindGroupLayout, GpuText, textPipeline, TEXT_FRAG_FIELDS, TEXT_FRAG_SIZE, TEXT_VERT_FIELDS, TEXT_VERT_SIZE, } from './textPass.js';
 import { deviceSnappedCellSize, deviceSnappedOrigin } from '../../textLayout.js';
@@ -66,6 +76,10 @@ import { createScatterDeform, resolveScatterDeform, } from '../../scatterDeform.
 import { resolvePointLights } from '../../lightBudget.js';
 import { resolveRenderQuality } from '../../renderQuality.js';
 import { DEFAULT_GLOBAL_MEDIUM, mediumActive, mediumTargetSize, WEAK_GPU_MEDIUM_STEPS, resolveGlobalMedium, } from '../../globalMedium.js';
+import { castsDepth, glassOf } from '../../shadowCasters.js';
+import { GlassCasterList } from '../../glassCasters.js';
+import { GpuGlassTint } from './glassTintPass.js';
+import { SUN_DYNAMIC_LAYER, SUN_GLASS_MOVING_LAYER, SUN_GLASS_STATIC_LAYER, SUN_PEELED_LAYER, SUN_STATIC_LAYER, } from '../../shadowMap.js';
 import { VERTEX_LAYOUT, createGpuMesh, createGpuMeshIncremental } from './buffers.js';
 import { SkinPaletteRing } from './skinPaletteRing.js';
 import { DEPTH_FORMAT, FLAT_VERT_FIELDS, FLAT_VERT_SIZE, createFlatBindGroup, createFlatBindGroupLayout, flatFragmentBindings, flatVariant, flatVertexBindings, flatPipeline, flatPipelineAsync, } from './flatPass.js';
@@ -84,6 +98,7 @@ import { LIGHT_VOLUME_VERT_FIELDS, LIGHT_VOLUME_VERT_SIZE, createLightVolumeBind
 import { aimReflection, createGpuReflection } from './reflectionPass.js';
 import { FrameBudget } from '../budget.js';
 import { MaterialChanges, ownsMaterial } from '../materialChanges.js';
+import { FOG_RECEDE, fogModeOf } from '../drawFog.js';
 import { DYNAMIC_ALIGNMENT as DYNAMIC_UNIFORM_ALIGNMENT, UniformRing } from './uniformRing.js';
 import { DecalQueue, MAX_DRAWN_DECALS } from '../../decalQueue.js';
 import { DistanceFieldScene } from '../../gi/fieldScene.js';
@@ -110,6 +125,8 @@ import { decalScissor } from '../../decalProjector.js';
 import { createCommandPool, resetPool, takeCommand } from './drawCommand.js';
 import { RESOURCE_COUNT, createArena, createFlushSchedule, keptNodes, maskOf, nodeCount, nodeState, nodeVerb, recordNode, resetArena, schedule, scheduleFlush, scratchFor, } from '../../frame/index.js';
 import { createFrustum, frustumFromViewProjection } from '../../../math/frustum.js';
+import { batchBoxVisible, cullsInstances } from '../../instanceCull.js';
+import { InstanceCullPass, MAX_CULL_SLOTS } from './instanceCullPass.js';
 import { OcclusionBuffer } from '../../occlusion.js';
 import { boundsVisible } from '../../visibility.js';
 import { createPassRegistry, drainRegistry, passAt, registerIn, unregisterIn } from '../../pass.js';
@@ -119,6 +136,7 @@ import { computeAt, createComputeRegistry, } from '../../compute.js';
 import { GpuInstancedBatch } from './instanced.js';
 import { cutoutOf } from '../../cutoutCaster.js';
 import { LightField } from '../../driftLight/lightField.js';
+import { WorldLightField } from '../../driftLight/worldLightField.js';
 import { createDriftLightUniforms, resolveDriftLight } from '../../driftLight/uniforms.js';
 /**
  * How many draws one frame may make before the ring is full.
@@ -762,6 +780,24 @@ function padded(direction) {
     SCRATCH_VEC4[3] = 0;
     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, maps, layers) {
+    const layer = (index) => 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,
+    };
+}
 export class WebGPURenderer {
     /**
      * Real timestamp queries, where the adapter offers them.
@@ -863,6 +899,8 @@ export class WebGPURenderer {
      * caller who passed null gets — rather than reading a slot this frame has already re-let.
      */
     skinPaletteSlot = -1;
+    /** The palette `skinPaletteSlot` was uploaded from, for a skinned mover to copy. See `Mover`. */
+    skinPaletteData = null;
     surface;
     /** The encoder for the frame in flight, or null between frames. */
     encoder = null;
@@ -870,6 +908,27 @@ export class WebGPURenderer {
     meshPresent = new Map();
     pass = null;
     pipelines;
+    /**
+     * 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.
+     */
+    latePipelines;
+    /** The blended draws of a reconstructing frame, drawn after the upscale. See `LatePass`. */
+    latePass = null;
+    /** A late draw asked to refract: `runLate` copies the reconstructed picture before replaying. */
+    lateRefractWanted = false;
+    /** The refraction copy's mip chain, recorded after each copy: what frosted glass reads. */
+    refractMips = 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.
+     */
+    refractSampler = null;
+    /** One glass resolution reused by every draw, so a pane allocates nothing. See `glass.ts`. */
+    glassScratch = { transmission: 0, frost: 0, tint: [1, 1, 1] };
+    /** `issueCommand` bound once, so the late replay allocates no closure per frame. */
+    issueBound;
     /**
      * The same pipelines again, built for the canvas, for anything drawn after `endFrame`.
      *
@@ -1242,6 +1301,12 @@ export class WebGPURenderer {
      * what the layout already declares.
      */
     bloomGroups = [];
+    /**
+     * 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`.
+     */
+    bloomSourceWidth = 1;
+    bloomSourceHeight = 1;
     frameWidth = 1;
     frameHeight = 1;
     /**
@@ -1393,13 +1458,25 @@ export class WebGPURenderer {
      * 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`.
      */
     reconHistories = [null, null];
     reconHistoryViews = [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`).
+     */
+    reconFlickers = [null, null];
+    reconFlickerViews = [null, null];
+    /** Each output pixel's held depth swing, a pair of its own: see `recon/resolve.ts`. */
+    reconSwings = [null, null];
+    reconSwingViews = [null, null];
+    /** The anti-flicker's rule for the period last asked for, kept so a frame makes none. */
+    reconFlickerPhases = 0;
+    reconFlickerRule = TEMPORAL_FLICKER;
     reconWrite = 0;
     reconHasHistory = false;
     reconShown = null;
@@ -1418,40 +1495,24 @@ export class WebGPURenderer {
     reconGroups = [null, null];
     reconSharpenGroups = [null, null];
     reconRushGroup = 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.
-     */
-    motionMeshes = [];
-    motionMatrices = new Float32Array(0);
-    motionCount = 0;
-    motionLayout = 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.
-     */
-    motionPipelines = new Map();
-    motionModule = null;
-    motionPipelineLayout = null;
-    motionFrameBuffer = null;
-    motionDrawBuffer = null;
-    motionDrawCapacity = 0;
-    motionGroup = null;
-    motionFrameStaging = new Float32Array(MOTION_FRAME_FLOATS);
-    motionDrawStaging = new Uint8Array(0);
+    /** The motion pass, made with the reconstruction's targets. See `MotionPass`. */
+    motionPass = null;
+    /** This renderer's identity to a `Mover`. See `claimRendererId`. */
+    moverRenderer = claimRendererId();
+    /** Frames begun, so a mover can tell last frame from any other. Advanced in `beginFrame`. */
+    moverFrame = 0;
+    /** Between `beginFrame` and `endFrame`. A change outside it is the next frame's. */
+    inFrame = false;
+    warnedMoverTwice = false;
     /** The scene's own clip transform with the generated shaders' y negation folded in. */
     motionRaster = mat4.create();
     reconSizeKey = '';
     /** Last frame's raw view-projection and its inverse, and the two eyes. */
     reconPreviousRawViewProj = mat4.create();
     reconInverseViewProj = mat4.create();
+    /** The inverse and the reprojection, multiplied in double precision. See `runReconstruction`. */
+    reconInverse64 = new Float64Array(16);
+    reconReprojection64 = new Float64Array(16);
     reconPreviousInverseViewProj = mat4.create();
     reconEye = new Float32Array(3);
     reconPreviousEye = new Float32Array(3);
@@ -1597,6 +1658,8 @@ export class WebGPURenderer {
     /** Said once for the whole renderer. See `refuseOitMultisampled`. */
     oitMultisampleRefused = false;
     oitReplaying = false;
+    /** `uSurfaceScene`, resolved once a pass. See `surfaceScene.ts`. */
+    surfaceScene = new Float32Array(4);
     /** Which buffer the replay is filling, which the pipeline key must carry. */
     oitMode = 'none';
     /**
@@ -1692,6 +1755,7 @@ export class WebGPURenderer {
         refraction: 0,
         refractTint: undefined,
         thicknessM: 0,
+        glass: undefined,
     };
     reflectionPassActive = false;
     /** Said once: a mirror asked for outside a frame is a call-order fault, not a device limit. */
@@ -1871,6 +1935,8 @@ export class WebGPURenderer {
         return this.ringList;
     }
     flushRings() {
+        /* 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();
     }
@@ -1968,7 +2034,7 @@ export class WebGPURenderer {
         f[atF('uFogNear')] = medium.fogNear;
         f[atF('uFogFar')] = medium.fogFar;
         this.filmFrags.writeBlock(fragmentSlot, this.filmFragInts);
-        const filmPipe = filmPipeline(this.pipelines, this.surface.device, this.filmLayout, `film|${geometry.key ?? ''}`, this.presentOf(geometry));
+        const filmPipe = filmPipeline(this.blendedPipelines(), this.surface.device, this.filmLayout, `film|${geometry.key ?? ''}`, this.presentOf(geometry));
         /* The mirror is an attachment right now, so the group that does not hold it. */
         const filmGroup = this.reflectionPassActive ? this.filmBindGroupBlank : this.filmBindGroup;
         /*
@@ -1977,7 +2043,7 @@ export class WebGPURenderer {
          * 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;
@@ -2067,6 +2133,10 @@ export class WebGPURenderer {
     createSurfaceTexture(source, options = {}) {
         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, options = {}) {
+        return new GpuSurfaceTexture(this.surface.device, this.pipelines, sources, options);
+    }
     /**
      * GPU textures an `updateSurfaceTexture` replaced, destroyed when the next frame begins.
      *
@@ -2159,6 +2229,7 @@ export class WebGPURenderer {
     setSkinPalette(palette) {
         if (this.surface.lost)
             return;
+        this.skinPaletteData = palette;
         if (palette === null) {
             this.skinPaletteSlot = -1;
             return;
@@ -2331,6 +2402,19 @@ export class WebGPURenderer {
             f[this.materialField('uGrain')] = Math.min(1, Math.max(0, amount));
         });
     }
+    /**
+     * 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) {
+        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.
      *
@@ -2482,7 +2566,8 @@ export class WebGPURenderer {
      * no-op before the first `bindMeshPass` of a session, same as every other pass that reads it.
      */
     drawSdfText(text, model, color, opacity) {
-        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;
@@ -2511,9 +2596,9 @@ export class WebGPURenderer {
         ]);
         this.sdfTextFrags.writeInt(fragmentSlot, fragAt('uOutputTransform'), this.gradeCode());
         this.sdfTextFrags.writeFloat(fragmentSlot, fragAt('uOutputExposure'), this.gradeExposure());
-        const sdfPipe = sdfTextPipeline(this.targetPipelines(), this.surface.device, this.sdfTextLayout);
+        const sdfPipe = sdfTextPipeline(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;
@@ -2615,8 +2700,8 @@ export class WebGPURenderer {
         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;
@@ -3035,8 +3120,8 @@ export class WebGPURenderer {
         device.queue.writeBuffer(batch.vertUniforms, 0, batch.vertStaging);
         device.queue.writeBuffer(batch.fragUniforms, 0, batch.fragStaging);
         const layout = this.particleLayoutFor(batch.material).layout;
-        const particlePipe = particlePipeline(this.pipelines, device, layout, batch.material, batch.blend);
-        const particleCommand = this.recordDraw(0, this.currentTarget());
+        const particlePipe = particlePipeline(this.blendedPipelines(), device, layout, batch.material, batch.blend);
+        const particleCommand = this.recordBlended(0);
         if (particleCommand !== null) {
             particleCommand.pipeline = particlePipe;
             particleCommand.bindGroup = batch.bindGroup;
@@ -3154,8 +3239,8 @@ export class WebGPURenderer {
          * with `PlumeRenderer`, which has set `uTint` on every draw since before this backend.
          */
         frags.writeFloats(fragmentSlot, atF('uTint'), plumes.tint);
-        const plumePipe = plumePipeline(this.pipelines, this.surface.device, this.plumeLayout, plumes.material, plumes.blend);
-        const plumeCommand = this.recordDraw(0, this.currentTarget());
+        const plumePipe = plumePipeline(this.blendedPipelines(), this.surface.device, this.plumeLayout, plumes.material, plumes.blend);
+        const plumeCommand = this.recordBlended(0);
         if (plumeCommand !== null) {
             plumeCommand.pipeline = plumePipe;
             plumeCommand.bindGroup = this.plumeBindGroup;
@@ -3598,9 +3683,9 @@ export class WebGPURenderer {
         this.windStreakFragFloats.set(tint, (WIND_STREAK_FRAG_FIELDS.uTint.offset ?? 0) / 4);
         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;
@@ -3788,8 +3873,8 @@ export class WebGPURenderer {
         f[atF('uFogFar')] = medium.fogFar;
         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;
@@ -3898,9 +3983,9 @@ export class WebGPURenderer {
         this.lineFrags.writeInt(fragmentSlot, atF('uFogMode'), medium.fogMode);
         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;
@@ -3941,6 +4026,8 @@ export class WebGPURenderer {
     waterLayout;
     /** The one-pixel stand-in, kept so the water bind group can be rebuilt without one. */
     blankView;
+    /** The blank texel as a one-layer array: the stand-in every surface-texture binding takes. */
+    blankSurfaceView;
     blankSampler;
     /**
      * A slot per body, not one buffer rewritten before each draw.
@@ -4107,7 +4194,38 @@ export class WebGPURenderer {
     sdfTextFrags;
     sdfTextBindGroups = new Map();
     /* -- The shadow pass -------------------------------------------------------------- */
-    shadowMap;
+    /**
+     * 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.
+     */
+    sunShadowTexture;
+    /** Every layer, for the lit pass, the light volumes and the medium. */
+    sunArrayView;
+    /**
+     * 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.
+     */
+    sunStaticArrayView;
+    /** How many layers the sun's texture holds: its maps, and the two glass layers once glass casts. */
+    sunLayerCount;
+    /** The glass depth layers, static then moving, once glass has cast. See `growSunForGlass`. */
+    sunGlassViews = null;
+    /** The texture a growth replaced, destroyed once the encoder that copied out of it is submitted. */
+    retiredSunTexture = null;
+    /** What the sun's light keeps through glass: two `rgba8unorm` layers, made when glass first casts. */
+    sunTint = null;
+    /** The tint pass's layouts, per-draw block, groups and pipelines, made when glass first casts. */
+    glassTint = null;
+    /** The tint pass open while the glass list is replayed into it. */
+    tintPass = null;
+    /** True while the glass list is replayed into a glass depth layer through `casterSink`. */
+    drawingGlassDepth = false;
+    /** Whether the open sun pass is the movers' layer, whose glass goes to the moving glass layer. */
+    shadowLayerIsDynamic = false;
+    /** The glass tints' sampler: filtering, and between levels, for frost's coarser reads. */
+    tintSampler;
+    /** The light a tint pass is drawn for: xyz a direction (w 0) or a position (w 1). */
+    glassLight = new Float32Array(4);
     shadowView;
     shadowLayout;
     /** The same layout plus the joint palette. See `createDepthBindGroupLayout`. */
@@ -4134,7 +4252,6 @@ export class WebGPURenderer {
      * read twice — so a profile that switches peeling off gets no map and no pass on either
      * backend rather than a map nothing writes.
      */
-    peelMap;
     peelView;
     /**
      * The movers' own layer: the character, the rope it swings on, and anything else that walks.
@@ -4156,7 +4273,6 @@ export class WebGPURenderer {
      * and therefore as lit — so nothing looked broken, only empty, which is why it survived the
      * port and every gate in it.
      */
-    dynamicMap;
     dynamicView;
     /** The peel's own bind groups: `uPeelShadowLayer` at 1, and the static map to peel against. */
     shadowPeelBindGroup;
@@ -4230,7 +4346,7 @@ export class WebGPURenderer {
         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;
@@ -4278,8 +4394,23 @@ export class WebGPURenderer {
      * 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`. */
+    glassCasters = new GlassCasterList();
+    /** One resolution every glass caster is read through, so recording one allocates nothing. */
+    glassCasterScratch = {
+        transmission: 0,
+        frost: 0,
+        tint: [1, 1, 1],
+    };
     casterSink = {
         mesh: (mesh, model, material) => {
+            if (!this.drawingGlassDepth && !castsDepth(material)) {
+                /* Glass: kept aside for its own two passes rather than dropped. See `glassCasters.ts`. */
+                if (this.quality.glassShadows !== 'off' && glassOf(material, this.glassCasterScratch)) {
+                    this.glassCasters.recordMesh(mesh, model, material, this.glassCasterScratch);
+                }
+                return;
+            }
             const pass = this.shadowPass;
             if (pass === null)
                 return;
@@ -4313,6 +4444,12 @@ export class WebGPURenderer {
          * 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;
@@ -4346,7 +4483,13 @@ export class WebGPURenderer {
             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;
@@ -4681,7 +4824,9 @@ export class WebGPURenderer {
          * 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.
          */
-        this.pipelines = new PipelineCache(device, quality.screenEffects ? sceneColorFormat(quality.hdrScene) : surface.format, this.samples);
+        /* 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`.
          *
@@ -4693,7 +4838,12 @@ export class WebGPURenderer {
         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]
@@ -4765,6 +4915,9 @@ export class WebGPURenderer {
          * `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' });
         /*
          * A one-texel integer stand-in for the froxel table.
@@ -4814,42 +4967,35 @@ export class WebGPURenderer {
             .createView({ dimension: '3d' });
         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
          * specification requires, and a zero in a map compared with `LEQUAL` is an occluder at the
@@ -4890,6 +5036,14 @@ export class WebGPURenderer {
          * 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`.**
          *
@@ -4910,15 +5064,18 @@ export class WebGPURenderer {
             addressModeV: 'clamp-to-edge',
         });
         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
@@ -4933,7 +5090,7 @@ export class WebGPURenderer {
             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. */
@@ -4941,24 +5098,25 @@ export class WebGPURenderer {
             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.
@@ -4991,18 +5149,8 @@ export class WebGPURenderer {
              * 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
@@ -5028,7 +5176,15 @@ export class WebGPURenderer {
              * 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.
@@ -5208,9 +5364,7 @@ export class WebGPURenderer {
          */
         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',
@@ -5343,9 +5497,9 @@ export class WebGPURenderer {
         device.queue.writeBuffer(depthPassUniforms, 0, new Int32Array([0]));
         this.scatterDepthLayout = createScatterDepthBindGroupLayout(device, DEPTH_FRAG_BINDING, DEPTH_FRAG_SIZE, DEPTH_PREVIOUS_BINDING);
         this.scatterDepthDraws = new UniformRing(device, SCATTER_DEPTH_SIZE, MAX_SCATTER_DEPTH_DRAWS, USAGE_UNIFORM_DST, 'scatter.depthDrawRing', this.scatterDepthBudget);
-        this.scatterDepthBindGroup = createScatterDepthBindGroup(device, this.scatterDepthLayout, this.scatterDepthDraws.buffer, { binding: DEPTH_FRAG_BINDING, buffer: depthPassUniforms, size: DEPTH_FRAG_SIZE }, DEPTH_PREVIOUS_BINDING, blankView, blankSampler);
-        this.shadowBindGroup = createDepthBindGroup(device, this.shadowLayout, this.shadowDraws.buffer, depthPassUniforms, blankView, blankSampler);
-        this.shadowBlankView = blankView;
+        this.scatterDepthBindGroup = createScatterDepthBindGroup(device, this.scatterDepthLayout, this.scatterDepthDraws.buffer, { binding: DEPTH_FRAG_BINDING, buffer: depthPassUniforms, size: DEPTH_FRAG_SIZE }, DEPTH_PREVIOUS_BINDING, blankArrayView, blankSampler);
+        this.shadowBindGroup = createDepthBindGroup(device, this.shadowLayout, this.shadowDraws.buffer, depthPassUniforms, blankArrayView, blankSampler);
+        this.shadowBlankView = blankArrayView;
         this.shadowBlankSampler = blankSampler;
         this.shadowPassUniforms = depthPassUniforms;
         /*
@@ -5376,11 +5530,11 @@ export class WebGPURenderer {
         this.shadowPeelBindGroup =
             peelPassUniforms === null
                 ? null
-                : createDepthBindGroup(device, this.shadowLayout, this.shadowDraws.buffer, peelPassUniforms, this.shadowView, shadowSampler);
+                : createDepthBindGroup(device, this.shadowLayout, this.shadowDraws.buffer, peelPassUniforms, this.sunStaticArrayView, shadowSampler);
         this.scatterDepthPeelBindGroup =
             peelPassUniforms === null
                 ? null
-                : createScatterDepthBindGroup(device, this.scatterDepthLayout, this.scatterDepthDraws.buffer, { binding: DEPTH_FRAG_BINDING, buffer: peelPassUniforms, size: DEPTH_FRAG_SIZE }, DEPTH_PREVIOUS_BINDING, this.shadowView, shadowSampler);
+                : createScatterDepthBindGroup(device, this.scatterDepthLayout, this.scatterDepthDraws.buffer, { binding: DEPTH_FRAG_BINDING, buffer: peelPassUniforms, size: DEPTH_FRAG_SIZE }, DEPTH_PREVIOUS_BINDING, this.sunStaticArrayView, shadowSampler);
         /*
          * The overlays. Rings rather than single blocks because a frame draws several of each —
          * the loader alone is two panels and two strings — and `queue.writeBuffer` does not
@@ -5516,6 +5670,8 @@ export class WebGPURenderer {
                 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;
     }
     /**
@@ -5527,6 +5683,7 @@ export class WebGPURenderer {
      * uncaught exceptions a second in somebody's error reporting.
      */
     beginFrame(clearColor) {
+        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();
@@ -5621,7 +5778,10 @@ export class WebGPURenderer {
         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`.
@@ -5781,6 +5941,15 @@ export class WebGPURenderer {
             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.**
@@ -5904,7 +6073,27 @@ export class WebGPURenderer {
                 'would be patched from was not kept. Say so at `createMesh` — the flag is what decides ' +
                 '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 = 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);
     }
     /**
      * Settle everything the frame shares: the camera, the lights and the fog.
@@ -5952,46 +6141,17 @@ export class WebGPURenderer {
          * 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], -this.reconJitter[1], this.renderWidth, this.renderHeight);
-            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);
-        }
-        else if (!this.reconstructing) {
-            this.temporalHistoryUsable = false;
+        /*
+         * **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.
          *
@@ -6084,8 +6244,11 @@ export class WebGPURenderer {
          * 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.
          *
@@ -6105,6 +6268,9 @@ export class WebGPURenderer {
          */
         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;
         /*
@@ -6532,8 +6698,8 @@ export class WebGPURenderer {
          * 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 });
     }
     /**
@@ -6624,7 +6790,7 @@ export class WebGPURenderer {
          * **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;
         }
@@ -6668,7 +6834,12 @@ export class WebGPURenderer {
             }
             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
@@ -6701,19 +6872,19 @@ export class WebGPURenderer {
             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`. */
@@ -6729,17 +6900,7 @@ export class WebGPURenderer {
          * 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 });
@@ -6769,7 +6930,9 @@ export class WebGPURenderer {
          */
         const depthWrite = options.depthWrite ?? true;
         const layer = Math.min(Math.max(Math.round(options.depthLayer ?? 0), 0), MAX_DEPTH_LAYER);
-        const key = `${keyed}${blend ? '|blend' : ''}` +
+        /* Added rather than blended over: its own blend state, so its own pipeline. */
+        const adds = blend && options.additive === true;
+        const key = `${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. */
@@ -6798,14 +6961,14 @@ export class WebGPURenderer {
          * 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);
             if (present === undefined) {
                 throw new Error(`WebGPU: no pipeline for ${key}; createMesh builds it`);
             }
-            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, key, present, blend, skinned, morphed, depthWrite, layer, false, this.oitMode, this.materialDoubleSided);
+            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, key, present, adds ? 'additive' : blend, skinned, morphed, depthWrite, layer, false, this.oitMode, this.materialDoubleSided);
         }
         /*
          * Guards the draw call only, not the restore below.
@@ -6830,7 +6993,9 @@ export class WebGPURenderer {
              * 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);
@@ -6863,19 +7028,17 @@ export class WebGPURenderer {
            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();
         }
@@ -6895,7 +7058,7 @@ export class WebGPURenderer {
      * 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, capacity) {
+    createInstanced(mesh, capacity, options = {}) {
         /*
          * **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
@@ -6921,25 +7084,46 @@ export class WebGPURenderer {
                 'an ordinary mesh, or drop the channel — the sway, sky and alpha lanes cannot reach an ' +
                 '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.key ?? 'mesh'}`);
-        this.instanced.set(mesh, batch);
+        const batch = new GpuInstancedBatch(this.surface.device, mesh, capacity, `flat.instances:${mesh.key ?? 'mesh'}`, options.cull ?? false);
         return batch;
     }
-    /** Which meshes already carry a batch, so a second is refused rather than silently shared. */
-    instanced = new Map();
+    /** The device instance culls, built on the first culling draw. See `InstanceCullPass`. */
+    instanceCulls = null;
+    /** Counts frames, so a batch knows when its cull slots were last taken. */
+    cullFrame = 0;
     /** Push placement and colour. Only the live prefix; see `GpuInstancedBatch.upload`. */
     uploadInstanced(batch, data) {
         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 = 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, data) {
         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. */
     drawTranslucentInstanced(batch, data, opacity, options = {}) {
@@ -6947,9 +7131,46 @@ export class WebGPURenderer {
     }
     /** Release the placement. The mesh is the caller's and is not released. */
     disposeInstanced(batch) {
-        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`.
+     */
+    bindSeeThrough(options) {
+        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. */
+    releaseSeeThrough() {
+        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.
      *
@@ -6962,6 +7183,31 @@ export class WebGPURenderer {
      * **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.
+     */
+    takeCullSlot(batch, count) {
+        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;
+    }
     submitInstanced(batch, data, opacity, blend, options) {
         if (!this.canDraw() || this.viewProj === null)
             return;
@@ -6971,6 +7217,14 @@ export class WebGPURenderer {
         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) {
             if (!this.warnedFull) {
@@ -6979,7 +7233,9 @@ export class WebGPURenderer {
             }
             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);
@@ -6988,43 +7244,46 @@ export class WebGPURenderer {
             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);
         }
         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.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 key = `${base}|inst${blend ? '|blend' : ''}` +
+        const adds = blend && options.additive === true;
+        const key = `${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);
             if (present === undefined) {
                 throw new Error(`WebGPU: no mesh attributes recorded for ${base}; createMesh records them`);
             }
-            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(false, false), this.variant, key, present, blend, false, false, depthWrite, layer, true, 'none', this.materialDoubleSided);
+            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(false, false), this.variant, key, present, adds ? 'additive' : blend, false, false, depthWrite, layer, true, 'none', this.materialDoubleSided);
         }
         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);
@@ -7035,12 +7294,13 @@ export class WebGPURenderer {
                 for (; index < mesh.vertexBuffers.length; index++) {
                     command.vertexBuffers[index] = mesh.vertexBuffers[index];
                 }
-                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();
@@ -7052,9 +7312,12 @@ export class WebGPURenderer {
                 for (; index < mesh.vertexBuffers.length; index++) {
                     pass.setVertexBuffer(index, mesh.vertexBuffers[index]);
                 }
-                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
@@ -7065,11 +7328,13 @@ export class WebGPURenderer {
         }
         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();
     }
@@ -7243,6 +7508,8 @@ export class WebGPURenderer {
         this.lightViewProj.set(lightViewProj);
         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.
@@ -7348,13 +7615,295 @@ export class WebGPURenderer {
         casters(this.casterSink);
     }
     /** Close the shadow pass and submit it, so the frame can sample what it wrote. */
+    /**
+     * 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.
+     */
+    growSunForGlass(encoder) {
+        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();
+    }
+    /** Every group that holds a view of the sun's texture, rebuilt after it has been replaced. */
+    rebuildSunGroups() {
+        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`. */
+    ensureSunTint(encoder) {
+        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) => texture.createView({
+            dimension: '2d',
+            baseArrayLayer: index,
+            arrayLayerCount: 1,
+            baseMipLevel: 0,
+            mipLevelCount: 1,
+        });
+        const mips = (index) => new SnapshotMips(device, this.pipelines, texture, 'rgba8unorm', index, 'shadow.tint.mips');
+        const target = {
+            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;
+    }
+    /**
+     * Draw the pass's glass twice: where the nearest pane is, and what the panes let through.
+     *
+     * 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.
+     */
+    flushSunGlass(encoder, which) {
+        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], m[6], m[10]) || 1;
+        this.glassLight[0] = m[2] / length;
+        this.glassLight[1] = m[6] / length;
+        this.glassLight[2] = m[10] / length;
+        this.glassLight[3] = 0;
+        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. */
+    glassDepthSink = {
+        mesh: (mesh, model, material) => this.casterSink.mesh(mesh, model, material),
+        instanced: (batch, data, material) => this.casterSink.instanced?.(batch, data, material),
+        skinnedMesh: (mesh, model, palette, material) => this.casterSink.skinnedMesh(mesh, model, palette, material),
+    };
+    /**
+     * 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`.
+     */
+    glassTintSink = {
+        mesh: (mesh, model, material, glass) => {
+            const pass = this.tintPass;
+            const tint = this.glassTint;
+            if (pass === null || tint === null)
+                return;
+            const geometry = mesh;
+            if (geometry.vertexBuffers === undefined)
+                return;
+            const cutout = cutoutOf(material);
+            const albedo = cutout === null ? null : cutout.albedo;
+            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);
+            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]);
+            }
+            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;
+            const geometry = gpuBatch.mesh;
+            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;
+            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]);
+            }
+            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;
+            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);
+            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]);
+            }
+            pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+            pass.drawIndexed(geometry.indexCount);
+        },
+    };
     endShadowPass() {
         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.shadowPass.end();
         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;
@@ -7383,6 +7932,8 @@ export class WebGPURenderer {
     preparedPointLightCount = 0;
     /** See `renderer.ts`: built when a world reports its lights, and rebuilt only to grow. */
     pointShadowArray = null;
+    /** The array glass replaced, destroyed once the round that copied out of it is submitted. */
+    retiredPointTexture = null;
     bakeScratch = createBakeScratch(POINT_SHADOW_POOL);
     /** Said once per renderer; see `updatePointShadows`. */
     warnedNoPointShadowArray = false;
@@ -7535,6 +8086,7 @@ export class WebGPURenderer {
          */
         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. */
@@ -7545,7 +8097,7 @@ export class WebGPURenderer {
         /* A frame's resolves take slots in the array's ring; see it for why they cannot share one. */
         this.pointShadowArray?.beginFrame();
         try {
-            runPointShadowBakes(pool, lights, this.quality.pointShadowFacesPerFrame, this.quality.liveShadowFacesPerFrame, this.quality.pointShadowRebakeDistance, FACE_COUNT, this.bakeScratch, staticCasters, dynamicCasters, (map, light, casters, maxFaces) => map.bake(light.x, light.y, light.z, light.radius, (view, viewProj) => this.bakeFace(view, viewProj, casters), (layer, face, far, near) => this.resolveFace(layer, face, far, near), this.faceViewProj, light.shadowNear, light.sourceRadius, maxFaces));
+            runPointShadowBakes(pool, lights, this.quality.pointShadowFacesPerFrame, this.quality.liveShadowFacesPerFrame, this.quality.pointShadowRebakeDistance, FACE_COUNT, this.bakeScratch, staticCasters, dynamicCasters, (map, light, casters, maxFaces) => map.bake(light.x, light.y, light.z, light.radius, (view, viewProj) => this.bakeFace(view, viewProj, casters), (layer, face, far, near, x, y, z) => this.resolveFace(layer, face, far, near, x, y, z), this.faceViewProj, light.shadowNear, light.sourceRadius, maxFaces));
             /*
              * **Inside the same encoder and the same try, which is the whole reason the rectangles' bakes
              * ride this call.** Every face is its own render pass, they share one submission, and the
@@ -7553,11 +8105,14 @@ export class WebGPURenderer {
              * 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
@@ -7569,6 +8124,9 @@ export class WebGPURenderer {
             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;
         }
         /*
          * **No rebind here any more.** Twelve cube views meant the bind group named twelve textures,
@@ -7578,6 +8136,10 @@ export class WebGPURenderer {
          * 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);
     }
     /**
      * The rectangles' round, inside the shadow encoder this backend already opened.
@@ -7603,10 +8165,13 @@ export class WebGPURenderer {
                     set.release();
             }
         }
-        set.update(areaLights, frameDt, this.quality.pointShadowFacesPerFrame, this.quality.liveShadowFacesPerFrame, this.quality.pointShadowRebakeDistance, FACE_COUNT, this.areaBakeScratch, staticCasters, dynamicCasters, (map, light, range, near, casters, maxFaces) => map.bake(light.x, light.y, light.z, range, (view, viewProj) => this.bakeFace(view, viewProj, casters), (layer, face, far, mapNear) => this.resolveFace(layer, face, far, mapNear), this.faceViewProj, near, 
+        set.update(areaLights, frameDt, this.quality.pointShadowFacesPerFrame, this.quality.liveShadowFacesPerFrame, this.quality.pointShadowRebakeDistance, FACE_COUNT, this.areaBakeScratch, staticCasters, dynamicCasters, (map, light, range, near, casters, maxFaces) => map.bake(light.x, light.y, light.z, range, (view, viewProj) => this.bakeFace(view, viewProj, casters), (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. */
         DEFAULT_SOURCE_RADIUS, maxFaces));
         set.resolve(areaLights, this.resolvedAreaShadows);
+        const stride = this.pointShadowArray?.stride ?? 1;
+        strideLayers(this.resolvedAreaShadows.layer, stride);
+        strideLayers(this.resolvedAreaShadows.liveLayer, stride);
     }
     /**
      * One cubemap face: a depth pass, the casters, done.
@@ -7634,10 +8199,27 @@ export class WebGPURenderer {
                 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();
+            }
+        }
+    }
     /**
      * One rendered face into its region of the light's octahedral layer.
      *
@@ -7645,12 +8227,64 @@ export class WebGPURenderer {
      * serve every light: the face is consumed before the next one is drawn. See
      * `pointShadowArray.ts` for why the regions are disjoint.
      */
-    resolveFace(layer, face, far, near) {
+    resolveFace(layer, face, far, near, x, y, z) {
         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);
     }
     buildFlatBindGroup() {
         return createFlatBindGroup(this.surface.device, this.bindGroupLayout, this.variant, this.perDraw.buffer, this.perFrame.buffer, this.flatTextures);
@@ -7959,8 +8593,10 @@ export class WebGPURenderer {
          * 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.**
          *
@@ -7982,6 +8618,9 @@ export class WebGPURenderer {
          */
         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);
@@ -8015,6 +8654,23 @@ export class WebGPURenderer {
         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] / this.renderWidth
+            : this.temporalJittering
+                ? this.temporalJitterX / this.renderWidth
+                : 0;
+        f[at('uAoOffset') + 1] = this.reconstructing
+            ? -this.reconJitter[1] / 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);
@@ -8156,6 +8812,8 @@ export class WebGPURenderer {
         this.reconSizeKey = key;
         for (const dead of [
             ...this.reconHistories,
+            ...this.reconFlickers,
+            ...this.reconSwings,
             this.reconShown,
             this.reconMotion,
             this.reconPreviousDepth,
@@ -8164,6 +8822,10 @@ export class WebGPURenderer {
         }
         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;
@@ -8188,24 +8850,44 @@ export class WebGPURenderer {
             });
             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],
@@ -8259,6 +8941,26 @@ export class WebGPURenderer {
                         viewDimension: '2d',
                     },
                 },
+                sampled(8, 'float'),
+                {
+                    binding: 9,
+                    visibility: COMPUTE,
+                    storageTexture: {
+                        access: 'write-only',
+                        format: RECON_HISTORY_FORMAT,
+                        viewDimension: '2d',
+                    },
+                },
+                sampled(10, 'unfilterable-float'),
+                {
+                    binding: 11,
+                    visibility: COMPUTE,
+                    storageTexture: {
+                        access: 'write-only',
+                        format: 'r32float',
+                        viewDimension: '2d',
+                    },
+                },
             ],
         });
         const module = device.createShaderModule({ label: 'recon.resolve', code: reconResolveWgsl() });
@@ -8293,7 +8995,7 @@ export class WebGPURenderer {
         if (this.reconShownView === null)
             return;
         const { device } = this.surface;
-        const build = (label, history, target) => device.createBindGroup({
+        const build = (label, history, target, records, nextRecords, swings, nextSwings) => device.createBindGroup({
             label,
             layout,
             entries: [
@@ -8305,223 +9007,226 @@ export class WebGPURenderer {
                 { 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)
+            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);
-            this.reconSharpenGroups[write] = build(`recon.sharpen${String(write)}`, target, this.reconShownView);
+            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`. */
+    jitterFrame() {
+        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], -this.reconJitter[1], this.renderWidth, this.renderHeight);
+            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);
+        }
+        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.
      */
-    recordMotion(mesh, model, previousModel) {
-        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, at * MOTION_DRAW_FLOATS);
-        this.motionMatrices.set(previousModel, at * MOTION_DRAW_FLOATS + 16);
-        this.motionMeshes[at] = mesh;
-        this.motionCount = at + 1;
+    drawsLate() {
+        return (this.latePass !== null &&
+            this.oitEncoder === null &&
+            routesLate(this.reconstructing, this.reflectionPassActive, this.probePassActive, this.framePresented));
     }
     /**
-     * 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.
      */
-    buildMotionPipeline() {
-        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' } },
-                {
-                    binding: 1,
-                    visibility: 0x1,
-                    buffer: { type: 'uniform', hasDynamicOffset: true },
-                },
-            ],
-        });
-        this.motionModule = device.createShaderModule({
-            label: 'recon.motion',
-            code: RECON_MOTION_WGSL,
-        });
-        this.motionPipelineLayout = device.createPipelineLayout({
-            bindGroupLayouts: [this.motionLayout],
-        });
+    recordBlended(reads, lands = this.drawsLate()) {
+        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. */
-    motionPipelineFor(stride) {
-        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. */
+    blendedPipelines(lands = this.drawsLate()) {
+        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.
      */
-    runMotion(encoder) {
-        const target = this.reconMotionView;
+    runLate(encoder) {
+        const late = this.latePass;
+        const shown = this.reconShownView;
         const depth = this.depthView;
-        if (!this.reconstructing || target === null || depth === null)
+        if (!this.reconstructing || late === null || shown === null || depth === null)
             return;
-        const { device } = this.surface;
-        this.buildMotionPipeline();
-        const layout = this.motionLayout;
-        if (layout === null)
+        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], this.reconJitter[1]);
+        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;
-        /*
-         * **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.
-         */
         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,
             },
         });
-        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, 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, 0);
-            this.motionFrameStaging.set(this.frameRawViewProj, 16);
-            this.motionFrameStaging.set(this.reconPreviousRawViewProj, 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, 0, this.motionDrawStaging, 0, bytes);
-            let bound = 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]);
-                pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
-                pass.drawIndexed(mesh.indexCount);
-            }
-        }
+        late.replay(pass, this.issueBound);
         pass.end();
     }
+    /** Whether this draw lands in the reconstructed picture. See `lateRouting.ts`. */
+    tracksMotionNow() {
+        return tracksMotion(this.reconstructing, this.reflectionPassActive, this.probePassActive, this.framePresented);
+    }
+    /**
+     * 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.
+     */
+    recordDrawMotion(mesh, model, previous) {
+        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;
+        }
+        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`.
+     */
+    recordSkinnedMotion(mesh, model, mover) {
+        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);
+    }
+    warnMoverTwice() {
+        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.
+     */
+    runMotion(encoder) {
+        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, this.frameRawViewProj, this.reconPreviousRawViewProj, this.gpuTimer.writesFor());
+    }
     /**
      * DriftTR tier 0: the jittered render at the render size into the picture at the output size.
      *
@@ -8551,7 +9256,16 @@ export class WebGPURenderer {
          * 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];
+        }
         const f = this.reconFloats;
         const u = this.reconInts;
         u[0] = this.renderWidth;
@@ -8575,6 +9289,17 @@ export class WebGPURenderer {
         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);
         const groupsY = Math.ceil(outputHeight / RECON_WORKGROUP);
@@ -8904,9 +9629,12 @@ export class WebGPURenderer {
             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;
         }
@@ -8920,12 +9648,13 @@ export class WebGPURenderer {
          */
         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;
             }
         }
@@ -8964,6 +9693,7 @@ export class WebGPURenderer {
                 options.refraction = draw.refraction;
                 options.refractTint = draw.refractTint;
                 options.thicknessM = draw.thicknessM;
+                options.glass = draw.glass ?? undefined;
                 this.drawTranslucentMesh(draw.mesh, draw.model, draw.opacity, options);
             });
             this.oitReplaying = false;
@@ -8987,7 +9717,7 @@ export class WebGPURenderer {
             label: 'post.oit.resolve',
             colorAttachments: [{ view: scene, loadOp: 'load', storeOp: 'store' }],
         });
-        resolve.setPipeline(postPipeline(this.pipelines, device, this.oitResolveLayout, 'post.oitResolve', OIT_RESOLVE_FRAG_WGSL, sceneColorFormat(this.quality.hdrScene), OIT_COMPOSITE_BLEND));
+        resolve.setPipeline(postPipeline(this.pipelines, device, this.oitResolveLayout, this.reconstructing ? 'post.oitResolve.recon' : 'post.oitResolve', OIT_RESOLVE_FRAG_WGSL, this.reconstructing ? RECON_HISTORY_FORMAT : sceneColorFormat(this.quality.hdrScene), OIT_COMPOSITE_BLEND));
         resolve.setBindGroup(0, group);
         resolve.draw(3);
         resolve.end();
@@ -9294,18 +10024,14 @@ export class WebGPURenderer {
      * the drawing buffer: `ensureComposite` calls this again whenever it rebuilds that target.
      */
     buildLightVolumeBindGroup() {
-        return createLightVolumeBindGroup(this.surface.device, this.lightVolumeLayout, this.lightVolumeVariant, 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.
-                         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);
+        return createLightVolumeBindGroup(this.surface.device, this.lightVolumeLayout, this.lightVolumeVariant, this.lightVolumeVertices.buffer, this.lightVolumeFragments.buffer, (name) => 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);
     }
     /**
      * Copy the colour the frame has drawn so far, so a refracting draw can read it.
@@ -9331,6 +10057,12 @@ export class WebGPURenderer {
             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)
@@ -9372,6 +10104,8 @@ export class WebGPURenderer {
             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',
@@ -9697,6 +10431,7 @@ export class WebGPURenderer {
         command.indexBuffer = null;
         command.indexed = false;
         command.instances = 1;
+        command.indirect = null;
         recordNode(this.arena, VERB_DRAW, reads, writes, at, 0);
         return command;
     }
@@ -9723,7 +10458,13 @@ export class WebGPURenderer {
         if (verb !== VERB_DRAW)
             return;
         const command = this.commands.commands[nodeState(this.arena, at)];
-        if (command === undefined || command.pipeline === null || command.bindGroup === null)
+        if (command === undefined)
+            return;
+        this.issueCommand(pass, command);
+    }
+    /** One recorded draw, issued into an open pass. Shared by the graph's replay and `runLate`. */
+    issueCommand(pass, command) {
+        if (command.pipeline === null || command.bindGroup === null)
             return;
         pass.setPipeline(command.pipeline);
         if (command.offsetCount === 2) {
@@ -9742,7 +10483,10 @@ export class WebGPURenderer {
         }
         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);
@@ -9972,6 +10716,7 @@ export class WebGPURenderer {
         this.encoder = null;
     }
     endFrame() {
+        this.inFrame = false;
         if (this.surface.lost || this.encoder === null)
             return;
         /*
@@ -10357,6 +11102,10 @@ export class WebGPURenderer {
      * 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, max) {
+        return this.occlusion?.occludedBox(min, max) ?? false;
+    }
     occluded(bounds, model) {
         return this.occlusion?.occluded(bounds, model) ?? false;
     }
@@ -10755,12 +11504,14 @@ export class WebGPURenderer {
         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));
@@ -10787,9 +11538,8 @@ export class WebGPURenderer {
          * 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);
@@ -10861,10 +11611,29 @@ export class WebGPURenderer {
         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.
+     */
+    passSize() {
+        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;
+    }
+    passSizeOut = [0, 0];
     /**
      * Copy a rectangle of the frame into a 2D canvas, pixel for pixel.
      *
@@ -11102,6 +11871,10 @@ export class WebGPURenderer {
      *
      * What it gives up is one frame of history: the frame after a cut has no blur and no temporal
      * blend, as the first frame of a session has none. Nothing else is reset.
+     *
+     * **A reconstructing renderer depends on it**: its history is the last shot's, and without this
+     * call a cut blends that shot into the first frames of the next. Nothing detects a cut on the
+     * caller's behalf, deliberately — a fast pan and a cut look alike from here.
      */
     cameraCut() {
         this.hasPreviousView = false;
@@ -11277,9 +12050,9 @@ export class WebGPURenderer {
         f[atF('uFogFar')] = medium.fogFar;
         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;
@@ -11382,8 +12155,12 @@ export class WebGPURenderer {
     probeView = null;
     probeSize;
     probeMipLayout;
-    /** The photometric atlas, allocated on first use. See `setIesProfiles`. */
-    iesTexture = null;
+    /** The fixture atlas — cookies over profiles — built on first use. See `fixtureAtlas.ts`. */
+    fixtureTexture = null;
+    fixtureView = null;
+    /** The profiles as packed and the cookie images, kept so either can rebuild the atlas. */
+    iesAtlas = packIesAtlas([]);
+    cookieImages = [];
     /** The scene's DriftLight field, and its two volumes once it is whole. See `createLightField`. */
     lightField = null;
     driftIndex = null;
@@ -11397,10 +12174,7 @@ export class WebGPURenderer {
     /** The frame's exact lights packed for the traced bake. See `gi/bounceLights.ts`. */
     bounceLights = createBounceLights();
     bakeLamps = { data: this.bounceLights, count: 0, falloff: 0 };
-    iesView = null;
-    cookieTexture = null;
-    cookieView = null;
-    /** Tiles in the cookie atlas. 0 is the white placeholder and the whole off path. */
+    /** Cookie tiles in the atlas. 0 is none, and the whole off path. */
     cookieTiles = 0;
     /** Rows in that atlas. One until a consumer loads a profile, which is the row of ones. */
     iesRows = 1;
@@ -11847,35 +12621,50 @@ export class WebGPURenderer {
     setSpotCookies(images) {
         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. */
+    forgetFixtureAtlas() {
+        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.
+     */
+    fixtureAtlasView() {
+        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 });
-        }
-        else {
-            for (let tile = 0; tile < tiles; tile++) {
-                const source = images[tile];
-                if (source === undefined)
-                    continue;
-                device.queue.copyExternalImageToTexture({ source: source }, { texture: this.cookieTexture, origin: { x: tile * COOKIE_TILE, y: 0 } }, { width: COOKIE_TILE, height: COOKIE_TILE });
-            }
+        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 }, { texture, 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;
     }
     /**
      * Sum a scene's many fixed lights into a DriftLight field. The same contract as
@@ -11887,6 +12676,19 @@ export class WebGPURenderer {
         this.lightField = field;
         return field;
     }
+    /**
+     * Hand a world's DriftLight volume to the renderer: every fixed light of a city, summed offline by
+     * `bakeDenseField`, standing in past the frame's exact choice. Replaces any field made before, of
+     * either kind; the scene calls `field.follow(buffer.complete, ...)` each frame as it would for
+     * `createLightField`, and marks the lights the volume summed `inLightField` so none is counted
+     * twice. See `driftLight/worldLightField.ts`.
+     */
+    createWorldLightField(volume, options = {}) {
+        this.forgetLightFieldVolumes();
+        const field = new WorldLightField(volume, options);
+        this.lightField = field;
+        return field;
+    }
     /** Let go of the field and its volumes; the scene's lights are all exact again. */
     disposeLightField() {
         this.forgetLightFieldVolumes();
@@ -11912,13 +12714,13 @@ export class WebGPURenderer {
      */
     uploadLightField() {
         const field = this.lightField;
-        if (field === null || this.driftAtlas !== null || !field.ready || field.layout.count === 0) {
+        if (field === null || this.driftAtlas !== null || !field.ready || field.empty) {
             return;
         }
         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],
@@ -11926,7 +12728,7 @@ export class WebGPURenderer {
             format: 'r32uint',
             usage: 0x2 | 0x4, // COPY_DST | TEXTURE_BINDING
         });
-        device.queue.writeTexture({ texture: index }, field.layout.index, { bytesPerRow: ix * 4, rowsPerImage: iy }, [ix, iy, iz]);
+        device.queue.writeTexture({ texture: index }, field.index, { bytesPerRow: ix * 4, rowsPerImage: iy }, [ix, iy, iz]);
         const [aw, ah, ad] = field.atlasSize;
         const atlas = device.createTexture({
             label: 'driftLight.atlas',
@@ -11951,41 +12753,8 @@ export class WebGPURenderer {
     setIesProfiles(profiles) {
         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();
     }
     /** Each level from the one above it, six faces at a time. See `probePass.ts`. */
@@ -12158,6 +12927,33 @@ export class WebGPURenderer {
      * 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.
+     */
+    buildMediumBindGroup() {
+        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 },
+            ],
+        });
+    }
     ensureComposite(width, height) {
         if (!this.hasComposite)
             return;
@@ -12213,13 +13009,29 @@ export class WebGPURenderer {
          * 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
@@ -12359,10 +13171,14 @@ export class WebGPURenderer {
          * 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 = 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,
         });
@@ -12370,7 +13186,7 @@ export class WebGPURenderer {
         this.oitReveal?.destroy();
         this.oitReveal = device.createTexture({
             label: 'post.oitReveal',
-            size: [width, height],
+            size: oitSize,
             format: 'r8unorm',
             usage: USAGE,
         });
@@ -12383,7 +13199,10 @@ export class WebGPURenderer {
          * 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],
@@ -12469,39 +13288,7 @@ export class WebGPURenderer {
                 ...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, view) => [
-            { 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
@@ -12580,13 +13367,30 @@ export class WebGPURenderer {
         /* 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((view, index) => device.createBindGroup({
+        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.
+     */
+    rebuildBloomGroups() {
+        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}`,
             layout: this.bloomLayout,
             entries: [
@@ -12594,10 +13398,10 @@ export class WebGPURenderer {
                     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();
     }
     /**
      * Every bloom stage's uniform block, written once per size rather than once per frame.
@@ -12614,12 +13418,12 @@ export class WebGPURenderer {
         if (levels.length === 0)
             return;
         const slot = (index) => (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) => 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;
@@ -12684,6 +13488,10 @@ export class WebGPURenderer {
      * the 2026-08-13 rule asks for — one decision, bound twice.
      */
     dispose() {
+        this.motionPass?.dispose();
+        this.motionPass = null;
+        this.latePass?.dispose();
+        this.latePass = null;
         for (const texture of this.retiredTextures)
             texture.destroy();
         this.retiredTextures.length = 0;
@@ -12700,6 +13508,13 @@ export class WebGPURenderer {
         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;
         this.skinPalettes.dispose();