@driftengine/core 4.8.5 → 4.8.7

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

@@ -23,7 +23,9 @@ import { PickableSet } from '../../pickable.js';
 import { GpuTimestamps } from './gpuTimestamps.js';
 import { isWeakGpuFamily } from '../../gpuCapability.js';
 import { resolveAtmosphere } from '../../atmosphere.js';
-import { BLOOM_FILTER_RADIUS_UV, BLOOM_LEVELS, bloomLevelSizes, bloomThresholdOf, bloomProfileWarning, } from '../../bloomChain.js';
+import { AMBIENT_SH_FLOATS, packAmbientSH } from '../../ambientHarmonics.js';
+import { lightmapTexels, warnRegionsWithoutPage, warnUnpagedLightmap, withLightmapUvs, } from '../../lightmap.js';
+import { BLOOM_FILTER_RADIUS_UV, BLOOM_LEVELS, bloomLevelSizes, bloomThresholdOf, bloomProfileWarning, defaultBloomResponse, resolveBloomResponse, } from '../../bloomChain.js';
 import { createResolvedWater, resolveWater, waterAppearance, } from '../../waterDraw.js';
 import { createResolvedLightVolume, DEPTH_01_TO_CLIP_Y_DOWN, resolveLightVolume, volumeMediumGain, } from '../../lightVolumeDraw.js';
 import { WIND_STREAK_DEFAULTS, createResolvedWindStreaks, resolveWindStreaks, } from '../../windStreakDraw.js';
