@driftengine/core 4.9.0 → 4.10.0

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

@@ -61,7 +61,7 @@ import { GpuClothBinding, GpuClothParticles, clothStandIn } from './clothTexture
 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 { REFLECTION_SURFACE_FORMAT, ReflectionSurfacePass } from './reflectionSurfacePass.js';
 import { validateClothBinding } from '../../clothBindingData.js';
 import { createSdfTextBindGroup, createSdfTextBindGroupLayout, GpuSdfText, sdfTextPipeline, SDF_TEXT_FRAG_FIELDS, SDF_TEXT_FRAG_SIZE, SDF_TEXT_VERT_FIELDS, SDF_TEXT_VERT_SIZE, } from './sdfTextPass.js';
 import { createFilmBindGroup, createFilmBindGroupLayout, filmPipeline, FILM_FRAG_FIELDS, FILM_FRAG_SIZE, FILM_VERT_FIELDS, FILM_VERT_SIZE, } from './filmPass.js';
@@ -97,10 +97,15 @@ import { VIEW_MODEL_DEPTH_SHARE, viewModelDepthRange } from '../../viewModel.js'
 import { GlassCasterList } from '../../glassCasters.js';
 import { GpuGlassTint } from './glassTintPass.js';
 import { SUN_DYNAMIC_LAYER, SUN_GLASS_MOVING_LAYER, SUN_GLASS_STATIC_LAYER, SUN_PEELED_LAYER, SUN_STATIC_LAYER, } from '../../shadowMap.js';
-import { VERTEX_LAYOUT, createGpuMesh, createGpuMeshIncremental } from './buffers.js';
+import { VERTEX_LAYOUT, createGpuMesh, createGpuMeshIncremental, } from './buffers.js';
 import { SkinPaletteRing } from './skinPaletteRing.js';
