@driftengine/core 4.8.7 → 4.10.0

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

@@ -59,17 +59,23 @@ import { sceneCaptureTexels } from '../../sceneCapture.js';
 import { gpuCompressedFormats } from './compressedUpload.js';
 import { GpuClothBinding, GpuClothParticles, clothStandIn } from './clothTextures.js';
 import { MODEL_PARAM_FLOATS, eyeAxisInWorld, packModel, skinProfileDistance, } from '../../surfaceModel.js';
+import { OVERLAY_FLOATS, overlayLays, packSurfaceOverlay, } from '../../surfaceOverlay.js';
+import { frameReflectionsRefused, resolveFrameReflections, } from '../../frameReflections.js';
+import { REFLECTION_SURFACE_FORMAT, ReflectionSurfacePass } from './reflectionSurfacePass.js';
 import { validateClothBinding } from '../../clothBindingData.js';
 import { createSdfTextBindGroup, createSdfTextBindGroupLayout, GpuSdfText, sdfTextPipeline, SDF_TEXT_FRAG_FIELDS, SDF_TEXT_FRAG_SIZE, SDF_TEXT_VERT_FIELDS, SDF_TEXT_VERT_SIZE, } from './sdfTextPass.js';
 import { createFilmBindGroup, createFilmBindGroupLayout, filmPipeline, FILM_FRAG_FIELDS, FILM_FRAG_SIZE, FILM_VERT_FIELDS, FILM_VERT_SIZE, } from './filmPass.js';
 import { reflectionTargetSize } from '../../planarReflectionDraw.js';
 import { drawingBufferSize } from '../../drawingBuffer.js';
-import { MOTION_BLUR_MAX_UV, OUTPUT_TRANSFORM_CODE, RUSH_REACH_UV } from '../../vertexDefaults.js';
+import { MOTION_BLUR_MAX_UV, OBJECT_BLUR_UNKEPT, OUTPUT_TRANSFORM_CODE, RUSH_REACH_UV, clampMotionShare, forwardTransformCode, } from '../../vertexDefaults.js';
+import { FRINGE_FLOATS, resolveFringe } from '../../shaders/fringe.js';
+import { displayHeadroom } from '../../displayRange.js';
+import { DEFAULT_FILMIC_CURVE, FILMIC_CLAMPED, FILMIC_CONSTANTS, FILMIC_WITHOUT_COMPOSITE, resolveFilmicCurve, } from '../../filmicCurve.js';
 import { ExposurePass } from './exposurePass.js';
 import { AO_STORE } from '../../shaders/ambientOcclusion.js';
 import { clampAutoExposure } from '../../shaders/exposure.js';
 import { clampLocalExposure } from '../../shaders/localExposure.js';
-import { createDepthResolveLayout, createPostStageLayout, depthResolvePipeline, postPipeline, postPipelineTargets, sceneColorFormat, AO_BLUR_FIELDS, AO_BLUR_FRAG_WGSL, AO_BLUR_SIZE, AO_BLUR_TEXTURES, AO_BLUR_UNIFORMS, AO_FRAG_FIELDS, AO_FRAG_SIZE, AO_FRAG_WGSL, AO_TEXTURES, AO_UNIFORMS, BLOOM_DOWNSAMPLE_FIELDS, BLOOM_DOWNSAMPLE_FRAG_WGSL, BLOOM_PREFILTER_FIELDS, BLOOM_PREFILTER_FRAG_WGSL, BLOOM_STAGE_SIZE, BLOOM_TEXTURES, BLOOM_UNIFORMS, BLOOM_UPSAMPLE_FIELDS, TINTED_ADD_BLEND, BLOOM_UPSAMPLE_FRAG_WGSL, RESOLVED_DEPTH_FORMAT, RUSH_FRAG_FIELDS, RUSH_FRAG_SIZE, RUSH_FRAG_WGSL, RUSH_TEXTURES, RUSH_UNIFORMS, TAA_FRAG_FIELDS, TAA_FRAG_SIZE, TAA_TEXTURES, TAA_UNIFORMS, TEMPORAL_RESOLVE_FRAG_WGSL, MEDIUM_FRAG_FIELDS, MEDIUM_FRAG_SIZE, MEDIUM_FRAG_WGSL, MEDIUM_TEXTURES, MEDIUM_TRANSMIT_BLEND, MEDIUM_UNIFORMS, MEDIUM_UPSAMPLE_FIELDS, MEDIUM_UPSAMPLE_FRAG_WGSL, MEDIUM_UPSAMPLE_SIZE, MEDIUM_UPSAMPLE_TEXTURES, MEDIUM_UPSAMPLE_UNIFORMS, OIT_COMPOSITE_BLEND, OIT_RESOLVE_FRAG_WGSL, OIT_TEXTURES, DECAL_FRAG_FIELDS, DECAL_FRAG_SIZE, DECAL_MULTIPLY_BLEND, DECAL_PROJECT_FRAG_WGSL, DECAL_TEXTURES, DECAL_UNIFORMS, PREMULTIPLIED_OVER_BLEND, REFLECTION_OVER_BLEND, SSR_FRAG_FIELDS, SSR_FRAG_SIZE, SSR_RESOLVE_FRAG_WGSL, SSR_RESOLVE_TEXTURES, SSR_TEXTURES, SSR_TRACE_FRAG_WGSL, SSR_UNIFORMS, createOitResolveLayout, createSsrResolveLayout, } from './postPass.js';
+import { createDepthResolveLayout, createPostStageLayout, depthResolvePipeline, postPipeline, postPipelineTargets, sceneColorFormat, AO_BLUR_FIELDS, AO_BLUR_FRAG_WGSL, AO_BLUR_SIZE, AO_BLUR_TEXTURES, AO_BLUR_UNIFORMS, AO_FRAG_FIELDS, AO_FRAG_SIZE, AO_FRAG_WGSL, AO_TEXTURES, AO_UNIFORMS, BLOOM_DOWNSAMPLE_FIELDS, BLOOM_DOWNSAMPLE_FRAG_WGSL, BLOOM_PREFILTER_FIELDS, BLOOM_PREFILTER_FRAG_WGSL, BLOOM_STAGE_SIZE, BLOOM_TEXTURES, BLOOM_UNIFORMS, BLOOM_UPSAMPLE_FIELDS, TINTED_ADD_BLEND, BLOOM_UPSAMPLE_FRAG_WGSL, RESOLVED_DEPTH_FORMAT, RUSH_FRAG_FIELDS, RUSH_FRAG_SIZE, RUSH_FRAG_WGSL, RUSH_TEXTURES, RUSH_UNIFORMS, TAA_FRAG_FIELDS, TAA_FRAG_SIZE, TAA_TEXTURES, TAA_UNIFORMS, TEMPORAL_RESOLVE_FRAG_WGSL, MEDIUM_FRAG_FIELDS, MEDIUM_FRAG_SIZE, MEDIUM_FRAG_WGSL, MEDIUM_TEXTURES, MEDIUM_TRANSMIT_BLEND, MEDIUM_UNIFORMS, MEDIUM_UPSAMPLE_FIELDS, MEDIUM_UPSAMPLE_FRAG_WGSL, MEDIUM_UPSAMPLE_SIZE, MEDIUM_UPSAMPLE_TEXTURES, MEDIUM_UPSAMPLE_UNIFORMS, OIT_COMPOSITE_BLEND, OIT_RESOLVE_FRAG_WGSL, OIT_TEXTURES, DECAL_FRAG_FIELDS, DECAL_FRAG_SIZE, DECAL_MULTIPLY_BLEND, DECAL_PROJECT_FRAG_WGSL, DECAL_TEXTURES, DECAL_UNIFORMS, PREMULTIPLIED_OVER_BLEND, FRAME_REFLECTION_BLEND, REFLECTION_OVER_BLEND, SSR_FRAG_FIELDS, SSR_FRAG_SIZE, SSR_MATERIAL_FIELDS, SSR_MATERIAL_RESOLVE_FRAG_WGSL, SSR_MATERIAL_SIZE, SSR_MATERIAL_TEXTURES, SSR_MATERIAL_UNIFORMS, SSR_RESOLVE_FRAG_WGSL, SSR_RESOLVE_TEXTURES, SSR_TEXTURES, SSR_TRACE_FRAG_WGSL, SSR_UNIFORMS, createOitResolveLayout, createSsrResolveLayout, } from './postPass.js';
 import { GRADE_PLACEHOLDER_SIZE, identityGradeLut, validateGradeLut, } from '../../colourGrade.js';
 import { FILM_LOOK_WITHOUT_COMPOSITE, clampGrain, clampVignette, grainSeed, } from '../../shaders/filmLook.js';
 import { createProbeMipBindGroupLayout, createProbePrefilterBindGroupLayout, PREFILTER_UNIFORM_OFFSETS, probeLevels, probeMipPipeline, probePrefilterPipeline, PROBE_FACES, PROBE_FACE_BASIS, PROBE_FAR_M, PROBE_FOV_DEG, PROBE_MIP_UNIFORM_SIZE, PROBE_NEAR_M, } from './probePass.js';
@@ -91,10 +97,15 @@ import { VIEW_MODEL_DEPTH_SHARE, viewModelDepthRange } from '../../viewModel.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 { 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';
-import { DEPTH_FRAG_BINDING, DEPTH_FRAG_SIZE, DEPTH_FRAG_WGSL, DEPTH_PREVIOUS_BINDING, DEPTH_CUTOUT_VERT_FIELDS, DEPTH_CUTOUT_VERT_SIZE, DEPTH_INSTANCED_CUTOUT_VERT_FIELDS, DEPTH_VERT_FIELDS, DEPTH_VERT_SIZE, SHADOW_FORMAT, createDepthBindGroup, createDepthBindGroupLayout, depthPipeline, } from './depthPass.js';
+import { DEPTH_FORMAT, FLAT_ANIMATED_VERT_FIELDS, FLAT_VERT_FIELDS, FLAT_VERT_SIZE, FLAT_VIEW_FIELDS, FLAT_VIEW_SIZE, createFlatBindGroup, createFlatBindGroupLayout, flatFragmentScratch, flatVariant, flatVertexBindings, flatPipeline, flatPipelineAsync, probeStageCeilings, } from './flatPass.js';
+import { GpuBoneAnimation } from './boneAnimations.js';
+import { packBoneAnimation } from '../../boneAnimation.js';
+import { MaterialStore, hashWords } from './materialStore.js';
+import { GpuStaticDraws, encodeBundle, takeRecorded } from './staticBundles.js';
+import { captureStaticDraws, replayStaticDraws } from '../../staticDraws.js';
+import { DEPTH_FRAG_BINDING, DEPTH_FRAG_SIZE, DEPTH_FRAG_WGSL, DEPTH_PREVIOUS_BINDING, DEPTH_CUTOUT_VERT_FIELDS, DEPTH_CUTOUT_VERT_SIZE, DEPTH_INSTANCED_ANIMATED_CUTOUT_VERT_FIELDS, DEPTH_INSTANCED_ANIMATED_VERT_FIELDS, DEPTH_INSTANCED_CUTOUT_VERT_FIELDS, DEPTH_VERT_FIELDS, DEPTH_VERT_SIZE, SHADOW_FORMAT, createDepthBindGroup, createDepthBindGroupLayout, depthPipeline, } from './depthPass.js';
 import { PipelineCache } from './pipelineCache.js';
 import { SKIN_TARGET_FORMAT, SkinScatterPass } from './skinScatterPass.js';
 import { SKY_FIELDS, SKY_UNIFORM_SIZE, createSkyBindGroup, createSkyBindGroupLayout, skyPipeline, } from './skyPass.js';