@@ -42,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';
@@ -52,9 +54,11 @@ 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 { 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';
@@ -65,7 +69,7 @@ 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, ADDITIVE_BLEND, BLOOM_DOWNSAMPLE_FIELDS, BLOOM_DOWNSAMPLE_FRAG_WGSL, BLOOM_PREFILTER_FIELDS, BLOOM_PREFILTER_FRAG_WGSL, BLOOM_STAGE_SIZE, BLOOM_TEXTURES, BLOOM_UNIFORMS, BLOOM_UPSAMPLE_FIELDS, 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, 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 { 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';
@@ -75,6 +79,7 @@ import { seaStateForWind } from '../../seaState.js';
 import { causticsPipeline, createCausticsBindGroup, createCausticsBindGroupLayout, createGpuCaustics, CAUSTICS_FRAG_FIELDS, CAUSTICS_FRAG_SIZE, CAUSTICS_VERT_FIELDS, CAUSTICS_VERT_SIZE, } from './causticsPass.js';
 import { createInsetBindGroup, createInsetBindGroupLayout, insetPipeline, INSET_UNIFORM_SIZE, } from './insetPass.js';
 import { buildPlumeGeometry } from '../../plumeGeometry.js';
+import { facingCode } from '../../particleBatch.js';
 import { PARTICLE_INDICES } from '../../shaders/particle.js';
 import { createScatterDeform, resolveScatterDeform, } from '../../scatterDeform.js';
 import { resolvePointLights } from '../../lightBudget.js';
@@ -96,7 +101,8 @@ import { SKY_FIELDS, SKY_UNIFORM_SIZE, createSkyBindGroup, createSkyBindGroupLay
 import { SCATTER_DEPTH_FIELDS, SCATTER_DEPTH_SIZE, SCATTER_FRAG_FIELDS, SCATTER_FRAG_SIZE, SCATTER_VERT_FIELDS, SCATTER_VERT_SIZE, createGpuScatter, createScatterBindGroup, createScatterBindGroupLayout, createScatterDepthBindGroup, createScatterDepthBindGroupLayout, scatterDepthPipeline, scatterPipeline, } from './scatterPass.js';
 import { WATER_FRAG_FIELDS, WATER_FRAG_SIZE, WATER_VERT_FIELDS, WATER_VERT_SIZE, createGpuWater, createWaterBindGroup, createWaterBindGroupLayout, waterPipeline, } from './waterPass.js';
 import { PLUME_FRAG_FIELDS, PLUME_FRAG_SIZE, PLUME_VERT_FIELDS, PLUME_VERT_SIZE, createGpuPlumes, createPlumeBindGroup, createPlumeBindGroupLayout, plumePipeline, } from './plumePass.js';
-import { PARTICLE_VERT_FIELDS, createGpuParticles, createParticleBindGroupLayout, packInstances, particleFragBindings, particlePipeline, } from './particlePass.js';
+import { PARTICLE_INSTANCE_FLOATS, PARTICLE_VERT_FIELDS, createGpuParticles, createParticleBindGroupLayout, createSpriteBindGroup, packInstances, particleFragBindings, particlePipeline, } from './particlePass.js';
+import { sortBackToFront } from '../../particleSort.js';
 import { WIND_STREAK_FRAG_FIELDS, WIND_STREAK_FRAG_SIZE, WIND_STREAK_VERT_FIELDS, WIND_STREAK_VERT_SIZE, createGpuWindStreaks, createWindStreakBindGroup, createWindStreakBindGroupLayout, windStreakPipeline, } from './windStreakPass.js';
 import { FLOCK_FRAG_FIELDS, FLOCK_FRAG_SIZE, FLOCK_VERT_FIELDS, FLOCK_VERT_SIZE, createFlockBindGroup, createFlockBindGroupLayout, createGpuFlock, flockPipeline, } from './flockPass.js';
 import { BOLT_FRAG_FIELDS, BOLT_FRAG_SIZE, BOLT_VERT_FIELDS, BOLT_VERT_SIZE, boltPipeline, createBoltBindGroup, createBoltBindGroupLayout, createGpuBolts, } from './boltPass.js';
@@ -127,6 +133,8 @@ import { fitProbeGrid } from '../../gi/probeGridFit.js';
 const INDIRECT_PROBE_SPACING = 2;
 /** What the trace is given when a frame never said what was lighting it. */
 const NO_SUN = [0, 0, 0];
+/** The halves of a skin draw the spread keeps, in the order they are drawn. See `keepSkinDiffuse`. */
+const SKIN_KEPT_HALVES = ['diffuse', 'albedo'];
 import { CLIP_Y_FLIP, MAX_REFLECTIVE_SURFACES, REFLECTION_EDGE_FADE, ReflectionQueue, } from '../../screenSpaceReflection.js';
 import { decalScissor } from '../../decalProjector.js';
 import { createCommandPool, resetPool, takeCommand } from './drawCommand.js';
@@ -138,7 +146,7 @@ import { OcclusionBuffer } from '../../occlusion.js';
 import { boundsVisible } from '../../visibility.js';
 import { createPassRegistry, drainRegistry, passAt, registerIn, unregisterIn } from '../../pass.js';
 import { ClusterBinner } from './clusterBinner.js';
-import { clusteredMode, createClusterLightSet, fillClusterLightSet, } from '../../clusteredLights.js';
+import { clusteredMode, createClusterLightSet, clusteredLightTotal, fillClusterLightSet, lightChannelsOf, } from '../../clusteredLights.js';
 import { computeAt, createComputeRegistry, } from '../../compute.js';
 import { GpuInstancedBatch } from './instanced.js';
 import { cutoutOf } from '../../cutoutCaster.js';
@@ -688,11 +696,16 @@ const DECAL_SLOT = DYNAMIC_UNIFORM_ALIGNMENT;
  */
 const SSR_SLOT = Math.ceil(SSR_FRAG_SIZE / DYNAMIC_UNIFORM_ALIGNMENT) * DYNAMIC_UNIFORM_ALIGNMENT;
 const BLOOM_SLOT = DYNAMIC_UNIFORM_ALIGNMENT;
-const BLOOM_SLOTS = BLOOM_LEVELS + 1;
+const BLOOM_SLOTS = BLOOM_LEVELS + 2;
 /** One slot per blur axis, aligned like every other dynamic-offset block here. */
 const AO_BLUR_SLOT = DYNAMIC_UNIFORM_ALIGNMENT;
-/** The last slot, holding the tent radius every upsample draw binds. */
+/**
+ * The tent radius every upsample draw binds, with white as the level it reads is multiplied by;
+ * and the same for the first draw up, which multiplies the deepest level by that level's tint.
+ * Every other level's tint is the blend constant of the draw adding onto it. See `BloomResponse`.
+ */
 const BLOOM_UPSAMPLE_SLOT = BLOOM_LEVELS;
+const BLOOM_UPSAMPLE_DEEPEST_SLOT = BLOOM_LEVELS + 1;
 /** The tint a draw gets when it asks for none, matching the WebGL2 path's reset-to-white. */
 const WHITE = new Float32Array([1, 1, 1]);
 /** A dust field standing still, for a light volume that asked for dust and not for wind. */
@@ -849,7 +862,7 @@ export class WebGPURenderer {
      * Held rather than passed, like every other per-draw state here: `setSkinPalette` chooses and
      * the following draws use it, which is the shape `setMaterial` already has.
      */
-    skinPalettes = new SkinPaletteRing();
+    skinPalettes;
     skinnedBindGroupLayout;
     morphedBindGroupLayout;
     bothBindGroupLayout;
@@ -1279,6 +1292,17 @@ export class WebGPURenderer {
     /** Whether this frame has spread its skin: once, at its first blended draw or before its end. */
     skinScattered = false;
     skinInverseProjection = mat4.create();
+    /** Scratch for a sprite's depth conversion, so a particle draw allocates nothing. */
+    spriteInverseProjection = mat4.create();
+    /** Said once: a sprite asked for a soft edge where no depth copy could be had. */
+    warnedSpriteDepth = false;
+    /** Said once: more rectangles than the fixed arm shades, and no froxel table for the rest. */
+    warnedAreaOverflow = false;
+    /** What a sprite's depth binding holds where no copy was taken. See `spriteDepthStandIn`. */
+    spriteDepthEmpty = null;
+    /** The samplers every sprite batch binds: its image filtered, the depth copy texel for texel. */
+    spriteLinearSampler = null;
+    spriteNearestSampler = null;
     sceneColorView = null;
     /** The multisampled twin, when the profile asks for samples. Resolved into `sceneColor`. */
     sceneColorMsaa = null;
@@ -2198,6 +2222,104 @@ export class WebGPURenderer {
     createSurfaceTextureArray(sources, options = {}) {
         return new GpuSurfaceTexture(this.surface.device, this.pipelines, sources, options, this.compressedFormats);
     }
+    /** A baked lightmap page, as a `lightmapModel` material's `modelMap`. See `RendererApi`. */
+    createLightmap(page) {
+        return new GpuSurfaceTexture(this.surface.device, this.pipelines, lightmapTexels(page), {
+            wrap: 'clamp',
+            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);
+        const savedPass = this.pass;
+        if (this.quality.frameGraph)
+            this.flushGraph();
+        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.
      *
@@ -2251,6 +2373,8 @@ export class WebGPURenderer {
             this.modelMap = 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.
@@ -2427,8 +2551,9 @@ export class WebGPURenderer {
         this.materialModel = material?.model ?? null;
         /* What the blur spreads this skin by: the last material to name a profile says. */
         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. */
@@ -2444,6 +2569,8 @@ export class WebGPURenderer {
             f[cut] = cutoff;
             f[cut + 1] = CUTOUT_RESOLVE_CODE[this.cutoutResolveStaged];
             f[cut + 2] = this.cutoutFrame;
+            /* 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;
             /* 0 is no map, and gates the whole block in the shader. See `uNormalStrength`. */
             f[this.materialField('uNormalStrength')] =
@@ -2471,7 +2598,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'));
         });
         /*
@@ -2583,16 +2713,26 @@ export class WebGPURenderer {
         console.warn('WebGPU: setEnvironmentAmbient no longer does anything. A baked probe now lights a ' +
             'surface through projected irradiance, and there is nothing left to tune.');
     }
+    /**
+     * The ambient the following draws take, nine spherical-harmonic coefficients or null for the
+     * frame's. See `Renderer.setAmbientSH`: material state, so the next draw takes a slot of its own.
+     */
+    setAmbientSH(coefficients) {
+        if (this.surface.lost)
+            return;
+        packAmbientSH(coefficients, this.ambientSH);
+        this.material((f) => f.set(this.ambientSH, this.materialField('uAmbientSH')));
+    }
     /** How reflective the surfaces drawn next are. Clamped, as `renderer.ts` clamps it. */
     setSurfaceReflectivity(amount) {
         this.material((f) => {
-            f[this.materialField('uReflectivity')] = Math.min(1, Math.max(0, amount));
+            f[this.materialField('uEnvironmentDials') + 1] = Math.min(1, Math.max(0, amount));
         });
     }
     /** How bright the environment the surfaces drawn next reflect is. See `renderer.ts`. */
     setEnvironmentGain(gain) {
         this.material((f) => {
-            f[this.materialField('uEnvironmentGain')] = Math.max(0, gain);
+            f[this.materialField('uEnvironmentDials') + 2] = Math.max(0, gain);
         });
     }
     setSurfaceGrain(amount) {
@@ -2629,7 +2769,7 @@ export class WebGPURenderer {
     setSurfaceRelief(amount, cyclesPerMetre = 60) {
         this.material((f) => {
             f[this.materialField('uRelief')] = Math.min(1, Math.max(0, amount));
-            f[this.materialField('uReliefCycles')] = Math.max(0.01, cyclesPerMetre);
+            f[this.materialField('uRelief') + 1] = Math.max(0.01, cyclesPerMetre);
         });
     }
     /**
@@ -2647,7 +2787,7 @@ export class WebGPURenderer {
     /** Scale the emissive of the following draws. See `Renderer.setEmissiveGain` for why. */
     setEmissiveGain(gain) {
         this.material((f) => {
-            f[this.materialField('uEmissiveGain')] = gain;
+            f[this.materialField('uEmission')] = gain;
         });
     }
     /* -- Overlays ------------------------------------------------------------------------ */
@@ -3220,7 +3360,19 @@ export class WebGPURenderer {
      */
     createParticles(capacity, options) {
         const layout = this.particleLayoutFor(options.material);
-        return createGpuParticles(this.surface.device, capacity, options.material, options.blend, options.stretchSec ?? 0, options.facing ?? 'camera', options.erosion ?? 0, options.coreGain ?? 1, options.fog ?? false, layout.layout, layout.fields, layout.fragSize);
+        const texture = (options.texture ?? null);
+        if (options.material === 'sprite' && texture === null) {
+            throw new Error("createParticles: a 'sprite' draws an image, and was given no `texture`");
+        }
+        return createGpuParticles(this.surface.device, capacity, options.material, options.blend, options.stretchSec ?? 0, options.facing ?? 'camera', options.erosion ?? 0, options.coreGain ?? 1, options.fog ?? false, layout.layout, layout.fields, layout.fragSize, {
+            texture: texture?.view ?? null,
+            cells: options.cells ?? [1, 1],
+            blendCells: options.blendCells === true,
+            softDepth: Math.max(0, options.softDepth ?? 0),
+            cameraFade: Math.max(0, options.cameraFade ?? 0),
+            cameraOffset: options.cameraOffset ?? 0,
+            sort: options.sort === true,
+        });
     }
     disposeParticles(batch) {
         batch.dispose();
@@ -3260,18 +3412,45 @@ export class WebGPURenderer {
             return;
         }
         batch.drawnInEncoder = this.encoderEpoch;
-        const live = packInstances(batch, data);
+        /* Farthest first where the batch asked; see `particleSort.ts`. */
+        const drawn = batch.order === null ? data : sortBackToFront(data, camera.position, batch.order);
+        const live = packInstances(batch, drawn);
         if (live === 0)
             return;
         const device = this.surface.device;
-        device.queue.writeBuffer(batch.instances, 0, batch.staging, 0, live * 14);
+        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);
         v.set(this.correctedViewProj, atV('uViewProj'));
         v.set(camera.position, atV('uCameraPos'));
         v[atV('uStretchSec')] = batch.stretchSec;
-        v[atV('uCameraFacing')] = batch.facing === 'camera' ? 1 : 0;
+        v[atV('uCameraFacing')] = facingCode(batch.facing);
+        v[atV('uCameraOffset')] = batch.cameraOffset;
         const f = batch.fragFloats;
         const i = batch.fragInts;
         const fields = batch.fields;
@@ -3322,16 +3501,20 @@ export class WebGPURenderer {
            `uCameraPos` rather than guarded like the material-specific fields above. */
         i[atF('uOutputTransform')] = this.gradeCode();
         f[atF('uOutputExposure')] = this.gradeExposure();
+        const spriteGroup = batch.material === 'sprite' ? this.spriteFades(batch, camera, f) : null;
         device.queue.writeBuffer(batch.vertUniforms, 0, batch.vertStaging);
         device.queue.writeBuffer(batch.fragUniforms, 0, batch.fragStaging);
+        const group = spriteGroup ?? batch.bindGroup;
+        if (group === null)
+            return;
         const layout = this.particleLayoutFor(batch.material).layout;
         const particlePipe = particlePipeline(this.blendedPipelines(), device, layout, batch.material, batch.blend);
         const particleCommand = this.recordBlended(0);
         if (particleCommand !== null) {
             particleCommand.pipeline = particlePipe;
-            particleCommand.bindGroup = batch.bindGroup;
+            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;
@@ -3343,13 +3526,100 @@ export class WebGPURenderer {
             if (pass === null)
                 return;
             pass.setPipeline(particlePipe);
-            pass.setBindGroup(0, batch.bindGroup);
+            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);
         }
     }
+    /**
+     * A sprite's flipbook and fades into its fragment block `f`, and the bind group holding the
+     * frame's depth copy its soft edge reads — built again only when that copy is replaced.
+     *
+     * **The copy is the volume's**: `takeVolumeDepth` ends the frame's pass, resolves the opaque
+     * depth and reopens, once a frame whoever asks. Only in the frame's own picture: in a mirror or
+     * a probe's face it would be another view's depth, and the edge stays hard there, as on WebGL2.
+     * Without a composite there is no copy, and the renderer says so once.
+     */
+    spriteFades(batch, camera, f) {
+        const fields = batch.fields;
+        const atF = (name) => (fields[name]?.offset ?? -4) / 4;
+        let depth = null;
+        if (batch.softDepth > 0 &&
+            !this.reflectionPassActive &&
+            !this.probePassActive &&
+            !this.capturePassActive) {
+            if (this.openPass() !== null && this.takeVolumeDepth())
+                depth = this.resolvedDepthView;
+            if (depth === null && !this.warnedSpriteDepth) {
+                this.warnedSpriteDepth = true;
+                console.warn("WebGPU: a 'sprite' asked for a soft edge, which reads a copy of the frame's depth, and " +
+                    'this profile keeps none — screenEffects is off. The edge is hard.');
+            }
+        }
+        f[atF('uCells')] = batch.cells[0];
+        f[atF('uCells') + 1] = batch.cells[1];
+        f[atF('uCells') + 2] = batch.blendCells ? 1 : 0;
+        f[atF('uFade')] = batch.softDepth;
+        f[atF('uFade') + 1] = batch.cameraFade;
+        f[atF('uFade') + 2] = depth === null ? 0 : 1;
+        mat4.invert(this.spriteInverseProjection, camera.projection);
+        const inverse = this.spriteInverseProjection;
+        f[atF('uDepthToViewZ')] = inverse[10] ?? 0;
+        f[atF('uDepthToViewZ') + 1] = inverse[14] ?? 0;
+        f[atF('uDepthToViewZ') + 2] = inverse[11] ?? 0;
+        f[atF('uDepthToViewZ') + 3] = inverse[15] ?? 1;
+        /*
+         * The pixels a fragment's own coordinate counts in: the output's where blended draws land
+         * after reconstruction, the scene's otherwise. The copy is sampled by the fraction, so its own
+         * size does not matter. Read off the canvas rather than `sceneSize`, which builds an object.
+         */
+        const { canvas } = this.surface;
+        const ratio = this.drawsLate() || !this.reconstructionWanted ? 1 : this.quality.reconstruction;
+        /* `reconRenderSize`'s own rounding — up, from the floored output — without its object. */
+        const width = Math.max(1, Math.floor(canvas.width));
+        const height = Math.max(1, Math.floor(canvas.height));
+        f[atF('uViewport')] = ratio > 1 ? Math.max(1, Math.ceil(width / ratio)) : width;
+        f[atF('uViewport') + 1] = ratio > 1 ? Math.max(1, Math.ceil(height / ratio)) : height;
+        /* Something single-sampled and unfilterable stands in where there is no copy to read. */
+        const bound = depth ?? this.spriteDepthStandIn();
+        if (batch.spriteGroup === null || batch.spriteGroupDepth !== bound) {
+            batch.spriteGroup = createSpriteBindGroup(this.surface.device, this.particleLayoutFor('sprite').layout, batch, this.particleLayoutFor('sprite').fragSize, bound, this.spriteSampler(true), this.spriteSampler(false));
+            batch.spriteGroupDepth = bound;
+        }
+        return batch.spriteGroup;
+    }
+    /** A sprite's image sampler, repeating nothing and filtered, or its depth's, nearest. */
+    spriteSampler(linear) {
+        const device = this.surface.device;
+        if (linear) {
+            this.spriteLinearSampler ??= device.createSampler({
+                label: 'particle.sprite',
+                magFilter: 'linear',
+                minFilter: 'linear',
+                mipmapFilter: 'linear',
+                addressModeU: 'clamp-to-edge',
+                addressModeV: 'clamp-to-edge',
+            });
+            return this.spriteLinearSampler;
+        }
+        this.spriteNearestSampler ??= device.createSampler({ label: 'particle.depth' });
+        return this.spriteNearestSampler;
+    }
+    /** A one-texel `r32float` for a sprite's depth binding where no copy was taken. */
+    spriteDepthStandIn() {
+        if (this.spriteDepthEmpty === null) {
+            const texture = this.surface.device.createTexture({
+                label: 'particle.depthStandIn',
+                size: [1, 1],
+                format: 'r32float',
+                usage: 0x04 | 0x02,
+            });
+            this.spriteDepthEmpty = texture.createView();
+        }
+        return this.spriteDepthEmpty;
+    }
     /**
      * The bind group layout for one particle material, built on first use.
      *
@@ -3367,7 +3637,7 @@ export class WebGPURenderer {
         const device = this.surface.device;
         const frag = particleFragBindings(material);
         const built = {
-            layout: createParticleBindGroupLayout(device, frag.size),
+            layout: createParticleBindGroupLayout(device, frag.size, material === 'sprite'),
             fields: frag.fields,
             fragSize: frag.size,
         };
@@ -3572,6 +3842,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;
@@ -4363,8 +4634,12 @@ export class WebGPURenderer {
         iesAxes: new Float32Array(0),
         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),
@@ -5034,6 +5309,8 @@ export class WebGPURenderer {
         this.materialBudget.limit(quality.materialChangesPerFrame);
         this.drawBudget.limit(quality.drawsPerFrame);
         this.shadowDrawBudget.limit(quality.drawsPerFrame);
+        /* A palette per draw at most, which is the most a frame can bind. See `SkinPaletteRing`. */
+        this.skinPalettes = new SkinPaletteRing(quality.drawsPerFrame);
         this.maxDrawingBufferPixels = quality.maxDrawingBufferPixels;
         this.exposure = quality.outputExposure;
         this.flushSchedule =
@@ -6324,7 +6601,9 @@ export class WebGPURenderer {
         keyed.key = fullKey;
         return keyed;
     }
-    createMesh(data, options = {}) {
+    createMesh(given, options = {}) {
+        /* The streams it is drawn with, before anything records which it has. See `withLightmapUvs`. */
+        const data = withLightmapUvs(given);
         const fullKey = this.warmFlatPipelines(data, options.dynamic === true);
         return this.keyed(createGpuMesh(this.surface.device, data, options.dynamic === true), fullKey);
     }
@@ -6337,7 +6616,8 @@ export class WebGPURenderer {
      * straddle one, and going on writing to a dead device would raise validation errors a consumer
      * can do nothing about. Done with `complete` still false is the signal that it was abandoned.
      */
-    createMeshIncremental(data, options = {}) {
+    createMeshIncremental(given, options = {}) {
+        const data = withLightmapUvs(given);
         const fullKey = this.warmFlatPipelines(data, options.dynamic === true);
         const { mesh, upload } = createGpuMeshIncremental(this.surface.device, data, options.dynamic === true);
         const surface = this.surface;
@@ -6398,6 +6678,15 @@ export class WebGPURenderer {
     bindMeshPass(camera, env) {
         if (this.surface.lost)
             return;
+        /* Rectangles past the fixed arm's are the froxel table's, and without it nobody shades them. */
+        if (!this.warnedAreaOverflow &&
+            !this.quality.clusteredLights &&
+            (env.areaLights?.count ?? 0) > this.shadedAreaLights) {
+            this.warnedAreaOverflow = true;
+            console.warn(`WebGPU: ${env.areaLights?.count ?? 0} rectangular lights and ${this.shadedAreaLights} ` +
+                'shaded without clusteredLights: the rest are not drawn. Turn clusteredLights on, and the ' +
+                'froxel table shades every one past the fixed ones, unshadowed.');
+        }
         /* Corrected once a frame, not once a draw: every draw copies the same matrix. */
         mat4.multiply(this.correctedViewProj, CLIP_CORRECTION, camera.viewProjection);
         /*
@@ -6406,7 +6695,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);
@@ -6440,7 +6729,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();
@@ -6561,16 +6851,18 @@ export class WebGPURenderer {
          * switched grain off. That is the same failure the missing properties had — silence that
          * reads as a setting rather than as an omission.
          *
-         * `uReliefCycles` is 60 because `renderer.ts` says 60. Nothing in either file explains the
+         * `uRelief.y` is 60 because `renderer.ts` says 60. Nothing in either file explains the
          * number, so this is a copy and is marked as one; the two must move together.
          */
         f[at('uGrain')] = 1;
-        f[at('uReflectivity')] = 0;
+        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('uEnvironmentGain')] = 1;
+        f[at('uEnvironmentDials') + 2] = 1;
+        /* The frame's own ambient until a draw asks for its own. See `setAmbientSH`. */
+        f.fill(0, at('uAmbientSH'), at('uAmbientSH') + AMBIENT_SH_FLOATS);
         /*
          * **Only where the variant declares it.** The irradiance block lives inside the probe's own
          * `#if`, because it exists to be filled from a cube only that permutation has, so `at` throws
@@ -6624,7 +6916,7 @@ export class WebGPURenderer {
                 f[base + 2] = sets[2] ?? 0;
             }
             /* Which chain is bound, because the level and the weight both depend on it. */
-            f[at('uEnvironmentPrefiltered')] = this.quality.environmentPrefilter ? 1 : 0;
+            f[at('uEnvironmentDials')] = this.quality.environmentPrefilter ? 1 : 0;
         }
         /* DriftLight, or zeros that switch it off: see `driftLight/uniforms.ts`. */
         this.uploadLightField();
@@ -6650,10 +6942,10 @@ export class WebGPURenderer {
         f[emissiveScale + 1] = 1;
         f[emissiveScale + 2] = 1;
         f[at('uRelief')] = 0;
-        f[at('uReliefCycles')] = 60;
+        f[at('uRelief') + 1] = 60;
         f[at('uTextureRelief')] = 0;
-        f[at('uEmissiveGain')] = env.emissiveGain;
-        f[at('uNightFactor')] = env.nightFactor;
+        f[at('uEmission')] = env.emissiveGain;
+        f[at('uEmission') + 1] = env.nightFactor;
         /*
          * **Only where the variant declares it**, because `at` throws on a name the permutation does
          * not hold and this term is compiled in by `nightEmissive` alone.
@@ -6671,7 +6963,8 @@ export class WebGPURenderer {
             f[at('uNightEmissive')] = env.nightEmissive ?? 0;
         f.set(env.highlightMin, at('uHighlightMin'));
         f.set(env.highlightMax, at('uHighlightMax'));
-        f[at('uHighlightGain')] = env.highlightGain;
+        /* The gain in the far corner's w. See `uHighlightMax`. */
+        f[at('uHighlightMax') + 3] = env.highlightGain;
         /*
          * No grading here. `renderer.ts` grades in this pass only when there is no composite to do
          * it in; this backend has no composite yet, and adding one is its own row. Exposure is 1
@@ -6765,13 +7058,16 @@ 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);
-        scatterInto(f, this.fragment.fields['uLightIesAxis'], lights.iesAxes, 3);
+        /* The azimuth and, in w, the light's channels. See `axesAndChannels`. */
+        scatterInto(f, this.fragment.fields['uLightIesAxis'], lights.axesAndChannels, 4);
         scatterInto(f, this.fragment.fields['uLightCookie'], lights.cookies, 1);
-        f[at('uIesAtlasRows')] = this.iesRows;
-        f[at('uIesPlaneCount')] = this.iesPlanes;
-        f[at('uCookieTiles')] = this.cookieTiles;
+        /* The fixture atlas's shape, three numbers in one row: profile rows, planes, cookie tiles. */
+        f[at('uFixtureShape')] = this.iesRows;
+        f[at('uFixtureShape') + 1] = this.iesPlanes;
+        f[at('uFixtureShape') + 2] = this.cookieTiles;
         /*
          * The rectangular emitters. Bound on both backends in the same change, per the 2026-08-13
          * rule's fourth clause — and the count is what makes the whole thing free to a scene with
@@ -6784,7 +7080,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);
         }
         /*
@@ -6916,8 +7214,20 @@ export class WebGPURenderer {
          * same terms here, which is why a pass cannot inherit a material from the one before it.
          */
         this.materials.dirty();
-        /* A pass starts with no material, exactly as `renderer.ts` resets these terms. */
+        /*
+         * 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
+         * held, so a pass that kept the last pass's normal, ORM, emissive and model maps here while
+         * binding the blank group made the next `setMaterial` naming those same maps a no-op: the draw
+         * kept the blank group and read the stand-ins while its flags said the maps were bound. A scene
+         * whose first material in a pass was the last of the pass before — any scene of one material —
+         * lost its maps from the second frame on, on this backend alone. Until 4.8.6.
+         */
         this.albedo = null;
+        this.normalMap = null;
+        this.ormMap = null;
+        this.emissiveMap = null;
+        this.modelMap = null;
         this.bindGroup = this.blankAlbedoBindGroup;
         this.uvScale[0] = 1;
         this.uvScale[1] = 1;
@@ -7548,6 +7858,7 @@ export class WebGPURenderer {
     submitInstanced(batch, data, opacity, blend, options) {
         if (!this.canDraw() || this.viewProj === null)
             return;
+        warnRegionsWithoutPage(this.materialModel, data.lightmapRegions);
         const mesh = batch.mesh;
         /* Nor a batch of a mesh with nothing in it: see `GpuMesh.indexCount`. */
         if (!mesh.complete || mesh.indexCount === 0)
@@ -9453,7 +9764,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
@@ -9515,7 +9826,7 @@ export class WebGPURenderer {
     }
     /** 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.
@@ -9916,6 +10227,8 @@ 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;
@@ -10362,9 +10675,9 @@ export class WebGPURenderer {
          *
          * `load` rather than `clear` wherever there is a blend, and that is the other half of what
          * makes the sum of the octaves a sum: a cleared attachment discards the level the downsample
-         * wrote and adds the octave to nothing. See `ADDITIVE_BLEND`.
+         * wrote and adds the octave to nothing. See `TINTED_ADD_BLEND`.
          */
-        const stage = (label, key, fragment, target, source, slot, blend) => {
+        const stage = (label, key, fragment, target, source, slot, blend, constant) => {
             const group = this.bloomGroups[source];
             if (group === undefined)
                 return;
@@ -10382,6 +10695,8 @@ export class WebGPURenderer {
             });
             pass.setPipeline(postPipeline(this.pipelines, this.surface.device, this.bloomLayout, key, fragment, format, blend));
             pass.setBindGroup(0, group, [slot * BLOOM_SLOT]);
+            if (constant !== undefined)
+                pass.setBlendConstant(constant);
             pass.draw(3);
             pass.end();
         };
@@ -10395,13 +10710,22 @@ export class WebGPURenderer {
                 break;
             stage('post.bloomDown', 'post.bloomDownsample', BLOOM_DOWNSAMPLE_FRAG_WGSL, target, index, index);
         }
-        /* And back up. Every draw reads the same tent radius, so they share one slot rather than
-           holding five copies of one constant. */
+        /*
+         * And back up. Every draw reads the same tent radius, so they share one slot rather than
+         * holding five copies of one constant — but for the first, which multiplies the deepest level
+         * by its tint. Each level being added onto takes its own tint from the blend constant.
+         */
+        const response = this.bloomResponse;
         for (let index = levels.length - 1; index > 0; index--) {
             const target = levels[index - 1];
-            if (target === undefined)
+            const constant = this.bloomConstants[index - 1];
+            if (target === undefined || constant === undefined)
                 break;
-            stage('post.bloomUp', 'post.bloomUpsample', BLOOM_UPSAMPLE_FRAG_WGSL, target, index + 1, BLOOM_UPSAMPLE_SLOT, ADDITIVE_BLEND);
+            const into = 1 + (index - 1) * 3;
+            constant[0] = response[into] ?? 1;
+            constant[1] = response[into + 1] ?? 1;
+            constant[2] = response[into + 2] ?? 1;
+            stage('post.bloomUp', 'post.bloomUpsample', BLOOM_UPSAMPLE_FRAG_WGSL, target, index + 1, index === levels.length - 1 ? BLOOM_UPSAMPLE_DEEPEST_SLOT : BLOOM_UPSAMPLE_SLOT, TINTED_ADD_BLEND, constant);
         }
     }
     /**
@@ -10465,7 +10789,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;
@@ -10548,14 +10872,16 @@ export class WebGPURenderer {
             !this.skinScattered &&
             !this.reflectionPassActive &&
             !this.probePassActive &&
+            !this.capturePassActive &&
             !this.framePresented &&
             !this.overlayActive &&
             this.oitMode === 'none');
     }
     /**
-     * A skin draw's diffuse half, kept for the spread: the frame's draw again, with the same slots,
-     * buffers and bind group, through the pipeline that writes the diffuse alone into the blur's
-     * target and tests for the depth its frame half wrote.
+     * 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
+     * light alone and its colour alone into the blur's targets and test for the depth its frame half
+     * wrote.
      */
     keepSkinDiffuse(mesh, frameKey, base, skinned, morphed, deltas, layer, eight, clothed, slot, material) {
         const skin = this.skinScatter;
@@ -10563,24 +10889,28 @@ export class WebGPURenderer {
         const present = this.meshPresent.get(base);
         if (skin === null || pipelines === null || present === undefined)
             return;
-        const key = `${frameKey}|sd`;
-        const pipeline = pipelines.peek(key) ??
-            flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, key, present, false, skinned, morphed, true, layer, false, 'none', this.materialDoubleSided, false, eight, clothed, 'skin', 'diffuse');
-        const command = skin.take();
-        command.pipeline = pipeline;
-        command.bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
-        command.offsetA = slot;
-        command.offsetB = material;
-        command.offsetCount = 2;
-        for (let index = 0; index < mesh.vertexBuffers.length; index++) {
-            command.vertexBuffers[index] = mesh.vertexBuffers[index];
-        }
-        command.vertexCount = mesh.vertexBuffers.length;
-        command.indexBuffer = mesh.indexBuffer;
-        command.indexed = true;
-        command.count = mesh.indexCount;
-        command.instances = 1;
-        command.indirect = null;
+        const bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
+        /* The light alone, which the blur spreads, then the colour alone, which it is multiplied by. */
+        for (const half of SKIN_KEPT_HALVES) {
+            const key = `${frameKey}|${half === 'diffuse' ? 'sd' : 'sa'}`;
+            const pipeline = pipelines.peek(key) ??
+                flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, key, present, false, skinned, morphed, true, layer, false, 'none', this.materialDoubleSided, false, eight, clothed, 'skin', half);
+            const command = half === 'diffuse' ? skin.take() : skin.takeAlbedo();
+            command.pipeline = pipeline;
+            command.bindGroup = bindGroup;
+            command.offsetA = slot;
+            command.offsetB = material;
+            command.offsetCount = 2;
+            for (let index = 0; index < mesh.vertexBuffers.length; index++) {
+                command.vertexBuffers[index] = mesh.vertexBuffers[index];
+            }
+            command.vertexCount = mesh.vertexBuffers.length;
+            command.indexBuffer = mesh.indexBuffer;
+            command.indexed = true;
+            command.count = mesh.indexCount;
+            command.instances = 1;
+            command.indirect = null;
+        }
     }
     /**
      * Spread the frame's skin and add it back: once, at the first blended draw or before the frame's
@@ -10600,6 +10930,8 @@ export class WebGPURenderer {
             return;
         if (this.reflectionPassActive || this.probePassActive || this.oitReplaying)
             return;
+        if (this.capturePassActive)
+            return;
         const encoder = this.encoder;
         const depth = this.depthView;
         const resolved = this.resolvedDepthView;
@@ -10657,7 +10989,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;
@@ -11214,8 +11546,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. */
@@ -11963,10 +12296,11 @@ export class WebGPURenderer {
         f[frustumAt + 2] = tanHalfFovY;
         f[frustumAt + 3] = aspect;
         f.set(camera.view, at('uView'));
-        const set = fillClusterLightSet(env, this.clusterLights);
+        /* 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`. */
         const shadowSlots = this.quality.pointShadows ? MAX_POINT_LIGHTS : 0;
-        i[at('uClustered')] = clusteredMode(set, set.count, shadowSlots);
+        i[at('uClustered')] = clusteredMode(set, clusteredLightTotal(set), shadowSlots);
         binner.setFrame({
             lights: set,
             view: camera.view,
@@ -12281,6 +12615,16 @@ export class WebGPURenderer {
      * -----------------------------------------------------------------------------------------
      */
     bloomScale = 1;
+    /** The draw's own ambient, as `packAmbientSH` writes it; zeros are the frame's. */
+    ambientSH = new Float32Array(AMBIENT_SH_FLOATS);
+    /** The ramp and each level's tint, as `resolveBloomResponse` writes them; the subtraction and white. */
+    bloomResponse = defaultBloomResponse();
+    /** The response before the last `setBloom`, to tell whether the blocks need writing again. */
+    bloomResponseNext = defaultBloomResponse();
+    /** Each level's tint as a blend constant, rewritten in place: `setBlendConstant` takes a colour. */
+    bloomConstants = Array.from({ length: BLOOM_LEVELS }, () => [
+        1, 1, 1, 1,
+    ]);
     /** In scene units, once `setBloom` has moved it; null reads the profile's. */
     bloomThresholdSet = null;
     rushStrength = 0;
@@ -12411,16 +12755,23 @@ export class WebGPURenderer {
         this.gradeView = this.gradeTexture.createView({ dimension: '3d' });
         this.gradeSize = lut.size;
     }
-    setBloom(scale, threshold) {
+    setBloom(scale, threshold, response) {
         this.bloomScale = Math.min(Math.max(scale, 0), 1);
-        if (threshold === undefined)
-            return;
-        const next = bloomThresholdOf(threshold);
-        if (next === this.bloomThresholdSet)
-            return;
-        this.bloomThresholdSet = next;
-        /* The blocks are written once per size, so a moved threshold rewrites them now. */
-        if (this.bloomLevels.length > 0)
+        let moved = false;
+        if (threshold !== undefined) {
+            const next = bloomThresholdOf(threshold);
+            moved = next !== this.bloomThresholdSet;
+            this.bloomThresholdSet = next;
+        }
+        if (response !== undefined) {
+            this.bloomResponseNext.set(this.bloomResponse);
+            resolveBloomResponse(response, this.bloomResponse);
+            for (let i = 0; i < this.bloomResponse.length && !moved; i++) {
+                moved = this.bloomResponse[i] !== this.bloomResponseNext[i];
+            }
+        }
+        /* The blocks are written once per size, so a moved threshold or response rewrites them now. */
+        if (moved && this.bloomLevels.length > 0)
             this.writeBloomBlocks();
     }
     /**
@@ -13152,6 +13503,43 @@ export class WebGPURenderer {
         if (!this.setProbeGrid({ origin: WORLD_ORIGIN, spacing: UNIT_STEP, counts: SINGLE_PROBE })) {
             return false;
         }
+        this.uploadProbeFaces(probe, image);
+        const encoder = device.createCommandEncoder({ label: 'probe.environmentImage' });
+        this.buildProbeChain(encoder, probe, 0);
+        device.queue.submit([encoder.finish()]);
+        this.markProbeFilled(0);
+        this.probeAmbient = options?.irradiance ?? true;
+        this.rebuildFlatBindGroup();
+        return true;
+    }
+    /** One layer of the declared grid from an image. See `Renderer.setProbeLayerImage`. */
+    setProbeLayerImage(layer, image, options) {
+        if (this.surface.lost)
+            return false;
+        const probe = this.probe;
+        const grid = this.probes;
+        if (probe === null || grid === null || this.probeArray === null) {
+            console.warn('WebGpuRenderer: setProbeLayerImage needs a reflection probe (`reflectionProbeSize`) and ' +
+                'a grid declared with setProbeGrid; the image was ignored.');
+            return false;
+        }
+        if (!Number.isInteger(layer) || layer < 0 || layer >= grid.layers) {
+            console.warn(`WebGpuRenderer: setProbeLayerImage was given layer ${layer}, and the grid has ${grid.layers}.`);
+            return false;
+        }
+        this.uploadProbeFaces(probe, image);
+        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.markProbeFilled(layer);
+        this.probeAmbient = options?.irradiance ?? true;
+        this.rebuildFlatBindGroup();
+        return true;
+    }
+    /** An equirectangular image onto the capture cube's six faces, in the cube's own format. */
+    uploadProbeFaces(probe, image) {
+        const { device } = this.surface;
         const faces = equirectToCubeFaces(image, this.probeSize);
         const format = this.pipelines.format;
         for (let face = 0; face < faces.length; face++) {
@@ -13178,13 +13566,6 @@ export class WebGPURenderer {
             const converted = environmentTexels(pixels, format);
             device.queue.writeTexture({ texture: probe, mipLevel: 0, origin: { x: 0, y: 0, z: face } }, converted.data, { bytesPerRow: this.probeSize * converted.bytesPerTexel, rowsPerImage: this.probeSize }, { width: this.probeSize, height: this.probeSize, depthOrArrayLayers: 1 });
         }
-        const encoder = device.createCommandEncoder({ label: 'probe.environmentImage' });
-        this.buildProbeChain(encoder, probe, 0);
-        device.queue.submit([encoder.finish()]);
-        this.markProbeFilled(0);
-        this.probeAmbient = options?.irradiance ?? true;
-        this.rebuildFlatBindGroup();
-        return true;
     }
     /**
      * Upload the photometric profiles a consumer loaded, and rebuild the bind group that holds them.
@@ -14029,6 +14410,15 @@ export class WebGPURenderer {
         }
         const up = (name) => this.postField(BLOOM_UPSAMPLE_FIELDS, name);
         f[slot(BLOOM_UPSAMPLE_SLOT) + up('uRadius')] = BLOOM_FILTER_RADIUS_UV;
+        f[slot(BLOOM_UPSAMPLE_DEEPEST_SLOT) + up('uRadius')] = BLOOM_FILTER_RADIUS_UV;
+        /* White on every draw up but the first, which reads the deepest level and carries its tint. */
+        const response = this.bloomResponse;
+        const deepest = 1 + (levels.length - 1) * 3;
+        for (let c = 0; c < 3; c++) {
+            f[slot(BLOOM_UPSAMPLE_SLOT) + up('uScale') + c] = 1;
+            f[slot(BLOOM_UPSAMPLE_DEEPEST_SLOT) + up('uScale') + c] = response[deepest + c] ?? 1;
+        }
+        f[slot(0) + prefilter('uRamp')] = response[0] ?? 0;
         this.surface.device.queue.writeBuffer(this.bloomUniforms, 0, this.bloomStaging);
     }
     ensureReflection(width, height) {