@driftengine/core 4.8.6 → 4.9.0

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

@@ -44,7 +44,7 @@ import { COOKIE_TILE } from '../../lightBudget.js';
 import { FULL_LIGHT_BUDGET } from '../../uniformVectorBudget.js';
 import { toHalfFloats } from '../../halfFloat.js';
 import { DEFAULT_SOURCE_RADIUS, FACE_COUNT, createResolvedPointShadows, } from '../../pointShadowImage.js';
-import { MAX_AREA_LIGHTS } from '../../areaLights.js';
+import { MAX_AREA_LIGHTS, packAreaSizesAndDoors } from '../../areaLights.js';
 import { areaShadowLayerCount, castingRange, createResolvedAreaShadows, firstAreaShadowLayer, AreaShadowSet, } from '../../areaShadowSet.js';
 import { createBakeScratch, runPointShadowBakes, selectCastingLights, } from '../../pointShadowBudget.js';
 import { POINT_SHADOW_SAMPLER, PointShadowSystem, } from '../../pointShadowSystem.js';
@@ -54,20 +54,28 @@ import { createPanelBindGroup, createPanelBindGroupLayout, createPanelCorners, p
 import { createGpuTextCube, createTextBindGroup, createTextBindGroupLayout, GpuText, textPipeline, TEXT_FRAG_FIELDS, TEXT_FRAG_SIZE, TEXT_VERT_FIELDS, TEXT_VERT_SIZE, } from './textPass.js';
 import { deviceSnappedCellSize, deviceSnappedOrigin } from '../../textLayout.js';
 import { GpuSurfaceTexture } from './surfaceTexturePass.js';
+import { GpuSceneCaptureTarget } from './sceneCaptureTarget.js';
+import { sceneCaptureTexels } from '../../sceneCapture.js';
 import { gpuCompressedFormats } from './compressedUpload.js';
 import { GpuClothBinding, GpuClothParticles, clothStandIn } from './clothTextures.js';
-import { MODEL_PARAM_FLOATS, eyeAxisInWorld, packModel } from '../../surfaceModel.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 { 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,7 +99,7 @@ import { GpuGlassTint } from './glassTintPass.js';
 import { SUN_DYNAMIC_LAYER, SUN_GLASS_MOVING_LAYER, SUN_GLASS_STATIC_LAYER, SUN_PEELED_LAYER, SUN_STATIC_LAYER, } from '../../shadowMap.js';
 import { VERTEX_LAYOUT, createGpuMesh, createGpuMeshIncremental } from './buffers.js';
 import { SkinPaletteRing } from './skinPaletteRing.js';
-import { DEPTH_FORMAT, FLAT_VERT_FIELDS, FLAT_VERT_SIZE, createFlatBindGroup, createFlatBindGroupLayout, flatFragmentBindings, flatVariant, flatVertexBindings, flatPipeline, flatPipelineAsync, } from './flatPass.js';
+import { DEPTH_FORMAT, FLAT_VERT_FIELDS, FLAT_VERT_SIZE, createFlatBindGroup, createFlatBindGroupLayout, flatFragmentBindings, flatVariant, flatVertexBindings, flatPipeline, flatPipelineAsync, probeStageCeilings, } 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 { PipelineCache } from './pipelineCache.js';
 import { SKIN_TARGET_FORMAT, SkinScatterPass } from './skinScatterPass.js';
@@ -213,34 +221,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) {
@@ -277,6 +271,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');
 /**
@@ -1278,6 +1273,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;
     /**
@@ -1780,8 +1786,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;
@@ -2227,6 +2243,104 @@ export class WebGPURenderer {
             mipmap: false,
         });
     }
+    /**
+     * A texture the scene can be drawn into, for a material to show. See `RendererApi` and
+     * `sceneCapture.ts`. At the world's own format, which under `hdrScene` is half floats.
+     */
+    createSceneCapture(width, height) {
+        const texture = new GpuSurfaceTexture(this.surface.device, this.pipelines, sceneCaptureTexels(width, height, this.quality.hdrScene), { wrap: 'clamp', mipmap: false });
+        this.captureTargets.set(texture, new GpuSceneCaptureTarget(this.surface.device, width, height));
+        return texture;
+    }
+    /** Each capture's attachments, beside the texture a material binds. */
+    captureTargets = new WeakMap();
+    /**
+     * Whether a scene capture is being drawn: an off-screen pass as a probe bake is, so the frame's
+     * camera, jitter, motion, refraction copy, skin's spread and late routing are left alone, but
+     * lit by the probes and DriftLight as the frame is. See `captureScene`.
+     */
+    capturePassActive = false;
+    /**
+     * Draw the scene into a capture from `camera`. See `RendererApi.captureScene`.
+     *
+     * **Its own encoder, as a probe bake's**: the frame's pass is set aside and restored, the rings
+     * are marked and rewound around the submit, and the frame graph is flushed at both boundaries so
+     * no recorded draw crosses one. **Radiance**: the output transform and exposure are held off.
+     */
+    captureScene(capture, camera, clearColor, draw) {
+        if (this.surface.lost)
+            return false;
+        const target = this.captureTargets.get(capture);
+        const resolve = capture.layerView();
+        if (target === undefined || resolve === null)
+            return false;
+        camera.updateMatrices(target.width / target.height);
+        const { device } = this.surface;
+        const { depth, colorMsaa } = target.attachments(this.samples, this.pipelines.format);
+        /*
+         * **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();
+        const frameEpoch = this.encoderEpoch;
+        this.encoderEpoch = ++this.encoderEpochs;
+        const encoder = device.createCommandEncoder({ label: 'capture' });
+        this.encoder = encoder;
+        this.capturePassActive = true;
+        const heldGrade = this.perFrameInts[this.materialField('uOutputTransform')] ?? 0;
+        const heldExposure = this.perFrameFloats[this.materialField('uOutputExposure')] ?? 1;
+        this.perFrameInts[this.materialField('uOutputTransform')] = 0;
+        this.perFrameFloats[this.materialField('uOutputExposure')] = 1;
+        this.materials.dirty();
+        const pass = encoder.beginRenderPass({
+            label: 'capture',
+            colorAttachments: [
+                {
+                    view: colorMsaa ?? resolve,
+                    resolveTarget: colorMsaa === null ? undefined : resolve,
+                    loadOp: 'clear',
+                    storeOp: resolvedStoreOp(colorMsaa !== null, true, this.quality.discardResolvedAttachments),
+                    clearValue: { r: clearColor[0], g: clearColor[1], b: clearColor[2], a: 1 },
+                },
+            ],
+            depthStencilAttachment: {
+                view: depth,
+                depthClearValue: DEPTH_CLEAR,
+                depthLoadOp: 'clear',
+                depthStoreOp: 'discard',
+            },
+        });
+        this.pass = pass;
+        try {
+            draw(camera);
+            /* The callback's draws replayed into this pass before it ends: see `bakeProbe`. */
+            if (this.quality.frameGraph)
+                this.flushGraph();
+        }
+        finally {
+            pass.end();
+            this.pass = null;
+            this.flushRings();
+            device.queue.submit([encoder.finish()]);
+            this.rewindRings(skinMark);
+            this.encoderEpoch = frameEpoch;
+            this.encoder = savedEncoder;
+            this.pass = savedPass;
+            this.perFrameInts[this.materialField('uOutputTransform')] = heldGrade;
+            this.perFrameFloats[this.materialField('uOutputExposure')] = heldExposure;
+            this.materials.dirty();
+            this.capturePassActive = false;
+        }
+        return true;
+    }
     /**
      * GPU textures an `updateSurfaceTexture` replaced, destroyed when the next frame begins.
      *
@@ -2278,8 +2392,12 @@ 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();
+        this.captureTargets.delete(texture);
     }
     /**
      * Drop every bind group that may hold `texture`'s view, and rebuild the ones bound now.
@@ -2293,6 +2411,7 @@ export class WebGPURenderer {
         /* Same reasoning, for whichever SDF labels were bound against this atlas. */
         this.sdfTextBindGroups.delete(texture);
         this.flatBindGroups.clear();