@@ -215,34 +226,20 @@ const MAX_SKY_DRAWS = 64;
 /**
  * Whether the environment probe's permutation fits this device's per-stage binding limits.
  *
- * The widest flat variant declares one albedo, three directional shadow maps, twelve
- * point-shadow cubes and the probe: seventeen textures and seventeen samplers. WebGPU's default
- * is sixteen of each and an adapter is free to offer no more — this one offers 48 textures and
- * exactly 16 samplers, so the samplers are what decide it.
+ * **Two ceilings, counted separately**: sampled textures and samplers, since textures that share a
+ * sampler (`// wgsl:share` in `flat/preamble.ts`) count once against the second. The widest variant
+ * binds sixteen textures and twelve samplers, which is exactly WebGPU's default texture ceiling, and
+ * `select.ts` asks for the adapter's own — 48 here — so the probe does not depend on that request.
  */
 function probeFits(device) {
     /*
-     * **Two ceilings, counted separately, and they are no longer the same number.**
-     *
-     * The widest permutation declares seventeen sampled textures — one albedo, three directional
-     * shadow maps, the point-shadow array, a normal map and the probe's own cube — **seven**, where
-     * it was seventeen while every point light's shadow was a `samplerCube` of its own. `select.ts` asks
-     * for the adapter's ceiling, which is 48 on this machine against a device default of 16, so
-     * six fits everywhere and the probe no longer depends on the request being granted.
-     *
-     * It used to declare seventeen *samplers* too, and that was the binding constraint: this
-     * adapter offers exactly sixteen and no request can raise it, so the probe stood down and
-     * reflective surfaces kept a gradient. The shadow bindings share one declaration — see
-     * `// wgsl:share shadow` in `flat/preamble.ts`, which costs nothing because they were already
-     * one object — so the count is four, and the fourth is the normal map's: it is a colour image
-     * and wants filtering, which a non-filtering shadow sampler cannot give it.
-     *
-     * **Counted from the generated bindings rather than typed**: `FLAT_BINDINGS.flatFrag`'s
-     * widest variant is `directionalShadows+environmentProbe+pointShadows`, seven textures and
-     * four samplers. A stale number here reads as a device declining a feature it can run.
-     */
-    const TEXTURES = 7;
-    const SAMPLERS = 4;
+     * **Counted from the generated bindings rather than typed** (`probeStageCeilings`). It was typed
+     * here as seven textures and four samplers while the widest variant grew to sixteen and twelve
+     * with the material maps, glass, the fixture atlas and DriftLight: a stale number reads as a
+     * device declining a feature it can run, or, the way this one had drifted, as one admitted to a
+     * permutation it cannot bind.
+     */
+    const { textures: TEXTURES, samplers: SAMPLERS } = probeStageCeilings();
     const fits = device.limits.maxSampledTexturesPerShaderStage >= TEXTURES &&
         device.limits.maxSamplersPerShaderStage >= SAMPLERS;
     if (!fits) {
@@ -279,6 +276,7 @@ const VERB_PASS = 3;
 /** What the depth snapshot copies from, and what it copies into. */
 const DEPTH_SOURCE = maskOf('sceneDepth');
 const DEPTH_SNAPSHOT = maskOf('depthSnapshot');
+const COLOR_SNAPSHOT = maskOf('colorSnapshot');
 /** The mirror's own colour and depth. */
 const MIRROR_TARGET = maskOf('mirrorColor', 'mirrorDepth');
 /**
@@ -366,6 +364,13 @@ const MAX_WATER_BODIES_PER_FRAME = 16;
  * numbers, because that is precisely the defect the ring exists to end.
  */
 const MAX_BATCHES_PER_FRAME = 8;
+/**
+ * Mesh passes a frame may open before the ring grows: the frame's own, a mirror's, a capture's, and
+ * a probe face's, which gives its slot back once submitted. A frame past it loses the draws of the
+ * passes that found no slot, counted on the `materials` line, and the ring is grown for the next.
+ * Each slot is the pass's block, 3,328 to 6,656 bytes by variant, so the ring is 213 to 426 KB.
+ */
+const PASSES_PER_FRAME = 64;
 /** Buffer usage flags, from the specification. See `buffers.ts` for why they are not read off the global. */
 const USAGE_UNIFORM_DST = 0x0040 | 0x0008;
 /**
@@ -866,6 +871,8 @@ export class WebGPURenderer {
     skinnedBindGroupLayout;
     morphedBindGroupLayout;
     bothBindGroupLayout;
+    /** The instanced layout of a batch playing a bone animation. See `animatedGroup`. */
+    animatedBindGroupLayout;
     /** The morph weights the following draws use, or null for none. */
     morphWeights = null;
     /**
@@ -878,14 +885,15 @@ export class WebGPURenderer {
      * group per character per frame — an allocation in the frame loop, which `AGENTS.md` forbids.
      * Keyed by slot instead, the groups are built once and reused for the life of the renderer.
      */
+    /*
+     * **And by material within a slot**, keyed by the unskinned group each was built beside. One
+     * group a slot was rebuilt whenever the material beside it changed, so a character drawn in
+     * thirty-odd sections, each its own material, built one a section a frame — about ninety a frame
+     * for two characters, reported by a consumer. A slot's map holds one entry a material its rigs
+     * are drawn in, and is emptied wherever the unskinned groups are, whose identities it is keyed
+     * by.
+     */
     skinnedGroups = [];
-    /** The unskinned group each was built beside, for identity-based invalidation. */
-    skinnedGroupsBeside = [];
-    skinnedGroupsPalette = [];
-    skinnedGroupsDeltas = [];
-    /** The cloth views each skinned twin was built with, compared by identity like the palette. */
-    skinnedGroupsCloth = [];
-    skinnedGroupsClothBinding = [];
     /** The cloth the next skinned draws are placed by, or null. See `setCloth`. */
     cloth = null;
     clothStandCache = null;
@@ -953,22 +961,51 @@ export class WebGPURenderer {
     /** Every distinct cache above, so a mesh's pipelines are built for each. One entry when aliased. */
     pipelineTargets;
     bindGroupLayout;
-    /** One slot per draw, uploaded once a frame. See `UniformRing`. */
+    /** One slot per draw, uploaded once a frame. See `UniformRing`. Swapped while a static list records. */
     perDraw;
-    /** The lights, fog and camera, settled once per frame by `bindMeshPass`. */
-    perFrame;
     /**
-     * The material block as the CPU holds it, patched by the setters and copied into a slot.
+     * The lights, fog and camera, a slot per mesh pass a frame opens: `bindMeshPass` writes them, and
+     * the first draw after it takes a slot. A ring rather than one buffer because a frame opens more
+     * than one pass — a mirror's, a capture's, a probe face's — and a queue write does not interleave
+     * with the draws recorded between them. See `UniformRing`.
+     */
+    passRing;
+    /** Each material's block, kept across frames for as long as it does not change. */
+    materialStore;
+    /**
+     * Both blocks as the CPU holds them, the pass's then the material's, patched by name and copied
+     * into a slot by the next draw after something changed them. See `FlatFragmentScratch`.
      *
      * Authoritative between draws: a setter changes one field here and marks the block dirty, and
-     * the next `drawMesh` takes a slot and copies the whole thing in. That keeps a setter free of
-     * any knowledge of slots, which is what lets it be called anywhere a scene wants.
+     * the next `drawMesh` places it. That keeps a setter free of any knowledge of slots, which is
+     * what lets it be called anywhere a scene wants.
      */
     perFrameStaging;
     perFrameFloats;
     perFrameInts;
+    /** The two halves of the scratch, as the words a slot is written from. */
+    passInts;
+    materialInts;
     /** The slot the open material occupies, and whether the next draw must take a new one. */
     materials = new MaterialChanges();
+    /** The same for the pass's block: reopened by `bindMeshPass` and by nothing a material sets. */
+    passBlock = new MaterialChanges();
+    /**
+     * The vertex stage's view block — the camera, the light's matrix, the wind — a slot a pass, and a
+     * second, unjittered, for a blended draw landing after the upscale. Reopened with the pass, and by
+     * `setWind` and `beginShadowPass`, which change what it holds.
+     */
+    viewRing;
+    viewBlock = new MaterialChanges();
+    lateViewBlock = new MaterialChanges();
+    /** The view slot the draw being submitted bound, read by the halves it keeps for later passes. */
+    drawViewOffset = 0;
+    /** Pass slots asked for and refused this frame, and materials refused: what grows the two. */
+    passesAsked = 0;
+    passesRefused = 0;
+    viewsAsked = 0;
+    viewsRefused = 0;
+    materialsRefused = 0;
     /*
      * The frame graph's recording, and the machinery that replays it.
      *
@@ -1221,7 +1258,7 @@ export class WebGPURenderer {
     variant;
     /** Whether this profile compiled the point-shadow path, and so has sentinels to write. */
     pointShadowsCompiled;
-    /** What the generator recorded about that permutation: sizes, offsets and bindings. */
+    /** What the generator recorded about that permutation, as the renderer's scratch lays it out. */
     fragment;
     depth = null;
     depthView = null;
@@ -1280,6 +1317,17 @@ export class WebGPURenderer {
      */
     refractSnapshot = null;
     refractSnapshotView = null;
+    /**
+     * The frame's colour as a registered pass reads it (`reads: ['colorSnapshot']`): the scene's own
+     * size and format, refilled at each such pass's draw. Allocated only once a pass declares the
+     * read, beside the frame's targets, and never in the frame loop. See `takePassColour`.
+     */
+    passColour = null;
+    passColourView = null;
+    /** Registered passes that read the colour, queued this frame for after the upscale. */
+    latePasses = [];
+    /** A late pass draws unjittered, as every late draw does. */
+    latePassJitter = new Float32Array(2);
     /** Whether this frame has taken it. One snapshot serves every refracting draw. */
     refractSnapshotTaken = false;
     /**
@@ -1782,8 +1830,18 @@ export class WebGPURenderer {
     reflectionQueue = new ReflectionQueue();
     ssrLayout;
     ssrResolveLayout;
+    /** The frame's materials' reflections, resolved; null where off. See `frameReflections.ts`. */
+    frameReflections;
+    /** Their surface half, null where they are off or cannot be drawn: `reflectionSurfacePass.ts`. */
+    reflectionSurface;
+    /** The material resolve: its layout, its one block (the blur) and its group over the three maps. */
+    ssrMaterialLayout;
+    ssrMaterialUniforms;
+    ssrMaterialFloats = new Float32Array(SSR_MATERIAL_SIZE / 4);
+    ssrMaterialGroup = null;
     ssrUniforms;
-    ssrStaging = new ArrayBuffer(SSR_SLOT * MAX_REFLECTIVE_SURFACES);
+    /* One slot a surface, and one more for the frame's materials' trace. */
+    ssrStaging = new ArrayBuffer(SSR_SLOT * (MAX_REFLECTIVE_SURFACES + 1));
     ssrFloats = new Float32Array(this.ssrStaging);
     ssrReflection = null;
     ssrReflectionView = null;
@@ -1920,7 +1978,7 @@ export class WebGPURenderer {
             recordNode(this.arena, VERB_SCOPE, 0, MIRROR_TARGET, 0, 0);
         this.pass?.end();
         this.flushRings();
-        this.surface.device.queue.submit([this.encoder.finish()]);
+        this.submit([this.encoder.finish()]);
         this.encoder = this.surface.device.createCommandEncoder({ label: 'reflection' });
         /*
          * **Opened on demand, like the frame's own.** Nothing has been recorded into the mirror yet,
@@ -1978,7 +2036,8 @@ export class WebGPURenderer {
             this.windStreakFrags,
             this.scatterVerts,
             this.scatterFrags,
-            this.perFrame,
+            this.passRing,
+            this.viewRing,
             this.filmVerts,
             this.filmFrags,
             this.insetUniforms,
@@ -1999,6 +2058,7 @@ export class WebGPURenderer {
         this.instanceCulls?.flush();
         for (const ring of this.rings())
             ring.flush();
+        this.materialStore.flush();
     }
     /** Where every ring stands before work that submits an encoder of its own. */
     ringMarks = [];
@@ -2018,6 +2078,8 @@ export class WebGPURenderer {
         const rings = this.rings();
         for (let i = 0; i < rings.length; i++)
             rings[i].rewind(this.ringMarks[i] ?? 0);
+        /* The open pass may sit in a slot just given back, which the next pass would overwrite. */
+        this.reopenPass();
         this.skinPalettes.rewind(skinMark);
         if (this.skinPaletteSlot >= skinMark)
             this.skinPaletteSlot = -1;
@@ -2263,9 +2325,16 @@ export class WebGPURenderer {
         camera.updateMatrices(target.width / target.height);
         const { device } = this.surface;
         const { depth, colorMsaa } = target.attachments(this.samples, this.pipelines.format);
-        const savedPass = this.pass;
+        /*
+         * **Flushed, and only then set aside.** The flush replays what the frame has recorded, and
+         * replaying opens the frame's pass where none is open yet; saved before it, the pass given back
+         * afterwards was the null that stood there, while the one the flush opened was left open on the
+         * frame's encoder and every later pass on it was refused — a black frame for any capture taken
+         * after the frame had drawn something. `scripts/capture-check.mjs` takes one at three points.
+         */
         if (this.quality.frameGraph)
             this.flushGraph();
+        const savedPass = this.pass;
         const savedEncoder = this.encoder;
         this.markRings();
         const skinMark = this.skinPalettes.mark();
@@ -2308,7 +2377,7 @@ export class WebGPURenderer {
             pass.end();
             this.pass = null;
             this.flushRings();
-            device.queue.submit([encoder.finish()]);
+            this.submit([encoder.finish()]);
             this.rewindRings(skinMark);
             this.encoderEpoch = frameEpoch;
             this.encoder = savedEncoder;
@@ -2316,6 +2385,7 @@ export class WebGPURenderer {
             this.perFrameInts[this.materialField('uOutputTransform')] = heldGrade;
             this.perFrameFloats[this.materialField('uOutputExposure')] = heldExposure;
             this.materials.dirty();
+            this.reopenPass();
             this.capturePassActive = false;
         }
         return true;
@@ -2331,10 +2401,11 @@ export class WebGPURenderer {
     updateSurfaceTexture(texture, source) {
         if (this.surface.lost)
             return;
-        const replaced = texture.update(source);
+        const replaced = texture.update(source, this.compressedFormats);
         if (replaced === null)
             return;
-        /* A new size is a new view, so every group holding the old one is dropped — see below. */
+        /* A new size or format is a new view, so every group holding the old one is dropped — see
+           below. */
         this.retiredTextures.push(replaced);
         this.forgetBindingsOf(texture);
     }
@@ -2371,6 +2442,8 @@ export class WebGPURenderer {
             this.emissiveMap = null;
         if (this.modelMap === texture)
             this.modelMap = null;
+        if (this.overlayMaps === texture)
+            this.overlayMaps = null;
         this.forgetBindingsOf(texture);
         texture.dispose();
         this.captureTargets.get(texture)?.dispose();
@@ -2388,6 +2461,9 @@ export class WebGPURenderer {
         /* Same reasoning, for whichever SDF labels were bound against this atlas. */
         this.sdfTextBindGroups.delete(texture);
         this.flatBindGroups.clear();
+        this.flatGroupEpoch += 1;
+        this.overlayGroups.clear();
+        this.skinnedGroups.length = 0;
         /*
          * The blank one is built with the albedo held aside, because `buildFlatBindGroup` reads
          * `this.albedo` for that slot — leaving it in place would put a real colour map into the
@@ -2549,6 +2625,13 @@ export class WebGPURenderer {
         const emissiveMap = (material?.emissive ?? null);
         const modelMap = (material?.modelMap ?? null);
         this.materialModel = material?.model ?? null;
+        const reflectivity = material?.reflectivity;
+        const environmentGain = material?.environmentGain;
+        this.materialReflectivity =
+            reflectivity === undefined ? null : Math.min(1, Math.max(0, reflectivity));
+        this.materialEnvironmentGain =
+            environmentGain === undefined ? null : Math.max(0, environmentGain);
+        this.writeEnvironmentDials();
         /* What the blur spreads this skin by: the last material to name a profile says. */
         const model = material?.model;
         warnUnpagedLightmap(model, modelMap);
@@ -2568,7 +2651,8 @@ export class WebGPURenderer {
             const cut = this.materialField('uCutout');
             f[cut] = cutoff;
             f[cut + 1] = CUTOUT_RESOLVE_CODE[this.cutoutResolveStaged];
-            f[cut + 2] = this.cutoutFrame;
+            /* z unused: the dither's frame is the pass's, in `uHighlightMin.w`. See `uCutout`. */
+            f[cut + 2] = 0;
             /* The material's lighting channels, which the lamps' are compared with. See `uCutout`. */
             f[cut + 3] = lightChannelsOf(material?.lightChannels);
             i[flags + 3] = material?.doubleSided === true ? 1 : 0;
@@ -2723,16 +2807,45 @@ export class WebGPURenderer {
         packAmbientSH(coefficients, this.ambientSH);
         this.material((f) => f.set(this.ambientSH, this.materialField('uAmbientSH')));
     }
+    /**
+     * The overlay the following draws wear, or null for none: pass state, put back to none by
+     * `bindMeshPass`. See `renderer.ts` and `surfaceOverlay.ts`. The numbers go in the material block,
+     * which every variant declares; the atlas goes in a twin of each flat group (`overlayGroup`).
+     */
+    setSurfaceOverlay(overlay) {
+        if (this.surface.lost)
+            return;
+        packSurfaceOverlay(overlay, this.overlayFloats);
+        /* The first overlay laid is when the lit pipelines start carrying one. */
+        if (overlayLays(overlay))
+            this.enableLit('SURFACE_OVERLAY');
+        this.overlayMaps = (overlay?.maps ?? null);
+        this.material((f) => f.set(this.overlayFloats, this.materialField('uOverlay')));
+    }
     /** How reflective the surfaces drawn next are. Clamped, as `renderer.ts` clamps it. */
     setSurfaceReflectivity(amount) {
-        this.material((f) => {
-            f[this.materialField('uEnvironmentDials') + 1] = Math.min(1, Math.max(0, amount));
-        });
+        this.passReflectivity = Math.min(1, Math.max(0, amount));
+        this.writeEnvironmentDials();
     }
     /** How bright the environment the surfaces drawn next reflect is. See `renderer.ts`. */
     setEnvironmentGain(gain) {
+        this.passEnvironmentGain = Math.max(0, gain);
+        this.writeEnvironmentDials();
+    }
+    /**
+     * The reflectivity and environment gain the setters gave the pass, and the ones the material
+     * set now states, or null where it states none (`SurfaceMaterial.reflectivity`). A draw wears the
+     * material's where it has one and the pass's otherwise, the rule `renderer.ts` keeps too.
+     */
+    passReflectivity = 0;
+    passEnvironmentGain = 1;
+    materialReflectivity = null;
+    materialEnvironmentGain = null;
+    writeEnvironmentDials() {
         this.material((f) => {
-            f[this.materialField('uEnvironmentDials') + 2] = Math.max(0, gain);
+            const dials = this.materialField('uEnvironmentDials');
+            f[dials + 1] = this.materialReflectivity ?? this.passReflectivity;
+            f[dials + 2] = this.materialEnvironmentGain ?? this.passEnvironmentGain;
         });
     }
     setSurfaceGrain(amount) {
@@ -3203,7 +3316,7 @@ export class WebGPURenderer {
         }
         this.pass?.end();
         this.flushRings();
-        this.surface.device.queue.submit([this.encoder.finish()]);
+        this.submit([this.encoder.finish()]);
         this.encoder = this.surface.device.createCommandEncoder({ label: 'frame.resumed' });
         this.reflectionPassActive = false;
         this.reflectionReady = true;
@@ -3393,7 +3506,7 @@ export class WebGPURenderer {
      */
     gradeCode() {
         return !this.hasComposite || !this.quality.hdrScene
-            ? (OUTPUT_TRANSFORM_CODE[this.quality.outputTransform] ?? 0)
+            ? forwardTransformCode(this.quality.outputTransform)
             : 0;
     }
     gradeExposure() {
@@ -4587,6 +4700,7 @@ export class WebGPURenderer {
      */
     setWind(windX, windZ, windGust, timeSeconds) {
         resolveScatterDeform(windX, windZ, windGust, timeSeconds, null, this.frameWind);
+        this.reopenViews();
     }
     /**
      * The five wind fields of one shadow-draw slot.
@@ -4604,21 +4718,6 @@ export class WebGPURenderer {
         this.shadowDraws.writeFloat(slot, DEPTH_VERT_FIELDS.uWindTime.offset, d.time);
         this.shadowDraws.writeFloats(slot, DEPTH_VERT_FIELDS.uWindSpatialPhase.offset, d.spatialPhase);
     }
-    /**
-     * The five wind fields of one per-draw slot.
-     *
-     * **Never called for an instanced draw.** That variant declares none of these, and
-     * `flatPass.ts` records what writing a field a variant does not declare costs: the block is
-     * shorter, so the write lands on whatever occupies that offset instead.
-     */
-    writeWind(slot) {
-        const d = this.frameWind;
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uWindDirection.offset, d.direction);
-        this.perDraw.writeFloat(slot, FLAT_VERT_FIELDS.uWindSpeed.offset, d.bend);
-        this.perDraw.writeFloat(slot, FLAT_VERT_FIELDS.uWindGust.offset, d.gust);
-        this.perDraw.writeFloat(slot, FLAT_VERT_FIELDS.uWindTime.offset, d.time);
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uWindSpatialPhase.offset, d.spatialPhase);
-    }
     /** Refilled per frame rather than allocated; see `resolvePointLights`. */
     lights = {
         count: 0,
@@ -4768,6 +4867,9 @@ export class WebGPURenderer {
      * at submit, and a texture's view is new when an update changes its size.
      */
     shadowCutoutLayout;
+    /** A crowd's casters: the plain and cutout layouts with a bone animation's three textures. */
+    shadowAnimatedLayout;
+    shadowAnimatedCutoutLayout;
     cutoutGroups = new Map();
     cutoutPeelGroups = new Map();
     shadowPeelPassUniforms = null;
@@ -4980,19 +5082,47 @@ export class WebGPURenderer {
             if (count === 0)
                 return;
             const cutout = cutoutOf(material);
-            const cutoutGroup = cutout === null ? null : this.cutoutGroup(cutout.albedo);
+            /* A crowd casts where its clip has moved it, through the animated variant. */
+            const animation = gpuBatch.animation === null ? null : this.animationViews(gpuBatch);
+            if (gpuBatch.animation !== null && animation === null)
+                return;
+            const cutoutTexture = cutout === null ? null : cutout.albedo;
+            const cutoutGroup = animation !== null
+                ? this.animatedDepthGroup(gpuBatch, animation, cutoutTexture)
+                : cutoutTexture === null
+                    ? null
+                    : this.cutoutGroup(cutoutTexture);
+            if (animation !== null && cutoutGroup === null)
+                return;
             const slot = this.shadowDraws.allocate();
             if (slot === null)
                 return;
             /* Only the light matrix: the instanced depth variant has no uModel, its placement being
                the four attribute columns the batch's buffer supplies. */
             this.shadowDraws.writeFloats(slot, DEPTH_VERT_FIELDS.uLightViewProj.offset, this.correctedLightViewProj);
-            if (cutout !== null && cutoutGroup !== null) {
+            const cuts = cutoutTexture !== null && cutoutGroup !== null;
+            if (cutout !== null && cuts) {
                 this.writeCutout(slot, cutout, DEPTH_INSTANCED_CUTOUT_VERT_FIELDS);
             }
-            const cuts = cutoutGroup !== null;
+            const clip = gpuBatch.animation;
+            if (animation !== null && clip !== null) {
+                const fields = cuts
+                    ? DEPTH_INSTANCED_ANIMATED_CUTOUT_VERT_FIELDS
+                    : DEPTH_INSTANCED_ANIMATED_VERT_FIELDS;
+                this.shadowDraws.writeFloat(slot, fields.uSceneTime.offset, this.animationTime);
+                this.shadowDraws.writeFloat(slot, fields.uBoneClip.offset, clip.framesPerSecond);
+                this.shadowDraws.writeFloat(slot, fields.uBoneClip.offset + 4, clip.boneScale);
+            }
             const cull = material?.doubleSided === true ? 'none' : this.depthCullMode;
-            pass.setPipeline(depthPipeline(this.pipelines, this.surface.device, cuts ? this.shadowCutoutLayout : this.shadowLayout, `${cuts ? 'depth-instanced-cutout' : 'depth-instanced'}|${cull}|${geometry.key ?? ''}`, this.presentOf(geometry), cull, false, true, cuts));
+            const animated = animation !== null;
+            pass.setPipeline(depthPipeline(this.pipelines, this.surface.device, animated
+                ? cuts
+                    ? this.shadowAnimatedCutoutLayout
+                    : this.shadowAnimatedLayout
+                : cuts
+                    ? this.shadowCutoutLayout
+                    : this.shadowLayout, `${cuts ? 'depth-instanced-cutout' : 'depth-instanced'}${animated ? '-animated' : ''}` +
+                `|${cull}|${geometry.key ?? ''}`, this.presentOf(geometry), cull, false, true, cuts, false, false, animated));
             pass.setBindGroup(0, cutoutGroup ?? this.shadowGroup(), [slot]);
             let index = 0;
             for (; index < geometry.vertexBuffers.length; index++) {
@@ -5313,6 +5443,10 @@ export class WebGPURenderer {
         this.skinPalettes = new SkinPaletteRing(quality.drawsPerFrame);
         this.maxDrawingBufferPixels = quality.maxDrawingBufferPixels;
         this.exposure = quality.outputExposure;
+        resolveFilmicCurve(DEFAULT_FILMIC_CURVE, this.filmConstants);
+        if (quality.outputTransform === 'filmic' && !(quality.screenEffects && quality.hdrScene)) {
+            console.warn(FILMIC_WITHOUT_COMPOSITE);
+        }
         this.flushSchedule =
             quality.frameGraph && quality.identifierGraph
                 ? createFlushSchedule(MAX_DRAWS_PER_FRAME)
@@ -5382,6 +5516,25 @@ export class WebGPURenderer {
             console.warn("WebGPU: skinScattering 'screen-space' needs screenEffects to add into; skin is pre-integrated");
         }
         this.skinScatter = skinScreen ? new SkinScatterPass(device) : null;
+        /*
+         * The frame's materials' reflections, where the frame can carry them: scene light to swap the
+         * probe's share in, and one sample, which the trace's depth copy and both maps are. Said once
+         * where it cannot. See `frameReflections.ts`.
+         */
+        this.frameReflections = resolveFrameReflections(quality.screenSpaceReflections);
+        const reflectionsRefusal = this.frameReflections === null
+            ? null
+            : !quality.screenEffects || !quality.hdrScene
+                ? 'the frame keeps no scene light to swap the probe in (`screenEffects` and `hdrScene`)'
+                : this.samples > 1
+                    ? 'a multisampled frame has no single depth or colour to march through'
+                    : null;
+        if (reflectionsRefusal !== null)
+            console.warn(`WebGPU: ${frameReflectionsRefused(reflectionsRefusal)}`);
+        this.reflectionSurface =
+            this.frameReflections !== null && reflectionsRefusal === null
+                ? new ReflectionSurfacePass(device)
+                : null;
         this.skinPipelines = skinScreen
             ? new PipelineCache(device, SKIN_TARGET_FORMAT, this.samples, glassShadows, quality.clusteredLights)
             : null;
@@ -5410,7 +5563,7 @@ export class WebGPURenderer {
             pointShadows: quality.pointShadows,
         });
         this.pointShadowsCompiled = quality.pointShadows;
-        this.fragment = flatFragmentBindings(this.variant);
+        this.fragment = flatFragmentScratch(this.variant);
         this.bindGroupLayout = createFlatBindGroupLayout(device, this.variant);
         /*
          * The skinned twin, built eagerly because it is a descriptor rather than a compile — WebGPU
@@ -5420,24 +5573,32 @@ export class WebGPURenderer {
         this.skinnedBindGroupLayout = createFlatBindGroupLayout(device, this.variant, true);
         this.morphedBindGroupLayout = createFlatBindGroupLayout(device, this.variant, false, true);
         this.bothBindGroupLayout = createFlatBindGroupLayout(device, this.variant, true, true);
+        /* And the instanced twin that plays a bone animation: its clip's and clocks' textures. */
+        this.animatedBindGroupLayout = createFlatBindGroupLayout(device, this.variant, false, false, true);
         this.perDraw = new UniformRing(device, FLAT_VERT_SIZE, quality.drawsPerFrame, USAGE_UNIFORM_DST, 'flat.vertRing', this.drawBudget);
-        this.perFrameStaging = new ArrayBuffer(this.fragment.uniformSize);
+        const { passSize, materialSize } = this.fragment;
+        this.perFrameStaging = new ArrayBuffer(passSize + materialSize);
         this.perFrameFloats = new Float32Array(this.perFrameStaging);
         this.perFrameInts = new Int32Array(this.perFrameStaging);
-        /*
-         * **A ring, because the block holds material state and a material changes between draws.**
-         *
-         * `setSurfaceTexture`, `setSurfaceGrain` and their siblings are pass state on both backends
-         * — a material covers many draws, so the alternative is rebinding the same values twenty
-         * times to say the same thing. On WebGL2 each is a `uniform1f` that lands immediately. Here
-         * they live in this block, and `queue.writeBuffer` does not interleave with recorded
-         * commands, so one buffer rewritten between two draws gives *both* the second value. Every
-         * surface in a scene would wear the last material set, which is bug 7's shape at pass scale.
-         *
-         * A slot per *material change* rather than per draw: `drawMesh` reuses the open slot until
-         * something dirties it, so a scene drawing a hundred meshes of one material spends one.
-         */
-        this.perFrame = new UniformRing(device, this.fragment.uniformSize, this.quality.materialChangesPerFrame, USAGE_UNIFORM_DST, 'flat.fragRing', this.materialBudget);
+        this.passInts = new Int32Array(this.perFrameStaging, 0, passSize / 4);
+        this.materialInts = new Int32Array(this.perFrameStaging, passSize, materialSize / 4);
+        /*
+         * **Two blocks, because they change at two rates.** `setSurfaceTexture`, `setSurfaceGrain` and
+         * their siblings are pass state on both backends — a material covers many draws — and on WebGL2
+         * each is a `uniform1f` that lands immediately. Here they live in a block, and
+         * `queue.writeBuffer` does not interleave with recorded commands, so one buffer rewritten between
+         * two draws gives *both* the second value: every surface would wear the last material set, which
+         * is bug 7's shape at pass scale. So each draw binds a slot.
+         *
+         * It was one block until 4.10.0, lights and all, copied whole into a ring slot per material
+         * change and uploaded every frame: a stage of four hundred materials sent 4.8 MB a frame to say
+         * what it had said the frame before. Now the pass's block takes a ring slot per pass, and a
+         * material's block a slot of the store, where an unchanged material stays from frame to frame.
+         */
+        this.passRing = new UniformRing(device, passSize, PASSES_PER_FRAME, USAGE_UNIFORM_DST, 'flat.passRing');
+        this.materialStore = new MaterialStore(device, materialSize, this.quality.materialChangesPerFrame, USAGE_UNIFORM_DST, 'flat.materials', this.materialBudget);
+        /* Two a pass at most: the jittered view and the unjittered one. */
+        this.viewRing = new UniformRing(device, FLAT_VIEW_SIZE, 2 * PASSES_PER_FRAME, USAGE_UNIFORM_DST, 'flat.viewRing');
         /*
          * A one-pixel stand-in for the albedo binding. The albedo's flag is zero for untextured
          * geometry, which is nearly all of it, so the shader never samples this — but WebGPU
@@ -5570,7 +5731,7 @@ export class WebGPURenderer {
             })
                 .end();
         }
-        device.queue.submit([clear.finish()]);
+        this.submit([clear.finish()]);
         /*
          * `nearest` on a depth texture sampled as an ordinary float, matching what
          * `shadowMap.ts` asks WebGL2 for. A filtering sampler cannot be used on a depth format
@@ -5737,6 +5898,11 @@ export class WebGPURenderer {
                     addressModeU: 'clamp-to-edge',
                     addressModeV: 'clamp-to-edge',
                 });
+                /* Or a surface overlay's atlas, in the twin a draw wearing one binds: `overlayGroup`. */
+                const maps = this.overlayBinding ? this.overlayMaps : null;
+                if (maps !== null) {
+                    return { view: maps.layerView() ?? blankView, sampler: this.refractSampler };
+                }
                 return { view: this.refractSnapshotView ?? blankView, sampler: this.refractSampler };
             }
             /*
@@ -5867,6 +6033,8 @@ export class WebGPURenderer {
             { binding: RUSH_TEXTURES.uExposureHeld },
             /* Local exposure's grid, read filtered between tiles. See `localExposure.ts`. */
             { binding: RUSH_TEXTURES.uExposureLocal },
+            /* Each mover's own motion: the reconstruction's target, or the scene where there is none. */
+            { binding: RUSH_TEXTURES.uMotion },
         ]);
         this.rushUniforms = device.createBuffer({
             label: 'post.rushUniforms',
@@ -5884,11 +6052,24 @@ export class WebGPURenderer {
         this.ssrLayout = createPostStageLayout(device, SSR_UNIFORMS, SSR_FRAG_SIZE, [
             { binding: SSR_TEXTURES.uSsrDepth, filterable: false },
             { binding: SSR_TEXTURES.uSsrScene },
+            /* The frame's materials, for the trace that reads them: `frameReflections.ts`. */
+            { binding: SSR_TEXTURES.uSsrProbeMap },
+            { binding: SSR_TEXTURES.uSsrTintMap },
         ]);
         this.ssrResolveLayout = createSsrResolveLayout(device);
+        this.ssrMaterialLayout = createPostStageLayout(device, SSR_MATERIAL_UNIFORMS, SSR_MATERIAL_SIZE, [
+            { binding: SSR_MATERIAL_TEXTURES.uSsrReflection },
+            { binding: SSR_MATERIAL_TEXTURES.uSsrProbeMap },
+            { binding: SSR_MATERIAL_TEXTURES.uSsrTintMap },
+        ]);
+        this.ssrMaterialUniforms = device.createBuffer({
+            label: 'post.ssrMaterialUniforms',
+            size: SSR_MATERIAL_SIZE,
+            usage: USAGE_UNIFORM_DST,
+        });
         this.ssrUniforms = device.createBuffer({
             label: 'post.ssrUniforms',
-            size: SSR_SLOT * MAX_REFLECTIVE_SURFACES,
+            size: SSR_SLOT * (MAX_REFLECTIVE_SURFACES + 1),
             usage: USAGE_UNIFORM_DST,
         });
         this.decalUniforms = device.createBuffer({
@@ -6038,6 +6219,8 @@ export class WebGPURenderer {
         this.shadowLayout = createDepthBindGroupLayout(device);
         this.shadowSkinnedLayout = createDepthBindGroupLayout(device, true);
         this.shadowCutoutLayout = createDepthBindGroupLayout(device, false, true);
+        this.shadowAnimatedLayout = createDepthBindGroupLayout(device, false, false, true);
+        this.shadowAnimatedCutoutLayout = createDepthBindGroupLayout(device, false, true, true);
         this.shadowDraws = new UniformRing(device, 
         /* The cutout block is the plain one and two fields more, and a slot must hold either. */
         Math.max(DEPTH_VERT_SIZE, DEPTH_CUTOUT_VERT_SIZE), quality.drawsPerFrame, USAGE_UNIFORM_DST, 'shadow.drawRing', this.shadowDrawBudget);
@@ -6304,7 +6487,11 @@ export class WebGPURenderer {
         /* Last frame's snapshot is last frame's scene. */
         this.refractSnapshotTaken = false;
         this.skinScattered = false;
+        /* One frame of the jitter's sequence however many times the frame binds its camera. */
+        this.temporalHistory.nextFrame();
+        this.latePasses.length = 0;
         this.skinScatter?.reset();
+        this.reflectionSurface?.reset();
         this.plumeVerts.reset();
         this.plumeFrags.reset();
         this.waterVerts.reset();
@@ -6332,9 +6519,18 @@ export class WebGPURenderer {
         this.lineVerts.reset();
         this.lineFrags.reset();
         this.skyUniforms.reset();
-        /* The material ring, and the open slot with it: last frame's slots are gone. */
-        this.perFrame.reset();
+        /* The pass ring, and the open slots with it: last frame's pass slots are gone. Its materials
+           stay in the store, which a draw finds them in again. */
+        this.passRing.reset();
+        this.viewRing.reset();
+        this.materialStore.beginFrame();
+        this.passesAsked = 0;
+        this.passesRefused = 0;
+        this.viewsAsked = 0;
+        this.viewsRefused = 0;
+        this.materialsRefused = 0;
         this.materials.dirty();
+        this.reopenPass();
         /* Spent by `runMotion` at the end of the last frame; a frame states its movers afresh. */
         this.motionPass?.reset();
         this.latePass?.reset();
@@ -6632,6 +6828,37 @@ export class WebGPURenderer {
             },
         };
     }
+    /**
+     * The copies this frame's mesh rewrites owe (`StagedRewrite`), recorded since the last submit and
+     * sent at the head of the next one: one encoder however many meshes are rewritten. Null while
+     * nothing is owed.
+     */
+    pendingRewrites = null;
+    /** One record handed to every staged rewrite, refilled each call, so a rewrite allocates nothing. */
+    stagedRewrite = {
+        encoder: null,
+        staging: null,
+        previous: null,
+    };
+    rewriteCopies() {
+        this.pendingRewrites ??= this.surface.device.createCommandEncoder({
+            label: 'mesh.rewriteCopies',
+        });
+        return this.pendingRewrites;
+    }
+    /**
+     * Submit `buffers`, led by any copies the frame's mesh rewrites owe. **Every submit of this
+     * renderer goes through here**, because any of them may draw a rewritten mesh — the frame's own,
+     * a mirror's, a shadow's, a probe's — and the copies must be ahead of the first that does.
+     */
+    submit(buffers) {
+        const rewrites = this.pendingRewrites;
+        if (rewrites !== null) {
+            this.pendingRewrites = null;
+            buffers.unshift(rewrites.finish());
+        }
+        this.surface.device.queue.submit(buffers);
+    }
     /**
      * Rewrite a mesh's positions, and its normals where the caller has them.
      *
@@ -6652,20 +6879,35 @@ export class WebGPURenderer {
          * `changeFrames.ts`.
          */
         const motion = mesh.motion;
-        let previous = null;
+        let staged = null;
         if (motion !== null && this.reconstructionWanted) {
             const frame = frameOfChange(this.moverFrame, this.inFrame);
+            const size = mesh.vertexBuffers[0]?.size ?? 0;
+            let previous = null;
             if (keepsPrevious(motion.changed, frame)) {
                 motion.previous ??= this.surface.device.createBuffer({
                     label: 'recon.dynamicPrevious',
-                    size: mesh.vertexBuffers[0]?.size ?? 0,
+                    size,
                     usage: 0x0020 | 0x0008, // VERTEX | COPY_DST
                 });
                 previous = motion.previous;
             }
             motion.changed = frame;
+            /*
+             * **Staged, and copied in behind the copy aside, in an encoder the frame's next submit leads
+             * with**: no submit of the rewrite's own. See `StagedRewrite` and `submit`.
+             */
+            motion.staging ??= this.surface.device.createBuffer({
+                label: 'mesh.stagedPositions',
+                size,
+                usage: 0x0004 | 0x0008, // COPY_SRC | COPY_DST
+            });
+            staged = this.stagedRewrite;
+            staged.encoder = this.rewriteCopies();
+            staged.staging = motion.staging;
+            staged.previous = previous;
         }
-        mesh.update(this.surface.device, positions, normals, previous);
+        mesh.update(this.surface.device, positions, normals, staged);
     }
     /**
      * Settle everything the frame shares: the camera, the lights and the fog.
@@ -6855,12 +7097,20 @@ export class WebGPURenderer {
          * number, so this is a copy and is marked as one; the two must move together.
          */
         f[at('uGrain')] = 1;
+        /* No reflection and an environment at its own brightness, from the pass and from no material. */
+        this.passReflectivity = 0;
+        this.passEnvironmentGain = 1;
+        this.materialReflectivity = null;
+        this.materialEnvironmentGain = null;
         f[at('uEnvironmentDials') + 1] = 0;
         /* No weighting and no dither until a pass or a crossfade asks. See `setDitherFade`. */
         f[at('uWriteMode')] = 0;
         f[at('uWriteMode') + 1] = 0;
         /* 1, not 0: a multiplier's identity is one. See `setEnvironmentGain`. */
         f[at('uEnvironmentDials') + 2] = 1;
+        /* No overlay until a draw sets one. See `setSurfaceOverlay`. */
+        this.overlayFloats.fill(0);
+        f.fill(0, at('uOverlay'), at('uOverlay') + OVERLAY_FLOATS);
         /* The frame's own ambient until a draw asks for its own. See `setAmbientSH`. */
         f.fill(0, at('uAmbientSH'), at('uAmbientSH') + AMBIENT_SH_FLOATS);
         /*
@@ -6962,6 +7212,8 @@ export class WebGPURenderer {
         if (this.quality.nightEmissive)
             f[at('uNightEmissive')] = env.nightEmissive ?? 0;
         f.set(env.highlightMin, at('uHighlightMin'));
+        /* The frame the cutout dither moves with, in the near corner's w. See `uHighlightMin`. */
+        f[at('uHighlightMin') + 3] = this.cutoutFrame;
         f.set(env.highlightMax, at('uHighlightMax'));
         /* The gain in the far corner's w. See `uHighlightMax`. */
         f[at('uHighlightMax') + 3] = env.highlightGain;
@@ -7214,6 +7466,7 @@ export class WebGPURenderer {
          * same terms here, which is why a pass cannot inherit a material from the one before it.
          */
         this.materials.dirty();
+        this.reopenPass();
         /*
          * A pass starts with no material, exactly as `renderer.ts` resets these terms — **every map,
          * not the albedo alone**. `setMaterial` skips the lookup when the maps it is given are the ones
@@ -7229,35 +7482,112 @@ export class WebGPURenderer {
         this.emissiveMap = null;
         this.modelMap = null;
         this.bindGroup = this.blankAlbedoBindGroup;
+        /* Nor an overlay; its numbers are zeroed with the block's other defaults. */
+        this.overlayMaps = null;
         this.uvScale[0] = 1;
         this.uvScale[1] = 1;
         this.uvOffset[0] = 0;
         this.uvOffset[1] = 0;
     }
     /**
-     * The slot the next draw's material lives in, taking a new one when something dirtied it.
+     * The slot the next draw's material lives in, placing it when something dirtied it, with the
+     * pass's slot taken first where `bindMeshPass` reopened it: `passOffset` is that one's offset.
      *
-     * **A copy per material change, not per draw.** A scene drawing a hundred meshes of one
-     * material spends one slot and one copy; a scene switching material every draw spends one
-     * each, which is what it asked for.
+     * **A placement per material change, not per draw.** A scene drawing a hundred meshes of one
+     * material places it once; a scene switching material every draw places one each, and a material
+     * the store already holds — the same numbers as a draw before it, this frame or an earlier one —
+     * is bound where it is and uploads nothing.
      */
     materialSlotForDraw() {
+        if (!this.passBlock.open) {
+            this.passesAsked += 1;
+            const pass = this.passRing.allocate();
+            if (pass === null) {
+                this.passesRefused += 1;
+                this.materialBudget.ask();
+                this.materialBudget.drop();
+                if (!this.warnedPassesFull) {
+                    this.warnedPassesFull = true;
+                    console.warn(`WebGPU: more than ${this.passRing.slots} mesh passes drew in one frame; the draws of the rest are skipped this frame and the ring grows for the next.`);
+                }
+                return null;
+            }
+            this.passRing.writeBlock(pass, this.passInts);
+            this.passBlock.slot = pass;
+        }
         if (this.materials.open)
             return this.materials.slot;
-        const slot = this.perFrame.allocate();
+        const slot = this.materialStore.place(this.materialInts);
         if (slot === null) {
-            if (!this.warnedMaterialsFull) {
-                this.warnedMaterialsFull = true;
-                console.warn(`WebGPU: more than ${this.quality.materialChangesPerFrame} material changes in a frame; the draws asking for the rest are skipped. renderer.frameBudget names the line and the count.`);
-            }
+            this.materialsRefused += 1;
+            this.warnMaterialsFull();
             return null;
         }
-        this.perFrame.writeBlock(slot, this.perFrameInts);
         this.materials.slot = slot;
         return slot;
     }
+    /** The pass slot `materialSlotForDraw` left open, read beside the material's by every lit draw. */
+    get passOffset() {
+        return this.passBlock.slot;
+    }
+    /** A new pass: its block, and both its views, are taken afresh by the next draw. */
+    reopenPass() {
+        this.passBlock.dirty();
+        this.reopenViews();
+    }
+    /** What a view holds changed — the wind, the light's matrix — so the next draw takes a new one. */
+    reopenViews() {
+        this.viewBlock.dirty();
+        this.lateViewBlock.dirty();
+    }
+    /**
+     * The view slot a lit draw reads its camera from: the pass's, or its unjittered twin for a blended
+     * draw landing after the upscale. Taken by the first draw that needs it after the pass, the wind or
+     * the light's matrix changed, and shared by every draw until then. Null when the ring is full, which
+     * skips the draw and grows the ring for the next frame, as the pass ring does.
+     */
+    viewSlotFor(late, viewProj) {
+        const block = late ? this.lateViewBlock : this.viewBlock;
+        if (block.open)
+            return block.slot;
+        this.viewsAsked += 1;
+        const slot = this.viewRing.allocate();
+        if (slot === null) {
+            this.viewsRefused += 1;
+            this.materialBudget.ask();
+            this.materialBudget.drop();
+            if (!this.warnedPassesFull) {
+                this.warnedPassesFull = true;
+                console.warn(`WebGPU: more than ${this.viewRing.slots} views drew in one frame; the draws of the rest are skipped this frame and the ring grows for the next.`);
+            }
+            return null;
+        }
+        this.writeView(this.viewRing, slot, viewProj);
+        block.slot = slot;
+        return slot;
+    }
+    /** A view block: the camera, the light's matrix and the frame's wind, into `ring` at `slot`. */
+    writeView(ring, slot, viewProj) {
+        ring.writeFloats(slot, FLAT_VIEW_FIELDS.uViewProj.offset, viewProj);
+        ring.writeFloats(slot, FLAT_VIEW_FIELDS.uLightViewProj.offset, this.lightViewProj);
+        /* The scene's clock, which a bone animation's instances read their moment from. */
+        ring.writeFloat(slot, FLAT_VIEW_FIELDS.uSceneTime.offset, this.animationTime);
+        const d = this.frameWind;
+        ring.writeFloats(slot, FLAT_VIEW_FIELDS.uWindDirection.offset, d.direction);
+        ring.writeFloat(slot, FLAT_VIEW_FIELDS.uWindSpeed.offset, d.bend);
+        ring.writeFloat(slot, FLAT_VIEW_FIELDS.uWindGust.offset, d.gust);
+        ring.writeFloat(slot, FLAT_VIEW_FIELDS.uWindTime.offset, d.time);
+        ring.writeFloats(slot, FLAT_VIEW_FIELDS.uWindSpatialPhase.offset, d.spatialPhase);
+    }
+    warnMaterialsFull() {
+        if (this.warnedMaterialsFull)
+            return;
+        this.warnedMaterialsFull = true;
+        console.warn(`WebGPU: more than ${this.quality.materialChangesPerFrame} distinct materials in a frame; the draws asking for the rest are skipped. renderer.frameBudget names the line and the count.`);
+    }
     /** Said once rather than every frame, for the reason `warnedFull` gives. */
     warnedMaterialsFull = false;
+    warnedPassesFull = false;
     warnedSkyFull = false;
     warnedParticlesTwice = false;
     /**
@@ -7292,8 +7622,12 @@ export class WebGPURenderer {
          * What this saves is the GPU's share, which for a heavy mesh is most of the cost and for a
          * trivial one is very little.
          */
-        if (this.quality.cullDraws && !this.visible(mesh.bounds, model))
+        /* A static list draws every entry in every view, since a bundle cannot leave one out. */
+        if (this.quality.cullDraws &&
+            this.staticRecording === null &&
+            !this.visible(mesh.bounds, model)) {
             return;
+        }
         /*
          * And the other half of the same question, where the profile asked for one. Gated on
          * `cullDraws` alongside the frustum test, because both are the renderer doing a consumer's
@@ -7310,6 +7644,9 @@ export class WebGPURenderer {
          */
         if (this.tracksMotionNow())
             this.recordDrawMotion(mesh, model, previousModel);
+        else if (previousModel !== null && this.quality.cameraMotionBlur * this.motionBlurScale > 0) {
+            this.warnObjectBlur();
+        }
         noteMapsWithoutUvs(mesh, mesh.hasUvs, this.materialHasMaps);
         /* An opaque draw meets the medium as the dial says: `submitMesh` reads an absent `fog` as
            true, which is a translucent draw's default and would put every opaque draw back in the fog
@@ -7455,17 +7792,17 @@ export class WebGPURenderer {
            `TranslucentMeshOptions.reconstructed`. */
         const lands = blend && options.reconstructed !== true && this.drawsLate();
         const late = lands || (blend && this.oitReplaying && this.reconstructing);
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, late ? this.correctedViewProj : this.viewProj);
+        /* The camera, the light's matrix and the wind are the pass's, in its view block. */
+        const view = this.viewSlotFor(late, late ? this.correctedViewProj : this.viewProj);
+        if (view === null)
+            return;
+        this.drawViewOffset = view;
         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
-           instanced one, which declares none of these fields. */
-        this.writeWind(slot);
         /* The material's repeats, not a constant: geometry authored in metres is textured at
            whatever density the material asks for without rebuilding it. */
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvOffset.offset, this.uvOffset);
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
         /*
          * Whether this mesh's tangent frame is real. WebGPU has no disabled attribute, so location 10
          * is always backed — by the caller's data or by the constant buffer — which makes the binding
@@ -7640,8 +7977,10 @@ export class WebGPURenderer {
                 command.pipeline = pipeline;
                 command.bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
                 command.offsetA = slot;
-                command.offsetB = material;
-                command.offsetCount = 2;
+                command.offsetB = this.passOffset;
+                command.offsetC = material;
+                command.offsetD = this.drawViewOffset;
+                command.offsetCount = 4;
                 for (let index = 0; index < mesh.vertexBuffers.length; index++) {
                     command.vertexBuffers[index] = mesh.vertexBuffers[index];
                 }
@@ -7655,7 +7994,12 @@ export class WebGPURenderer {
                 if (pass === null)
                     return;
                 pass.setPipeline(pipeline);
-                pass.setBindGroup(0, this.flatBindGroupFor(skinned, morphed, deltas), [slot, material]);
+                pass.setBindGroup(0, this.flatBindGroupFor(skinned, morphed, deltas), [
+                    slot,
+                    this.passOffset,
+                    material,
+                    this.drawViewOffset,
+                ]);
                 for (let index = 0; index < mesh.vertexBuffers.length; index++) {
                     pass.setVertexBuffer(index, mesh.vertexBuffers[index]);
                 }
@@ -7665,6 +8009,10 @@ export class WebGPURenderer {
             if (splits) {
                 this.keepSkinDiffuse(mesh, key, base, skinned, morphed, deltas, layer, eight, clothed, slot, material);
             }
+            /* And its surface half, for the frame's materials' reflections. See `keepReflectionSurface`. */
+            if (!blend && lit && depthWrite && this.reflectionSurfaceKeeps()) {
+                this.keepReflectionSurface(mesh, key, base, skinned, morphed, deltas, layer, eight, clothed, modelKind, slot, material, null, 1, null);
+            }
         }
         /* Back to the defaults for whatever is drawn next, exactly as `renderer.ts` restores them —
            unconditionally, because the scratch state above is shared by every draw after this one
@@ -7731,9 +8079,87 @@ export class WebGPURenderer {
                 'an ordinary mesh, or drop the channel — the sway, sky and alpha lanes cannot reach an ' +
                 'instanced pipeline.');
         }
-        const batch = new GpuInstancedBatch(this.surface.device, mesh, capacity, `flat.instances:${mesh.key ?? 'mesh'}`, options.cull ?? false);
+        const animation = (options.animation ?? null);
+        /* The bone a vertex follows is its second coordinates' u, which a mesh carries in its grain
+           lane; a mesh with none has nothing to name a bone by. See `boneAnimation.ts`. */
+        if (animation !== null && !this.presentOf(mesh)['grain']) {
+            throw new Error('WebGPU: a bone animation reads each vertex’s bone from the mesh’s second coordinates ' +
+                '(`MeshData.lightmapUvs`), and this mesh has none.');
+        }
+        const batch = new GpuInstancedBatch(this.surface.device, mesh, capacity, `flat.instances:${mesh.key ?? 'mesh'}`, options.cull ?? false, animation);
         return batch;
     }
+    /** See `Renderer.setAnimationTime`. Every view taken after it reads the new clock. */
+    setAnimationTime(seconds) {
+        if (!Number.isFinite(seconds) || seconds === this.animationTime)
+            return;
+        this.animationTime = seconds;
+        this.reopenViews();
+    }
+    /** The clock `setAnimationTime` set, 0 until it is. */
+    animationTime = 0;
+    /** See `Renderer.createBoneAnimation`. */
+    createBoneAnimation(clip) {
+        return new GpuBoneAnimation(this.surface.device, packBoneAnimation(clip));
+    }
+    /** See `Renderer.disposeBoneAnimation`. A batch still playing it draws nothing after. */
+    disposeBoneAnimation(animation) {
+        const clip = animation;
+        if (!clip.disposed)
+            clip.dispose();
+    }
+    /** An animated batch's clip and clocks, as its groups bind them. */
+    animationViews(batch) {
+        const animation = batch.animation;
+        const clocks = batch.clocks;
+        if (animation === null || clocks === null || animation.disposed)
+            return null;
+        return { places: animation.placesView, turns: animation.turnsView, clocks: clocks.view };
+    }
+    /** An animated batch's groups, dropped wherever the renderer drops its own. */
+    freshAnimatedGroups(batch) {
+        if (batch.groupEpoch === this.flatGroupEpoch)
+            return;
+        batch.litGroups.clear();
+        batch.depthGroups.clear();
+        batch.depthPeelGroups.clear();
+        batch.groupEpoch = this.flatGroupEpoch;
+    }
+    /**
+     * The lit group an animated batch draws with: the material's group, or its overlay twin, again
+     * with the clip's and the clocks' textures — kept on the batch by the group it was built beside,
+     * as a skinned twin is kept by its palette slot.
+     */
+    animatedGroup(batch, views) {
+        this.freshAnimatedGroups(batch);
+        const base = this.overlayGroup();
+        let group = batch.litGroups.get(base);
+        if (group === undefined) {
+            this.overlayBinding = base !== this.bindGroup;
+            group = createFlatBindGroup(this.surface.device, this.animatedBindGroupLayout, this.variant, this.perDraw.buffer, this.passRing.buffer, this.materialStore.buffer, this.viewRing.buffer, this.flatTextures, null, null, null, views);
+            this.overlayBinding = false;
+            this.bindGroupBudget.ask();
+            batch.litGroups.set(base, group);
+        }
+        return group;
+    }
+    /** An animated caster's shadow group, by what it cuts with and whether this is the peel. */
+    animatedDepthGroup(batch, views, cutout) {
+        this.freshAnimatedGroups(batch);
+        const peel = this.shadowLayerIsPeel && this.shadowPeelPassUniforms !== null;
+        const groups = peel ? batch.depthPeelGroups : batch.depthGroups;
+        const held = groups.get(cutout);
+        if (held !== undefined)
+            return held;
+        const passUniforms = peel ? this.shadowPeelPassUniforms : this.shadowPassUniforms;
+        const previousView = peel ? this.sunStaticArrayView : this.shadowBlankView;
+        const previousSampler = peel ? this.shadowPeelSampler : this.shadowBlankSampler;
+        if (passUniforms === null || previousView === null || previousSampler === null)
+            return null;
+        const group = createDepthBindGroup(this.surface.device, cutout === null ? this.shadowAnimatedLayout : this.shadowAnimatedCutoutLayout, this.shadowDraws.buffer, passUniforms, previousView, previousSampler, null, cutout === null ? null : { view: cutout.view, sampler: cutout.sampler }, null, views);
+        groups.set(cutout, group);
+        return group;
+    }
     /** The device instance culls, built on the first culling draw. See `InstanceCullPass`. */
     instanceCulls = null;
     /** Counts frames, so a batch knows when its cull slots were last taken. */
@@ -7766,7 +8192,10 @@ export class WebGPURenderer {
         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()) {
+        if (previous !== null &&
+            this.staticRecording === 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);
@@ -7794,6 +8223,7 @@ export class WebGPURenderer {
         const glassy = resolveGlass(options.glass, this.glassScratch);
         if ((refraction <= 0 && !glassy) || !this.takeRefractSnapshot())
             return false;
+        this.seeThroughBound = true;
         const glass = this.glassScratch;
         /* Strength, path thickness, transmission, frost: one vector, for the budget the shader states. */
         const seeAt = this.materialField('uSeeThrough');
@@ -7806,6 +8236,8 @@ export class WebGPURenderer {
         this.perFrameFloats[tintAt] = refractTint?.[0] ?? 1;
         this.perFrameFloats[tintAt + 1] = refractTint?.[1] ?? 1;
         this.perFrameFloats[tintAt + 2] = refractTint?.[2] ?? 1;
+        /* w: this framebuffer's first row is the top, so up the screen is down the rows. */
+        this.perFrameFloats[tintAt + 3] = -1;
         const glassTintAt = this.materialField('uGlassTint');
         this.perFrameFloats[glassTintAt] = glass.tint[0];
         this.perFrameFloats[glassTintAt + 1] = glass.tint[1];
@@ -7814,6 +8246,7 @@ export class WebGPURenderer {
     }
     /** Put the scratch back after `bindSeeThrough`: refraction and glass off. */
     releaseSeeThrough() {
+        this.seeThroughBound = false;
         const seeAt = this.materialField('uSeeThrough');
         this.perFrameFloats[seeAt] = 0;
         this.perFrameFloats[seeAt + 2] = 0;
@@ -7869,10 +8302,17 @@ export class WebGPURenderer {
         /* A culling batch's camera draw: the whole batch against the view and the occluders on the CPU,
            then instance by instance on the device into an indirect draw. Blended draws keep every
            instance and their order. See `InstancedOptions.cull`. */
-        const culling = !blend && batch.cull;
+        const culling = !blend && batch.cull && this.staticRecording === null;
         if (culling && !batchBoxVisible(batch.box, this.frustum, this.occlusion))
             return;
-        const cut = culling && cullsInstances(count, mesh.indexCount) ? this.takeCullSlot(batch, count) : null;
+        /* A batch playing a bone animation reads its clocks by instance index, which a compaction
+           would reorder: it is culled whole and never instance by instance. */
+        const animation = batch.animation === null ? null : this.animationViews(batch);
+        if (batch.animation !== null && animation === null)
+            return;
+        const cut = culling && animation === null && cullsInstances(count, mesh.indexCount)
+            ? this.takeCullSlot(batch, count)
+            : null;
         const instanceBuffer = cut === null ? batch.buffer : cut.instances;
         const slot = this.perDraw.allocate();
         if (slot === null) {
@@ -7884,11 +8324,19 @@ export class WebGPURenderer {
         }
         /* Late unless it moves with what it lies on. See `TranslucentMeshOptions.reconstructed`. */
         const lands = blend && options.reconstructed !== true && this.drawsLate();
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, lands ? this.correctedViewProj : this.viewProj);
+        const view = this.viewSlotFor(lands, lands ? this.correctedViewProj : this.viewProj);
+        if (view === null)
+            return;
+        this.drawViewOffset = view;
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvOffset.offset, this.uvOffset);
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
         this.perDraw.writeInt(slot, FLAT_VERT_FIELDS.uHasTangents.offset, mesh.hasTangents ? 1 : 0);
+        /* The clip's speed and bone scale, read by the animated variant's own field. */
+        const clip = batch.animation;
+        if (animation !== null && clip !== null) {
+            this.perDraw.writeFloat(slot, FLAT_ANIMATED_VERT_FIELDS.uBoneClip.offset, clip.framesPerSecond);
+            this.perDraw.writeFloat(slot, FLAT_ANIMATED_VERT_FIELDS.uBoneClip.offset + 4, clip.boneScale);
+        }
         const dimmed = opacity < 1;
         if (dimmed) {
             this.perFrameFloats[this.materialField('uOpacity')] = opacity;
@@ -7925,7 +8373,7 @@ export class WebGPURenderer {
            a third vertex buffer and a different vertex module, and sharing a cache entry with the
            plain one would hand a draw the wrong layout. */
         const adds = blend && options.additive === true;
-        const key = `${base}|inst${blend ? (adds ? '|add' : '|blend') : ''}` +
+        const key = `${base}|inst${animation === null ? '' : '|anim'}${blend ? (adds ? '|add' : '|blend') : ''}` +
             `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
             `${this.materialDoubleSided ? '|2s' : ''}${coverage ? '|a2c' : ''}` +
             `${modelKind === null ? '' : `|m:${modelKind}`}`;
@@ -7936,7 +8384,7 @@ export class WebGPURenderer {
             if (present === undefined) {
                 throw new Error(`WebGPU: no mesh attributes recorded for ${base}; createMesh records them`);
             }
-            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(false, false), this.variant, key, present, adds ? 'additive' : blend, false, false, depthWrite, layer, true, 'none', this.materialDoubleSided, coverage, false, false, modelKind);
+            pipeline = flatPipeline(pipelines, this.surface.device, animation === null ? this.flatLayoutFor(false, false) : this.animatedBindGroupLayout, this.variant, key, present, adds ? 'additive' : blend, false, false, depthWrite, layer, true, 'none', this.materialDoubleSided, coverage, false, false, modelKind, 'whole', false, animation !== null);
         }
         const material = this.materialSlotForDraw();
         if (material !== null) {
@@ -7945,10 +8393,15 @@ export class WebGPURenderer {
                 : this.recordDraw(0, this.currentTarget());
             if (command !== null) {
                 command.pipeline = pipeline;
-                command.bindGroup = this.flatBindGroupFor(false, false, null);
+                command.bindGroup =
+                    animation === null
+                        ? this.flatBindGroupFor(false, false, null)
+                        : this.animatedGroup(batch, animation);
                 command.offsetA = slot;
-                command.offsetB = material;
-                command.offsetCount = 2;
+                command.offsetB = this.passOffset;
+                command.offsetC = material;
+                command.offsetD = this.drawViewOffset;
+                command.offsetCount = 4;
                 let index = 0;
                 for (; index < mesh.vertexBuffers.length; index++) {
                     command.vertexBuffers[index] = mesh.vertexBuffers[index];
@@ -7966,7 +8419,9 @@ export class WebGPURenderer {
                 if (pass === null)
                     return;
                 pass.setPipeline(pipeline);
-                pass.setBindGroup(0, this.flatBindGroupFor(false, false, null), [slot, material]);
+                pass.setBindGroup(0, animation === null
+                    ? this.flatBindGroupFor(false, false, null)
+                    : this.animatedGroup(batch, animation), [slot, this.passOffset, material, this.drawViewOffset]);
                 let index = 0;
                 for (; index < mesh.vertexBuffers.length; index++) {
                     pass.setVertexBuffer(index, mesh.vertexBuffers[index]);
@@ -7978,6 +8433,10 @@ export class WebGPURenderer {
                 else
                     pass.drawIndexedIndirect(cut.args, 0);
             }
+            /* And its surface half, for the frame's materials' reflections, with the same survivors. */
+            if (!blend && lit && depthWrite && this.reflectionSurfaceKeeps()) {
+                this.keepReflectionSurface(mesh, key, base, false, false, null, layer, false, false, modelKind, slot, material, instanceBuffer, count, cut === null ? null : cut.args, animation === null ? null : batch);
+            }
         }
         /* Back to the defaults, unconditionally and for the reason `drawMesh` gives at length: this
            scratch block is cumulative state shared by every draw after this one, and an early return
@@ -8169,6 +8628,7 @@ export class WebGPURenderer {
         if (view === null)
             return false;
         this.lightViewProj.set(lightViewProj);
+        this.reopenViews();
         mat4.multiply(this.correctedLightViewProj, SHADOW_CLIP_CORRECTION, lightViewProj);
         this.shadowLayerIsPeel = peel;
         this.shadowLayerIsDynamic = dynamic;
@@ -8276,6 +8736,241 @@ export class WebGPURenderer {
         this.sceneCasterMaterial = undefined;
         casters(this.sceneCasterSink);
     }
+    /* -- Static draws ---------------------------------------------------------------- */
+    /** See `Renderer.createStaticDraws`. Recorded on its first draw, into each view it is drawn in. */
+    createStaticDraws(casters) {
+        return new GpuStaticDraws(this.surface.device, captureStaticDraws(casters), this.fragment.passSize, FLAT_VIEW_SIZE, FLAT_VERT_SIZE);
+    }
+    /**
+     * See `Renderer.drawStaticDraws`. One bundle executed, after a pass block and a view block are
+     * written for this view; the list is recorded first where it has no recording that is current for
+     * this target and starting state. See `staticBundles.ts`.
+     */
+    drawStaticDraws(draws) {
+        if (this.surface.lost)
+            return;
+        const list = draws;
+        if (list.disposed) {
+            this.warnStaticDisposed();
+            return;
+        }
+        if (!this.canDraw() || this.viewProj === null)
+            return;
+        /* A list's draws are rigid and wear no overlay: put back to none, as `bindMeshPass` does. */
+        this.setSkinPalette(null);
+        this.setMorphWeights(null);
+        this.setCloth(null);
+        this.setSurfaceOverlay(null);
+        this.setMaterial(null);
+        this.sceneCasterMaterial = undefined;
+        /* A probe face gives its slots back after every face; a list replays there draw by draw. */
+        if (this.probePassActive) {
+            this.replayStaticImmediately(list);
+            return;
+        }
+        /* The copy first: taking one may grow the list's rings, which no recording before can bind. */
+        const copy = list.takeCopy(this.moverFrame);
+        const current = this.staticRecordingFor(list);
+        if (current === null || current.immediate) {
+            this.replayStaticImmediately(list);
+            return;
+        }
+        current.usedIn = this.moverFrame;
+        list.writePass(copy, this.passInts);
+        this.writeView(list.views, list.viewOffset(copy), this.viewProj);
+        list.uploadCopy(copy);
+        const cache = current.cache;
+        let frame = current.frameBundles[copy];
+        if (frame === undefined || frame === null) {
+            frame = encodeBundle(this.surface.device, {
+                colorFormats: [cache.format],
+                depthStencilFormat: DEPTH_FORMAT,
+                sampleCount: cache.sampleCount,
+                depthReadOnly: false,
+            }, current.frame, list.passOffset(copy), list.viewOffset(copy), 'static.frame');
+            current.frameBundles[copy] = frame;
+        }
+        const command = this.recordDraw(0, this.currentTarget());
+        if (command !== null) {
+            command.bundles = frame;
+            command.pipeline = null;
+            command.bindGroup = null;
+        }
+        else {
+            this.openPass()?.executeBundles(frame);
+        }
+        const surface = this.reflectionSurface;
+        if (current.surfaceKept && surface !== null && current.surface.taken > 0) {
+            let halves = current.surfaceBundles[copy];
+            if (halves === undefined || halves === null) {
+                halves = encodeBundle(this.surface.device, {
+                    colorFormats: [null, REFLECTION_SURFACE_FORMAT, REFLECTION_SURFACE_FORMAT],
+                    depthStencilFormat: DEPTH_FORMAT,
+                    sampleCount: 1,
+                    depthReadOnly: true,
+                }, current.surface, list.passOffset(copy), list.viewOffset(copy), 'static.surface');
+                current.surfaceBundles[copy] = halves;
+            }
+            const kept = surface.take();
+            kept.bundles = halves;
+        }
+        /* Counted as the draws would have been, so a frame reports the same on both backends. */
+        for (let draw = 0; draw < current.frame.taken; draw++)
+            this.drawBudget.ask();
+        if (!this.staticJustRecorded) {
+            for (let ask = 0; ask < current.materialAsks; ask++)
+                this.materialBudget.ask();
+        }
+        this.staticJustRecorded = false;
+    }
+    /** A list drawn the way `drawSceneCasters` draws, a draw at a time, for where a bundle cannot be. */
+    replayStaticImmediately(list) {
+        this.staticJustRecorded = false;
+        replayStaticDraws(list, this.sceneCasterSink);
+        this.setMaterial(null);
+        this.sceneCasterMaterial = undefined;
+    }
+    /** See `Renderer.disposeStaticDraws`. Its pins let go; its meshes and materials are the caller's. */
+    disposeStaticDraws(draws) {
+        const list = draws;
+        if (list.disposed)
+            return;
+        list.dispose(this.unpinFor(list));
+    }
+    /** The recording to replay `list` from here, made now if none is current; null if it cannot be. */
+    staticRecordingFor(list) {
+        /* Geometry still arriving is not drawn yet, so a recording now would leave it out for good. */
+        for (const entry of list.entries) {
+            const mesh = entry.kind === 'mesh' ? entry.mesh : entry.batch.mesh;
+            if (!mesh.complete)
+                return null;
+        }
+        const cache = this.targetPipelines();
+        const start = this.materialInts;
+        const startHash = hashWords(start, start.length);
+        const surfaceKept = this.reflectionSurfaceKeeps();
+        let recording = list.find(cache, start, startHash, this.cutoutResolveStaged, surfaceKept);
+        if (recording !== null &&
+            recording.cacheVersion === cache.version &&
+            recording.groupEpoch === this.flatGroupEpoch &&
+            recording.storeEpoch === this.materialStore.epoch &&
+            recording.ringEpoch === list.ringEpoch) {
+            return recording;
+        }
+        const unpin = this.unpinFor(list);
+        if (recording === null) {
+            recording = list.open(cache, start, startHash, this.cutoutResolveStaged, surfaceKept, unpin);
+        }
+        else {
+            list.clear(recording, recording.storeEpoch === this.materialStore.epoch ? unpin : () => { });
+        }
+        this.recordStatic(list, recording);
+        return recording;
+    }
+    /** How a list's pins are let go: through the store, unless it has forgotten them since. */
+    unpinFor(list) {
+        const epoch = this.materialStore.epoch;
+        return (offset) => {
+            if (this.materialStore.epoch === epoch && list.pinEpoch === epoch) {
+                this.materialStore.unpin(offset);
+            }
+        };
+    }
+    /**
+     * Record `list` into `recording`: its entries through the scene-caster path, with the list's
+     * rings and group cache swapped in for the frame's and the pass and view slots held at the list's
+     * first copy, so every command the path records binds the list's buffers and offsets the bundle
+     * can rewrite per copy. Everything swapped is put back, whatever the path throws.
+     */
+    recordStatic(list, recording) {
+        if (list.groupEpoch !== this.flatGroupEpoch) {
+            list.groups = new Map();
+            list.blank = null;
+            list.groupEpoch = this.flatGroupEpoch;
+        }
+        list.drawRing.reset();
+        const perDraw = this.perDraw;
+        const passRing = this.passRing;
+        const viewRing = this.viewRing;
+        const groups = this.flatBindGroups;
+        const blank = this.blankAlbedoBindGroup;
+        const bindGroup = this.bindGroup;
+        const passSlot = this.passBlock.slot;
+        const viewSlot = this.viewBlock.slot;
+        const lateSlot = this.lateViewBlock.slot;
+        const asked = this.materialBudget.used;
+        this.perDraw = list.drawRing;
+        this.passRing = list.passes;
+        this.viewRing = list.views;
+        this.flatBindGroups = list.groups;
+        /* The blank group over the list's rings, built as the frame's is: with no maps held. */
+        list.blank ??= this.buildFlatBindGroup();
+        this.blankAlbedoBindGroup = list.blank;
+        this.bindGroup = this.flatGroupForMaps(null, null, null, null, null);
+        this.passBlock.slot = list.passOffset(0);
+        this.viewBlock.slot = list.viewOffset(0);
+        this.lateViewBlock.slot = list.viewOffset(0);
+        this.materials.dirty();
+        this.staticRecording = recording;
+        try {
+            this.sceneCasterMaterial = undefined;
+            replayStaticDraws(list, this.sceneCasterSink);
+        }
+        finally {
+            this.staticRecording = null;
+            this.perDraw = perDraw;
+            this.passRing = passRing;
+            this.viewRing = viewRing;
+            this.flatBindGroups = groups;
+            this.blankAlbedoBindGroup = blank;
+            this.bindGroup = bindGroup;
+            this.passBlock.slot = passSlot;
+            this.viewBlock.slot = viewSlot;
+            this.lateViewBlock.slot = lateSlot;
+            this.materials.dirty();
+            this.sceneCasterMaterial = undefined;
+            this.setMaterial(null);
+        }
+        recording.materialAsks = this.materialBudget.used - asked;
+        const store = this.materialStore;
+        recording.cacheVersion = recording.cache.version;
+        recording.groupEpoch = this.flatGroupEpoch;
+        recording.storeEpoch = store.epoch;
+        recording.ringEpoch = list.ringEpoch;
+        /* A skin split into halves is replayed draw by draw, so nothing recorded is kept or pinned. */
+        if (recording.immediate) {
+            resetPool(recording.frame);
+            resetPool(recording.surface);
+            return;
+        }
+        /* Every material the commands bind, pinned once, so nothing displaces what a bundle bakes. */
+        for (const pool of [recording.frame, recording.surface]) {
+            for (let i = 0; i < pool.taken; i++) {
+                const offset = pool.commands[i].offsetC;
+                if (!recording.pins.includes(offset)) {
+                    store.pin(offset);
+                    recording.pins.push(offset);
+                }
+            }
+        }
+        list.pinEpoch = store.epoch;
+        list.uploadDraws();
+        this.staticJustRecorded = true;
+    }
+    /** The recording under way, which `recordDraw` and the side passes take their commands into. */
+    staticRecording = null;
+    /** Whether the replay about to count its material changes recorded them, and so counted them. */
+    staticJustRecorded = false;
+    /** A disposed list drawn, said once: the frame loop does not throw. */
+    warnStaticDisposed() {
+        if (this.warnedStaticDisposed)
+            return;
+        this.warnedStaticDisposed = true;
+        console.warn('drawStaticDraws: this list was disposed, and draws nothing.');
+    }
+    warnedStaticDisposed = false;
+    /** Bumped wherever the lit groups are dropped, which a static list's own groups follow. */
+    flatGroupEpoch = 0;
     drawShadowCasters(casters) {
         if (this.surface.lost || this.shadowPass === null)
             return;
@@ -8567,7 +9262,7 @@ export class WebGPURenderer {
         }
         this.shadowDraws.flush();
         this.scatterDepthDraws.flush();
-        this.surface.device.queue.submit([this.shadowEncoder.finish()]);
+        this.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;
@@ -8606,6 +9301,20 @@ export class WebGPURenderer {
     warnedNoPointShadowArray = false;
     /** Said once, for the retired ambient dial. */
     warnedEnvironmentAmbient = false;
+    /** The overlay the draws wear, `uOverlay`: see `setSurfaceOverlay`. */
+    overlayFloats = new Float32Array(OVERLAY_FLOATS);
+    /** Its atlas, bound where the refraction copy goes in a twin of each flat group. */
+    overlayMaps = null;
+    /**
+     * Each flat group's twin with the atlas in the refraction slot, by the group and the atlas, built
+     * on the first draw that wears it and dropped wherever `flatBindGroups` is.
+     */
+    overlayGroups = new Map();
+    /** True while a twin is built: what `flatTextures` hands the refraction slot then. */
+    overlayBinding = false;
+    /** True between `bindSeeThrough` and `releaseSeeThrough`: that draw reads the copy, not the atlas. */
+    seeThroughBound = false;
+    warnedOverlayRefraction = false;
     castingWorldIndices = new Int32Array(POINT_SHADOW_POOL).fill(-1);
     resolvedPointShadows = createResolvedPointShadows(MAX_POINT_LIGHTS);
     /** One face's view-projection, rebuilt per face rather than allocated. */
@@ -8787,7 +9496,7 @@ export class WebGPURenderer {
              * its own slot.
              */
             this.pointShadowArray?.flush();
-            this.surface.device.queue.submit([this.shadowEncoder.finish()]);
+            this.submit([this.shadowEncoder.finish()]);
             this.shadowEncoder = null;
             this.shadowPass = null;
             this.gpuTimer.end();
@@ -8954,42 +9663,89 @@ export class WebGPURenderer {
         tintTarget.resolve(encoder, layer, face, offered);
     }
     buildFlatBindGroup() {
-        return createFlatBindGroup(this.surface.device, this.bindGroupLayout, this.variant, this.perDraw.buffer, this.perFrame.buffer, this.flatTextures);
+        return createFlatBindGroup(this.surface.device, this.bindGroupLayout, this.variant, this.perDraw.buffer, this.passRing.buffer, this.materialStore.buffer, this.viewRing.buffer, this.flatTextures);
+    }
+    /**
+     * The open material's flat group, or its twin with the surface overlay's atlas in the refraction
+     * slot where the draw wears one and does not refract. A twin is built from the live material,
+     * which `bindGroup` always is, and kept by the group and the atlas.
+     *
+     * **A draw that refracts, or is glass, keeps the frame's copy** and its overlay reads no image —
+     * the shader asks the same of `uSeeThrough` (`overlayImagesBound`) — said once.
+     */
+    overlayGroup() {
+        const maps = this.overlayMaps;
+        if (maps === null)
+            return this.bindGroup;
+        if (this.seeThroughBound) {
+            if (!this.warnedOverlayRefraction) {
+                this.warnedOverlayRefraction = true;
+                console.warn('WebGPU: a draw that refracts or is glass wears a surface overlay with maps. The frame ' +
+                    "copy it reads takes the overlay's slot, so its rim, dissolve and wrinkles read no image.");
+            }
+            return this.bindGroup;
+        }
+        let byMaps = this.overlayGroups.get(this.bindGroup);
+        if (byMaps === undefined) {
+            byMaps = new Map();
+            this.overlayGroups.set(this.bindGroup, byMaps);
+        }
+        let twin = byMaps.get(maps);
+        if (twin === undefined) {
+            this.overlayBinding = true;
+            twin = this.buildFlatBindGroup();
+            this.overlayBinding = false;
+            this.bindGroupBudget.ask();
+            byMaps.set(maps, twin);
+        }
+        return twin;
     }
     /**
      * The bind group a draw uses, skinned or not.
      *
-     * **The skinned twin is cached against the two things that can invalidate it**, rather than
-     * against a flag somebody has to remember to clear at six call sites: the unskinned group it was
-     * built beside — which is rebuilt whenever the material or a shadow slot moves — and the palette
-     * view, which changes only when the texture is reallocated. Comparing object identity means a
-     * missed invalidation is not possible rather than merely unlikely, and it is why
+     * **The skinned twin is kept by palette slot and by the unskinned group it was built beside**,
+     * which is one a material, and compared against the views it holds — the palette's, which
+     * changes only when the slot's texture grows, the morph deltas and the cloth's — rather than
+     * against a flag somebody has to remember to clear at six call sites. Comparing object identity
+     * means a missed invalidation is not possible rather than merely unlikely, and it is why
      * `SkinPaletteTexture.view()` caches: a fresh view every call never compares equal and would
      * rebuild this every draw.
      */
     flatBindGroupFor(skinned, morphed, deltas) {
+        const base = this.overlayGroup();
         if (!skinned && !morphed)
-            return this.bindGroup;
+            return base;
         const palette = skinned ? this.skinPalettes.view(this.skinPaletteSlot) : null;
         /* Slot `k` caches at `k + 1`; index 0 is the morphed draw that is not skinned and has no
            slot of its own. See `skinnedGroups`. */
         const at = skinned ? this.skinPaletteSlot + 1 : 0;
         /* A skinned group carries the cloth's views, or the stand-in's: see `clothViews`. */
         const cloth = skinned ? this.clothViews() : null;
-        if ((this.skinnedGroups[at] ?? null) === null ||
-            this.skinnedGroupsBeside[at] !== this.bindGroup ||
-            this.skinnedGroupsPalette[at] !== palette ||
-            this.skinnedGroupsDeltas[at] !== deltas ||
-            this.skinnedGroupsCloth[at] !== (cloth?.particles ?? null) ||
-            this.skinnedGroupsClothBinding[at] !== (cloth?.binding ?? null)) {
-            this.skinnedGroups[at] = createFlatBindGroup(this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, this.perDraw.buffer, this.perFrame.buffer, this.flatTextures, palette, deltas, cloth);
-            this.skinnedGroupsBeside[at] = this.bindGroup;
-            this.skinnedGroupsPalette[at] = palette;
-            this.skinnedGroupsDeltas[at] = deltas;
-            this.skinnedGroupsCloth[at] = cloth?.particles ?? null;
-            this.skinnedGroupsClothBinding[at] = cloth?.binding ?? null;
-        }
-        return this.skinnedGroups[at];
+        let byMaterial = this.skinnedGroups[at];
+        if (byMaterial === undefined) {
+            byMaterial = new Map();
+            this.skinnedGroups[at] = byMaterial;
+        }
+        let twin = byMaterial.get(base);
+        if (twin === undefined ||
+            twin.palette !== palette ||
+            twin.deltas !== deltas ||
+            twin.cloth !== (cloth?.particles ?? null) ||
+            twin.clothBinding !== (cloth?.binding ?? null)) {
+            /* Built from the live material, with the overlay's atlas where `base` is its twin. */
+            this.overlayBinding = base !== this.bindGroup;
+            const group = createFlatBindGroup(this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, this.perDraw.buffer, this.passRing.buffer, this.materialStore.buffer, this.viewRing.buffer, this.flatTextures, palette, deltas, cloth);
+            this.overlayBinding = false;
+            twin = {
+                group,
+                palette,
+                deltas,
+                cloth: cloth?.particles ?? null,
+                clothBinding: cloth?.binding ?? null,
+            };
+            byMaterial.set(base, twin);
+        }
+        return twin.group;
     }
     /** The layout matching a pair of vertex flags. A pipeline and its bind group must agree. */
     flatLayoutFor(skinned, morphed) {
@@ -9028,8 +9784,14 @@ export class WebGPURenderer {
         if (this.drawBudget.dropped > 0) {
             grew = this.perDraw.growTo(roomFor(this.drawBudget.used)) || grew;
         }
-        if (this.materialBudget.dropped > 0) {
-            grew = this.perFrame.growTo(roomFor(this.materialBudget.used)) || grew;
+        if (this.materialsRefused > 0) {
+            grew = this.materialStore.growTo(roomFor(this.materialBudget.used)) || grew;
+        }
+        if (this.passesRefused > 0) {
+            grew = this.passRing.growTo(roomFor(this.passesAsked)) || grew;
+        }
+        if (this.viewsRefused > 0) {
+            grew = this.viewRing.growTo(roomFor(this.viewsAsked)) || grew;
         }
         if (grew)
             this.rebuildFlatGroupsForNewRings();
@@ -9050,8 +9812,10 @@ export class WebGPURenderer {
      */
     rebuildFlatGroupsForNewRings() {
         this.flatBindGroups.clear();
-        this.flatEnvironment = this.flatTextures('uEnvironment').view;
+        this.flatGroupEpoch += 1;
+        this.overlayGroups.clear();
         this.skinnedGroups.length = 0;
+        this.flatEnvironment = this.flatTextures('uEnvironment').view;
         const albedo = this.albedo;
         const normalMap = this.normalMap;
         const ormMap = this.ormMap;
@@ -9071,6 +9835,7 @@ export class WebGPURenderer {
         this.bindGroup = this.flatGroupForMaps(this.albedo, this.normalMap, this.ormMap, this.emissiveMap, this.modelMap);
         /* The open material lives in a slot of a buffer that no longer exists. */
         this.materials.dirty();
+        this.reopenPass();
     }
     /**
      * The environment view the cached flat groups bind: the grid, or the blank stand-in while the
@@ -9102,6 +9867,9 @@ export class WebGPURenderer {
      */
     rebuildFlatBindGroup() {
         this.flatBindGroups.clear();
+        this.flatGroupEpoch += 1;
+        this.overlayGroups.clear();
+        this.skinnedGroups.length = 0;
         this.flatEnvironment = this.flatTextures('uEnvironment').view;
         if (this.albedo === null &&
             this.normalMap === null &&
@@ -9327,9 +10095,14 @@ export class WebGPURenderer {
             ? (OUTPUT_TRANSFORM_CODE[this.quality.outputTransform] ?? 0)
             : 0;
         f[at('uOutputExposure')] = graded ? this.exposure : 1;
+        f.set(this.filmA, at('uFilmA'));
+        f.set(this.filmB, at('uFilmB'));
+        f[at('uDisplayHeadroom')] = this.headroom;
         f.set(this.reprojection, at('uReprojection'));
         f[at('uMotionStrength')] = motionStrength;
-        f[at('uMotionMax')] = MOTION_BLUR_MAX_UV;
+        f[at('uMotionMax')] = this.motionBlurMax;
+        /* Each mover's own motion, where the reconstruction drew its target this frame. */
+        f[at('uObjectMotion')] = this.reconstructing && this.reconMotionView !== null ? 1 : 0;
         f[at('uAoStrength')] = this.frameProjection === null ? 0 : aoStrength;
         /*
          * The occlusion read where this frame's jitter put it (`uAoOffset`): measured from the jittered
@@ -9373,6 +10146,7 @@ export class WebGPURenderer {
         f[at('uGradeSize')] = this.gradeSize;
         /* The lens and the print. See `setVignette` and `setFilmGrain`. */
         f[at('uVignette')] = this.vignette;
+        f.set(this.fringe, at('uFringe'));
         f[at('uAutoExposure')] = adapting ? this.autoExposure : 0;
         f[at('uLocalExposure')] = measuring && localising ? this.localExposure : 0;
         f[at('uGrain')] = this.grain;
@@ -9410,7 +10184,7 @@ export class WebGPURenderer {
             return;
         if (this.aoTargetView === null)
             return;
-        this.rushBindGroup = this.buildRushBindGroup('post.rushBindGroup', this.sceneColorView);
+        this.rushBindGroup = this.buildRushBindGroup('post.rushBindGroup', this.sceneColorView, this.sceneColorView);
         /*
          * **And the reconstruction's twin, from the same three call sites.** A colour grade replaces
          * the lookup table and a resize replaces the depth and the occlusion target, and both groups
@@ -9418,11 +10192,13 @@ export class WebGPURenderer {
          * come to read a stale view on exactly the frames a consumer changed something.
          */
         if (this.reconShownView !== null) {
-            this.reconRushGroup = this.buildRushBindGroup('recon.rushBindGroup', this.reconShownView);
+            this.reconRushGroup = this.buildRushBindGroup('recon.rushBindGroup', this.reconShownView, this.reconMotionView ?? this.reconShownView);
         }
     }
     /** The composite's group over one scene source. See `rebuildRushBindGroup`. */
-    buildRushBindGroup(label, sceneView) {
+    buildRushBindGroup(label, sceneView, 
+    /** Each mover's own motion, or a stand-in the shader is told not to read. */
+    motionView) {
         const { device } = this.surface;
         if (this.resolvedDepthView === null || this.aoTargetView === null)
             return null;
@@ -9451,6 +10227,7 @@ export class WebGPURenderer {
                    and a declared binding still needs a complete texture, as the bloom fallback says. */
                 ...entry(RUSH_TEXTURES.uExposureHeld, this.exposurePass?.heldView ?? sceneView),
                 ...entry(RUSH_TEXTURES.uExposureLocal, this.exposurePass?.localView ?? sceneView),
+                ...entry(RUSH_TEXTURES.uMotion, motionView),
             ],
             layout: this.rushLayout,
         });
@@ -9707,7 +10484,7 @@ export class WebGPURenderer {
             this.reconSharpenGroups[write] = build(`recon.sharpen${String(write)}`, target, this.reconShownView, records, nextRecords, swings, nextSwings);
         }
         /* The composite's own group, over the resolved picture instead of the scene target. */
-        this.reconRushGroup = this.buildRushBindGroup('recon.rushBindGroup', this.reconShownView);
+        this.reconRushGroup = this.buildRushBindGroup('recon.rushBindGroup', this.reconShownView, this.reconMotionView ?? this.reconShownView);
         /* And the scene's, because `ensureComposite` built it before this one existed. */
         this.rebuildRushBindGroup();
         /* And the bloom's, which blooms the resolved picture: see `rebuildBloomGroups`. */
@@ -9796,7 +10573,7 @@ export class WebGPURenderer {
         if (!this.reconstructing || late === null || shown === null || depth === null)
             return;
         const oitSet = this.oitActive && this.translucentQueue.length > 0;
-        if (late.pending === 0 && !oitSet)
+        if (late.pending === 0 && !oitSet && this.latePasses.length === 0)
             return;
         const width = Math.max(1, this.surface.canvas.width);
         const height = Math.max(1, this.surface.canvas.height);
@@ -9808,21 +10585,60 @@ export class WebGPURenderer {
             this.refractSnapshotTaken = true;
         }
         this.lateRefractWanted = false;
-        if (late.pending === 0)
-            return;
-        const pass = encoder.beginRenderPass({
-            label: 'recon.late',
-            timestampWrites: this.gpuTimer.writesFor(),
-            colorAttachments: [{ view: shown, loadOp: 'load', storeOp: 'store' }],
-            depthStencilAttachment: {
-                view: late.depthView(width, height),
-                depthLoadOp: 'load',
-                /* Kept: the order-independent set replays against it after this pass. */
-                depthStoreOp: 'store',
-            },
-        });
-        late.replay(pass, this.issueBound);
-        pass.end();
+        if (late.pending > 0) {
+            const pass = encoder.beginRenderPass({
+                label: 'recon.late',
+                timestampWrites: this.gpuTimer.writesFor(),
+                colorAttachments: [{ view: shown, loadOp: 'load', storeOp: 'store' }],
+                depthStencilAttachment: {
+                    view: late.depthView(width, height),
+                    depthLoadOp: 'load',
+                    /* Kept: the order-independent set replays against it after this pass. */
+                    depthStoreOp: 'store',
+                },
+            });
+            late.replay(pass, this.issueBound);
+            pass.end();
+        }
+        this.runLatePasses(encoder, shown, late.depthView(width, height));
+    }
+    /**
+     * The registered passes `drawPass` queued for after the upscale: each handed a fresh copy of the
+     * reconstructed picture with every late draw in it, in the output-size texture the late
+     * refraction keeps (its own reads are done by now: they were recorded before this copy), then
+     * drawn over the picture in a pass of its own.
+     */
+    runLatePasses(encoder, shown, depth) {
+        const copy = this.refractSnapshot;
+        const source = this.reconShown;
+        for (const handle of this.latePasses) {
+            const definition = passAt(this.passes, handle);
+            if (definition === undefined)
+                continue;
+            if (copy !== null && source !== null) {
+                encoder.copyTextureToTexture({ texture: source }, { texture: copy }, [
+                    copy.width,
+                    copy.height,
+                ]);
+            }
+            const pass = encoder.beginRenderPass({
+                label: 'recon.latePass',
+                timestampWrites: this.gpuTimer.writesFor(),
+                colorAttachments: [{ view: shown, loadOp: 'load', storeOp: 'store' }],
+                depthStencilAttachment: { view: depth, depthLoadOp: 'load', depthStoreOp: 'store' },
+            });
+            const context = this.passContext;
+            context.pass = pass;
+            context.outputTransform = this.gradeCode();
+            context.outputExposure = this.gradeExposure();
+            context.jitter = this.latePassJitter;
+            context.format = RECON_HISTORY_FORMAT;
+            context.depthFormat = DEPTH_FORMAT;
+            context.samples = 1;
+            definition.draw(context);
+            context.jitter = this.passJitter;
+            pass.end();
+        }
     }
     /** Whether this draw lands in the reconstructed picture. See `lateRouting.ts`. */
     tracksMotionNow() {
@@ -10189,7 +11005,10 @@ export class WebGPURenderer {
      * other is the disagreement the parity rule exists to prevent. Said once rather than dropped.
      */
     runReflections(encoder) {
-        if (this.reflectionQueue.length === 0)
+        const frameReflections = this.frameReflections;
+        const surfaceHalf = this.reflectionSurface;
+        const materials = frameReflections !== null && surfaceHalf !== null;
+        if (this.reflectionQueue.length === 0 && !materials)
             return;
         const scene = this.sceneColorView;
         const reflection = this.ssrReflectionView;
@@ -10234,9 +11053,63 @@ export class WebGPURenderer {
             f[base + at('uSsrThickness')] = surface.thicknessM;
             f[base + at('uSsrSteps')] = surface.steps;
             f[base + at('uSsrEdgeFade')] = REFLECTION_EDGE_FADE;
+            f[base + at('uSsrMaterial')] = 0;
             slot++;
         });
+        const regions = slot;
+        /* The frame's materials' trace takes the slot after the surfaces': the box, its axis and its
+           strength unread, the march and the ceiling its own. See `frameReflections.ts`. */
+        if (materials) {
+            const base = (slot * SSR_SLOT) / 4;
+            f.set(this.ssrDepthToWorld, base + at('uSsrDepthToWorld'));
+            f.set(this.ssrViewProj, base + at('uSsrViewProj'));
+            f.set(this.frameEye, base + at('uSsrEye'));
+            f.fill(0, base + at('uSsrAxis'), base + at('uSsrAxis') + 3);
+            f.fill(1, base + at('uSsrTint'), base + at('uSsrTint') + 3);
+            f[base + at('uSsrStrength')] = 1;
+            f[base + at('uSsrFresnel')] = 0;
+            f[base + at('uSsrFacingCos')] = -1;
+            f[base + at('uSsrReach')] = frameReflections.reachM;
+            f[base + at('uSsrThickness')] = frameReflections.thicknessM;
+            f[base + at('uSsrSteps')] = frameReflections.steps;
+            f[base + at('uSsrEdgeFade')] = REFLECTION_EDGE_FADE;
+            f[base + at('uSsrMaterial')] = 1;
+            f[base + at('uSsrMaxRoughness')] = frameReflections.maxRoughness;
+            slot++;
+        }
         device.queue.writeBuffer(this.ssrUniforms, 0, this.ssrStaging, 0, slot * SSR_SLOT);
+        const tracePipeline = postPipeline(this.pipelines, device, this.ssrLayout, 'post.ssrTrace', SSR_TRACE_FRAG_WGSL, this.pipelines.format, PREMULTIPLIED_OVER_BLEND);
+        if (materials && this.depthView !== null && this.ssrMaterialGroup !== null) {
+            /* The frame's opaque lit draws again, into what the trace and the resolve read. */
+            surfaceHalf.draw(encoder, this.depthView, this.issueBound);
+            const trace = encoder.beginRenderPass({
+                label: 'post.ssr.materialTrace',
+                colorAttachments: [
+                    { view: reflection, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 0] },
+                ],
+            });
+            trace.setPipeline(tracePipeline);
+            trace.setBindGroup(0, group, [regions * SSR_SLOT]);
+            trace.draw(3);
+            trace.end();
+            /* The blur's texel and its radius at roughness 1, as a share of the frame's height. */
+            const m = this.ssrMaterialFloats;
+            const blurAt = this.postField(SSR_MATERIAL_FIELDS, 'uSsrBlur');
+            m[blurAt] = 1 / Math.max(width, 1);
+            m[blurAt + 1] = 1 / Math.max(height, 1);
+            m[blurAt + 2] = frameReflections.blur * height;
+            device.queue.writeBuffer(this.ssrMaterialUniforms, 0, m);
+            const resolve = encoder.beginRenderPass({
+                label: 'post.ssr.materialResolve',
+                colorAttachments: [{ view: scene, loadOp: 'load', storeOp: 'store' }],
+            });
+            resolve.setPipeline(postPipeline(this.pipelines, device, this.ssrMaterialLayout, 'post.ssrMaterialResolve', SSR_MATERIAL_RESOLVE_FRAG_WGSL, this.pipelines.format, FRAME_REFLECTION_BLEND));
+            resolve.setBindGroup(0, this.ssrMaterialGroup, [0]);
+            resolve.draw(3);
+            resolve.end();
+        }
+        if (regions === 0)
+            return;
         /* Cleared whole and then scissored per surface: the resolve reads every pixel, and one left
            from the last frame would composite that reflection over this frame's scene. */
         const trace = encoder.beginRenderPass({
@@ -10245,7 +11118,7 @@ export class WebGPURenderer {
                 { view: reflection, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 0] },
             ],
         });
-        trace.setPipeline(postPipeline(this.pipelines, device, this.ssrLayout, 'post.ssrTrace', SSR_TRACE_FRAG_WGSL, this.pipelines.format, PREMULTIPLIED_OVER_BLEND));
+        trace.setPipeline(tracePipeline);
         slot = 0;
         this.reflectionQueue.replay((surface) => {
             const index = slot++;
@@ -10877,6 +11750,59 @@ export class WebGPURenderer {
             !this.overlayActive &&
             this.oitMode === 'none');
     }
+    /** Whether a draw now is the frame's own, and so has a surface half to keep. */
+    reflectionSurfaceKeeps() {
+        return (this.reflectionSurface !== null &&
+            !this.reflectionPassActive &&
+            !this.probePassActive &&
+            !this.capturePassActive &&
+            !this.framePresented &&
+            !this.overlayActive &&
+            this.oitMode === 'none');
+    }
+    /**
+     * An opaque lit draw's surface half, kept for the frame's materials' reflections: the draw again,
+     * with the same slots, buffers and bind group, through the pipeline with `REFLECTION_SURFACE` on —
+     * which writes what the pixel reflects of its environment into the two targets
+     * `reflectionSurfacePass.ts` holds and tests for the depth its frame draw wrote. Replayed when the
+     * frame's pass has ended, before the trace reads them. See `shaders/flat/reflectionSurface.ts`.
+     */
+    keepReflectionSurface(mesh, frameKey, base, skinned, morphed, deltas, layer, eight, clothed, modelKind, slot, material, instanceBuffer, instances, indirect, 
+    /** A batch playing a bone animation, whose surface half moves as its draw does. */
+    animated = null) {
+        const surface = this.reflectionSurface;
+        const present = this.meshPresent.get(base);
+        if (surface === null || present === undefined)
+            return;
+        const animation = animated === null ? null : this.animationViews(animated);
+        const key = `${frameKey}|rs`;
+        const pipeline = this.pipelines.peek(key) ??
+            flatPipeline(this.pipelines, this.surface.device, animation === null ? this.flatLayoutFor(skinned, morphed) : this.animatedBindGroupLayout, this.variant, key, present, false, skinned, morphed, true, layer, instanceBuffer !== null, 'none', this.materialDoubleSided, false, eight, clothed, modelKind, 'whole', true, animation !== null);
+        /* A static list's surface halves go into its own pool, beside its draws. */
+        const command = this.staticRecording === null ? surface.take() : takeRecorded(this.staticRecording.surface);
+        command.pipeline = pipeline;
+        command.bindGroup =
+            animated === null || animation === null
+                ? this.flatBindGroupFor(skinned, morphed, deltas)
+                : this.animatedGroup(animated, animation);
+        command.offsetA = slot;
+        command.offsetB = this.passOffset;
+        command.offsetC = material;
+        command.offsetD = this.drawViewOffset;
+        command.offsetCount = 4;
+        let index = 0;
+        for (; index < mesh.vertexBuffers.length; index++) {
+            command.vertexBuffers[index] = mesh.vertexBuffers[index];
+        }
+        if (instanceBuffer !== null)
+            command.vertexBuffers[index++] = instanceBuffer;
+        command.vertexCount = index;
+        command.indexBuffer = mesh.indexBuffer;
+        command.indexed = true;
+        command.count = mesh.indexCount;
+        command.instances = instances;
+        command.indirect = indirect;
+    }
     /**
      * A skin draw's diffuse and colour halves, kept for the spread: the frame's draw again, twice,
      * with the same slots, buffers and bind group, through the pipelines that write the diffuse's
@@ -10884,6 +11810,11 @@ export class WebGPURenderer {
      * wrote.
      */
     keepSkinDiffuse(mesh, frameKey, base, skinned, morphed, deltas, layer, eight, clothed, slot, material) {
+        /* A skin's halves are not bundled: a static list holding one replays draw by draw. */
+        if (this.staticRecording !== null) {
+            this.staticRecording.immediate = true;
+            return;
+        }
         const skin = this.skinScatter;
         const pipelines = this.skinPipelines;
         const present = this.meshPresent.get(base);
@@ -10899,8 +11830,10 @@ export class WebGPURenderer {
             command.pipeline = pipeline;
             command.bindGroup = bindGroup;
             command.offsetA = slot;
-            command.offsetB = material;
-            command.offsetCount = 2;
+            command.offsetB = this.passOffset;
+            command.offsetC = material;
+            command.offsetD = this.drawViewOffset;
+            command.offsetCount = 4;
             for (let index = 0; index < mesh.vertexBuffers.length; index++) {
                 command.vertexBuffers[index] = mesh.vertexBuffers[index];
             }
@@ -10924,13 +11857,19 @@ export class WebGPURenderer {
         const skin = this.skinScatter;
         if (skin === null || this.skinScattered)
             return;
+        /*
+         * **Not the frame's picture, so not the frame's moment**: a blended draw in a mirror, a probe
+         * bake or a scene capture lands over none of the frame's skin. Latching there switched the
+         * spread off for the frame, so a capture with a glowing sign in it left every face drawn after
+         * it flat. `scripts/capture-check.mjs`.
+         */
+        if (this.reflectionPassActive || this.probePassActive || this.capturePassActive)
+            return;
         /* Latched whether or not skin was kept: a skin drawn after this point is the whole surface. */
         this.skinScattered = true;
         if (!skin.pending)
             return;
-        if (this.reflectionPassActive || this.probePassActive || this.oitReplaying)
-            return;
-        if (this.capturePassActive)
+        if (this.oitReplaying)
             return;
         const encoder = this.encoder;
         const depth = this.depthView;
@@ -11045,6 +11984,66 @@ export class WebGPURenderer {
         this.volumeDepthTaken = true;
         return true;
     }
+    /** The colour copy a registered pass reads, at the scene's size and format. See `passColour`. */
+    allocatePassColour() {
+        const source = this.sceneColor;
+        if (source === null || this.passColour !== null)
+            return;
+        this.passColour = this.surface.device.createTexture({
+            label: 'pass.sceneColor',
+            size: [source.width, source.height],
+            format: this.pipelines.format,
+            usage: 0x4 | 0x2, // TEXTURE_BINDING | COPY_DST
+        });
+        this.passColourView = this.passColour.createView();
+    }
+    /**
+     * The frame's colour so far, into `passColour`, for a registered pass that reads it: the
+     * boundary `takeRefractSnapshot` describes — flush, end the pass, copy what its end resolved,
+     * reopen with `load` — and refused where that one is, in a mirror, a probe bake or a capture,
+     * whose pictures are not the frame's. **Not latched**, unlike refraction's: each reading pass
+     * sees the passes drawn before it, at a full-frame copy each.
+     */
+    takePassColour() {
+        if (this.reflectionPassActive || this.probePassActive || this.capturePassActive)
+            return;
+        const copy = this.passColour;
+        const source = this.sceneColor;
+        const encoder = this.encoder;
+        if (copy === null || source === null || encoder === null || this.pass === null)
+            return;
+        if (this.quality.frameGraph)
+            this.flushGraph();
+        this.pass.end();
+        encoder.copyTextureToTexture({ texture: source }, { texture: copy }, [copy.width, copy.height]);
+        this.pass = this.reopenFramePass('pass.colourTaken');
+    }
+    /**
+     * The frame's pass again after a copy between passes, loading everything already drawn: the same
+     * attachments the copy's caller ended, with nothing cleared.
+     */
+    reopenFramePass(label) {
+        const encoder = this.encoder;
+        const target = this.compositeTarget();
+        if (encoder === null || target === null)
+            return null;
+        const multisampled = this.compositeMsaa() !== null;
+        return encoder.beginRenderPass({
+            label,
+            timestampWrites: this.gpuTimer.writesFor(),
+            colorAttachments: [
+                {
+                    view: this.compositeMsaa() ?? target,
+                    resolveTarget: multisampled ? target : undefined,
+                    loadOp: 'load',
+                    storeOp: resolvedStoreOp(multisampled, false, this.quality.discardResolvedAttachments),
+                },
+            ],
+            depthStencilAttachment: this.depthView === null
+                ? undefined
+                : { view: this.depthView, depthLoadOp: 'load', depthStoreOp: 'store' },
+        });
+    }
     /**
      * The pass to record into, reopening one on the canvas if the frame has already gone.
      *
@@ -11226,6 +12225,8 @@ export class WebGPURenderer {
             /* And a march reads the same copy, for the same reason and with the same failure if it is
                discarded: a depth of zero is the far plane reversed, so every ray finds nothing. */
             this.reflectionQueue.length > 0 ||
+            /* And the frame's materials' reflections, whose surface half tests against the depth too. */
+            this.reflectionSurface !== null ||
             /* And the medium's own march, which stops where the frame's depth says a surface is. Left
                out of this, every ray runs to `maxDistance` through the walls and the fog is drawn on
                top of the room rather than in it. */
@@ -11259,6 +12260,9 @@ export class WebGPURenderer {
      * site reads as one `if` either way.
      */
     recordDraw(reads, writes) {
+        /* A static list recording takes its draws into its own pool, never the frame graph's. */
+        if (this.staticRecording !== null)
+            return takeRecorded(this.staticRecording.frame);
         /* The order-independent replay owns its pass and issues directly into it; a recorded command
            would be replayed into the frame's passes instead, which is not where these belong. */
         if (this.oitEncoder !== null)
@@ -11306,10 +12310,26 @@ export class WebGPURenderer {
     }
     /** One recorded draw, issued into an open pass. Shared by the graph's replay and `runLate`. */
     issueCommand(pass, command) {
+        /* A static list, recorded once: one call, and the pass's bindings are its to set again. */
+        if (command.bundles !== null) {
+            pass.executeBundles(command.bundles);
+            return;
+        }
         if (command.pipeline === null || command.bindGroup === null)
             return;
         pass.setPipeline(command.pipeline);
-        if (command.offsetCount === 2) {
+        if (command.offsetCount === 4) {
+            pass.setBindGroup(0, command.bindGroup, [
+                command.offsetA,
+                command.offsetB,
+                command.offsetC,
+                command.offsetD,
+            ]);
+        }
+        else if (command.offsetCount === 3) {
+            pass.setBindGroup(0, command.bindGroup, [command.offsetA, command.offsetB, command.offsetC]);
+        }
+        else if (command.offsetCount === 2) {
             pass.setBindGroup(0, command.bindGroup, [command.offsetA, command.offsetB]);
         }
         else if (command.offsetCount === 1) {
@@ -11575,7 +12595,7 @@ export class WebGPURenderer {
         this.pass?.end();
         this.pass = null;
         if (!this.surface.lost)
-            this.surface.device.queue.submit([this.encoder.finish()]);
+            this.submit([this.encoder.finish()]);
         this.encoder = null;
     }
     endFrame() {
@@ -11639,7 +12659,7 @@ export class WebGPURenderer {
          * there would have nothing to ride on. See `GpuTimestamps.resolve`.
          */
         this.gpuTimer.resolve(this.encoder);
-        this.surface.device.queue.submit([this.encoder.finish()]);
+        this.submit([this.encoder.finish()]);
         this.encoder = null;
         this.framePresented = true;
         /* Latched rather than assigned: `framePresented` goes back to false every `beginFrame`. */
@@ -12042,6 +13062,9 @@ export class WebGPURenderer {
         const reads = maskOf(...(definition.reads ?? []));
         this.passReads.set(handle, reads);
         this.passReadsUnion |= reads;
+        /* The colour copy a reader needs, now rather than at its first draw: see `passColour`. */
+        if ((reads & COLOR_SNAPSHOT) !== 0 && this.passColour === null)
+            this.allocatePassColour();
         if (definition.prepare !== undefined)
             this.preparingPasses++;
         definition.init?.(this.passDevice());
@@ -12061,6 +13084,8 @@ export class WebGPURenderer {
         environment: null,
         distanceField: null,
         jitter: this.passJitter,
+        sceneDepth: null,
+        sceneColor: null,
     };
     /**
      * The object handed to a pass as `PrepareContext.environment`, rebuilt only when it changes.
@@ -12146,6 +13171,15 @@ export class WebGPURenderer {
          * than merely what happens.
          */
         this.prepareContext.distanceField = this.fieldComposer?.field ?? null;
+        /* Settled for the frame: `ensureComposite` has run, so the view stays until the pass draws. */
+        this.prepareContext.sceneDepth = this.resolvedDepthView;
+        /*
+         * Under a reconstruction a colour reader draws after the upscale (see `drawPass`), so it reads
+         * the output-size copy the late refraction keeps rather than the render's.
+         */
+        this.prepareContext.sceneColor = this.reconstructionWanted
+            ? this.refractSnapshotView
+            : this.passColourView;
         for (const definition of this.passes.definitions) {
             definition?.prepare?.(this.prepareContext);
         }
@@ -12163,6 +13197,35 @@ export class WebGPURenderer {
         const definition = passAt(this.passes, handle);
         if (definition === undefined)
             return;
+        const reads = this.passReads.get(handle) ?? 0;
+        /*
+         * **Under a reconstruction, a pass that reads the frame's colour draws after the blended draws
+         * do.** Those land after the upscale, at the output's size, so a pass drawn among them at the
+         * render's would read a frame without them and then be covered by them — a full-screen effect
+         * with the hit sparks drawn sharp over it. Queued instead, and drawn by `runLate` over the
+         * reconstructed picture, after every late draw, whatever order it was asked in.
+         */
+        if ((reads & COLOR_SNAPSHOT) !== 0 && this.drawsLate()) {
+            this.latePasses.push(handle);
+            return;
+        }
+        /*
+         * A pass that reads the depth copy gets it with everything drawn so far: the copy is taken
+         * here, once a frame, as a soft-edged sprite takes it. Before `openPass` below, because taking
+         * it ends the frame's pass and opens another.
+         */
+        if ((reads & DEPTH_SNAPSHOT) !== 0 && !this.framePresented && this.openPass() !== null) {
+            this.takeVolumeDepth();
+        }
+        /*
+         * And one that reads the colour gets it afresh, with everything drawn before it — a full-screen
+         * pass drawn last reads the whole frame and an effect drawn mid-frame reads the frame so far.
+         * A copy a reading pass, where the depth above is one a frame: what a colour reader draws is
+         * itself part of what the next one should see.
+         */
+        if ((reads & COLOR_SNAPSHOT) !== 0 && !this.framePresented && this.openPass() !== null) {
+            this.takePassColour();
+        }
         if (!this.quality.frameGraph) {
             const pass = this.openPass();
             if (pass === null)
@@ -12170,7 +13233,7 @@ export class WebGPURenderer {
             definition.draw(this.fillPassContext(pass));
             return;
         }
-        recordNode(this.arena, VERB_PASS, this.passReads.get(handle) ?? 0, this.currentTarget(), handle, 0);
+        recordNode(this.arena, VERB_PASS, reads, this.currentTarget(), handle, 0);
         if (this.framePresented)
             this.queueOverlayFlush();
     }
@@ -12257,7 +13320,7 @@ export class WebGPURenderer {
         definition.dispatch(this.computeContext);
         pass.end();
         this.flushRings();
-        device.queue.submit([encoder.finish()]);
+        this.submit([encoder.finish()]);
     }
     /** Let go of a definition. A handle kept past this dispatches nothing; see `ComputeHandle`. */
     unregisterCompute(handle) {
@@ -12279,8 +13342,8 @@ export class WebGPURenderer {
     bindClusters(camera, env, f, i, at) {
         const binner = this.clusterBinner;
         i[at('uClustered')] = binner === null ? 0 : 1;
-        if (binner === null)
-            return;
+        /* Written whether or not the lights are clustered: a surface overlay's rim finds its place on
+           the screen through the same two (\`overlayScreen\`). */
         const p = camera.projection;
         const tanHalfFovY = 1 / (p[5] ?? 1);
         const aspect = (p[5] ?? 1) / (p[0] ?? 1);
@@ -12296,6 +13359,8 @@ export class WebGPURenderer {
         f[frustumAt + 2] = tanHalfFovY;
         f[frustumAt + 3] = aspect;
         f.set(camera.view, at('uView'));
+        if (binner === null)
+            return;
         /* The rectangles past the fixed arm's go into the table. See `ClusterLightSet.areas`. */
         const set = fillClusterLightSet(env, this.clusterLights, this.shadedAreaLights);
         /* A slot is read only under `POINT_SHADOWS`; see `lightHasFixture`. */
@@ -12596,6 +13661,43 @@ export class WebGPURenderer {
     }
     /** This frame's exposure into the tone curve. Starts at the profile's own. */
     exposure;
+    /**
+     * The `filmic` curve every later frame is graded through, until it is set again. See
+     * `RendererApi.setFilmicCurve`; the constants are solved here once, not per frame or per pixel.
+     */
+    setFilmicCurve(curve) {
+        this.filmCurve = curve;
+        if (resolveFilmicCurve(curve, this.filmConstants, this.headroom) && !this.warnedFilmClamped) {
+            this.warnedFilmClamped = true;
+            console.warn(FILMIC_CLAMPED);
+        }
+    }
+    warnedFilmClamped = false;
+    /** The curve last set, so a new headroom can solve it again. */
+    filmCurve = DEFAULT_FILMIC_CURVE;
+    /** The display's peak over paper white; 1 on a standard range. See `setDisplayLuminance`. */
+    headroom = 1;
+    /** The range the frame goes out in. See `RendererApi.displayRange`. */
+    get displayRange() {
+        return this.surface.displayRange;
+    }
+    /** Why it is that range, in words. */
+    get displayRangeReason() {
+        return this.surface.displayRangeReason;
+    }
+    /**
+     * How bright paper white and the display's peak are, in any one unit (nits, usually), held until
+     * changed: their ratio is how far above white the highlights may run on a high range display,
+     * and nothing changes on a standard one. See `RendererApi.setDisplayLuminance`.
+     */
+    setDisplayLuminance(paperWhite, peak) {
+        this.headroom = displayHeadroom(this.surface.displayRange, paperWhite, peak);
+        resolveFilmicCurve(this.filmCurve, this.filmConstants, this.headroom);
+    }
+    /** The curve's eight constants, and the two views the composite uploads them through. */
+    filmConstants = new Float32Array(FILMIC_CONSTANTS);
+    filmA = this.filmConstants.subarray(0, 4);
+    filmB = this.filmConstants.subarray(4, 8);
     /*
      * -----------------------------------------------------------------------------------------
      * The three screen effects, which this backend cannot yet honour — and says so.
@@ -12639,6 +13741,8 @@ export class WebGPURenderer {
     veilColor = [0, 0, 0];
     veilAlpha = 0;
     vignette = 0;
+    /** The lens's colour fringe: red's and green's pull and where it begins. See `fringe.ts`. */
+    fringe = new Float32Array(FRINGE_FLOATS);
     grain = 0;
     grainSeed = 0;
     warnedLookWithoutComposite = false;
@@ -12660,6 +13764,20 @@ export class WebGPURenderer {
         }
         this.vignette = clampVignette(strength);
     }
+    /**
+     * The lens's colour fringe, held until changed: `intensity` is a percentage, 0 is none, and red
+     * and green are pulled toward the centre by their wavelength's distance from blue, growing from
+     * `start` — a share of the half-frame, 0 the centre — to the whole of it at the edge. Applied to
+     * scene light at the composite's first read. Needs `screenEffects`, and says so once rather than
+     * doing nothing. See `shaders/fringe.ts`.
+     */
+    setChromaticAberration(intensity, start = 0) {
+        if (!this.hasComposite) {
+            this.warnLookWithoutComposite(intensity);
+            return;
+        }
+        resolveFringe(intensity, start, this.fringe);
+    }
     /**
      * Film grain, held until changed: an amplitude in display values (0 is none, 0.03 is a fine
      * grain) and this frame's seed. **The seed is the caller's**, because the engine takes time from
@@ -12793,9 +13911,26 @@ export class WebGPURenderer {
     setSpeedRush(strength) {
         this.rushStrength = Math.min(Math.max(strength, 0), 1);
     }
-    /** How much of the frame's camera motion blur to apply, 0 to 1. */
-    setCameraMotionBlur(scale) {
+    /**
+     * How much of the frame's motion blur to apply, 0 to 1, and the longest smear as a share of the
+     * frame, both held until changed. See `RendererApi.setCameraMotionBlur`.
+     */
+    setCameraMotionBlur(scale, maxShare = MOTION_BLUR_MAX_UV) {
         this.motionBlurScale = Math.min(Math.max(scale, 0), 1);
+        this.motionBlurMax = clampMotionShare(maxShare);
+    }
+    /** The longest smear, as a share of the frame. See `setCameraMotionBlur`. */
+    motionBlurMax = MOTION_BLUR_MAX_UV;
+    warnedObjectBlur = false;
+    /**
+     * Said once: a draw named where it was last frame while the frame blurs, and this frame keeps no
+     * motion target to blur it by — the camera's motion alone smears it. See `OBJECT_BLUR_UNKEPT`.
+     */
+    warnObjectBlur() {
+        if (this.warnedObjectBlur)
+            return;
+        this.warnedObjectBlur = true;
+        console.warn(OBJECT_BLUR_UNKEPT);
     }
     /**
      * The camera has cut: this frame is a new shot, not the next moment of the last one.
@@ -13239,7 +14374,7 @@ export class WebGPURenderer {
                     .end();
             }
         }
-        device.queue.submit([clear.finish()]);
+        this.submit([clear.finish()]);
     }
     /**
      * Declare where a grid's probes stand, and allocate the layers for them.
@@ -13342,18 +14477,19 @@ export class WebGPURenderer {
          * `bindMeshPass` and `drawMesh`, which record into whatever `this.pass` is. That is the same
          * arrangement `bakeFace` uses for a point light's cube, and it is why a bake must not be
          * opened inside a frame's pass by a caller who then expects the frame to continue.
-         */
-        const savedPass = this.pass;
-        /*
+         *
          * **A bake is a boundary, and boundaries flush.** The mirror says why in its own words: what
          * has been recorded and not yet replayed belongs to the pass that is about to end, and leaving
          * it replays it into whichever pass opens next — a draw in the wrong target rather than a
          * missing one. This is the fourth such boundary in the backend and the only one that was never
          * given the treatment, which is what let a bake carry the frame's pending draws into a cube
-         * face.
+         * face. **The pass is saved after the flush**, which opens it where none was: saved before,
+         * the null given back left the flushed pass open and the frame's encoder locked. See
+         * `captureScene`.
          */
         if (this.quality.frameGraph)
             this.flushGraph();
+        const savedPass = this.pass;
         const savedEncoder = this.encoder;
         /*
          * **The rings are marked here and given back after the submit below**, because this bake is its
@@ -13449,7 +14585,7 @@ export class WebGPURenderer {
         if (whole)
             this.buildProbeChain(encoder, probe, this.probeSweeps?.writeLayer(layer) ?? layer);
         this.flushRings();
-        device.queue.submit([encoder.finish()]);
+        this.submit([encoder.finish()]);
         this.rewindRings(skinMark);
         this.encoderEpoch = frameEpoch;
         this.encoder = savedEncoder;
@@ -13459,6 +14595,7 @@ export class WebGPURenderer {
         this.perFrameInts[this.materialField('uOutputTransform')] = heldGrade;
         this.perFrameFloats[this.materialField('uOutputExposure')] = heldExposure;
         this.materials.dirty();
+        this.reopenPass();
         this.probePassActive = false;
         this.probeBounce = false;
         this.rebindEnvironment();
@@ -13506,7 +14643,7 @@ export class WebGPURenderer {
         this.uploadProbeFaces(probe, image);
         const encoder = device.createCommandEncoder({ label: 'probe.environmentImage' });
         this.buildProbeChain(encoder, probe, 0);
-        device.queue.submit([encoder.finish()]);
+        this.submit([encoder.finish()]);
         this.markProbeFilled(0);
         this.probeAmbient = options?.irradiance ?? true;
         this.rebuildFlatBindGroup();
@@ -13531,7 +14668,7 @@ export class WebGPURenderer {
         const { device } = this.surface;
         const encoder = device.createCommandEncoder({ label: 'probe.layerImage' });
         this.buildProbeChain(encoder, probe, this.probeSweeps?.writeLayer(layer) ?? layer);
-        device.queue.submit([encoder.finish()]);
+        this.submit([encoder.finish()]);
         this.markProbeFilled(layer);
         this.probeAmbient = options?.irradiance ?? true;
         this.rebuildFlatBindGroup();
@@ -13938,6 +15075,7 @@ export class WebGPURenderer {
             this.sceneColor,
             this.sceneColorMsaa,
             this.refractSnapshot,
+            this.passColour,
             this.resolvedDepth,
             this.aoTarget,
             this.aoScratch,
@@ -14003,6 +15141,10 @@ export class WebGPURenderer {
             usage: 0x4 | 0x2 | 0x10, // TEXTURE_BINDING | COPY_DST | RENDER_ATTACHMENT
         });
         this.refractSnapshotView = this.refractSnapshot.createView();
+        this.passColour = null;
+        this.passColourView = null;
+        if ((this.passReadsUnion & COLOR_SNAPSHOT) !== 0)
+            this.allocatePassColour();
         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
@@ -14218,6 +15360,10 @@ export class WebGPURenderer {
             usage: USAGE,
         });
         this.ssrReflectionView = this.ssrReflection.createView();
+        /* The frame's materials, at the scene's size; a stand-in where nothing traces them. */
+        this.reflectionSurface?.size(width, height);
+        const probeMap = this.reflectionSurface?.probeView ?? this.blankView;
+        const tintMap = this.reflectionSurface?.tintView ?? this.blankView;
         this.ssrBindGroup =
             this.resolvedDepthView === null || this.sceneColorView === null
                 ? null
@@ -14231,8 +15377,23 @@ export class WebGPURenderer {
                         },
                         ...entry(SSR_TEXTURES.uSsrDepth, this.resolvedDepthView, true),
                         ...entry(SSR_TEXTURES.uSsrScene, this.sceneColorView),
+                        ...entry(SSR_TEXTURES.uSsrProbeMap, probeMap),
+                        ...entry(SSR_TEXTURES.uSsrTintMap, tintMap),
                     ],
                 });
+        this.ssrMaterialGroup = device.createBindGroup({
+            label: 'post.ssrMaterialGroup',
+            layout: this.ssrMaterialLayout,
+            entries: [
+                {
+                    binding: SSR_MATERIAL_UNIFORMS,
+                    resource: { buffer: this.ssrMaterialUniforms, size: SSR_MATERIAL_SIZE },
+                },
+                ...entry(SSR_MATERIAL_TEXTURES.uSsrReflection, this.ssrReflectionView),
+                ...entry(SSR_MATERIAL_TEXTURES.uSsrProbeMap, probeMap),
+                ...entry(SSR_MATERIAL_TEXTURES.uSsrTintMap, tintMap),
+            ],
+        });
         this.ssrResolveGroup = device.createBindGroup({
             label: 'post.ssrResolveGroup',
             layout: this.ssrResolveLayout,