-import { DEPTH_FORMAT, FLAT_VERT_FIELDS, FLAT_VERT_SIZE, createFlatBindGroup, createFlatBindGroupLayout, flatFragmentBindings, flatVariant, flatVertexBindings, flatPipeline, flatPipelineAsync, 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 { DEPTH_FORMAT, FLAT_ANIMATED_VERT_FIELDS, FLAT_VERT_FIELDS, FLAT_VERT_SIZE, FLAT_VIEW_FIELDS, FLAT_VIEW_SIZE, createFlatBindGroup, createFlatBindGroupLayout, flatFragmentScratch, flatVariant, flatVertexBindings, flatPipeline, flatPipelineAsync, probeStageCeilings, } from './flatPass.js';
+import { GpuBoneAnimation } from './boneAnimations.js';
+import { packBoneAnimation } from '../../boneAnimation.js';
+import { MaterialStore, hashWords } from './materialStore.js';
+import { GpuStaticDraws, encodeBundle, takeRecorded } from './staticBundles.js';
+import { captureStaticDraws, replayStaticDraws } from '../../staticDraws.js';
+import { DEPTH_FRAG_BINDING, DEPTH_FRAG_SIZE, DEPTH_FRAG_WGSL, DEPTH_PREVIOUS_BINDING, DEPTH_CUTOUT_VERT_FIELDS, DEPTH_CUTOUT_VERT_SIZE, DEPTH_INSTANCED_ANIMATED_CUTOUT_VERT_FIELDS, DEPTH_INSTANCED_ANIMATED_VERT_FIELDS, DEPTH_INSTANCED_CUTOUT_VERT_FIELDS, DEPTH_VERT_FIELDS, DEPTH_VERT_SIZE, SHADOW_FORMAT, createDepthBindGroup, createDepthBindGroupLayout, depthPipeline, } from './depthPass.js';
 import { PipelineCache } from './pipelineCache.js';
 import { SKIN_TARGET_FORMAT, SkinScatterPass } from './skinScatterPass.js';
 import { SKY_FIELDS, SKY_UNIFORM_SIZE, createSkyBindGroup, createSkyBindGroupLayout, skyPipeline, } from './skyPass.js';
@@ -359,6 +364,13 @@ const MAX_WATER_BODIES_PER_FRAME = 16;
  * numbers, because that is precisely the defect the ring exists to end.
  */
 const MAX_BATCHES_PER_FRAME = 8;
+/**
+ * Mesh passes a frame may open before the ring grows: the frame's own, a mirror's, a capture's, and
+ * a probe face's, which gives its slot back once submitted. A frame past it loses the draws of the
+ * passes that found no slot, counted on the `materials` line, and the ring is grown for the next.
+ * Each slot is the pass's block, 3,328 to 6,656 bytes by variant, so the ring is 213 to 426 KB.
+ */
+const PASSES_PER_FRAME = 64;
 /** Buffer usage flags, from the specification. See `buffers.ts` for why they are not read off the global. */
 const USAGE_UNIFORM_DST = 0x0040 | 0x0008;
 /**
@@ -859,6 +871,8 @@ export class WebGPURenderer {
     skinnedBindGroupLayout;
     morphedBindGroupLayout;
     bothBindGroupLayout;
+    /** The instanced layout of a batch playing a bone animation. See `animatedGroup`. */
+    animatedBindGroupLayout;
     /** The morph weights the following draws use, or null for none. */
     morphWeights = null;
     /**
@@ -871,14 +885,15 @@ export class WebGPURenderer {
      * group per character per frame — an allocation in the frame loop, which `AGENTS.md` forbids.
      * Keyed by slot instead, the groups are built once and reused for the life of the renderer.
      */
+    /*
+     * **And by material within a slot**, keyed by the unskinned group each was built beside. One
+     * group a slot was rebuilt whenever the material beside it changed, so a character drawn in
+     * thirty-odd sections, each its own material, built one a section a frame — about ninety a frame
+     * for two characters, reported by a consumer. A slot's map holds one entry a material its rigs
+     * are drawn in, and is emptied wherever the unskinned groups are, whose identities it is keyed
+     * by.
+     */
     skinnedGroups = [];
-    /** The unskinned group each was built beside, for identity-based invalidation. */
-    skinnedGroupsBeside = [];
-    skinnedGroupsPalette = [];
-    skinnedGroupsDeltas = [];
-    /** The cloth views each skinned twin was built with, compared by identity like the palette. */
-    skinnedGroupsCloth = [];
-    skinnedGroupsClothBinding = [];
     /** The cloth the next skinned draws are placed by, or null. See `setCloth`. */
     cloth = null;
     clothStandCache = null;
@@ -946,22 +961,51 @@ export class WebGPURenderer {
     /** Every distinct cache above, so a mesh's pipelines are built for each. One entry when aliased. */
     pipelineTargets;
     bindGroupLayout;
-    /** One slot per draw, uploaded once a frame. See `UniformRing`. */
+    /** One slot per draw, uploaded once a frame. See `UniformRing`. Swapped while a static list records. */
     perDraw;
-    /** The lights, fog and camera, settled once per frame by `bindMeshPass`. */
-    perFrame;
     /**
-     * The material block as the CPU holds it, patched by the setters and copied into a slot.
+     * The lights, fog and camera, a slot per mesh pass a frame opens: `bindMeshPass` writes them, and
+     * the first draw after it takes a slot. A ring rather than one buffer because a frame opens more
+     * than one pass — a mirror's, a capture's, a probe face's — and a queue write does not interleave
+     * with the draws recorded between them. See `UniformRing`.
+     */
+    passRing;
+    /** Each material's block, kept across frames for as long as it does not change. */
+    materialStore;
+    /**
+     * Both blocks as the CPU holds them, the pass's then the material's, patched by name and copied
+     * into a slot by the next draw after something changed them. See `FlatFragmentScratch`.
      *
      * Authoritative between draws: a setter changes one field here and marks the block dirty, and
-     * the next `drawMesh` takes a slot and copies the whole thing in. That keeps a setter free of
-     * any knowledge of slots, which is what lets it be called anywhere a scene wants.
+     * the next `drawMesh` places it. That keeps a setter free of any knowledge of slots, which is
+     * what lets it be called anywhere a scene wants.
      */
     perFrameStaging;
     perFrameFloats;
     perFrameInts;
+    /** The two halves of the scratch, as the words a slot is written from. */
+    passInts;
+    materialInts;
     /** The slot the open material occupies, and whether the next draw must take a new one. */
     materials = new MaterialChanges();
+    /** The same for the pass's block: reopened by `bindMeshPass` and by nothing a material sets. */
+    passBlock = new MaterialChanges();
+    /**
+     * The vertex stage's view block — the camera, the light's matrix, the wind — a slot a pass, and a
+     * second, unjittered, for a blended draw landing after the upscale. Reopened with the pass, and by
+     * `setWind` and `beginShadowPass`, which change what it holds.
+     */
+    viewRing;
+    viewBlock = new MaterialChanges();
+    lateViewBlock = new MaterialChanges();
+    /** The view slot the draw being submitted bound, read by the halves it keeps for later passes. */
+    drawViewOffset = 0;
+    /** Pass slots asked for and refused this frame, and materials refused: what grows the two. */
+    passesAsked = 0;
+    passesRefused = 0;
+    viewsAsked = 0;
+    viewsRefused = 0;
+    materialsRefused = 0;
     /*
      * The frame graph's recording, and the machinery that replays it.
      *
@@ -1214,7 +1258,7 @@ export class WebGPURenderer {
     variant;
     /** Whether this profile compiled the point-shadow path, and so has sentinels to write. */
     pointShadowsCompiled;
-    /** What the generator recorded about that permutation: sizes, offsets and bindings. */
+    /** What the generator recorded about that permutation, as the renderer's scratch lays it out. */
     fragment;
     depth = null;
     depthView = null;
@@ -1934,7 +1978,7 @@ export class WebGPURenderer {
             recordNode(this.arena, VERB_SCOPE, 0, MIRROR_TARGET, 0, 0);
         this.pass?.end();
         this.flushRings();
-        this.surface.device.queue.submit([this.encoder.finish()]);
+        this.submit([this.encoder.finish()]);
         this.encoder = this.surface.device.createCommandEncoder({ label: 'reflection' });
         /*
          * **Opened on demand, like the frame's own.** Nothing has been recorded into the mirror yet,
@@ -1992,7 +2036,8 @@ export class WebGPURenderer {
             this.windStreakFrags,
             this.scatterVerts,
             this.scatterFrags,
-            this.perFrame,
+            this.passRing,
+            this.viewRing,
             this.filmVerts,
             this.filmFrags,
             this.insetUniforms,
@@ -2013,6 +2058,7 @@ export class WebGPURenderer {
         this.instanceCulls?.flush();
         for (const ring of this.rings())
             ring.flush();
+        this.materialStore.flush();
     }
     /** Where every ring stands before work that submits an encoder of its own. */
     ringMarks = [];
@@ -2032,6 +2078,8 @@ export class WebGPURenderer {
         const rings = this.rings();
         for (let i = 0; i < rings.length; i++)
             rings[i].rewind(this.ringMarks[i] ?? 0);
+        /* The open pass may sit in a slot just given back, which the next pass would overwrite. */
+        this.reopenPass();
         this.skinPalettes.rewind(skinMark);
         if (this.skinPaletteSlot >= skinMark)
             this.skinPaletteSlot = -1;
@@ -2329,7 +2377,7 @@ export class WebGPURenderer {
             pass.end();
             this.pass = null;
             this.flushRings();
-            device.queue.submit([encoder.finish()]);
+            this.submit([encoder.finish()]);
             this.rewindRings(skinMark);
             this.encoderEpoch = frameEpoch;
             this.encoder = savedEncoder;
@@ -2337,6 +2385,7 @@ export class WebGPURenderer {
             this.perFrameInts[this.materialField('uOutputTransform')] = heldGrade;
             this.perFrameFloats[this.materialField('uOutputExposure')] = heldExposure;
             this.materials.dirty();
+            this.reopenPass();
             this.capturePassActive = false;
         }
         return true;
@@ -2352,10 +2401,11 @@ export class WebGPURenderer {
     updateSurfaceTexture(texture, source) {
         if (this.surface.lost)
             return;
-        const replaced = texture.update(source);
+        const replaced = texture.update(source, this.compressedFormats);
         if (replaced === null)
             return;
-        /* A new size is a new view, so every group holding the old one is dropped — see below. */
+        /* A new size or format is a new view, so every group holding the old one is dropped — see
+           below. */
         this.retiredTextures.push(replaced);
         this.forgetBindingsOf(texture);
     }
@@ -2411,7 +2461,9 @@ export class WebGPURenderer {
         /* Same reasoning, for whichever SDF labels were bound against this atlas. */
         this.sdfTextBindGroups.delete(texture);
         this.flatBindGroups.clear();
+        this.flatGroupEpoch += 1;
         this.overlayGroups.clear();
+        this.skinnedGroups.length = 0;
         /*
          * The blank one is built with the albedo held aside, because `buildFlatBindGroup` reads
          * `this.albedo` for that slot — leaving it in place would put a real colour map into the
@@ -2573,6 +2625,13 @@ export class WebGPURenderer {
         const emissiveMap = (material?.emissive ?? null);
         const modelMap = (material?.modelMap ?? null);
         this.materialModel = material?.model ?? null;
+        const reflectivity = material?.reflectivity;
+        const environmentGain = material?.environmentGain;
+        this.materialReflectivity =
+            reflectivity === undefined ? null : Math.min(1, Math.max(0, reflectivity));
+        this.materialEnvironmentGain =
+            environmentGain === undefined ? null : Math.max(0, environmentGain);
+        this.writeEnvironmentDials();
         /* What the blur spreads this skin by: the last material to name a profile says. */
         const model = material?.model;
         warnUnpagedLightmap(model, modelMap);
@@ -2592,7 +2651,8 @@ export class WebGPURenderer {
             const cut = this.materialField('uCutout');
             f[cut] = cutoff;
             f[cut + 1] = CUTOUT_RESOLVE_CODE[this.cutoutResolveStaged];
-            f[cut + 2] = this.cutoutFrame;
+            /* z unused: the dither's frame is the pass's, in `uHighlightMin.w`. See `uCutout`. */
+            f[cut + 2] = 0;
             /* The material's lighting channels, which the lamps' are compared with. See `uCutout`. */
             f[cut + 3] = lightChannelsOf(material?.lightChannels);
             i[flags + 3] = material?.doubleSided === true ? 1 : 0;
@@ -2764,14 +2824,28 @@ export class WebGPURenderer {
     }
     /** How reflective the surfaces drawn next are. Clamped, as `renderer.ts` clamps it. */
     setSurfaceReflectivity(amount) {
-        this.material((f) => {
-            f[this.materialField('uEnvironmentDials') + 1] = Math.min(1, Math.max(0, amount));
-        });
+        this.passReflectivity = Math.min(1, Math.max(0, amount));
+        this.writeEnvironmentDials();
     }
     /** How bright the environment the surfaces drawn next reflect is. See `renderer.ts`. */
     setEnvironmentGain(gain) {
+        this.passEnvironmentGain = Math.max(0, gain);
+        this.writeEnvironmentDials();
+    }
+    /**
+     * The reflectivity and environment gain the setters gave the pass, and the ones the material
+     * set now states, or null where it states none (`SurfaceMaterial.reflectivity`). A draw wears the
+     * material's where it has one and the pass's otherwise, the rule `renderer.ts` keeps too.
+     */
+    passReflectivity = 0;
+    passEnvironmentGain = 1;
+    materialReflectivity = null;
+    materialEnvironmentGain = null;
+    writeEnvironmentDials() {
         this.material((f) => {
-            f[this.materialField('uEnvironmentDials') + 2] = Math.max(0, gain);
+            const dials = this.materialField('uEnvironmentDials');
+            f[dials + 1] = this.materialReflectivity ?? this.passReflectivity;
+            f[dials + 2] = this.materialEnvironmentGain ?? this.passEnvironmentGain;
         });
     }
     setSurfaceGrain(amount) {
@@ -3242,7 +3316,7 @@ export class WebGPURenderer {
         }
         this.pass?.end();
         this.flushRings();
-        this.surface.device.queue.submit([this.encoder.finish()]);
+        this.submit([this.encoder.finish()]);
         this.encoder = this.surface.device.createCommandEncoder({ label: 'frame.resumed' });
         this.reflectionPassActive = false;
         this.reflectionReady = true;
@@ -4626,6 +4700,7 @@ export class WebGPURenderer {
      */
     setWind(windX, windZ, windGust, timeSeconds) {
         resolveScatterDeform(windX, windZ, windGust, timeSeconds, null, this.frameWind);
+        this.reopenViews();
     }
     /**
      * The five wind fields of one shadow-draw slot.
@@ -4643,21 +4718,6 @@ export class WebGPURenderer {
         this.shadowDraws.writeFloat(slot, DEPTH_VERT_FIELDS.uWindTime.offset, d.time);
         this.shadowDraws.writeFloats(slot, DEPTH_VERT_FIELDS.uWindSpatialPhase.offset, d.spatialPhase);
     }
-    /**
-     * The five wind fields of one per-draw slot.
-     *
-     * **Never called for an instanced draw.** That variant declares none of these, and
-     * `flatPass.ts` records what writing a field a variant does not declare costs: the block is
-     * shorter, so the write lands on whatever occupies that offset instead.
-     */
-    writeWind(slot) {
-        const d = this.frameWind;
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uWindDirection.offset, d.direction);
-        this.perDraw.writeFloat(slot, FLAT_VERT_FIELDS.uWindSpeed.offset, d.bend);
-        this.perDraw.writeFloat(slot, FLAT_VERT_FIELDS.uWindGust.offset, d.gust);
-        this.perDraw.writeFloat(slot, FLAT_VERT_FIELDS.uWindTime.offset, d.time);
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uWindSpatialPhase.offset, d.spatialPhase);
-    }
     /** Refilled per frame rather than allocated; see `resolvePointLights`. */
     lights = {
         count: 0,
@@ -4807,6 +4867,9 @@ export class WebGPURenderer {
      * at submit, and a texture's view is new when an update changes its size.
      */
     shadowCutoutLayout;
+    /** A crowd's casters: the plain and cutout layouts with a bone animation's three textures. */
+    shadowAnimatedLayout;
+    shadowAnimatedCutoutLayout;
     cutoutGroups = new Map();
     cutoutPeelGroups = new Map();
     shadowPeelPassUniforms = null;
@@ -5019,19 +5082,47 @@ export class WebGPURenderer {
             if (count === 0)
                 return;
             const cutout = cutoutOf(material);
-            const cutoutGroup = cutout === null ? null : this.cutoutGroup(cutout.albedo);
+            /* A crowd casts where its clip has moved it, through the animated variant. */
+            const animation = gpuBatch.animation === null ? null : this.animationViews(gpuBatch);
+            if (gpuBatch.animation !== null && animation === null)
+                return;
+            const cutoutTexture = cutout === null ? null : cutout.albedo;
+            const cutoutGroup = animation !== null
+                ? this.animatedDepthGroup(gpuBatch, animation, cutoutTexture)
+                : cutoutTexture === null
+                    ? null
+                    : this.cutoutGroup(cutoutTexture);
+            if (animation !== null && cutoutGroup === null)
+                return;
             const slot = this.shadowDraws.allocate();
             if (slot === null)
                 return;
             /* Only the light matrix: the instanced depth variant has no uModel, its placement being
                the four attribute columns the batch's buffer supplies. */
             this.shadowDraws.writeFloats(slot, DEPTH_VERT_FIELDS.uLightViewProj.offset, this.correctedLightViewProj);
-            if (cutout !== null && cutoutGroup !== null) {
+            const cuts = cutoutTexture !== null && cutoutGroup !== null;
+            if (cutout !== null && cuts) {
                 this.writeCutout(slot, cutout, DEPTH_INSTANCED_CUTOUT_VERT_FIELDS);
             }
-            const cuts = cutoutGroup !== null;
+            const clip = gpuBatch.animation;
+            if (animation !== null && clip !== null) {
+                const fields = cuts
+                    ? DEPTH_INSTANCED_ANIMATED_CUTOUT_VERT_FIELDS
+                    : DEPTH_INSTANCED_ANIMATED_VERT_FIELDS;
+                this.shadowDraws.writeFloat(slot, fields.uSceneTime.offset, this.animationTime);
+                this.shadowDraws.writeFloat(slot, fields.uBoneClip.offset, clip.framesPerSecond);
+                this.shadowDraws.writeFloat(slot, fields.uBoneClip.offset + 4, clip.boneScale);
+            }
             const cull = material?.doubleSided === true ? 'none' : this.depthCullMode;
-            pass.setPipeline(depthPipeline(this.pipelines, this.surface.device, cuts ? this.shadowCutoutLayout : this.shadowLayout, `${cuts ? 'depth-instanced-cutout' : 'depth-instanced'}|${cull}|${geometry.key ?? ''}`, this.presentOf(geometry), cull, false, true, cuts));
+            const animated = animation !== null;
+            pass.setPipeline(depthPipeline(this.pipelines, this.surface.device, animated
+                ? cuts
+                    ? this.shadowAnimatedCutoutLayout
+                    : this.shadowAnimatedLayout
+                : cuts
+                    ? this.shadowCutoutLayout
+                    : this.shadowLayout, `${cuts ? 'depth-instanced-cutout' : 'depth-instanced'}${animated ? '-animated' : ''}` +
+                `|${cull}|${geometry.key ?? ''}`, this.presentOf(geometry), cull, false, true, cuts, false, false, animated));
             pass.setBindGroup(0, cutoutGroup ?? this.shadowGroup(), [slot]);
             let index = 0;
             for (; index < geometry.vertexBuffers.length; index++) {
@@ -5472,7 +5563,7 @@ export class WebGPURenderer {
             pointShadows: quality.pointShadows,
         });
         this.pointShadowsCompiled = quality.pointShadows;
-        this.fragment = flatFragmentBindings(this.variant);
+        this.fragment = flatFragmentScratch(this.variant);
         this.bindGroupLayout = createFlatBindGroupLayout(device, this.variant);
         /*
          * The skinned twin, built eagerly because it is a descriptor rather than a compile — WebGPU
@@ -5482,24 +5573,32 @@ export class WebGPURenderer {
         this.skinnedBindGroupLayout = createFlatBindGroupLayout(device, this.variant, true);
         this.morphedBindGroupLayout = createFlatBindGroupLayout(device, this.variant, false, true);
         this.bothBindGroupLayout = createFlatBindGroupLayout(device, this.variant, true, true);
+        /* And the instanced twin that plays a bone animation: its clip's and clocks' textures. */
+        this.animatedBindGroupLayout = createFlatBindGroupLayout(device, this.variant, false, false, true);
         this.perDraw = new UniformRing(device, FLAT_VERT_SIZE, quality.drawsPerFrame, USAGE_UNIFORM_DST, 'flat.vertRing', this.drawBudget);
-        this.perFrameStaging = new ArrayBuffer(this.fragment.uniformSize);
+        const { passSize, materialSize } = this.fragment;
+        this.perFrameStaging = new ArrayBuffer(passSize + materialSize);
         this.perFrameFloats = new Float32Array(this.perFrameStaging);
         this.perFrameInts = new Int32Array(this.perFrameStaging);
-        /*
-         * **A ring, because the block holds material state and a material changes between draws.**
-         *
-         * `setSurfaceTexture`, `setSurfaceGrain` and their siblings are pass state on both backends
-         * — a material covers many draws, so the alternative is rebinding the same values twenty
-         * times to say the same thing. On WebGL2 each is a `uniform1f` that lands immediately. Here
-         * they live in this block, and `queue.writeBuffer` does not interleave with recorded
-         * commands, so one buffer rewritten between two draws gives *both* the second value. Every
-         * surface in a scene would wear the last material set, which is bug 7's shape at pass scale.
-         *
-         * A slot per *material change* rather than per draw: `drawMesh` reuses the open slot until
-         * something dirties it, so a scene drawing a hundred meshes of one material spends one.
-         */
-        this.perFrame = new UniformRing(device, this.fragment.uniformSize, this.quality.materialChangesPerFrame, USAGE_UNIFORM_DST, 'flat.fragRing', this.materialBudget);
+        this.passInts = new Int32Array(this.perFrameStaging, 0, passSize / 4);
+        this.materialInts = new Int32Array(this.perFrameStaging, passSize, materialSize / 4);
+        /*
+         * **Two blocks, because they change at two rates.** `setSurfaceTexture`, `setSurfaceGrain` and
+         * their siblings are pass state on both backends — a material covers many draws — and on WebGL2
+         * each is a `uniform1f` that lands immediately. Here they live in a block, and
+         * `queue.writeBuffer` does not interleave with recorded commands, so one buffer rewritten between
+         * two draws gives *both* the second value: every surface would wear the last material set, which
+         * is bug 7's shape at pass scale. So each draw binds a slot.
+         *
+         * It was one block until 4.10.0, lights and all, copied whole into a ring slot per material
+         * change and uploaded every frame: a stage of four hundred materials sent 4.8 MB a frame to say
+         * what it had said the frame before. Now the pass's block takes a ring slot per pass, and a
+         * material's block a slot of the store, where an unchanged material stays from frame to frame.
+         */
+        this.passRing = new UniformRing(device, passSize, PASSES_PER_FRAME, USAGE_UNIFORM_DST, 'flat.passRing');
+        this.materialStore = new MaterialStore(device, materialSize, this.quality.materialChangesPerFrame, USAGE_UNIFORM_DST, 'flat.materials', this.materialBudget);
+        /* Two a pass at most: the jittered view and the unjittered one. */
+        this.viewRing = new UniformRing(device, FLAT_VIEW_SIZE, 2 * PASSES_PER_FRAME, USAGE_UNIFORM_DST, 'flat.viewRing');
         /*
          * A one-pixel stand-in for the albedo binding. The albedo's flag is zero for untextured
          * geometry, which is nearly all of it, so the shader never samples this — but WebGPU
@@ -5632,7 +5731,7 @@ export class WebGPURenderer {
             })
                 .end();
         }
-        device.queue.submit([clear.finish()]);
+        this.submit([clear.finish()]);
         /*
          * `nearest` on a depth texture sampled as an ordinary float, matching what
          * `shadowMap.ts` asks WebGL2 for. A filtering sampler cannot be used on a depth format
@@ -6120,6 +6219,8 @@ export class WebGPURenderer {
         this.shadowLayout = createDepthBindGroupLayout(device);
         this.shadowSkinnedLayout = createDepthBindGroupLayout(device, true);
         this.shadowCutoutLayout = createDepthBindGroupLayout(device, false, true);
+        this.shadowAnimatedLayout = createDepthBindGroupLayout(device, false, false, true);
+        this.shadowAnimatedCutoutLayout = createDepthBindGroupLayout(device, false, true, true);
         this.shadowDraws = new UniformRing(device, 
         /* The cutout block is the plain one and two fields more, and a slot must hold either. */
         Math.max(DEPTH_VERT_SIZE, DEPTH_CUTOUT_VERT_SIZE), quality.drawsPerFrame, USAGE_UNIFORM_DST, 'shadow.drawRing', this.shadowDrawBudget);
@@ -6418,9 +6519,18 @@ export class WebGPURenderer {
         this.lineVerts.reset();
         this.lineFrags.reset();
         this.skyUniforms.reset();
-        /* The material ring, and the open slot with it: last frame's slots are gone. */
-        this.perFrame.reset();
+        /* The pass ring, and the open slots with it: last frame's pass slots are gone. Its materials
+           stay in the store, which a draw finds them in again. */
+        this.passRing.reset();
+        this.viewRing.reset();
+        this.materialStore.beginFrame();
+        this.passesAsked = 0;
+        this.passesRefused = 0;
+        this.viewsAsked = 0;
+        this.viewsRefused = 0;
+        this.materialsRefused = 0;
         this.materials.dirty();
+        this.reopenPass();
         /* Spent by `runMotion` at the end of the last frame; a frame states its movers afresh. */
         this.motionPass?.reset();
         this.latePass?.reset();
@@ -6718,6 +6828,37 @@ export class WebGPURenderer {
             },
         };
     }
+    /**
+     * The copies this frame's mesh rewrites owe (`StagedRewrite`), recorded since the last submit and
+     * sent at the head of the next one: one encoder however many meshes are rewritten. Null while
+     * nothing is owed.
+     */
+    pendingRewrites = null;
+    /** One record handed to every staged rewrite, refilled each call, so a rewrite allocates nothing. */
+    stagedRewrite = {
+        encoder: null,
+        staging: null,
+        previous: null,
+    };
+    rewriteCopies() {
+        this.pendingRewrites ??= this.surface.device.createCommandEncoder({
+            label: 'mesh.rewriteCopies',
+        });
+        return this.pendingRewrites;
+    }
+    /**
+     * Submit `buffers`, led by any copies the frame's mesh rewrites owe. **Every submit of this
+     * renderer goes through here**, because any of them may draw a rewritten mesh — the frame's own,
+     * a mirror's, a shadow's, a probe's — and the copies must be ahead of the first that does.
+     */
+    submit(buffers) {
+        const rewrites = this.pendingRewrites;
+        if (rewrites !== null) {
+            this.pendingRewrites = null;
+            buffers.unshift(rewrites.finish());
+        }
+        this.surface.device.queue.submit(buffers);
+    }
     /**
      * Rewrite a mesh's positions, and its normals where the caller has them.
      *
@@ -6738,20 +6879,35 @@ export class WebGPURenderer {
          * `changeFrames.ts`.
          */
         const motion = mesh.motion;
-        let previous = null;
+        let staged = null;
         if (motion !== null && this.reconstructionWanted) {
             const frame = frameOfChange(this.moverFrame, this.inFrame);
+            const size = mesh.vertexBuffers[0]?.size ?? 0;
+            let previous = null;
             if (keepsPrevious(motion.changed, frame)) {
                 motion.previous ??= this.surface.device.createBuffer({
                     label: 'recon.dynamicPrevious',
-                    size: mesh.vertexBuffers[0]?.size ?? 0,
+                    size,
                     usage: 0x0020 | 0x0008, // VERTEX | COPY_DST
                 });
                 previous = motion.previous;
             }
             motion.changed = frame;
+            /*
+             * **Staged, and copied in behind the copy aside, in an encoder the frame's next submit leads
+             * with**: no submit of the rewrite's own. See `StagedRewrite` and `submit`.
+             */
+            motion.staging ??= this.surface.device.createBuffer({
+                label: 'mesh.stagedPositions',
+                size,
+                usage: 0x0004 | 0x0008, // COPY_SRC | COPY_DST
+            });
+            staged = this.stagedRewrite;
+            staged.encoder = this.rewriteCopies();
+            staged.staging = motion.staging;
+            staged.previous = previous;
         }
-        mesh.update(this.surface.device, positions, normals, previous);
+        mesh.update(this.surface.device, positions, normals, staged);
     }
     /**
      * Settle everything the frame shares: the camera, the lights and the fog.
@@ -6941,6 +7097,11 @@ export class WebGPURenderer {
          * number, so this is a copy and is marked as one; the two must move together.
          */
         f[at('uGrain')] = 1;
+        /* No reflection and an environment at its own brightness, from the pass and from no material. */
+        this.passReflectivity = 0;
+        this.passEnvironmentGain = 1;
+        this.materialReflectivity = null;
+        this.materialEnvironmentGain = null;
         f[at('uEnvironmentDials') + 1] = 0;
         /* No weighting and no dither until a pass or a crossfade asks. See `setDitherFade`. */
         f[at('uWriteMode')] = 0;
@@ -7051,6 +7212,8 @@ export class WebGPURenderer {
         if (this.quality.nightEmissive)
             f[at('uNightEmissive')] = env.nightEmissive ?? 0;
         f.set(env.highlightMin, at('uHighlightMin'));
+        /* The frame the cutout dither moves with, in the near corner's w. See `uHighlightMin`. */
+        f[at('uHighlightMin') + 3] = this.cutoutFrame;
         f.set(env.highlightMax, at('uHighlightMax'));
         /* The gain in the far corner's w. See `uHighlightMax`. */
         f[at('uHighlightMax') + 3] = env.highlightGain;
@@ -7303,6 +7466,7 @@ export class WebGPURenderer {
          * same terms here, which is why a pass cannot inherit a material from the one before it.
          */
         this.materials.dirty();
+        this.reopenPass();
         /*
          * A pass starts with no material, exactly as `renderer.ts` resets these terms — **every map,
          * not the albedo alone**. `setMaterial` skips the lookup when the maps it is given are the ones
@@ -7326,29 +7490,104 @@ export class WebGPURenderer {
         this.uvOffset[1] = 0;
     }
     /**
-     * The slot the next draw's material lives in, taking a new one when something dirtied it.
+     * The slot the next draw's material lives in, placing it when something dirtied it, with the
+     * pass's slot taken first where `bindMeshPass` reopened it: `passOffset` is that one's offset.
      *
-     * **A copy per material change, not per draw.** A scene drawing a hundred meshes of one
-     * material spends one slot and one copy; a scene switching material every draw spends one
-     * each, which is what it asked for.
+     * **A placement per material change, not per draw.** A scene drawing a hundred meshes of one
+     * material places it once; a scene switching material every draw places one each, and a material
+     * the store already holds — the same numbers as a draw before it, this frame or an earlier one —
+     * is bound where it is and uploads nothing.
      */
     materialSlotForDraw() {
+        if (!this.passBlock.open) {
+            this.passesAsked += 1;
+            const pass = this.passRing.allocate();
+            if (pass === null) {
+                this.passesRefused += 1;
+                this.materialBudget.ask();
+                this.materialBudget.drop();
+                if (!this.warnedPassesFull) {
+                    this.warnedPassesFull = true;
+                    console.warn(`WebGPU: more than ${this.passRing.slots} mesh passes drew in one frame; the draws of the rest are skipped this frame and the ring grows for the next.`);
+                }
+                return null;
+            }
+            this.passRing.writeBlock(pass, this.passInts);
+            this.passBlock.slot = pass;
+        }
         if (this.materials.open)
             return this.materials.slot;
-        const slot = this.perFrame.allocate();
+        const slot = this.materialStore.place(this.materialInts);
         if (slot === null) {
-            if (!this.warnedMaterialsFull) {
-                this.warnedMaterialsFull = true;
-                console.warn(`WebGPU: more than ${this.quality.materialChangesPerFrame} material changes in a frame; the draws asking for the rest are skipped. renderer.frameBudget names the line and the count.`);
-            }
+            this.materialsRefused += 1;
+            this.warnMaterialsFull();
             return null;
         }
-        this.perFrame.writeBlock(slot, this.perFrameInts);
         this.materials.slot = slot;
         return slot;
     }
+    /** The pass slot `materialSlotForDraw` left open, read beside the material's by every lit draw. */
+    get passOffset() {
+        return this.passBlock.slot;
+    }
+    /** A new pass: its block, and both its views, are taken afresh by the next draw. */
+    reopenPass() {
+        this.passBlock.dirty();
+        this.reopenViews();
+    }
+    /** What a view holds changed — the wind, the light's matrix — so the next draw takes a new one. */
+    reopenViews() {
+        this.viewBlock.dirty();
+        this.lateViewBlock.dirty();
+    }
+    /**
+     * The view slot a lit draw reads its camera from: the pass's, or its unjittered twin for a blended
+     * draw landing after the upscale. Taken by the first draw that needs it after the pass, the wind or
+     * the light's matrix changed, and shared by every draw until then. Null when the ring is full, which
+     * skips the draw and grows the ring for the next frame, as the pass ring does.
+     */
+    viewSlotFor(late, viewProj) {
+        const block = late ? this.lateViewBlock : this.viewBlock;
+        if (block.open)
+            return block.slot;
+        this.viewsAsked += 1;
+        const slot = this.viewRing.allocate();
+        if (slot === null) {
+            this.viewsRefused += 1;
+            this.materialBudget.ask();
+            this.materialBudget.drop();
+            if (!this.warnedPassesFull) {
+                this.warnedPassesFull = true;
+                console.warn(`WebGPU: more than ${this.viewRing.slots} views drew in one frame; the draws of the rest are skipped this frame and the ring grows for the next.`);
+            }
+            return null;
+        }
+        this.writeView(this.viewRing, slot, viewProj);
+        block.slot = slot;
+        return slot;
+    }
+    /** A view block: the camera, the light's matrix and the frame's wind, into `ring` at `slot`. */
+    writeView(ring, slot, viewProj) {
+        ring.writeFloats(slot, FLAT_VIEW_FIELDS.uViewProj.offset, viewProj);
+        ring.writeFloats(slot, FLAT_VIEW_FIELDS.uLightViewProj.offset, this.lightViewProj);
+        /* The scene's clock, which a bone animation's instances read their moment from. */
+        ring.writeFloat(slot, FLAT_VIEW_FIELDS.uSceneTime.offset, this.animationTime);
+        const d = this.frameWind;
+        ring.writeFloats(slot, FLAT_VIEW_FIELDS.uWindDirection.offset, d.direction);
+        ring.writeFloat(slot, FLAT_VIEW_FIELDS.uWindSpeed.offset, d.bend);
+        ring.writeFloat(slot, FLAT_VIEW_FIELDS.uWindGust.offset, d.gust);
+        ring.writeFloat(slot, FLAT_VIEW_FIELDS.uWindTime.offset, d.time);
+        ring.writeFloats(slot, FLAT_VIEW_FIELDS.uWindSpatialPhase.offset, d.spatialPhase);
+    }
+    warnMaterialsFull() {
+        if (this.warnedMaterialsFull)
+            return;
+        this.warnedMaterialsFull = true;
+        console.warn(`WebGPU: more than ${this.quality.materialChangesPerFrame} distinct materials in a frame; the draws asking for the rest are skipped. renderer.frameBudget names the line and the count.`);
+    }
     /** Said once rather than every frame, for the reason `warnedFull` gives. */
     warnedMaterialsFull = false;
+    warnedPassesFull = false;
     warnedSkyFull = false;
     warnedParticlesTwice = false;
     /**
@@ -7383,8 +7622,12 @@ export class WebGPURenderer {
          * What this saves is the GPU's share, which for a heavy mesh is most of the cost and for a
          * trivial one is very little.
          */
-        if (this.quality.cullDraws && !this.visible(mesh.bounds, model))
+        /* A static list draws every entry in every view, since a bundle cannot leave one out. */
+        if (this.quality.cullDraws &&
+            this.staticRecording === null &&
+            !this.visible(mesh.bounds, model)) {
             return;
+        }
         /*
          * And the other half of the same question, where the profile asked for one. Gated on
          * `cullDraws` alongside the frustum test, because both are the renderer doing a consumer's
@@ -7549,17 +7792,17 @@ export class WebGPURenderer {
            `TranslucentMeshOptions.reconstructed`. */
         const lands = blend && options.reconstructed !== true && this.drawsLate();
         const late = lands || (blend && this.oitReplaying && this.reconstructing);
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, late ? this.correctedViewProj : this.viewProj);
+        /* The camera, the light's matrix and the wind are the pass's, in its view block. */
+        const view = this.viewSlotFor(late, late ? this.correctedViewProj : this.viewProj);
+        if (view === null)
+            return;
+        this.drawViewOffset = view;
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uModel.offset, model);
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uTint.offset, tint ?? WHITE);
-        /* The frame's wind, for a mesh carrying a sway lane. Written on this path and not the
-           instanced one, which declares none of these fields. */
-        this.writeWind(slot);
         /* The material's repeats, not a constant: geometry authored in metres is textured at
            whatever density the material asks for without rebuilding it. */
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvOffset.offset, this.uvOffset);
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
         /*
          * Whether this mesh's tangent frame is real. WebGPU has no disabled attribute, so location 10
          * is always backed — by the caller's data or by the constant buffer — which makes the binding
@@ -7734,8 +7977,10 @@ export class WebGPURenderer {
                 command.pipeline = pipeline;
                 command.bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
                 command.offsetA = slot;
-                command.offsetB = material;
-                command.offsetCount = 2;
+                command.offsetB = this.passOffset;
+                command.offsetC = material;
+                command.offsetD = this.drawViewOffset;
+                command.offsetCount = 4;
                 for (let index = 0; index < mesh.vertexBuffers.length; index++) {
                     command.vertexBuffers[index] = mesh.vertexBuffers[index];
                 }
@@ -7749,7 +7994,12 @@ export class WebGPURenderer {
                 if (pass === null)
                     return;
                 pass.setPipeline(pipeline);
-                pass.setBindGroup(0, this.flatBindGroupFor(skinned, morphed, deltas), [slot, material]);
+                pass.setBindGroup(0, this.flatBindGroupFor(skinned, morphed, deltas), [
+                    slot,
+                    this.passOffset,
+                    material,
+                    this.drawViewOffset,
+                ]);
                 for (let index = 0; index < mesh.vertexBuffers.length; index++) {
                     pass.setVertexBuffer(index, mesh.vertexBuffers[index]);
                 }
@@ -7829,9 +8079,87 @@ export class WebGPURenderer {
                 'an ordinary mesh, or drop the channel — the sway, sky and alpha lanes cannot reach an ' +
                 'instanced pipeline.');
         }
-        const batch = new GpuInstancedBatch(this.surface.device, mesh, capacity, `flat.instances:${mesh.key ?? 'mesh'}`, options.cull ?? false);
+        const animation = (options.animation ?? null);
+        /* The bone a vertex follows is its second coordinates' u, which a mesh carries in its grain
+           lane; a mesh with none has nothing to name a bone by. See `boneAnimation.ts`. */
+        if (animation !== null && !this.presentOf(mesh)['grain']) {
+            throw new Error('WebGPU: a bone animation reads each vertex’s bone from the mesh’s second coordinates ' +
+                '(`MeshData.lightmapUvs`), and this mesh has none.');
+        }
+        const batch = new GpuInstancedBatch(this.surface.device, mesh, capacity, `flat.instances:${mesh.key ?? 'mesh'}`, options.cull ?? false, animation);
         return batch;
     }
+    /** See `Renderer.setAnimationTime`. Every view taken after it reads the new clock. */
+    setAnimationTime(seconds) {
+        if (!Number.isFinite(seconds) || seconds === this.animationTime)
+            return;
+        this.animationTime = seconds;
+        this.reopenViews();
+    }
+    /** The clock `setAnimationTime` set, 0 until it is. */
+    animationTime = 0;
+    /** See `Renderer.createBoneAnimation`. */
+    createBoneAnimation(clip) {
+        return new GpuBoneAnimation(this.surface.device, packBoneAnimation(clip));
+    }
+    /** See `Renderer.disposeBoneAnimation`. A batch still playing it draws nothing after. */
+    disposeBoneAnimation(animation) {
+        const clip = animation;
+        if (!clip.disposed)
+            clip.dispose();
+    }
+    /** An animated batch's clip and clocks, as its groups bind them. */
+    animationViews(batch) {
+        const animation = batch.animation;
+        const clocks = batch.clocks;
+        if (animation === null || clocks === null || animation.disposed)
+            return null;
+        return { places: animation.placesView, turns: animation.turnsView, clocks: clocks.view };
+    }
+    /** An animated batch's groups, dropped wherever the renderer drops its own. */
+    freshAnimatedGroups(batch) {
+        if (batch.groupEpoch === this.flatGroupEpoch)
+            return;
+        batch.litGroups.clear();
+        batch.depthGroups.clear();
+        batch.depthPeelGroups.clear();
+        batch.groupEpoch = this.flatGroupEpoch;
+    }
+    /**
+     * The lit group an animated batch draws with: the material's group, or its overlay twin, again
+     * with the clip's and the clocks' textures — kept on the batch by the group it was built beside,
+     * as a skinned twin is kept by its palette slot.
+     */
+    animatedGroup(batch, views) {
+        this.freshAnimatedGroups(batch);
+        const base = this.overlayGroup();
+        let group = batch.litGroups.get(base);
+        if (group === undefined) {
+            this.overlayBinding = base !== this.bindGroup;
+            group = createFlatBindGroup(this.surface.device, this.animatedBindGroupLayout, this.variant, this.perDraw.buffer, this.passRing.buffer, this.materialStore.buffer, this.viewRing.buffer, this.flatTextures, null, null, null, views);
+            this.overlayBinding = false;
+            this.bindGroupBudget.ask();
+            batch.litGroups.set(base, group);
+        }
+        return group;
+    }
+    /** An animated caster's shadow group, by what it cuts with and whether this is the peel. */
+    animatedDepthGroup(batch, views, cutout) {
+        this.freshAnimatedGroups(batch);
+        const peel = this.shadowLayerIsPeel && this.shadowPeelPassUniforms !== null;
+        const groups = peel ? batch.depthPeelGroups : batch.depthGroups;
+        const held = groups.get(cutout);
+        if (held !== undefined)
+            return held;
+        const passUniforms = peel ? this.shadowPeelPassUniforms : this.shadowPassUniforms;
+        const previousView = peel ? this.sunStaticArrayView : this.shadowBlankView;
+        const previousSampler = peel ? this.shadowPeelSampler : this.shadowBlankSampler;
+        if (passUniforms === null || previousView === null || previousSampler === null)
+            return null;
+        const group = createDepthBindGroup(this.surface.device, cutout === null ? this.shadowAnimatedLayout : this.shadowAnimatedCutoutLayout, this.shadowDraws.buffer, passUniforms, previousView, previousSampler, null, cutout === null ? null : { view: cutout.view, sampler: cutout.sampler }, null, views);
+        groups.set(cutout, group);
+        return group;
+    }
     /** The device instance culls, built on the first culling draw. See `InstanceCullPass`. */
     instanceCulls = null;
     /** Counts frames, so a batch knows when its cull slots were last taken. */
@@ -7864,7 +8192,10 @@ export class WebGPURenderer {
         this.submitInstanced(batch, data, 1, false, {});
         /* A batch that moved this frame pairs each slot with last frame's; the batch is the identity. */
         const previous = batch.previousBuffer;
-        if (previous !== null && batch.changed === this.moverFrame && this.tracksMotionNow()) {
+        if (previous !== null &&
+            this.staticRecording === null &&
+            batch.changed === this.moverFrame &&
+            this.tracksMotionNow()) {
             const paired = pairedInstances(batch.previousCount, Math.min(data.count, batch.capacity));
             if (paired > 0)
                 this.motionPass?.recordInstanced(batch.mesh, batch.buffer, previous, paired);
@@ -7905,6 +8236,8 @@ export class WebGPURenderer {
         this.perFrameFloats[tintAt] = refractTint?.[0] ?? 1;
         this.perFrameFloats[tintAt + 1] = refractTint?.[1] ?? 1;
         this.perFrameFloats[tintAt + 2] = refractTint?.[2] ?? 1;
+        /* w: this framebuffer's first row is the top, so up the screen is down the rows. */
+        this.perFrameFloats[tintAt + 3] = -1;
         const glassTintAt = this.materialField('uGlassTint');
         this.perFrameFloats[glassTintAt] = glass.tint[0];
         this.perFrameFloats[glassTintAt + 1] = glass.tint[1];
@@ -7969,10 +8302,17 @@ export class WebGPURenderer {
         /* A culling batch's camera draw: the whole batch against the view and the occluders on the CPU,
            then instance by instance on the device into an indirect draw. Blended draws keep every
            instance and their order. See `InstancedOptions.cull`. */
-        const culling = !blend && batch.cull;
+        const culling = !blend && batch.cull && this.staticRecording === null;
         if (culling && !batchBoxVisible(batch.box, this.frustum, this.occlusion))
             return;
-        const cut = culling && cullsInstances(count, mesh.indexCount) ? this.takeCullSlot(batch, count) : null;
+        /* A batch playing a bone animation reads its clocks by instance index, which a compaction
+           would reorder: it is culled whole and never instance by instance. */
+        const animation = batch.animation === null ? null : this.animationViews(batch);
+        if (batch.animation !== null && animation === null)
+            return;
+        const cut = culling && animation === null && cullsInstances(count, mesh.indexCount)
+            ? this.takeCullSlot(batch, count)
+            : null;
         const instanceBuffer = cut === null ? batch.buffer : cut.instances;
         const slot = this.perDraw.allocate();
         if (slot === null) {
@@ -7984,11 +8324,19 @@ export class WebGPURenderer {
         }
         /* Late unless it moves with what it lies on. See `TranslucentMeshOptions.reconstructed`. */
         const lands = blend && options.reconstructed !== true && this.drawsLate();
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, lands ? this.correctedViewProj : this.viewProj);
+        const view = this.viewSlotFor(lands, lands ? this.correctedViewProj : this.viewProj);
+        if (view === null)
+            return;
+        this.drawViewOffset = view;
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvOffset.offset, this.uvOffset);
-        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
         this.perDraw.writeInt(slot, FLAT_VERT_FIELDS.uHasTangents.offset, mesh.hasTangents ? 1 : 0);
+        /* The clip's speed and bone scale, read by the animated variant's own field. */
+        const clip = batch.animation;
+        if (animation !== null && clip !== null) {
+            this.perDraw.writeFloat(slot, FLAT_ANIMATED_VERT_FIELDS.uBoneClip.offset, clip.framesPerSecond);
+            this.perDraw.writeFloat(slot, FLAT_ANIMATED_VERT_FIELDS.uBoneClip.offset + 4, clip.boneScale);
+        }
         const dimmed = opacity < 1;
         if (dimmed) {
             this.perFrameFloats[this.materialField('uOpacity')] = opacity;
@@ -8025,7 +8373,7 @@ export class WebGPURenderer {
            a third vertex buffer and a different vertex module, and sharing a cache entry with the
            plain one would hand a draw the wrong layout. */
         const adds = blend && options.additive === true;
-        const key = `${base}|inst${blend ? (adds ? '|add' : '|blend') : ''}` +
+        const key = `${base}|inst${animation === null ? '' : '|anim'}${blend ? (adds ? '|add' : '|blend') : ''}` +
             `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
             `${this.materialDoubleSided ? '|2s' : ''}${coverage ? '|a2c' : ''}` +
             `${modelKind === null ? '' : `|m:${modelKind}`}`;
@@ -8036,7 +8384,7 @@ export class WebGPURenderer {
             if (present === undefined) {
                 throw new Error(`WebGPU: no mesh attributes recorded for ${base}; createMesh records them`);
             }
-            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(false, false), this.variant, key, present, adds ? 'additive' : blend, false, false, depthWrite, layer, true, 'none', this.materialDoubleSided, coverage, false, false, modelKind);
+            pipeline = flatPipeline(pipelines, this.surface.device, animation === null ? this.flatLayoutFor(false, false) : this.animatedBindGroupLayout, this.variant, key, present, adds ? 'additive' : blend, false, false, depthWrite, layer, true, 'none', this.materialDoubleSided, coverage, false, false, modelKind, 'whole', false, animation !== null);
         }
         const material = this.materialSlotForDraw();
         if (material !== null) {
@@ -8045,10 +8393,15 @@ export class WebGPURenderer {
                 : this.recordDraw(0, this.currentTarget());
             if (command !== null) {
                 command.pipeline = pipeline;
-                command.bindGroup = this.flatBindGroupFor(false, false, null);
+                command.bindGroup =
+                    animation === null
+                        ? this.flatBindGroupFor(false, false, null)
+                        : this.animatedGroup(batch, animation);
                 command.offsetA = slot;
-                command.offsetB = material;
-                command.offsetCount = 2;
+                command.offsetB = this.passOffset;
+                command.offsetC = material;
+                command.offsetD = this.drawViewOffset;
+                command.offsetCount = 4;
                 let index = 0;
                 for (; index < mesh.vertexBuffers.length; index++) {
                     command.vertexBuffers[index] = mesh.vertexBuffers[index];
@@ -8066,7 +8419,9 @@ export class WebGPURenderer {
                 if (pass === null)
                     return;
                 pass.setPipeline(pipeline);
-                pass.setBindGroup(0, this.flatBindGroupFor(false, false, null), [slot, material]);
+                pass.setBindGroup(0, animation === null
+                    ? this.flatBindGroupFor(false, false, null)
+                    : this.animatedGroup(batch, animation), [slot, this.passOffset, material, this.drawViewOffset]);
                 let index = 0;
                 for (; index < mesh.vertexBuffers.length; index++) {
                     pass.setVertexBuffer(index, mesh.vertexBuffers[index]);
@@ -8080,7 +8435,7 @@ export class WebGPURenderer {
             }
             /* 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);
+                this.keepReflectionSurface(mesh, key, base, false, false, null, layer, false, false, modelKind, slot, material, instanceBuffer, count, cut === null ? null : cut.args, animation === null ? null : batch);
             }
         }
         /* Back to the defaults, unconditionally and for the reason `drawMesh` gives at length: this
@@ -8273,6 +8628,7 @@ export class WebGPURenderer {
         if (view === null)
             return false;
         this.lightViewProj.set(lightViewProj);
+        this.reopenViews();
         mat4.multiply(this.correctedLightViewProj, SHADOW_CLIP_CORRECTION, lightViewProj);
         this.shadowLayerIsPeel = peel;
         this.shadowLayerIsDynamic = dynamic;
@@ -8380,6 +8736,241 @@ export class WebGPURenderer {
         this.sceneCasterMaterial = undefined;
         casters(this.sceneCasterSink);
     }
+    /* -- Static draws ---------------------------------------------------------------- */
+    /** See `Renderer.createStaticDraws`. Recorded on its first draw, into each view it is drawn in. */
+    createStaticDraws(casters) {
+        return new GpuStaticDraws(this.surface.device, captureStaticDraws(casters), this.fragment.passSize, FLAT_VIEW_SIZE, FLAT_VERT_SIZE);
+    }
+    /**
+     * See `Renderer.drawStaticDraws`. One bundle executed, after a pass block and a view block are
+     * written for this view; the list is recorded first where it has no recording that is current for
+     * this target and starting state. See `staticBundles.ts`.
+     */
+    drawStaticDraws(draws) {
+        if (this.surface.lost)
+            return;
+        const list = draws;
+        if (list.disposed) {
+            this.warnStaticDisposed();
+            return;
+        }
+        if (!this.canDraw() || this.viewProj === null)
+            return;
+        /* A list's draws are rigid and wear no overlay: put back to none, as `bindMeshPass` does. */
+        this.setSkinPalette(null);
+        this.setMorphWeights(null);
+        this.setCloth(null);
+        this.setSurfaceOverlay(null);
+        this.setMaterial(null);
+        this.sceneCasterMaterial = undefined;
+        /* A probe face gives its slots back after every face; a list replays there draw by draw. */
+        if (this.probePassActive) {
+            this.replayStaticImmediately(list);
+            return;
+        }
+        /* The copy first: taking one may grow the list's rings, which no recording before can bind. */
+        const copy = list.takeCopy(this.moverFrame);
+        const current = this.staticRecordingFor(list);
+        if (current === null || current.immediate) {
+            this.replayStaticImmediately(list);
+            return;
+        }
+        current.usedIn = this.moverFrame;
+        list.writePass(copy, this.passInts);
+        this.writeView(list.views, list.viewOffset(copy), this.viewProj);
+        list.uploadCopy(copy);
+        const cache = current.cache;
+        let frame = current.frameBundles[copy];
+        if (frame === undefined || frame === null) {
+            frame = encodeBundle(this.surface.device, {
+                colorFormats: [cache.format],
+                depthStencilFormat: DEPTH_FORMAT,
+                sampleCount: cache.sampleCount,
+                depthReadOnly: false,
+            }, current.frame, list.passOffset(copy), list.viewOffset(copy), 'static.frame');
+            current.frameBundles[copy] = frame;
+        }
+        const command = this.recordDraw(0, this.currentTarget());
+        if (command !== null) {
+            command.bundles = frame;
+            command.pipeline = null;
+            command.bindGroup = null;
+        }
+        else {
+            this.openPass()?.executeBundles(frame);
+        }
+        const surface = this.reflectionSurface;
+        if (current.surfaceKept && surface !== null && current.surface.taken > 0) {
+            let halves = current.surfaceBundles[copy];
+            if (halves === undefined || halves === null) {
+                halves = encodeBundle(this.surface.device, {
+                    colorFormats: [null, REFLECTION_SURFACE_FORMAT, REFLECTION_SURFACE_FORMAT],
+                    depthStencilFormat: DEPTH_FORMAT,
+                    sampleCount: 1,
+                    depthReadOnly: true,
+                }, current.surface, list.passOffset(copy), list.viewOffset(copy), 'static.surface');
+                current.surfaceBundles[copy] = halves;
+            }
+            const kept = surface.take();
+            kept.bundles = halves;
+        }
+        /* Counted as the draws would have been, so a frame reports the same on both backends. */
+        for (let draw = 0; draw < current.frame.taken; draw++)
+            this.drawBudget.ask();
+        if (!this.staticJustRecorded) {
+            for (let ask = 0; ask < current.materialAsks; ask++)
+                this.materialBudget.ask();
+        }
+        this.staticJustRecorded = false;
+    }
+    /** A list drawn the way `drawSceneCasters` draws, a draw at a time, for where a bundle cannot be. */
+    replayStaticImmediately(list) {
+        this.staticJustRecorded = false;
+        replayStaticDraws(list, this.sceneCasterSink);
+        this.setMaterial(null);
+        this.sceneCasterMaterial = undefined;
+    }
+    /** See `Renderer.disposeStaticDraws`. Its pins let go; its meshes and materials are the caller's. */
+    disposeStaticDraws(draws) {
+        const list = draws;
+        if (list.disposed)
+            return;
+        list.dispose(this.unpinFor(list));
+    }
+    /** The recording to replay `list` from here, made now if none is current; null if it cannot be. */
+    staticRecordingFor(list) {
+        /* Geometry still arriving is not drawn yet, so a recording now would leave it out for good. */
+        for (const entry of list.entries) {
+            const mesh = entry.kind === 'mesh' ? entry.mesh : entry.batch.mesh;
+            if (!mesh.complete)
+                return null;
+        }
+        const cache = this.targetPipelines();
+        const start = this.materialInts;
+        const startHash = hashWords(start, start.length);
+        const surfaceKept = this.reflectionSurfaceKeeps();
+        let recording = list.find(cache, start, startHash, this.cutoutResolveStaged, surfaceKept);
+        if (recording !== null &&
+            recording.cacheVersion === cache.version &&
+            recording.groupEpoch === this.flatGroupEpoch &&
+            recording.storeEpoch === this.materialStore.epoch &&
+            recording.ringEpoch === list.ringEpoch) {
+            return recording;
+        }
+        const unpin = this.unpinFor(list);
+        if (recording === null) {
+            recording = list.open(cache, start, startHash, this.cutoutResolveStaged, surfaceKept, unpin);
+        }
+        else {
+            list.clear(recording, recording.storeEpoch === this.materialStore.epoch ? unpin : () => { });
+        }
+        this.recordStatic(list, recording);
+        return recording;
+    }
+    /** How a list's pins are let go: through the store, unless it has forgotten them since. */
+    unpinFor(list) {
+        const epoch = this.materialStore.epoch;
+        return (offset) => {
+            if (this.materialStore.epoch === epoch && list.pinEpoch === epoch) {
+                this.materialStore.unpin(offset);
+            }
+        };
+    }
+    /**
+     * Record `list` into `recording`: its entries through the scene-caster path, with the list's
+     * rings and group cache swapped in for the frame's and the pass and view slots held at the list's
+     * first copy, so every command the path records binds the list's buffers and offsets the bundle
+     * can rewrite per copy. Everything swapped is put back, whatever the path throws.
+     */
+    recordStatic(list, recording) {
+        if (list.groupEpoch !== this.flatGroupEpoch) {
+            list.groups = new Map();
+            list.blank = null;
+            list.groupEpoch = this.flatGroupEpoch;
+        }
+        list.drawRing.reset();
+        const perDraw = this.perDraw;
+        const passRing = this.passRing;
+        const viewRing = this.viewRing;
+        const groups = this.flatBindGroups;
+        const blank = this.blankAlbedoBindGroup;
+        const bindGroup = this.bindGroup;
+        const passSlot = this.passBlock.slot;
+        const viewSlot = this.viewBlock.slot;
+        const lateSlot = this.lateViewBlock.slot;
+        const asked = this.materialBudget.used;
+        this.perDraw = list.drawRing;
+        this.passRing = list.passes;
+        this.viewRing = list.views;
+        this.flatBindGroups = list.groups;
+        /* The blank group over the list's rings, built as the frame's is: with no maps held. */
+        list.blank ??= this.buildFlatBindGroup();
+        this.blankAlbedoBindGroup = list.blank;
+        this.bindGroup = this.flatGroupForMaps(null, null, null, null, null);
+        this.passBlock.slot = list.passOffset(0);
+        this.viewBlock.slot = list.viewOffset(0);
+        this.lateViewBlock.slot = list.viewOffset(0);
+        this.materials.dirty();
+        this.staticRecording = recording;
+        try {
+            this.sceneCasterMaterial = undefined;
+            replayStaticDraws(list, this.sceneCasterSink);
+        }
+        finally {
+            this.staticRecording = null;
+            this.perDraw = perDraw;
+            this.passRing = passRing;
+            this.viewRing = viewRing;
+            this.flatBindGroups = groups;
+            this.blankAlbedoBindGroup = blank;
+            this.bindGroup = bindGroup;
+            this.passBlock.slot = passSlot;
+            this.viewBlock.slot = viewSlot;
+            this.lateViewBlock.slot = lateSlot;
+            this.materials.dirty();
+            this.sceneCasterMaterial = undefined;
+            this.setMaterial(null);
+        }
+        recording.materialAsks = this.materialBudget.used - asked;
+        const store = this.materialStore;
+        recording.cacheVersion = recording.cache.version;
+        recording.groupEpoch = this.flatGroupEpoch;
+        recording.storeEpoch = store.epoch;
+        recording.ringEpoch = list.ringEpoch;
+        /* A skin split into halves is replayed draw by draw, so nothing recorded is kept or pinned. */
+        if (recording.immediate) {
+            resetPool(recording.frame);
+            resetPool(recording.surface);
+            return;
+        }
+        /* Every material the commands bind, pinned once, so nothing displaces what a bundle bakes. */
+        for (const pool of [recording.frame, recording.surface]) {
+            for (let i = 0; i < pool.taken; i++) {
+                const offset = pool.commands[i].offsetC;
+                if (!recording.pins.includes(offset)) {
+                    store.pin(offset);
+                    recording.pins.push(offset);
+                }
+            }
+        }
+        list.pinEpoch = store.epoch;
+        list.uploadDraws();
+        this.staticJustRecorded = true;
+    }
+    /** The recording under way, which `recordDraw` and the side passes take their commands into. */
+    staticRecording = null;
+    /** Whether the replay about to count its material changes recorded them, and so counted them. */
+    staticJustRecorded = false;
+    /** A disposed list drawn, said once: the frame loop does not throw. */
+    warnStaticDisposed() {
+        if (this.warnedStaticDisposed)
+            return;
+        this.warnedStaticDisposed = true;
+        console.warn('drawStaticDraws: this list was disposed, and draws nothing.');
+    }
+    warnedStaticDisposed = false;
+    /** Bumped wherever the lit groups are dropped, which a static list's own groups follow. */
+    flatGroupEpoch = 0;
     drawShadowCasters(casters) {
         if (this.surface.lost || this.shadowPass === null)
             return;
@@ -8671,7 +9262,7 @@ export class WebGPURenderer {
         }
         this.shadowDraws.flush();
         this.scatterDepthDraws.flush();
-        this.surface.device.queue.submit([this.shadowEncoder.finish()]);
+        this.submit([this.shadowEncoder.finish()]);
         /* A growth's old texture, copied out of by what was just submitted and needed no longer. */
         this.retiredSunTexture?.destroy();
         this.retiredSunTexture = null;
@@ -8905,7 +9496,7 @@ export class WebGPURenderer {
              * its own slot.
              */
             this.pointShadowArray?.flush();
-            this.surface.device.queue.submit([this.shadowEncoder.finish()]);
+            this.submit([this.shadowEncoder.finish()]);
             this.shadowEncoder = null;
             this.shadowPass = null;
             this.gpuTimer.end();
@@ -9072,7 +9663,7 @@ export class WebGPURenderer {
         tintTarget.resolve(encoder, layer, face, offered);
     }
     buildFlatBindGroup() {
-        return createFlatBindGroup(this.surface.device, this.bindGroupLayout, this.variant, this.perDraw.buffer, this.perFrame.buffer, this.flatTextures);
+        return createFlatBindGroup(this.surface.device, this.bindGroupLayout, this.variant, this.perDraw.buffer, this.passRing.buffer, this.materialStore.buffer, this.viewRing.buffer, this.flatTextures);
     }
     /**
      * The open material's flat group, or its twin with the surface overlay's atlas in the refraction
@@ -9112,11 +9703,11 @@ export class WebGPURenderer {
     /**
      * The bind group a draw uses, skinned or not.
      *
-     * **The skinned twin is cached against the two things that can invalidate it**, rather than
-     * against a flag somebody has to remember to clear at six call sites: the unskinned group it was
-     * built beside — which is rebuilt whenever the material or a shadow slot moves — and the palette
-     * view, which changes only when the texture is reallocated. Comparing object identity means a
-     * missed invalidation is not possible rather than merely unlikely, and it is why
+     * **The skinned twin is kept by palette slot and by the unskinned group it was built beside**,
+     * which is one a material, and compared against the views it holds — the palette's, which
+     * changes only when the slot's texture grows, the morph deltas and the cloth's — rather than
+     * against a flag somebody has to remember to clear at six call sites. Comparing object identity
+     * means a missed invalidation is not possible rather than merely unlikely, and it is why
      * `SkinPaletteTexture.view()` caches: a fresh view every call never compares equal and would
      * rebuild this every draw.
      */
@@ -9130,23 +9721,31 @@ export class WebGPURenderer {
         const at = skinned ? this.skinPaletteSlot + 1 : 0;
         /* A skinned group carries the cloth's views, or the stand-in's: see `clothViews`. */
         const cloth = skinned ? this.clothViews() : null;
-        if ((this.skinnedGroups[at] ?? null) === null ||
-            this.skinnedGroupsBeside[at] !== base ||
-            this.skinnedGroupsPalette[at] !== palette ||
-            this.skinnedGroupsDeltas[at] !== deltas ||
-            this.skinnedGroupsCloth[at] !== (cloth?.particles ?? null) ||
-            this.skinnedGroupsClothBinding[at] !== (cloth?.binding ?? null)) {
+        let byMaterial = this.skinnedGroups[at];
+        if (byMaterial === undefined) {
+            byMaterial = new Map();
+            this.skinnedGroups[at] = byMaterial;
+        }
+        let twin = byMaterial.get(base);
+        if (twin === undefined ||
+            twin.palette !== palette ||
+            twin.deltas !== deltas ||
+            twin.cloth !== (cloth?.particles ?? null) ||
+            twin.clothBinding !== (cloth?.binding ?? null)) {
             /* Built from the live material, with the overlay's atlas where `base` is its twin. */
             this.overlayBinding = base !== this.bindGroup;
-            this.skinnedGroups[at] = createFlatBindGroup(this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, this.perDraw.buffer, this.perFrame.buffer, this.flatTextures, palette, deltas, cloth);
+            const group = createFlatBindGroup(this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, this.perDraw.buffer, this.passRing.buffer, this.materialStore.buffer, this.viewRing.buffer, this.flatTextures, palette, deltas, cloth);
             this.overlayBinding = false;
-            this.skinnedGroupsBeside[at] = base;
-            this.skinnedGroupsPalette[at] = palette;
-            this.skinnedGroupsDeltas[at] = deltas;
-            this.skinnedGroupsCloth[at] = cloth?.particles ?? null;
-            this.skinnedGroupsClothBinding[at] = cloth?.binding ?? null;
+            twin = {
+                group,
+                palette,
+                deltas,
+                cloth: cloth?.particles ?? null,
+                clothBinding: cloth?.binding ?? null,
+            };
+            byMaterial.set(base, twin);
         }
-        return this.skinnedGroups[at];
+        return twin.group;
     }
     /** The layout matching a pair of vertex flags. A pipeline and its bind group must agree. */
     flatLayoutFor(skinned, morphed) {
@@ -9185,8 +9784,14 @@ export class WebGPURenderer {
         if (this.drawBudget.dropped > 0) {
             grew = this.perDraw.growTo(roomFor(this.drawBudget.used)) || grew;
         }
-        if (this.materialBudget.dropped > 0) {
-            grew = this.perFrame.growTo(roomFor(this.materialBudget.used)) || grew;
+        if (this.materialsRefused > 0) {
+            grew = this.materialStore.growTo(roomFor(this.materialBudget.used)) || grew;
+        }
+        if (this.passesRefused > 0) {
+            grew = this.passRing.growTo(roomFor(this.passesAsked)) || grew;
+        }
+        if (this.viewsRefused > 0) {
+            grew = this.viewRing.growTo(roomFor(this.viewsAsked)) || grew;
         }
         if (grew)
             this.rebuildFlatGroupsForNewRings();
@@ -9207,9 +9812,10 @@ export class WebGPURenderer {
      */
     rebuildFlatGroupsForNewRings() {
         this.flatBindGroups.clear();
+        this.flatGroupEpoch += 1;
         this.overlayGroups.clear();
-        this.flatEnvironment = this.flatTextures('uEnvironment').view;
         this.skinnedGroups.length = 0;
+        this.flatEnvironment = this.flatTextures('uEnvironment').view;
         const albedo = this.albedo;
         const normalMap = this.normalMap;
         const ormMap = this.ormMap;
@@ -9229,6 +9835,7 @@ export class WebGPURenderer {
         this.bindGroup = this.flatGroupForMaps(this.albedo, this.normalMap, this.ormMap, this.emissiveMap, this.modelMap);
         /* The open material lives in a slot of a buffer that no longer exists. */
         this.materials.dirty();
+        this.reopenPass();
     }
     /**
      * The environment view the cached flat groups bind: the grid, or the blank stand-in while the
@@ -9260,7 +9867,9 @@ export class WebGPURenderer {
      */
     rebuildFlatBindGroup() {
         this.flatBindGroups.clear();
+        this.flatGroupEpoch += 1;
         this.overlayGroups.clear();
+        this.skinnedGroups.length = 0;
         this.flatEnvironment = this.flatTextures('uEnvironment').view;
         if (this.albedo === null &&
             this.normalMap === null &&
@@ -11158,20 +11767,29 @@ export class WebGPURenderer {
      * `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) {
+    keepReflectionSurface(mesh, frameKey, base, skinned, morphed, deltas, layer, eight, clothed, modelKind, slot, material, instanceBuffer, instances, indirect, 
+    /** A batch playing a bone animation, whose surface half moves as its draw does. */
+    animated = null) {
         const surface = this.reflectionSurface;
         const present = this.meshPresent.get(base);
         if (surface === null || present === undefined)
             return;
+        const animation = animated === null ? null : this.animationViews(animated);
         const key = `${frameKey}|rs`;
         const pipeline = this.pipelines.peek(key) ??
-            flatPipeline(this.pipelines, this.surface.device, 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();
+            flatPipeline(this.pipelines, this.surface.device, animation === null ? this.flatLayoutFor(skinned, morphed) : this.animatedBindGroupLayout, this.variant, key, present, false, skinned, morphed, true, layer, instanceBuffer !== null, 'none', this.materialDoubleSided, false, eight, clothed, modelKind, 'whole', true, animation !== null);
+        /* A static list's surface halves go into its own pool, beside its draws. */
+        const command = this.staticRecording === null ? surface.take() : takeRecorded(this.staticRecording.surface);
         command.pipeline = pipeline;
-        command.bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
+        command.bindGroup =
+            animated === null || animation === null
+                ? this.flatBindGroupFor(skinned, morphed, deltas)
+                : this.animatedGroup(animated, animation);
         command.offsetA = slot;
-        command.offsetB = material;
-        command.offsetCount = 2;
+        command.offsetB = this.passOffset;
+        command.offsetC = material;
+        command.offsetD = this.drawViewOffset;
+        command.offsetCount = 4;
         let index = 0;
         for (; index < mesh.vertexBuffers.length; index++) {
             command.vertexBuffers[index] = mesh.vertexBuffers[index];
@@ -11192,6 +11810,11 @@ export class WebGPURenderer {
      * wrote.
      */
     keepSkinDiffuse(mesh, frameKey, base, skinned, morphed, deltas, layer, eight, clothed, slot, material) {
+        /* A skin's halves are not bundled: a static list holding one replays draw by draw. */
+        if (this.staticRecording !== null) {
+            this.staticRecording.immediate = true;
+            return;
+        }
         const skin = this.skinScatter;
         const pipelines = this.skinPipelines;
         const present = this.meshPresent.get(base);
@@ -11207,8 +11830,10 @@ export class WebGPURenderer {
             command.pipeline = pipeline;
             command.bindGroup = bindGroup;
             command.offsetA = slot;
-            command.offsetB = material;
-            command.offsetCount = 2;
+            command.offsetB = this.passOffset;
+            command.offsetC = material;
+            command.offsetD = this.drawViewOffset;
+            command.offsetCount = 4;
             for (let index = 0; index < mesh.vertexBuffers.length; index++) {
                 command.vertexBuffers[index] = mesh.vertexBuffers[index];
             }
@@ -11635,6 +12260,9 @@ export class WebGPURenderer {
      * site reads as one `if` either way.
      */
     recordDraw(reads, writes) {
+        /* A static list recording takes its draws into its own pool, never the frame graph's. */
+        if (this.staticRecording !== null)
+            return takeRecorded(this.staticRecording.frame);
         /* The order-independent replay owns its pass and issues directly into it; a recorded command
            would be replayed into the frame's passes instead, which is not where these belong. */
         if (this.oitEncoder !== null)
@@ -11682,10 +12310,26 @@ export class WebGPURenderer {
     }
     /** One recorded draw, issued into an open pass. Shared by the graph's replay and `runLate`. */
     issueCommand(pass, command) {
+        /* A static list, recorded once: one call, and the pass's bindings are its to set again. */
+        if (command.bundles !== null) {
+            pass.executeBundles(command.bundles);
+            return;
+        }
         if (command.pipeline === null || command.bindGroup === null)
             return;
         pass.setPipeline(command.pipeline);
-        if (command.offsetCount === 2) {
+        if (command.offsetCount === 4) {
+            pass.setBindGroup(0, command.bindGroup, [
+                command.offsetA,
+                command.offsetB,
+                command.offsetC,
+                command.offsetD,
+            ]);
+        }
+        else if (command.offsetCount === 3) {
+            pass.setBindGroup(0, command.bindGroup, [command.offsetA, command.offsetB, command.offsetC]);
+        }
+        else if (command.offsetCount === 2) {
             pass.setBindGroup(0, command.bindGroup, [command.offsetA, command.offsetB]);
         }
         else if (command.offsetCount === 1) {
@@ -11951,7 +12595,7 @@ export class WebGPURenderer {
         this.pass?.end();
         this.pass = null;
         if (!this.surface.lost)
-            this.surface.device.queue.submit([this.encoder.finish()]);
+            this.submit([this.encoder.finish()]);
         this.encoder = null;
     }
     endFrame() {
@@ -12015,7 +12659,7 @@ export class WebGPURenderer {
          * there would have nothing to ride on. See `GpuTimestamps.resolve`.
          */
         this.gpuTimer.resolve(this.encoder);
-        this.surface.device.queue.submit([this.encoder.finish()]);
+        this.submit([this.encoder.finish()]);
         this.encoder = null;
         this.framePresented = true;
         /* Latched rather than assigned: `framePresented` goes back to false every `beginFrame`. */
@@ -12676,7 +13320,7 @@ export class WebGPURenderer {
         definition.dispatch(this.computeContext);
         pass.end();
         this.flushRings();
-        device.queue.submit([encoder.finish()]);
+        this.submit([encoder.finish()]);
     }
     /** Let go of a definition. A handle kept past this dispatches nothing; see `ComputeHandle`. */
     unregisterCompute(handle) {
@@ -13730,7 +14374,7 @@ export class WebGPURenderer {
                     .end();
             }
         }
-        device.queue.submit([clear.finish()]);
+        this.submit([clear.finish()]);
     }
     /**
      * Declare where a grid's probes stand, and allocate the layers for them.
@@ -13941,7 +14585,7 @@ export class WebGPURenderer {
         if (whole)
             this.buildProbeChain(encoder, probe, this.probeSweeps?.writeLayer(layer) ?? layer);
         this.flushRings();
-        device.queue.submit([encoder.finish()]);
+        this.submit([encoder.finish()]);
         this.rewindRings(skinMark);
         this.encoderEpoch = frameEpoch;
         this.encoder = savedEncoder;
@@ -13951,6 +14595,7 @@ export class WebGPURenderer {
         this.perFrameInts[this.materialField('uOutputTransform')] = heldGrade;
         this.perFrameFloats[this.materialField('uOutputExposure')] = heldExposure;
         this.materials.dirty();
+        this.reopenPass();
         this.probePassActive = false;
         this.probeBounce = false;
         this.rebindEnvironment();
@@ -13998,7 +14643,7 @@ export class WebGPURenderer {
         this.uploadProbeFaces(probe, image);
         const encoder = device.createCommandEncoder({ label: 'probe.environmentImage' });
         this.buildProbeChain(encoder, probe, 0);
-        device.queue.submit([encoder.finish()]);
+        this.submit([encoder.finish()]);
         this.markProbeFilled(0);
         this.probeAmbient = options?.irradiance ?? true;
         this.rebuildFlatBindGroup();
@@ -14023,7 +14668,7 @@ export class WebGPURenderer {
         const { device } = this.surface;
         const encoder = device.createCommandEncoder({ label: 'probe.layerImage' });
         this.buildProbeChain(encoder, probe, this.probeSweeps?.writeLayer(layer) ?? layer);
-        device.queue.submit([encoder.finish()]);
+        this.submit([encoder.finish()]);
         this.markProbeFilled(layer);
         this.probeAmbient = options?.irradiance ?? true;
         this.rebuildFlatBindGroup();