@driftengine/core 4.9.0 → 4.11.0

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

@@ -33,9 +33,12 @@ import { clamp } from '../../../math/scalar.js';
 import { attachContextLoss } from '../../contextLoss.js';
 import { isWeakGpuFamily, webgl2RendererName } from '../../gpuCapability.js';
 import { GpuTimer } from '../../gpuTimer.js';
-import { compileProgram, uniformLocations } from '../../shader.js';
+import { compileProgram, finishProgram, startProgram, uniformLocations } from '../../shader.js';
 import { countUniformVectors, FULL_LIGHT_BUDGET, nextLightBudget, planLightBudget, } from '../../uniformVectorBudget.js';
 import { OVERLAY_FLOATS, overlayLays, packSurfaceOverlay, } from '../../surfaceOverlay.js';
+import { PROJECTION_FLOATS, packSurfaceProjection, projects } from '../../surfaceProjection.js';
+import { orthographicDepthSpan } from '../../lightMatrix.js';
+import { LAYER_FLOATS, packSurfaceLayers } from '../../surfaceLayers.js';
 import { FILM_FRAG, FILM_VERT } from '../../shaders/film.js';
 import { SceneTarget } from '../../sceneTarget.js';
 import { FILM_LOOK_WITHOUT_COMPOSITE } from '../../shaders/filmLook.js';
@@ -77,7 +80,7 @@ import { MAX_AREA_LIGHTS } from '../../areaLights.js';
 import { areaShadowLayerCount, castingRange, createResolvedAreaShadows, firstAreaShadowLayer, AreaShadowSet, } from '../../areaShadowSet.js';
 import { equirectToCubeFaces } from '../../equirectToCube.js';
 import { SKY_FRAG, skyVertFor } from '../../shaders/sky.js';
-import { DEPTH_CUTOUT_FRAG, DEPTH_CUTOUT_VERT, DEPTH_FRAG, DEPTH_INSTANCED_CUTOUT_VERT, DEPTH_INSTANCED_VERT, DEPTH_SKINNED_VERT, DEPTH_VERT, } from '../../shaders/depth.js';
+import { DEPTH_CUTOUT_FRAG, DEPTH_CUTOUT_VERT, DEPTH_FRAG, DEPTH_INSTANCED_ANIMATED_CUTOUT_VERT, DEPTH_INSTANCED_ANIMATED_VERT, DEPTH_INSTANCED_CUTOUT_VERT, DEPTH_INSTANCED_VERT, DEPTH_SKINNED_VERT, DEPTH_VERT, } from '../../shaders/depth.js';
 import { OCTAHEDRAL_EDGE, PointShadowArray, strideLayers } from '../../pointShadowArray.js';
 import { SunShadowArray } from '../../shadowMap.js';
 import { POINT_SHADOW_SAMPLER, PointShadowSystem } from '../../pointShadowSystem.js';
@@ -85,6 +88,7 @@ import { castsDepth, glassOf } from '../../shadowCasters.js';
 import { GlassCasterList } from '../../glassCasters.js';
 import { SunGlassTint } from '../../sunGlassTint.js';
 import { GlassTintPrograms } from './glassTintPrograms.js';
+import { captureStaticDraws, replayStaticDraws } from '../../staticDraws.js';
 import { FACE_COUNT, PointShadowMap } from '../../pointShadowMap.js';
 import { createResolvedPointShadows, DEFAULT_SOURCE_RADIUS } from '../../pointShadowImage.js';
 import { createBakeScratch, runPointShadowBakes, selectCastingLights, } from '../../pointShadowBudget.js';