+        this.overlayGroups.clear();
         /*
          * 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
@@ -2458,7 +2577,7 @@ export class WebGPURenderer {
         const model = material?.model;
         warnUnpagedLightmap(model, modelMap);
         if (model?.kind === 'skin' && this.skinScatter !== null) {
-            this.skinScatter.setProfile(model.profile, model.scatterColor[0] * model.radius, model.scatterColor[1] * model.radius, model.scatterColor[2] * model.radius);
+            this.skinScatter.setProfile(model.profile, skinProfileDistance(model, 0), skinProfileDistance(model, 1), skinProfileDistance(model, 2));
         }
         this.material((f, i) => {
             /* The material's four switches, one row: albedo, ORM map, emissive map, two-sided. */
@@ -2503,7 +2622,10 @@ export class WebGPURenderer {
             f[emissive + 1] = asked?.[1] ?? 1;
             f[emissive + 2] = asked?.[2] ?? 1;
             /* The model's numbers and whether its map is bound. See `packModel`. */
-            packModel(material?.model ?? null, modelMap !== null, this.modelParams);
+            packModel(material?.model ?? null, modelMap !== null, this.modelParams, material?.physicalSpecular === true);
+            /* The first physical highlight asked for is when the lit pipelines start carrying one. */
+            if (material?.physicalSpecular === true)
+                this.enableLit('PHYSICAL_SPECULAR');
             f.set(this.modelParams, this.materialField('uModelParams'));
         });
         /*
@@ -2625,6 +2747,21 @@ 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) => {
@@ -3295,7 +3432,7 @@ export class WebGPURenderer {
      */
     gradeCode() {
         return !this.hasComposite || !this.quality.hdrScene
-            ? (OUTPUT_TRANSFORM_CODE[this.quality.outputTransform] ?? 0)
+            ? forwardTransformCode(this.quality.outputTransform)
             : 0;
     }
     gradeExposure() {
@@ -3321,6 +3458,30 @@ export class WebGPURenderer {
             return;
         const device = this.surface.device;
         device.queue.writeBuffer(batch.instances, 0, batch.staging, 0, live * PARTICLE_INSTANCE_FLOATS);
+        this.drawParticleInstances(batch, batch.instances, live, camera, env, timeSeconds);
+    }
+    /**
+     * Draw particles a caller's own compute wrote, where they lie. See `DeviceParticles`.
+     *
+     * **The pool's draw with its instance stream swapped**: the same material, blend, flipbook, soft
+     * edge and fog, reading the caller's buffer in place of the one the pool uploads into — so nothing
+     * crosses back to the CPU. Not sorted, and a count past what the buffer holds is cut to it rather
+     * than handed to a draw the device would refuse with the frame.
+     */
+    drawDeviceParticles(batch, particles, camera, env, timeSeconds) {
+        const fits = Math.floor(particles.buffer.size / (PARTICLE_INSTANCE_FLOATS * 4));
+        const live = Math.min(Math.max(0, Math.floor(particles.count)), fits);
+        /* Not above zero covers a NaN as well: a count or a size that is no number draws nothing. */
+        if (!this.canDraw() || !(live > 0))
+            return;
+        if (batch.drawnInEncoder === this.encoderEpoch)
+            return;
+        batch.drawnInEncoder = this.encoderEpoch;
+        this.drawParticleInstances(batch, particles.buffer, live, camera, env, timeSeconds);
+    }
+    /** A pool's uniforms for this view, and its draw from `instances`: both entry points' tail. */
+    drawParticleInstances(batch, instances, live, camera, env, timeSeconds) {
+        const device = this.surface.device;
         const v = batch.vertFloats;
         const atV = (name) => (PARTICLE_VERT_FIELDS[name]?.offset ?? -4) / 4;
         mat4.multiply(this.correctedViewProj, CLIP_CORRECTION, camera.viewProjection);
@@ -3392,7 +3553,7 @@ export class WebGPURenderer {
             particleCommand.pipeline = particlePipe;
             particleCommand.bindGroup = group;
             particleCommand.vertexBuffers[0] = batch.corners;
-            particleCommand.vertexBuffers[1] = batch.instances;
+            particleCommand.vertexBuffers[1] = instances;
             particleCommand.vertexCount = 2;
             particleCommand.indexBuffer = batch.indexBuffer;
             particleCommand.indexed = true;
@@ -3406,7 +3567,7 @@ export class WebGPURenderer {
             pass.setPipeline(particlePipe);
             pass.setBindGroup(0, group);
             pass.setVertexBuffer(0, batch.corners);
-            pass.setVertexBuffer(1, batch.instances);
+            pass.setVertexBuffer(1, instances);
             pass.setIndexBuffer(batch.indexBuffer, 'uint32');
             pass.drawIndexed(PARTICLE_INDICES, live);
         }
@@ -3424,7 +3585,10 @@ export class WebGPURenderer {
         const fields = batch.fields;
         const atF = (name) => (fields[name]?.offset ?? -4) / 4;
         let depth = null;
-        if (batch.softDepth > 0 && !this.reflectionPassActive && !this.probePassActive) {
+        if (batch.softDepth > 0 &&
+            !this.reflectionPassActive &&
+            !this.probePassActive &&
+            !this.capturePassActive) {
             if (this.openPass() !== null && this.takeVolumeDepth())
                 depth = this.resolvedDepthView;
             if (depth === null && !this.warnedSpriteDepth) {
@@ -3717,6 +3881,7 @@ export class WebGPURenderer {
         scatterInto(f, WATER_FRAG_FIELDS['uLightRadius'], lights.radii, 1);
         scatterInto(f, WATER_FRAG_FIELDS['uLightSourceRadius'], lights.sourceRadii, 1);
         scatterInto(f, WATER_FRAG_FIELDS['uLightWeight'], lights.weights, 1);
+        scatterInto(f, WATER_FRAG_FIELDS['uLightCone'], lights.conesAndFalloffs, 4);
         const medium = resolveAtmosphere(env, camera.position[1] ?? 0, this.quality.underwaterAtmosphere, this.medium);
         f.set(medium.fogColor, atF('uFogColor'));
         f[atF('uFogDensity')] = medium.fogDensity;
@@ -4509,8 +4674,11 @@ export class WebGPURenderer {
         cookies: new Float32Array(0),
         heldSourceRadii: new Float32Array(MAX_POINT_LIGHTS),
         axesAndChannels: new Float32Array(MAX_POINT_LIGHTS * 4),
+        conesAndFalloffs: new Float32Array(MAX_POINT_LIGHTS * 4),
         heldWeights: new Float32Array(MAX_POINT_LIGHTS),
     };
+    /** The fixed arm's rectangles as `uAreaLightSize` holds them. See `packAreaSizesAndDoors`. */
+    areaSizesAndDoors = new Float32Array(MAX_AREA_LIGHTS * 4);
     /** Refilled per frame rather than allocated; see `resolveAtmosphere`. */
     medium = {
         fogColor: new Float32Array(3),
@@ -5184,6 +5352,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)
@@ -5253,6 +5425,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;
@@ -5608,6 +5799,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 };
             }
             /*
@@ -5738,6 +5934,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',
@@ -5755,11 +5953,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({
@@ -6175,7 +6386,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();
@@ -6566,7 +6781,7 @@ export class WebGPURenderer {
          * the viewer sees, and bounding it through a mirrored camera puts it in the wrong half of the
          * screen.
          */
-        if (!this.reflectionPassActive) {
+        if (!this.reflectionPassActive && !this.capturePassActive) {
             mat4.copy(this.frameRawViewProj, camera.viewProjection);
             /* The eye in world space, which the resolve's normals are turned to face. */
             this.reconEye.set(camera.position);
@@ -6600,7 +6815,8 @@ export class WebGPURenderer {
          * second temporal frame stepped the sequence twice a frame, so the world saw every other
          * position and the anti-flicker's period never started.
          */
-        if (this.framePresented)
+        /* A capture has no resolve to undo a jitter and is no frame of the sequence. */
+        if (this.framePresented || this.capturePassActive)
             this.viewProj = this.correctedViewProj;
         else
             this.jitterFrame();
@@ -6731,6 +6947,9 @@ export class WebGPURenderer {
         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);
         /*
@@ -6928,7 +7147,8 @@ export class WebGPURenderer {
          * uniform added on one backend is bound on both in the same change.
          */
         scatterInto(f, this.fragment.fields['uLightDir'], lights.directions, 3);
-        scatterInto(f, this.fragment.fields['uLightCone'], lights.coneCos, 2);
+        /* The cone and, in z, the light's own falloff exponent. See `conesAndFalloffs`. */
+        scatterInto(f, this.fragment.fields['uLightCone'], lights.conesAndFalloffs, 4);
         scatterInto(f, this.fragment.fields['uLightIesProfile'], lights.iesProfiles, 1);
         /* The azimuth and, in w, the light's channels. See `axesAndChannels`. */
         scatterInto(f, this.fragment.fields['uLightIesAxis'], lights.axesAndChannels, 4);
@@ -6949,7 +7169,9 @@ export class WebGPURenderer {
             scatterInto(f, this.fragment.fields['uAreaLightColor'], area.colors, 3);
             scatterInto(f, this.fragment.fields['uAreaLightRight'], area.right, 3);
             scatterInto(f, this.fragment.fields['uAreaLightUp'], area.up, 3);
-            scatterInto(f, this.fragment.fields['uAreaLightSize'], area.sizes, 2);
+            /* The half extents and, in zw, the barn doors. See `packAreaSizesAndDoors`. */
+            packAreaSizesAndDoors(area, this.areaSizesAndDoors);
+            scatterInto(f, this.fragment.fields['uAreaLightSize'], this.areaSizesAndDoors, 4);
             scatterInto(f, this.fragment.fields['uAreaLightTwoSided'], area.twoSided, 1);
         }
         /*
@@ -7096,6 +7318,8 @@ 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;
@@ -7177,6 +7401,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
@@ -7532,6 +7759,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
@@ -7661,6 +7892,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');
@@ -7681,6 +7913,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;
@@ -7845,6 +8078,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);
+            }
         }
         /* 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
@@ -8473,6 +8710,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. */
@@ -8823,6 +9074,41 @@ export class WebGPURenderer {
     buildFlatBindGroup() {
         return createFlatBindGroup(this.surface.device, this.bindGroupLayout, this.variant, this.perDraw.buffer, this.perFrame.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.
      *
@@ -8835,8 +9121,9 @@ export class WebGPURenderer {
      * 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`. */
@@ -8844,13 +9131,16 @@ export class WebGPURenderer {
         /* 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.skinnedGroupsBeside[at] !== base ||
             this.skinnedGroupsPalette[at] !== palette ||
             this.skinnedGroupsDeltas[at] !== deltas ||
             this.skinnedGroupsCloth[at] !== (cloth?.particles ?? null) ||
             this.skinnedGroupsClothBinding[at] !== (cloth?.binding ?? null)) {
+            /* Built from the live material, with the overlay's atlas where `base` is its twin. */
+            this.overlayBinding = base !== this.bindGroup;
             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.overlayBinding = false;
+            this.skinnedGroupsBeside[at] = base;
             this.skinnedGroupsPalette[at] = palette;
             this.skinnedGroupsDeltas[at] = deltas;
             this.skinnedGroupsCloth[at] = cloth?.particles ?? null;
@@ -8917,6 +9207,7 @@ export class WebGPURenderer {
      */
     rebuildFlatGroupsForNewRings() {
         this.flatBindGroups.clear();
+        this.overlayGroups.clear();
         this.flatEnvironment = this.flatTextures('uEnvironment').view;
         this.skinnedGroups.length = 0;
         const albedo = this.albedo;
@@ -8969,6 +9260,7 @@ export class WebGPURenderer {
      */
     rebuildFlatBindGroup() {
         this.flatBindGroups.clear();
+        this.overlayGroups.clear();
         this.flatEnvironment = this.flatTextures('uEnvironment').view;
         if (this.albedo === null &&
             this.normalMap === null &&
@@ -9194,9 +9486,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
@@ -9240,6 +9537,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;
@@ -9277,7 +9575,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
@@ -9285,11 +9583,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;
@@ -9318,6 +9618,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,
         });
@@ -9574,7 +9875,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`. */
@@ -9631,7 +9932,7 @@ export class WebGPURenderer {
     drawsLate() {
         return (this.latePass !== null &&
             this.oitEncoder === null &&
-            routesLate(this.reconstructing, this.reflectionPassActive, this.probePassActive, this.framePresented));
+            routesLate(this.reconstructing, this.reflectionPassActive, this.probePassActive || this.capturePassActive, this.framePresented));
     }
     /**
      * The command a blended draw records into: the late pool while reconstructing, the frame graph
@@ -9663,7 +9964,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);
@@ -9675,25 +9976,64 @@ 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() {
-        return tracksMotion(this.reconstructing, this.reflectionPassActive, this.probePassActive, this.framePresented);
+        return tracksMotion(this.reconstructing, this.reflectionPassActive, this.probePassActive || this.capturePassActive, this.framePresented);
     }
     /**
      * What this draw's motion is, recorded for the motion pass.
@@ -10056,7 +10396,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;
@@ -10094,14 +10437,70 @@ export class WebGPURenderer {
             f.set(surface.axis, base + at('uSsrAxis'));
             f.set(surface.tint, base + at('uSsrTint'));
             f[base + at('uSsrStrength')] = surface.strength;
+            f[base + at('uSsrFresnel')] = surface.fresnel ? 1 : 0;
+            f[base + at('uSsrFresnel') + 1] = surface.roughness;
             f[base + at('uSsrFacingCos')] = surface.facingCos;
             f[base + at('uSsrReach')] = surface.reachM;
             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({
@@ -10110,7 +10509,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++;
@@ -10654,7 +11053,7 @@ export class WebGPURenderer {
      * glass, and a frame that refracts nothing breaks no pass at all.
      */
     takeRefractSnapshot() {
-        if (this.reflectionPassActive || this.probePassActive)
+        if (this.reflectionPassActive || this.probePassActive || this.capturePassActive)
             return false;
         if (this.refractSnapshotTaken)
             return true;
@@ -10737,10 +11136,55 @@ export class WebGPURenderer {
             !this.skinScattered &&
             !this.reflectionPassActive &&
             !this.probePassActive &&
+            !this.capturePassActive &&
+            !this.framePresented &&
+            !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) {
+        const surface = this.reflectionSurface;
+        const present = this.meshPresent.get(base);
+        if (surface === null || present === undefined)
+            return;
+        const key = `${frameKey}|rs`;
+        const pipeline = this.pipelines.peek(key) ??
+            flatPipeline(this.pipelines, this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, key, present, false, skinned, morphed, true, layer, instanceBuffer !== null, 'none', this.materialDoubleSided, false, eight, clothed, modelKind, 'whole', true);
+        const command = surface.take();
+        command.pipeline = pipeline;
+        command.bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
+        command.offsetA = slot;
+        command.offsetB = material;
+        command.offsetCount = 2;
+        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
@@ -10788,11 +11232,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)
+        if (this.oitReplaying)
             return;
         const encoder = this.encoder;
         const depth = this.depthView;
@@ -10851,7 +11303,7 @@ export class WebGPURenderer {
          * own terms: `resolvedDepthView` holds the *frame's* depth, and clamping a mirrored beam
          * against it would stop it at geometry that is not in front of it.
          */
-        if (this.reflectionPassActive)
+        if (this.reflectionPassActive || this.capturePassActive)
             return false;
         if (this.resolvedDepthView === null)
             return false;
@@ -10907,6 +11359,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.
      *
@@ -11088,6 +11600,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. */
@@ -11408,8 +11922,9 @@ export class WebGPURenderer {
      * any future branch added to one belongs in the other.
      */
     targetPipelines() {
-        if (this.probePassActive || this.reflectionPassActive)
+        if (this.probePassActive || this.reflectionPassActive || this.capturePassActive) {
             return this.pipelines;
+        }
         return this.overlayActive || this.framePresented ? this.overlayPipelines : this.pipelines;
     }
     /** End and submit a reopened pass. Safe to call when there is none. */
@@ -11903,6 +12418,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());
@@ -11922,6 +12440,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.
@@ -12007,6 +12527,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);
         }
@@ -12024,6 +12553,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)
@@ -12031,7 +12589,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();
     }
@@ -12140,8 +12698,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);
@@ -12157,6 +12715,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`. */
@@ -12457,6 +13017,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.
@@ -12500,6 +13097,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;
@@ -12521,6 +13120,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
@@ -12654,9 +13267,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.
@@ -13203,18 +13833,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
@@ -13799,6 +14430,7 @@ export class WebGPURenderer {
             this.sceneColor,
             this.sceneColorMsaa,
             this.refractSnapshot,
+            this.passColour,
             this.resolvedDepth,
             this.aoTarget,
             this.aoScratch,
@@ -13864,6 +14496,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
@@ -14079,6 +14715,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
@@ -14092,8 +14732,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,