@driftengine/core 4.4.2 → 4.5.0

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

@@ -3,13 +3,20 @@ import { probeFaceRange } from '../../reflectionProbe.js';
 import { TEMPORAL_HISTORY_BLEND, TemporalHistory, 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';
@@ -38,6 +45,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 +74,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';
@@ -762,6 +774,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 +893,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 +902,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`.
      *
@@ -1393,10 +1446,10 @@ 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];
@@ -1418,34 +1471,15 @@ 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 = '';
@@ -1692,6 +1726,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. */
@@ -1968,7 +2003,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 +2012,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;
@@ -2159,6 +2194,7 @@ export class WebGPURenderer {
     setSkinPalette(palette) {
         if (this.surface.lost)
             return;
+        this.skinPaletteData = palette;
         if (palette === null) {
             this.skinPaletteSlot = -1;
             return;
@@ -2482,7 +2518,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 +2548,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 +2652,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 +3072,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 +3191,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 +3635,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 +3825,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 +3935,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;
@@ -4107,7 +4144,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 +4202,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 +4223,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 +4296,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 +4344,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 +4394,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 +4433,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 +4774,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 +4788,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]
@@ -4814,42 +4914,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 +4983,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 +5011,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
@@ -4956,10 +5060,6 @@ export class WebGPURenderer {
                     ? { view: blankView, 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 room, once a bake has filled it. Unbaked reads as the blank cube: nothing to mirror.
              *
@@ -5028,7 +5128,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 +5316,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 +5449,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 +5482,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
@@ -5621,7 +5727,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`.
@@ -5904,7 +6013,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.
@@ -6532,8 +6661,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 });
     }
     /**
@@ -6668,7 +6797,9 @@ 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. */
+        const late = blend && (this.drawsLate() || (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
@@ -6729,17 +6860,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 });
@@ -6798,7 +6919,7 @@ 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() : this.targetPipelines();
         let pipeline = pipelines.peek(key);
         if (pipeline === undefined) {
             const present = this.meshPresent.get(base);
@@ -6830,7 +6951,7 @@ 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) : this.recordDraw(0, this.currentTarget());
             if (command !== null) {
                 command.pipeline = pipeline;
                 command.bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
@@ -6871,11 +6992,10 @@ export class WebGPURenderer {
             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;
-        }
+        /* 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();
         }
@@ -6935,11 +7055,35 @@ export class WebGPURenderer {
     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 = {}) {
@@ -6950,6 +7094,44 @@ export class WebGPURenderer {
         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.
      *
@@ -6979,7 +7161,7 @@ export class WebGPURenderer {
             }
             return;
         }
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, this.viewProj);
+        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, blend && this.drawsLate() ? 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);
@@ -7002,8 +7184,9 @@ export class WebGPURenderer {
         }
         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';
@@ -7013,7 +7196,7 @@ export class WebGPURenderer {
         const key = `${base}|inst${blend ? '|blend' : ''}` +
             `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
             `${this.materialDoubleSided ? '|2s' : ''}`;
-        const pipelines = this.targetPipelines();
+        const pipelines = blend ? this.blendedPipelines() : this.targetPipelines();
         let pipeline = pipelines.peek(key);
         if (pipeline === undefined) {
             const present = this.meshPresent.get(base);
@@ -7024,7 +7207,7 @@ export class WebGPURenderer {
         }
         const material = this.materialSlotForDraw();
         if (material !== null) {
-            const command = this.recordDraw(0, this.currentTarget());
+            const command = blend ? this.recordBlended(0) : this.recordDraw(0, this.currentTarget());
             if (command !== null) {
                 command.pipeline = pipeline;
                 command.bindGroup = this.flatBindGroupFor(false, false, null);
@@ -7070,6 +7253,8 @@ export class WebGPURenderer {
         if (!toneMapped) {
             this.perFrameInts[this.materialField('uOutputTransform')] = this.gradeCode();
         }
+        if (refracting)
+            this.releaseSeeThrough();
         if (own)
             this.materials.dirty();
     }
@@ -7243,6 +7428,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 +7535,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 +7852,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 +8006,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 +8017,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 +8025,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 +8044,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 +8056,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 +8085,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,9 +8119,26 @@ 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 +8147,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 +8513,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 +8538,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);
@@ -8193,19 +8752,23 @@ export class WebGPURenderer {
             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],
@@ -8321,207 +8884,153 @@ export class WebGPURenderer {
         this.rebuildRushBindGroup();
     }
     /**
-     * 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) {
+        const late = this.latePass;
+        if (late !== null && this.drawsLate())
+            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() {
+        return this.drawsLate() ? 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);
+        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.
      *
@@ -8904,9 +9413,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 +9432,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 +9477,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 +9501,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 +9808,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 +9841,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 +9888,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',
@@ -9723,7 +10241,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) {
@@ -9972,6 +10496,7 @@ export class WebGPURenderer {
         this.encoder = null;
     }
     endFrame() {
+        this.inFrame = false;
         if (this.surface.lost || this.encoder === null)
             return;
         /*
@@ -11102,6 +11627,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 +11806,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;
@@ -12158,6 +12687,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 +12769,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 +12931,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 +12946,7 @@ export class WebGPURenderer {
         this.oitReveal?.destroy();
         this.oitReveal = device.createTexture({
             label: 'post.oitReveal',
-            size: [width, height],
+            size: oitSize,
             format: 'r8unorm',
             usage: USAGE,
         });
@@ -12469,39 +13045,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
@@ -12684,6 +13228,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 +13248,12 @@ export class WebGPURenderer {
         this.fieldComposer = null;
         this.driftIndex?.destroy();
         this.driftAtlas?.destroy();
+        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();