@@ -117,6 +121,9 @@ import { DEFAULT_FILMIC_CURVE, FILMIC_CLAMPED, FILMIC_CONSTANTS, FILMIC_WITHOUT_
 import { deviceSnappedCellSize } from '../../textLayout.js';
 import { WindStreakRenderer } from '../../windStreakRenderer.js';
 import { InstancedBatch } from './instanced.js';
+import { GlBoneAnimation } from './boneAnimations.js';
+import { packBoneAnimation } from '../../boneAnimation.js';
+import { BONE_PLACES_TEXTURE_UNIT, BONE_TURNS_TEXTURE_UNIT, INSTANCE_CLOCKS_TEXTURE_UNIT, } from '../../lightBudget.js';
 import { cutoutOf } from '../../cutoutCaster.js';
 import { CUTOUT_RESOLVE_CODE, resolveCutout } from '../../cutoutDither.js';
 import { materialHasMaps, noteMapsWithoutUvs } from '../../mapsWithoutUvs.js';
@@ -287,6 +294,18 @@ const NO_CLIP_PLANE = new Float32Array(4);
 const IDENTITY_CLIP = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
 /** Standing still, for a caller that asked for dust and not for wind. */
 const NO_DRIFT = [0, 0, 0];
+/** Whether two matrices hold the same sixteen numbers. */
+function sameMatrix(a, b) {
+    for (let k = 0; k < 16; k++)
+        if (a[k] !== b[k])
+            return false;
+    return true;
+}
+/** How often `ready` asks the driver whether a program is done, and how many times before waiting. */
+const READY_POLL_MS = 4;
+const READY_MAX_POLLS = 500;
+/** The halves a skin draws under the screen-space blur, each a program of its own. */
+const SPLIT_SKIN_HALVES = ['scene', 'diffuse', 'albedo'];
 export class WebGL2Renderer {
     /**
      * Private on purpose. The GL context never leaves this directory, so a
@@ -564,6 +583,23 @@ export class WebGL2Renderer {
      * compiled the first time a draw asks for one. See `modelProgram`.
      */
     modelFlat = new Map();
+    /**
+     * Model programs still compiling, where draws skip a compile (`pipelineCompile: 'skip'`) and the
+     * context offers `KHR_parallel_shader_compile`; `parallelCompile` is its completion query then,
+     * and null where draws wait for a program here instead. See `modelProgram`.
+     */
+    modelPending = new Map();
+    /** What `drawVariantOf` answers, rewritten each draw rather than made. */
+    drawVariant = {
+        name: 'plain',
+        skinned: false,
+        morphed: false,
+        cloth: null,
+        clothed: undefined,
+        program: null,
+        uniforms: {},
+    };
+    parallelCompile;
     /** The last palette chosen, which an eye's axis is turned by. See `setSkinPalette`. */
     paletteData = null;
     emptyTexture2D;
@@ -626,7 +662,7 @@ export class WebGL2Renderer {
     oitReplaying = false;
     /** `uSurfaceScene`, resolved once a pass. See `surfaceScene.ts`. */
     surfaceScene = new Float32Array(4);
-    /** The two halves of `uWriteMode`, kept here because a `vec2` is written whole. */
+    /** The three lanes of `uWriteMode`, kept here because a `vec3` is written whole. */
     oitWeight = 0;
     /**
      * How the surfaces drawn next meet the medium: what `setSurfaceFog` set, and `FOG_RECEDE` from
@@ -634,6 +670,7 @@ export class WebGL2Renderer {
      */
     surfaceFog = FOG_RECEDE;
     ditherFade = 0;
+    ditherOpacity = 0;
     /** Said once, not per frame, where the context cannot give the float target the sum needs. */
     oitRefused = false;
     /** Said once for the whole renderer. See `refuseOitMultisampled`. */
@@ -802,6 +839,11 @@ export class WebGL2Renderer {
     depthCutoutUniforms;
     depthInstancedCutoutProgram;
     depthInstancedCutoutUniforms;
+    /** A crowd's casters: the instanced depth programs that play a bone animation. */
+    depthAnimatedProgram;
+    depthAnimatedUniforms;
+    depthAnimatedCutoutProgram;
+    depthAnimatedCutoutUniforms;
     scatterDepthProgram;
     scatterDepthUniforms;
     /** The sun's static, moving and peeled maps, as layers of one array. See `shadowMap.ts`. */
@@ -896,6 +938,28 @@ export class WebGL2Renderer {
     overlayTexture = null;
     /** Whether this device's lit stage has room for the overlay's vectors: asked once. */
     overlayRoom = null;
+    /**
+     * The matrix the sun's dynamic shadow pass was last drawn with, uncorrected, and whether one has
+     * been: what the moving layer is read through. See `movingLightFor`.
+     */
+    movingLightViewProj = new Float32Array(16);
+    movingLightKnown = false;
+    /** Whether the lit stage has room for the moving layer's matrix, and whether its refusal was said. */
+    movingRoom = null;
+    warnedMovingRoom = false;
+    /** The same answer for a material's projection, and whether its refusal was said. */
+    projectionRoom = null;
+    warnedProjectionRoom = false;
+    /** `uWorldUv`, the current material's projection packed. See `surfaceProjection.ts`. */
+    projection = new Float32Array(PROJECTION_FLOATS);
+    /** The current material's `diffuseTransmission`, `uGlassTint.w`, 0 to 1. */
+    diffuseTransmission = 0;
+    /** `uLayers`, the current material's layers packed. See `surfaceLayers.ts`. */
+    layerFloats = new Float32Array(LAYER_FLOATS);
+    /** Whether the lit stage has room for layers' two vectors, and which refusals were said. */
+    layersRoom = null;
+    warnedLayersRoom = false;
+    warnedLayersModelMap = false;
     warnedOverlayRoom = false;
     warnedOverlayBlocks = false;
     /** Whether a probe is being baked, so the passes that would recurse into one can tell. */
@@ -1205,14 +1269,21 @@ export class WebGL2Renderer {
             const count = Math.min(data.count, gpuBatch.capacity);
             if (count === 0)
                 return;
+            const clip = gpuBatch.animation;
+            if (clip !== null && clip.disposed)
+                return;
             this.shadowDrawBudget.ask();
             const twoSided = material?.doubleSided === true;
             if (twoSided)
                 gl.disable(gl.CULL_FACE);
             const cutout = cutoutOf(material);
             if (cutout !== null) {
-                gl.useProgram(this.depthInstancedCutoutProgram);
-                this.bindCutoutDepth(this.depthInstancedCutoutUniforms, cutout);
+                /* A crowd casts where its clip has moved it, through the animated variant. */
+                const uniforms = clip === null ? this.depthInstancedCutoutUniforms : this.depthAnimatedCutoutUniforms;
+                gl.useProgram(clip === null ? this.depthInstancedCutoutProgram : this.depthAnimatedCutoutProgram);
+                this.bindCutoutDepth(uniforms, cutout);
+                if (clip !== null)
+                    this.bindAnimation(uniforms, gpuBatch);
                 gpuBatch.draw(gl, count);
                 if (twoSided && this.depthPassCullsFaces)
                     gl.enable(gl.CULL_FACE);
@@ -1220,12 +1291,14 @@ export class WebGL2Renderer {
                 this.restoreSurfaceTextureUnit();
                 return;
             }
-            const u = this.depthInstancedUniforms;
-            gl.useProgram(this.depthInstancedProgram);
+            const u = clip === null ? this.depthInstancedUniforms : this.depthAnimatedUniforms;
+            gl.useProgram(clip === null ? this.depthInstancedProgram : this.depthAnimatedProgram);
             gl.uniformMatrix4fv(u['uLightViewProj'] ?? null, false, this.activeDepthViewProj);
             gl.uniform1i(u['uPeelShadowLayer'] ?? null, this.activeDepthPeel ? 1 : 0);
             if (this.activeDepthPeel)
                 gl.uniform1i(u['uPreviousShadowMap'] ?? null, 0);
+            if (clip !== null)
+                this.bindAnimation(u, gpuBatch);
             gpuBatch.draw(gl, count);
             if (twoSided && this.depthPassCullsFaces)
                 gl.enable(gl.CULL_FACE);
@@ -2091,6 +2164,14 @@ export class WebGL2Renderer {
          * Measured on an RX 9070 XT through ANGLE/Vulkan: offered. `scripts/depth-survey.mjs` is what
          * asks, and it also reports what WebGPU can do.
          */
+        /*
+         * Where draws skip a compile, the query that says a program is done without waiting for it;
+         * where the context has none, a program is waited for as it always was. See `modelProgram`.
+         */
+        this.parallelCompile =
+            this.quality.pipelineCompile === 'skip'
+                ? gl.getExtension('KHR_parallel_shader_compile')
+                : null;
         this.clipControl = gl.getExtension('EXT_clip_control');
         if (REVERSED_DEPTH && this.clipControl !== null) {
             this.clipControl.clipControlEXT(this.clipControl.LOWER_LEFT_EXT, this.clipControl.ZERO_TO_ONE_EXT);
@@ -2230,10 +2311,15 @@ export class WebGL2Renderer {
         this.depthCutoutUniforms = uniformLocations(gl, this.depthCutoutProgram, 'depth-cutout');
         this.depthInstancedCutoutProgram = compileProgram(gl, DEPTH_INSTANCED_CUTOUT_VERT, DEPTH_CUTOUT_FRAG, 'depth-instanced-cutout');
         this.depthInstancedCutoutUniforms = uniformLocations(gl, this.depthInstancedCutoutProgram, 'depth-instanced-cutout');
+        this.depthAnimatedProgram = compileProgram(gl, DEPTH_INSTANCED_ANIMATED_VERT, DEPTH_FRAG, 'depth-instanced-animated');
+        this.depthAnimatedUniforms = uniformLocations(gl, this.depthAnimatedProgram, 'depth-instanced-animated');
+        this.depthAnimatedCutoutProgram = compileProgram(gl, DEPTH_INSTANCED_ANIMATED_CUTOUT_VERT, DEPTH_CUTOUT_FRAG, 'depth-instanced-animated-cutout');
+        this.depthAnimatedCutoutUniforms = uniformLocations(gl, this.depthAnimatedCutoutProgram, 'depth-instanced-animated-cutout');
         /* The cutout map is always read from the surface unit, which the draw borrows and gives back. */
         for (const [program, uniforms] of [
             [this.depthCutoutProgram, this.depthCutoutUniforms],
             [this.depthInstancedCutoutProgram, this.depthInstancedCutoutUniforms],
+            [this.depthAnimatedCutoutProgram, this.depthAnimatedCutoutUniforms],
         ]) {
             gl.useProgram(program);
             gl.uniform1i(uniforms['uCutoutMap'] ?? null, SURFACE_TEXTURE_UNIT);
@@ -2330,7 +2416,33 @@ export class WebGL2Renderer {
      * this before its first frame gets the right behaviour on both without asking which backend
      * it has, which is the contract `RendererApi` exists to keep.
      */
-    async ready() { }
+    /**
+     * Resolve once every program a draw has started compiling has finished, adopting each: what a
+     * loading screen awaits after drawing what its scene will use, where draws skip a compile. See
+     * `RenderQuality.pipelineCompile`; nothing is started anywhere else here, so otherwise it is now.
+     *
+     * **It waits without holding the thread**, as the other backend's does: it asks the driver
+     * whether each is done, which does not wait, and yields between asks. A driver that never says
+     * done is asked the way that waits after `READY_MAX_POLLS`, so this cannot hang a loading screen.
+     */
+    async ready() {
+        for (let polls = 0; this.modelPending.size > 0 && !this.contextLost; polls++) {
+            for (const [key, started] of this.modelPending) {
+                const done = polls >= READY_MAX_POLLS ||
+                    this.parallelCompile === null ||
+                    this.gl.getProgramParameter(started.program, this.parallelCompile.COMPLETION_STATUS_KHR) === true;
+                if (!done)
+                    continue;
+                this.modelPending.delete(key);
+                this.adoptModel(key, finishProgram(this.gl, started), started.label);
+            }
+            this.useFlatProgram();
+            if (this.modelPending.size > 0) {
+                // platform: browser default — a yield between two asks of the driver, in a browser module
+                await new Promise((resolve) => setTimeout(resolve, READY_POLL_MS));
+            }
+        }
+    }
     dispose(options = {}) {
         if (this.disposed)
             return;
@@ -2401,6 +2513,8 @@ export class WebGL2Renderer {
                 this.lightVolumeProgram,
                 this.depthCutoutProgram,
                 this.depthInstancedCutoutProgram,
+                this.depthAnimatedProgram,
+                this.depthAnimatedCutoutProgram,
             ]) {
                 gl.deleteProgram(program);
             }
@@ -2718,7 +2832,7 @@ export class WebGL2Renderer {
     updateSurfaceTexture(texture, source) {
         if (this.contextLost)
             return;
-        texture.update(this.gl, source);
+        texture.update(this.gl, source, this.compressedFormats);
         /* New pixels are a new copy for the overlay's slot: see `SurfaceTexture.flatLayer`. */
         if (texture === this.overlayMaps)
             this.bindOverlayMaps(texture);
@@ -2783,7 +2897,30 @@ export class WebGL2Renderer {
             return held;
         const { gl } = this;
         const label = `flat.${variant}.${kind}.${half}`;
-        const program = compileProgram(gl, modelVertexOf(variant, kind), skinHalfBound(modelBound(this.flatFragSource, kind), half), label);
+        const vertex = modelVertexOf(variant, kind);
+        const fragment = skinHalfBound(modelBound(this.flatFragSource, kind), half);
+        /*
+         * **Where draws skip a compile, none until the driver says asking will not wait**: the program
+         * is started at the first draw that wants it and that draw, and every one before it is ready,
+         * is left out. See `RenderQuality.pipelineCompile`.
+         */
+        if (this.parallelCompile !== null) {
+            const started = this.modelPending.get(key);
+            if (started === undefined) {
+                this.modelPending.set(key, startProgram(gl, vertex, fragment, label));
+                return null;
+            }
+            if (gl.getProgramParameter(started.program, this.parallelCompile.COMPLETION_STATUS_KHR) !== true) {
+                return null;
+            }
+            this.modelPending.delete(key);
+            return this.adoptModel(key, finishProgram(gl, started), label);
+        }
+        return this.adoptModel(key, compileProgram(gl, vertex, fragment, label), label);
+    }
+    /** A model program compiled: kept, written to by every material setter, and fed the pass. */
+    adoptModel(key, program, label) {
+        const { gl } = this;
         const made = { program, uniforms: uniformLocations(gl, program, label) };
         this.modelFlat.set(key, made);
         this.flatTargets.push(made);
@@ -2929,6 +3066,13 @@ export class WebGL2Renderer {
         this.materialDoubleSided = material?.doubleSided === true;
         this.materialHasMaps = materialHasMaps(material);
         this.currentMaterial = material;
+        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, material?.modelMap);
@@ -2966,7 +3110,8 @@ export class WebGL2Renderer {
         const v = this.cutoutVector;
         v[0] = material?.cutout ?? 0;
         v[1] = CUTOUT_RESOLVE_CODE[this.cutoutResolveNow(material, translucent)];
-        v[2] = this.cutoutFrame;
+        /* z unused: the dither's frame is the pass's, in `uHighlightMin.w`. See `uCutout`. */
+        v[2] = 0;
         /* The material's lighting channels, which the lamps' are compared with. See `uCutout`. */
         v[3] = lightChannelsOf(material?.lightChannels);
         return v;
@@ -3052,10 +3197,17 @@ export class WebGL2Renderer {
          * and read neither — one decision for every program, as `setMaterial` says.
          */
         const modelMap = material?.modelMap ?? null;
+        /* A layered material's mask goes where a model's map would: see `SurfaceMaterial.layers`. */
+        const layers = this.layersOf(material);
+        const boundMap = modelMap ?? layers?.mask ?? null;
         gl.activeTexture(gl.TEXTURE0 + MODEL_MAP_TEXTURE_UNIT);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
-        if (modelMap !== null)
-            modelMap.bind(gl, MODEL_MAP_TEXTURE_UNIT);
+        if (boundMap !== null)
+            boundMap.bind(gl, MODEL_MAP_TEXTURE_UNIT);
+        packSurfaceLayers(layers, this.layerFloats);
+        if (layers !== null)
+            this.askLit('LAYERED');
+        gl.uniform4fv(u['uLayers'] ?? null, this.layerFloats);
         gl.uniform1i(u['uModelMap'] ?? null, MODEL_MAP_TEXTURE_UNIT);
         packModel(material?.model ?? null, modelMap !== null, this.modelParams, material?.physicalSpecular === true);
         /* The first physical highlight asked for is when the lit programs start carrying one. */
@@ -3064,6 +3216,16 @@ export class WebGL2Renderer {
         gl.uniform4fv(u['uModelParams'] ?? null, this.modelParams);
         /* The draw's overlay, which a program born mid-pass must wear too: see `setSurfaceOverlay`. */
         gl.uniform4fv(u['uOverlay'] ?? null, this.overlayFloats);
+        gl.uniform4fv(u['uWorldUv'] ?? null, this.projection);
+        /* How much light from behind the surface lets through, in the glass tint's spare lane. */
+        this.diffuseTransmission = Math.min(Math.max(material?.diffuseTransmission ?? 0, 0), 1) || 0;
+        gl.uniform4f(u['uGlassTint'] ?? null, 1, 1, 1, this.diffuseTransmission);
+        /* Maps placed by the world, where the material asks and the lit stage has room: worldUv.ts. */
+        const projection = material?.projection ?? null;
+        packSurfaceProjection(this.projectionFits(projection) ? projection : null, this.projection);
+        if (this.projection[0] > 0)
+            this.askLit('WORLD_UVS');
+        gl.uniform4fv(u['uWorldUv'] ?? null, this.projection);
         /* The albedo's effects table, or the stand-in the shader reads as none. Before the early
            return, so a material with no albedo still leaves a complete texture on the unit. */
         if (albedo === null) {
@@ -3157,8 +3319,22 @@ export class WebGL2Renderer {
     setSurfaceReflectivity(amount) {
         if (this.contextLost)
             return;
+        this.passReflectivity = Math.min(1, Math.max(0, amount));
+        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.
+     */
+    passReflectivity = 0;
+    passEnvironmentGain = 1;
+    materialReflectivity = null;
+    materialEnvironmentGain = null;
+    writeEnvironmentDials() {
         this.materials.dirty();
-        this.environmentDials[1] = Math.min(1, Math.max(0, amount));
+        this.environmentDials[1] = this.materialReflectivity ?? this.passReflectivity;
+        this.environmentDials[2] = this.materialEnvironmentGain ?? this.passEnvironmentGain;
         this.writeFlatVector('uEnvironmentDials', this.environmentDials);
     }
     /**
@@ -3214,14 +3390,98 @@ export class WebGL2Renderer {
     }
     /** What the lit shader at this renderer's budget leaves of the limit, with no overlay. */
     overlayRoomLeft() {
-        return (this.fragmentVectorLimit() - countUniformVectors(this.flatFragAt(this.lightBudget, false)));
+        return (this.fragmentVectorLimit() -
+            countUniformVectors(this.flatFragAt(this.lightBudget, { SURFACE_OVERLAY: false })));
     }
     /** Whether the lit shader with the overlay compiled in fits this GPU: counted once. */
     overlayFits() {
-        this.overlayRoom ??=
-            countUniformVectors(this.flatFragAt(this.lightBudget, true)) <= this.fragmentVectorLimit();
+        this.overlayRoom ??= this.switchFits('SURFACE_OVERLAY');
         return this.overlayRoom;
     }
+    /**
+     * Whether a material's projection can be drawn: none asked, or the lit stage has the room for its
+     * one vector. **Refused, said once, where it has not**, as the overlay is, and the material's
+     * maps are then laid by the mesh's coordinates, as they were before it existed.
+     */
+    projectionFits(projection) {
+        if (!projects(projection))
+            return true;
+        this.projectionRoom ??= this.switchFits('WORLD_UVS');
+        if (!this.projectionRoom && !this.warnedProjectionRoom) {
+            this.warnedProjectionRoom = true;
+            console.warn("Renderer: a material's projection is refused on this device. It takes one fragment " +
+                'uniform vector and the lit shader already uses all ' +
+                `${this.fragmentVectorLimit()} this GPU offers; its maps follow the mesh's coordinates. ` +
+                'A lower `maxLights` makes the room, or WebGPU has it.');
+        }
+        return this.projectionRoom;
+    }
+    /**
+     * What the sun's moving layer is read through: the matrix its shadow pass was last drawn with,
+     * where the lit stage carries one (`MOVING_SUN`); the environment's otherwise, which every caller
+     * drawing both layers with one matrix hands it anyway.
+     */
+    movingLightFor(env) {
+        return this.movingLightKnown && this.litOn.MOVING_SUN
+            ? this.movingLightViewProj
+            : env.lightViewProj;
+    }
+    /**
+     * Turn the moving layer's own matrix on the first time a frame draws that layer with one the
+     * environment's does not share. **Refused, said once, where the lit stage has no room for its five
+     * vectors**: the layer is then read through the environment's matrix, so its shadows land where
+     * that matrix puts them, and a caller there draws both layers with one.
+     */
+    askMovingSun(env) {
+        if (this.litWanted.MOVING_SUN || !this.movingLightKnown)
+            return;
+        if (sameMatrix(this.movingLightViewProj, env.lightViewProj))
+            return;
+        this.movingRoom ??= this.switchFits('MOVING_SUN');
+        if (this.movingRoom) {
+            this.askLit('MOVING_SUN');
+            return;
+        }
+        if (this.warnedMovingRoom)
+            return;
+        this.warnedMovingRoom = true;
+        console.warn("Renderer: the sun's moving layer cannot be read through a matrix of its own on this " +
+            'device; it takes five fragment uniform vectors the lit shader does not have. It is read ' +
+            "through the environment's `lightViewProj`, so draw the dynamic shadow pass with that " +
+            'matrix here, or lower `maxLights` to make the room. WebGPU has it.');
+    }
+    /**
+     * A material's layers where they can be drawn: none asked, a model's map in the mask's place, or
+     * no room for their two vectors each leave one layer, the last two said once each.
+     */
+    layersOf(material) {
+        const layers = material?.layers ?? null;
+        if (layers === null || layers.repeats.length === 0)
+            return null;
+        if ((material?.modelMap ?? null) !== null) {
+            if (!this.warnedLayersModelMap) {
+                this.warnedLayersModelMap = true;
+                console.warn("Renderer: a material's layers are drawn as one: its mask is read where a model's map " +
+                    'goes, and this material carries a `modelMap` too.');
+            }
+            return null;
+        }
+        this.layersRoom ??= this.switchFits('LAYERED');
+        if (this.layersRoom)
+            return layers;
+        if (!this.warnedLayersRoom) {
+            this.warnedLayersRoom = true;
+            console.warn("Renderer: a material's layers are refused on this device. They take two fragment uniform " +
+                'vectors the lit shader does not have; the material is drawn as its base layer. A lower ' +
+                '`maxLights` makes the room, or WebGPU has it.');
+        }
+        return null;
+    }
+    /** Whether the lit shader with `feature` compiled in fits this GPU's fragment uniform vectors. */
+    switchFits(feature) {
+        const asIf = { [feature]: true };
+        return (countUniformVectors(this.flatFragAt(this.lightBudget, asIf)) <= this.fragmentVectorLimit());
+    }
     /**
      * How bright the environment the surfaces drawn next reflect is. 1 is the default and identity.
      *
@@ -3237,9 +3497,8 @@ export class WebGL2Renderer {
     setEnvironmentGain(gain) {
         if (this.contextLost)
             return;
-        this.materials.dirty();
-        this.environmentDials[2] = Math.max(0, gain);
-        this.writeFlatVector('uEnvironmentDials', this.environmentDials);
+        this.passEnvironmentGain = Math.max(0, gain);
+        this.writeEnvironmentDials();
     }
     /**
      * Kept as a no-op that says so once, because it was a stand-in for a term that now exists.
@@ -3364,9 +3623,37 @@ export class WebGL2Renderer {
         }
         this.useFlatProgram();
     }
-    /** `uWriteMode`: the order-independent weight and the dither, which share one uniform row. */
+    /**
+     * Whether the draws that follow spend their own opacity on a screen door rather than on blending:
+     * an instance's `MeshInstances.alphas`, or a vertex's channel alpha, keeps that share of the
+     * pixels `setDitherFade` would and draws the rest not at all. So an opaque or cut-out batch fades
+     * one instance at a time, with no sorting and no blend, and an instance at 1 is drawn whole.
+     *
+     * Off is what `bindMeshPass` restores. It shares the fade's pattern, so a crossfade at `t` and
+     * `-t` of an instance at opacity `a` covers that instance's share once, without holes. Material
+     * state like `setDitherFade`; instanced draws read it, and shadow casters do not.
+     *
+     * What it gives up: a fade reads as grain while it lasts, which a temporal resolve smooths and a
+     * plain frame does not; a blended draw that asks spends its opacity here and blends none of it;
+     * and a lightmapped batch carries regions where the opacities would be, so it has none to fade.
+     */
+    setDitherOpacity(on) {
+        if (this.contextLost)
+            return;
+        this.materials.dirty();
+        this.ditherOpacity = on ? 1 : 0;
+        for (const target of this.flatTargets) {
+            this.gl.useProgram(target.program);
+            this.writeMode(target.uniforms);
+        }
+        this.useFlatProgram();
+    }
+    /**
+     * `uWriteMode`: the order-independent weight, the fade and whether the opacity is dithered, which
+     * share one uniform row.
+     */
     writeMode(u) {
-        this.gl.uniform2f(u['uWriteMode'] ?? null, this.oitWeight, this.ditherFade);
+        this.gl.uniform3f(u['uWriteMode'] ?? null, this.oitWeight, this.ditherFade, this.ditherOpacity);
     }
     /**
      * How strong the microscopic relief on the surfaces drawn next is, and how coarse.
@@ -3508,8 +3795,95 @@ export class WebGL2Renderer {
             throw new Error('WebGL2: a skinned mesh cannot be instanced — an instanced draw binds the two attribute ' +
                 'locations the joint indices and weights occupy, and this mesh supplies them.');
         }
+        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 && !mesh.hasGrain) {
+            throw new Error('WebGL2: a bone animation reads each vertex’s bone from the mesh’s second coordinates ' +
+                '(`MeshData.lightmapUvs`), and this mesh has none.');
+        }
         this.ensureInstancedProgram();
-        return new InstancedBatch(this.gl, mesh, capacity, options.cull ?? false);
+        if (animation !== null)
+            this.ensureAnimatedProgram();
+        return new InstancedBatch(this.gl, mesh, capacity, options.cull ?? false, animation);
+    }
+    /**
+     * A bone animation an instanced batch can play (`InstancedOptions.animation`): per frame, a turn
+     * and a place for each bone, which every vertex of the batch's mesh follows — the bone its second
+     * coordinates' u names, times `boneScale` — at each instance's own moment of the clip. What a
+     * crowd is made of: every instance moves at the frame's rate on its own clock, in the colour pass
+     * and in every shadow, with nothing on the processor after this. See `boneAnimation.ts` for the
+     * clip's layout and the arithmetic, which both backends run.
+     *
+     * What it gives up against skinning is the blend: a vertex follows one bone. Refused, with what
+     * was wrong, for a clip whose numbers are not its size, or past 2,048 bones or frames.
+     */
+    createBoneAnimation(clip) {
+        return new GlBoneAnimation(this.gl, packBoneAnimation(clip));
+    }
+    /** Release a clip. A batch still playing it draws nothing, and casts nothing, after. */
+    disposeBoneAnimation(animation) {
+        const clip = animation;
+        if (this.contextLost || clip.disposed)
+            return;
+        clip.dispose(this.gl);
+    }
+    /**
+     * The clock a bone animation plays by this frame, in seconds on the caller's clock: an instance's
+     * moment is this times its rate plus its phase (`MeshInstances.clocks`). **Set it before the
+     * shadows are drawn**, once a frame, as the wind is set: a shadow drawn under one clock and its
+     * caster under another come apart at the frame's rate. 0 until set, which holds every crowd at
+     * the moment its phases name.
+     */
+    setAnimationTime(seconds) {
+        if (Number.isFinite(seconds))
+            this.animationTime = seconds;
+    }
+    /** The clock `setAnimationTime` set. */
+    animationTime = 0;
+    /**
+     * An animated batch's clip, clocks and numbers into whichever program is bound: the three vertex
+     * textures on units of their own (`lightBudget.ts`), the clip's speed and bone scale, the clock.
+     */
+    bindAnimation(u, batch) {
+        const clip = batch.animation;
+        const clocks = batch.clocks;
+        if (clip === null || clocks === null)
+            return;
+        const { gl } = this;
+        gl.activeTexture(gl.TEXTURE0 + BONE_PLACES_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, clip.places);
+        gl.activeTexture(gl.TEXTURE0 + BONE_TURNS_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, clip.turns);
+        gl.activeTexture(gl.TEXTURE0 + INSTANCE_CLOCKS_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, clocks.texture);
+        gl.uniform1i(u['uBonePlaces'] ?? null, BONE_PLACES_TEXTURE_UNIT);
+        gl.uniform1i(u['uBoneTurns'] ?? null, BONE_TURNS_TEXTURE_UNIT);
+        gl.uniform1i(u['uInstanceClocks'] ?? null, INSTANCE_CLOCKS_TEXTURE_UNIT);
+        gl.uniform2f(u['uBoneClip'] ?? null, clip.framesPerSecond, clip.boneScale);
+        gl.uniform1f(u['uSceneTime'] ?? null, this.animationTime);
+    }
+    /** The animated instanced program, compiled on first use. See `ensureInstancedProgram`. */
+    flatAnimatedProgram = null;
+    flatAnimatedUniforms = null;
+    /** Compile the animated variant, once, and feed it this frame's pass state. */
+    ensureAnimatedProgram() {
+        if (this.contextLost || this.flatAnimatedProgram !== null)
+            return;
+        const { gl } = this;
+        const program = compileProgram(gl, flatVert({ skinned: false, morphed: false, instanced: true, animated: true }), this.flatFragSource, 'flat.animated');
+        const uniforms = uniformLocations(gl, program, 'flat.animated');
+        this.flatAnimatedProgram = program;
+        this.flatAnimatedUniforms = uniforms;
+        this.flatTargets.push({ program, uniforms });
+        const camera = this.lastPassCamera;
+        const env = this.lastPassEnv;
+        if (camera !== null && env !== null) {
+            gl.useProgram(program);
+            this.writeMeshPassState(uniforms, camera, env);
+            this.writeMaterialState(uniforms, this.currentMaterial);
+            this.useFlatProgram();
+        }
     }
     /** Push placement and colour. Only the live prefix. */
     uploadInstanced(batch, data) {
@@ -3562,18 +3936,32 @@ export class WebGL2Renderer {
         const culling = !blend && batch.cull;
         if (culling && !batchBoxVisible(batch.box, this.frustum, this.occlusion))
             return;
+        /* A batch playing a bone animation takes the animated variant; a disposed clip draws nothing. */
+        const clip = batch.animation;
+        if (clip !== null && clip.disposed)
+            return;
         this.drawBudget.ask();
         this.ensureInstancedProgram();
+        if (clip !== null)
+            this.ensureAnimatedProgram();
         /* A material with a model takes that model's instanced program; see `modelProgram`. */
         const modelKind = this.currentMaterial?.model?.kind ?? null;
-        const modelled = modelKind === null ? null : this.modelProgram('instanced', modelKind);
-        const program = modelled?.program ?? this.flatInstancedProgram;
-        const u = modelled?.uniforms ?? this.flatInstancedUniforms;
+        const modelled = modelKind === null
+            ? null
+            : this.modelProgram(clip === null ? 'instanced' : 'animated', modelKind);
+        /* Its model's program still compiling, where draws skip a compile: left out until it lands. */
+        if (modelKind !== null && modelled === null)
+            return;
+        const program = modelled?.program ?? (clip === null ? this.flatInstancedProgram : this.flatAnimatedProgram);
+        const u = modelled?.uniforms ??
+            (clip === null ? this.flatInstancedUniforms : this.flatAnimatedUniforms);
         if (program === null || u === null)
             return;
         const { gl } = this;
         gl.useProgram(program);
         gl.uniform1i(u['uHasTangents'] ?? null, mesh.hasTangents ? 1 : 0);
+        if (clip !== null)
+            this.bindAnimation(u, batch);
         const lit = options.lit ?? true;
         /* Added light fades in the medium rather than receding into it. See `drawFog.ts`. */
         const fog = fogModeOf(options.fog ?? true, blend && options.additive === true);
@@ -3643,10 +4031,14 @@ export class WebGL2Renderer {
         const keeps = !blend && this.reflectionKeeps();
         if (keeps)
             this.reflectionTargets?.on();
-        if (culling && cullsInstances(count, mesh.indexCount))
+        /* An animated batch reads its clocks by instance index, which the culled copy would reorder:
+           it is culled whole and never instance by instance. */
+        if (culling && clip === null && cullsInstances(count, mesh.indexCount)) {
             batch.drawCulled(gl, data, this.frustum);
-        else
+        }
+        else {
             batch.draw(gl, count);
+        }
         if (keeps)
             this.reflectionTargets?.off();
         if (coverage)
@@ -3710,8 +4102,11 @@ export class WebGL2Renderer {
         const glass = this.glassScratch;
         /* Strength, path thickness, transmission, frost: one vector, for the budget the shader states. */
         gl.uniform4f(u['uSeeThrough'] ?? null, Math.max(refraction, 0), options.thicknessM ?? 0, glass.transmission, glass.frost);
-        gl.uniform3fv(u['uRefractTint'] ?? null, options.refractTint ?? WHITE_TINT);
-        gl.uniform3fv(u['uGlassTint'] ?? null, glass.tint);
+        /* w: this framebuffer's first row is the bottom, so up the screen is up the rows. */
+        const tint = options.refractTint ?? WHITE_TINT;
+        gl.uniform4f(u['uRefractTint'] ?? null, tint[0] ?? 1, tint[1] ?? 1, tint[2] ?? 1, 1);
+        /* The pane's colour; w is the material's light through from behind, which glass never reads. */
+        gl.uniform4f(u['uGlassTint'] ?? null, glass.tint[0] ?? 1, glass.tint[1] ?? 1, glass.tint[2] ?? 1, this.diffuseTransmission);
         return true;
     }
     /** Put back what `bindSeeThrough` bound: the binding outlives its frame (the 2026-08-27 rule). */
@@ -4599,6 +4994,11 @@ export class WebGL2Renderer {
         this.shadowPassActive = true;
         this.activeSunLayer = layer;
         this.glassCasters.clear();
+        /* The moving layer is read through the matrix it is drawn with: see `movingLightFor`. */
+        if (layer === 'dynamic') {
+            this.movingLightViewProj.set(lightViewProj);
+            this.movingLightKnown = true;
+        }
         /* The static layer opens first, so a frame's peel counts from here. See `peelFilled`. */
         if (layer === 'static')
             this.peelFilled = false;
@@ -4753,6 +5153,69 @@ export class WebGL2Renderer {
             return;
         casters(this.casterSink);
     }
+    /**
+     * Draws that do not change between frames, enumerated once and kept: what a stage, a set or any
+     * world that stands still draws, recorded so a frame replays it rather than issuing it.
+     *
+     * **The same enumeration `drawSceneCasters` takes**, called once, here: rigid meshes and instanced
+     * batches, each with its material. A skinned mesh or a scatter batch is refused by name, since
+     * both change every frame. What it captures is what the enumeration said at the time — the
+     * matrices and the instance counts are copied, so a caller's scratch is free to move on — while
+     * the meshes, batches, textures and materials stay the caller's: a list must be disposed, or made
+     * again, before anything it holds is, and made again when a material it holds is changed.
+     *
+     * **What it is for is the frame's processor time.** WebGPU records the list into a render bundle
+     * per view and replays it with one call, where a draw issued a frame at a time costs its encoding
+     * every frame and again for every view that draws it. This backend has no bundles and replays the
+     * entries through the scene-caster path every frame, at the cost a frame drawing them itself pays;
+     * the picture is the same.
+     *
+     * What a list gives up against drawing each frame is culling: every entry is drawn in every view,
+     * because a bundle cannot leave one out. A world split into lists by region culls by list.
+     */
+    createStaticDraws(casters) {
+        return captureStaticDraws(casters);
+    }
+    /**
+     * Draw a list into the open mesh pass, under the camera, the lights and the fog `bindMeshPass`
+     * set — the frame's, a mirror's, a capture's. Opaque draws, through each entry's material.
+     *
+     * **Its draws are rigid and wear no overlay**, so a skin palette, morph weights, cloth or a surface
+     * overlay set before it is put back to none, as `bindMeshPass` puts an overlay back; and no
+     * material is left set after it, which is what `setMaterial(null)` leaves. The state a pass set —
+     * the grain, the relief, the fog, the grade — is the list's to draw with, as it is any draw's, and
+     * a list drawn under a different one is recorded again for it on WebGPU.
+     */
+    drawStaticDraws(draws) {
+        if (this.contextLost)
+            return;
+        const list = draws;
+        if (list.disposed) {
+            this.warnStaticDisposed();
+            return;
+        }
+        this.setSkinPalette(null);
+        this.setMorphWeights(null);
+        this.setCloth(null);
+        this.setSurfaceOverlay(null);
+        this.setMaterial(null);
+        this.sceneCasterMaterial = undefined;
+        replayStaticDraws(list, this.sceneCasterSink);
+        this.setMaterial(null);
+        this.sceneCasterMaterial = undefined;
+    }
+    /** Release a list. Its meshes, batches and materials are the caller's and are not released. */
+    disposeStaticDraws(draws) {
+        draws.disposed = true;
+    }
+    /** 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;
     /**
      * Draw the pass's glass twice: where the nearest pane is, and what the panes let through.
      *
@@ -4934,7 +5397,9 @@ export class WebGL2Renderer {
      * throws a sentence with the device's numbers in it rather than a bare driver string.
      */
     /** The lit fragment source this renderer's profile compiles, at a light budget. */
-    flatFragAt(budget, overlay = this.litOn.SURFACE_OVERLAY) {
+    flatFragAt(budget, 
+    /* A switch counted as it would be, for asking whether it fits: see `switchFits`. */
+    asIf = {}) {
         return flatFrag({
             pointShadows: this.quality.pointShadows,
             directionalShadows: this.quality.directionalShadows,
@@ -4947,8 +5412,11 @@ export class WebGL2Renderer {
             surfaceEffects: this.litOn.SURFACE_EFFECTS,
             driftLight: this.litOn.DRIFT_LIGHT,
             physicalSpecular: this.litOn.PHYSICAL_SPECULAR,
-            surfaceOverlay: overlay,
+            surfaceOverlay: asIf.SURFACE_OVERLAY ?? this.litOn.SURFACE_OVERLAY,
             reflectionMaps: this.litOn.REFLECTION_MAPS,
+            worldUvs: asIf.WORLD_UVS ?? this.litOn.WORLD_UVS,
+            movingSun: asIf.MOVING_SUN ?? this.litOn.MOVING_SUN,
+            layered: asIf.LAYERED ?? this.litOn.LAYERED,
             maxLights: budget.maxLights,
             maxAreaLights: budget.maxAreaLights,
         });
@@ -4965,10 +5433,10 @@ export class WebGL2Renderer {
         const { gl } = this;
         Object.assign(this.litOn, this.litWanted);
         this.flatFragSource = this.flatFragAt(this.lightBudget);
-        const recompile = (old, skinned, morphed, instanced, label, eight = false) => {
+        const recompile = (old, skinned, morphed, instanced, label, eight = false, animated = false) => {
             if (old === null)
                 return null;
-            const vertex = flatVert({ skinned, morphed, instanced });
+            const vertex = flatVert({ skinned, morphed, instanced, animated });
             const program = compileProgram(gl, eight ? skinEight(vertex) : vertex, this.flatFragSource, label);
             gl.deleteProgram(old);
             return { program, uniforms: uniformLocations(gl, program, label) };
@@ -4996,6 +5464,9 @@ export class WebGL2Renderer {
         const instanced = recompile(this.flatInstancedProgram, false, false, true, 'flat.instanced');
         this.flatInstancedProgram = instanced?.program ?? null;
         this.flatInstancedUniforms = instanced?.uniforms ?? null;
+        const animated = recompile(this.flatAnimatedProgram, false, false, true, 'flat.animated', false, true);
+        this.flatAnimatedProgram = animated?.program ?? null;
+        this.flatAnimatedUniforms = animated?.uniforms ?? null;
         for (const [key, entry] of this.clothFlat) {
             const eight = key.startsWith('8');
             const withMorph = key.endsWith('m');
@@ -5005,6 +5476,10 @@ export class WebGL2Renderer {
             gl.deleteProgram(entry.program);
             this.clothFlat.set(key, { program, uniforms: uniformLocations(gl, program, label) });
         }
+        /* Started against the source before this switch: begun again at the next draw that asks. */
+        for (const started of this.modelPending.values())
+            gl.deleteProgram(started.program);
+        this.modelPending.clear();
         for (const [key, entry] of this.modelFlat) {
             const [variant, kind, half] = key.split('|');
             const label = `flat.${variant}.${kind}.${half}`;
@@ -5013,7 +5488,7 @@ export class WebGL2Renderer {
             this.modelFlat.set(key, { program, uniforms: uniformLocations(gl, program, label) });
         }
         this.flatTargets.length = 0;
-        for (const target of [plain, skinned, morphed, both, skinned8, both8, instanced]) {
+        for (const target of [plain, skinned, morphed, both, skinned8, both8, instanced, animated]) {
             if (target !== null)
                 this.flatTargets.push(target);
         }
@@ -6544,6 +7019,7 @@ export class WebGL2Renderer {
                     ambient: env?.ambient ?? [0, 0, 0],
                     sunShadow,
                     lightViewProj: env?.lightViewProj ?? IDENTITY_MAT4,
+                    movingLightViewProj: env === null ? IDENTITY_MAT4 : this.movingLightFor(env),
                     /* The placeholder rather than null where a map is merely absent, for the reason
                        `emptyTexture.ts` gives. It is black, which as a depth is an occluder at the light,
                        so it is safe only because `sunShadow` is 0 whenever these maps do not exist. */
@@ -6777,15 +7253,31 @@ export class WebGL2Renderer {
         this.currentSurfaceTexture = null;
         /* Nor an overlay: the atlas's unit is given the empty texture with the refraction copy's. */
         this.overlayFloats.fill(0);
+        /* Nor a projection: maps follow the mesh's coordinates until a material asks otherwise. */
+        this.projection.fill(0);
+        /* Nor light through from behind. See `SurfaceMaterial.diffuseTransmission`. */
+        this.diffuseTransmission = 0;
+        /* Nor layers: one layer until a material asks for more. */
+        this.layerFloats.fill(0);
         this.overlayMaps = null;
         this.overlayTexture = null;
         /* Nor an ambient of its own: the frame's, until a draw asks. See `setAmbientSH`. */
         this.ambientSH.fill(0);
         /* No reflection and an environment at its own brightness; the emission the world asks for. */
+        this.passReflectivity = 0;
+        this.passEnvironmentGain = 1;
+        this.materialReflectivity = null;
+        this.materialEnvironmentGain = null;
         this.environmentDials[1] = 0;
         this.environmentDials[2] = 1;
         this.emission[0] = env.emissiveGain;
         this.emission[1] = env.nightFactor;
+        /* The moving layer's own matrix, the first time a frame draws that layer with one. */
+        this.askMovingSun(env);
+        /* No dither and no weighting: every draw whole, until a crossfade or an opacity asks. */
+        this.oitWeight = 0;
+        this.ditherFade = 0;
+        this.ditherOpacity = 0;
         for (const target of this.flatTargets) {
             this.gl.useProgram(target.program);
             this.writeMeshPassState(target.uniforms, camera, env);
@@ -6908,11 +7400,14 @@ export class WebGL2Renderer {
         gl.uniform1i(u['uRefractScene'] ?? null, REFRACT_SCENE_TEXTURE_UNIT);
         /* The draws' overlay, none at a pass's start, and its atlas above: see `setSurfaceOverlay`. */
         gl.uniform4fv(u['uOverlay'] ?? null, this.overlayFloats);
+        gl.uniform4fv(u['uWorldUv'] ?? null, this.projection);
+        gl.uniform4fv(u['uLayers'] ?? null, this.layerFloats);
         /* Neither refracting nor glass, which is every draw that does not say otherwise. See
            `bindSeeThrough` for the four numbers in the one vector. */
         gl.uniform4f(u['uSeeThrough'] ?? null, 0, 0, 0, 0);
-        gl.uniform3fv(u['uRefractTint'] ?? null, WHITE_TINT);
-        gl.uniform3fv(u['uGlassTint'] ?? null, WHITE_TINT);
+        gl.uniform4f(u['uRefractTint'] ?? null, 1, 1, 1, 1);
+        /* White, and no light through from behind: no material at a pass's start. */
+        gl.uniform4f(u['uGlassTint'] ?? null, 1, 1, 1, this.diffuseTransmission);
         gl.uniform3fv(u['uDirectionalDir'] ?? null, env.directionalDir);
         gl.uniform3fv(u['uDirectionalColor'] ?? null, env.directionalColor);
         gl.uniform3fv(u['uAmbient'] ?? null, env.ambient);
@@ -6979,10 +7474,9 @@ export class WebGL2Renderer {
         this.surfaceFog = FOG_RECEDE;
         /* Grain on by default, so every scene written before it was a choice looks unchanged. */
         gl.uniform1f(u['uGrain'] ?? null, 1);
-        /* No dither and no weighting: every draw whole, until a crossfade asks. See `setDitherFade`. */
-        this.oitWeight = 0;
-        this.ditherFade = 0;
-        gl.uniform2f(u['uWriteMode'] ?? null, 0, 0);
+        /* The weighting and the dither as they stand, which `bindMeshPass` has just cleared: a program
+           built in the middle of a pass takes what the caller set. See `setDitherFade`. */
+        this.writeMode(u);
         /* The draw's own ambient as it stands, which `bindMeshPass` has just cleared: a program built
            in the middle of a pass takes what the caller set. See `setAmbientSH`. */
         gl.uniform4fv(u['uAmbientSH[0]'] ?? null, this.ambientSH);
@@ -7021,11 +7515,18 @@ export class WebGL2Renderer {
         gl.uniform1f(u['uShadowStrength'] ?? null, this.sunShadows === null ? 0 : env.shadowStrength);
         gl.uniform1f(u['uShadowMapSize'] ?? null, this.quality.directionalShadowMapSize);
         gl.uniform1f(u['uShadowDepthSpan'] ?? null, env.shadowDepthSpan);
+        /* The moving layer's own matrix and span, where the program reads one: see `movingLightFor`. */
+        const moving = this.movingLightFor(env);
+        gl.uniformMatrix4fv(u['uMovingLightViewProj'] ?? null, false, moving);
+        gl.uniform1f(u['uMovingShadowDepthSpan'] ?? null, orthographicDepthSpan(moving));
         gl.uniform1f(u['uShadowMaxDistance'] ?? null, this.quality.directionalShadowMaxDistance);
         gl.uniform1i(u['uPeeledShadowEnabled'] ?? null, this.peelFilled ? 1 : 0);
         gl.uniform1f(u['uShadowMaxSlope'] ?? null, this.quality.directionalShadowMaxSlope);
         gl.uniform1i(u['uShadowFilterTaps'] ?? null, this.quality.shadowFilterTaps);
-        gl.uniform3fv(u['uHighlightMin'] ?? null, env.highlightMin);
+        /* The near corner, and in its w the frame the cutout dither moves with. See `uHighlightMin`.
+           An environment written by hand may leave the box out, as the far corner says below. */
+        const min = env.highlightMin;
+        gl.uniform4f(u['uHighlightMin'] ?? null, min?.[0] ?? 0, min?.[1] ?? 0, min?.[2] ?? 0, this.cutoutFrame);
         /* The far corner, and the gain in its w. See `uHighlightMax`. */
         /* An environment written by hand may leave the box out; then there is none, as before. */
         const max = env.highlightMax ?? NO_HIGHLIGHT;
@@ -7328,6 +7829,9 @@ export class WebGL2Renderer {
          * light and its colour, each into the blur's own target.
          */
         const splits = this.skinSplits();
+        /* A split skin draws its three halves or none, where a half may still be compiling. */
+        if (splits && this.parallelCompile !== null && !this.skinHalvesReady(mesh))
+            return;
         /* An opaque lit draw into the frame writes its material's reflection too: see `reflectionKeeps`. */
         const keeps = this.reflectionKeeps();
         if (keeps)
@@ -7406,8 +7910,25 @@ export class WebGL2Renderer {
         this.useFlatProgram();
     }
     /** One draw of a mesh, as `drawMesh` describes, of the half of a skin `half` names. */
-    drawMeshHalf(mesh, model, depthLayer, tint, half) {
-        const { gl } = this;
+    /**
+     * Whether every half a split skin draws has its program, starting any that has not: a skin drawn
+     * without its kept halves would lose its diffuse light for the frames they take to compile.
+     */
+    skinHalvesReady(mesh) {
+        const variant = this.drawVariantOf(mesh).name;
+        let ready = true;
+        for (const half of SPLIT_SKIN_HALVES) {
+            if (this.modelProgram(variant, 'skin', half) === null)
+                ready = false;
+        }
+        return ready;
+    }
+    /**
+     * The vertex variant a draw of `mesh` takes now, and its program and uniforms where it is not the
+     * plain one: what a model's program is keyed by, and what `drawMeshHalf` draws with.
+     */
+    drawVariantOf(mesh) {
+        const out = this.drawVariant;
         /*
          * A rigged mesh takes the skinned program, an unrigged one the plain program.
          *
@@ -7435,9 +7956,8 @@ export class WebGL2Renderer {
          * when none were asked for — an unbound sampler would default to a shadow map's unit.
          */
         const cloth = wantSkin ? this.cloth : null;
-        const clothed = cloth === null
-            ? undefined
-            : this.clothFlat.get(`${eight ? 8 : 4}|${mesh.morph !== null ? 'm' : '-'}`);
+        const clothKey = `${eight ? 8 : 4}|${mesh.morph !== null ? 'm' : '-'}`;
+        const clothed = cloth === null ? undefined : this.clothFlat.get(clothKey);
         const bothUniforms = eight ? this.flatBoth8Uniforms : this.flatBothUniforms;
         const skinnedUniforms = eight ? this.flatSkinned8Uniforms : this.flatSkinnedUniforms;
         const both = wantSkin && wantMorph && bothUniforms !== null;
@@ -7450,24 +7970,27 @@ export class WebGL2Renderer {
                 : morphed
                     ? this.flatMorphedUniforms
                     : null;
-        let u = clothed?.uniforms ?? variant ?? this.flatUniforms;
-        let program = clothed !== undefined
-            ? clothed.program
-            : skinned && morphed
-                ? eight
-                    ? this.flatBoth8Program
-                    : this.flatBothProgram
-                : skinned
+        out.skinned = skinned;
+        out.morphed = morphed;
+        out.cloth = cloth;
+        out.clothed = clothed;
+        out.uniforms = clothed?.uniforms ?? variant ?? this.flatUniforms;
+        out.program =
+            clothed !== undefined
+                ? clothed.program
+                : skinned && morphed
                     ? eight
-                        ? this.flatSkinned8Program
-                        : this.flatSkinnedProgram
-                    : morphed
-                        ? this.flatMorphedProgram
-                        : null;
-        /* A material with a model takes that model's program for the same vertex variant. */
-        const modelKind = this.currentMaterial?.model?.kind ?? null;
-        if (modelKind !== null) {
-            const modelled = this.modelProgram(clothed !== undefined
+                        ? this.flatBoth8Program
+                        : this.flatBothProgram
+                    : skinned
+                        ? eight
+                            ? this.flatSkinned8Program
+                            : this.flatSkinnedProgram
+                        : morphed
+                            ? this.flatMorphedProgram
+                            : null;
+        out.name =
+            clothed !== undefined
                 ? `cloth${eight ? 8 : 4}${mesh.morph !== null ? 'm' : '-'}`
                 : skinned && morphed
                     ? eight
@@ -7479,7 +8002,22 @@ export class WebGL2Renderer {
                             : 'skinned'
                         : morphed
                             ? 'morphed'
-                            : 'plain', modelKind, half);
+                            : 'plain';
+        return out;
+    }
+    drawMeshHalf(mesh, model, depthLayer, tint, half) {
+        const { gl } = this;
+        const drawn = this.drawVariantOf(mesh);
+        const { skinned, morphed, cloth, clothed } = drawn;
+        let u = drawn.uniforms;
+        let program = drawn.program;
+        /* A material with a model takes that model's program for the same vertex variant. */
+        const modelKind = this.currentMaterial?.model?.kind ?? null;
+        if (modelKind !== null) {
+            const modelled = this.modelProgram(drawn.name, modelKind, half);
+            /* Still compiling, where draws skip a compile: left out until it lands. */
+            if (modelled === null)
+                return;
             program = modelled.program;
             u = modelled.uniforms;
         }
@@ -7658,6 +8196,9 @@ export class WebGL2Renderer {
         /* A material with a model takes that model's plain program; see `modelProgram`. */
         const modelKind = this.currentMaterial?.model?.kind ?? null;
         const modelled = modelKind === null ? null : this.modelProgram('plain', modelKind);
+        /* Still compiling, where draws skip a compile: left out until it lands. */
+        if (modelKind !== null && modelled === null)
+            return;
         const u = modelled?.uniforms ?? this.flatUniforms;
         if (modelled === null)
             this.useFlatProgram();
@@ -8137,6 +8678,7 @@ export class WebGL2Renderer {
                 /* Uncorrected, for the reason the lit program's copy of this line carries: the shaft's
                    lookup does its own `* 0.5 + 0.5` and correcting the matrix as well doubles it. */
                 gl.uniformMatrix4fv(u['uLightViewProj'] ?? null, false, env.lightViewProj);
+                gl.uniformMatrix4fv(u['uMovingLightViewProj'] ?? null, false, this.movingLightFor(env));
                 gl.uniform1f(u['uShadowMapSize'] ?? null, this.quality.directionalShadowMapSize);
                 gl.uniform1i(u['uPeeledShadowEnabled'] ?? null, this.peelFilled ? 1 : 0);
                 gl.activeTexture(gl.TEXTURE0);
@@ -8350,6 +8892,12 @@ function litVertexOf(variant) {
     }
     const skinned = variant.startsWith('skinned') || variant.startsWith('both');
     const morphed = variant === 'morphed' || variant.startsWith('both');
-    const vertex = flatVert({ skinned, morphed, instanced: variant === 'instanced' });
+    const animated = variant === 'animated';
+    const vertex = flatVert({
+        skinned,
+        morphed,
+        instanced: variant === 'instanced' || animated,
+        animated,
+    });
     return variant.endsWith('8') ? skinEight(vertex) : vertex;
 }