@driftengine/core 4.8.2 → 4.8.4

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

@@ -1,6 +1,7 @@
 import { FrameBudget } from '../budget.js';
 import { MaterialChanges, ownsMaterial } from '../materialChanges.js';
-import { FOG_RECEDE, fogModeOf } from '../drawFog.js';
+import { FOG_OFF, FOG_RECEDE, fogModeOf } from '../drawFog.js';
+import { blendCovering, blendKeeping } from '../../sceneCoverage.js';
 import { mat4 } from 'gl-matrix';
 import { GL_DEPTH_REMAP, MAX_DEPTH_LAYER, depthClearFor, depthOffsetForLayer, GL_SHADOW_REMAP, REVERSED_DEPTH, SHADOW_DEPTH_CLEAR, glDepthFuncEqual, glShadowDepthFunc, } from '../../depthConvention.js';
 import { resolveGlass } from '../../glass.js';
@@ -37,8 +38,19 @@ import { LightField } from '../../driftLight/lightField.js';
 import { WorldLightField } from '../../driftLight/worldLightField.js';
 import { createDriftLightUniforms, resolveDriftLight } from '../../driftLight/uniforms.js';
 import { flatFrag, flatVert } from '../../shaders/flat/index.js';
-import { MORPH_DELTA_TEXTURE_UNIT, SKIN_PALETTE_TEXTURE_UNIT } from '../../lightBudget.js';
+import { skinEight } from '../../shaders/skinning.js';
+import { MODEL_MAP_TEXTURE_UNIT, MORPH_DELTA_TEXTURE_UNIT, SKIN_PALETTE_TEXTURE_UNIT, } from '../../lightBudget.js';
+import { MODEL_PARAM_FLOATS, eyeAxisInWorld, packModel } from '../../surfaceModel.js';
+import { modelBound, skinHalfBound } from '../../shaders/flat/models.js';
+import { GlSkinScatter } from './skinScatter.js';
+import { CLOTH_BINDING_TEXTURE_UNIT, CLOTH_PARTICLES_TEXTURE_UNIT, CLOTH_REST_TEXTURE_UNIT, } from '../../lightBudget.js';
 import { SkinPaletteTexture } from './skinPaletteTexture.js';
+import { clothBound } from '../../shaders/clothBinding.js';
+import { validateClothBinding } from '../../clothBindingData.js';
+import { GlClothBinding, GlClothParticles } from './clothTextures.js';
+import { MAX_MORPH_TARGETS } from '../../skinPalette.js';
+/** The weights a cloth-bound draw of a morphing mesh deforms by when none were set: none. */
+const NO_MORPH_WEIGHTS = new Float32Array(MAX_MORPH_TARGETS);
 /** Shader-side encoding of `RenderQuality.outputTransform`. */
 /* The codes the shader reads, stated once in `vertexDefaults.ts` for both backends. */
 import { LIGHT_VOLUME_VERT, lightVolumeFrag } from '../../shaders/lightVolume.js';
@@ -72,6 +84,7 @@ import { resolveRenderQuality } from '../../renderQuality.js';
 import { drawingBufferSize } from '../../drawingBuffer.js';
 import { Mesh, createMeshIncremental } from '../../mesh.js';
 import { SurfaceTexture } from '../../surfaceTexture.js';
+import { glCompressedFormats } from '../../glCompressed.js';
 import { PlumeRenderer } from '../../plumeRenderer.js';
 import { createScatterDeform, resolveScatterDeform } from '../../scatterDeform.js';
 import { DEPTH_01_TO_CLIP, createResolvedLightVolume, resolveLightVolume, volumeMediumGain, } from '../../lightVolumeDraw.js';
@@ -93,6 +106,7 @@ import { deviceSnappedCellSize } from '../../textLayout.js';
 import { WindStreakRenderer } from '../../windStreakRenderer.js';
 import { InstancedBatch } from './instanced.js';
 import { cutoutOf } from '../../cutoutCaster.js';
+import { CUTOUT_RESOLVE_CODE, resolveCutout } from '../../cutoutDither.js';
 import { materialHasMaps, noteMapsWithoutUvs } from '../../mapsWithoutUvs.js';
 import { VIEW_MODEL_DEPTH_SHARE, viewModelDepthRange } from '../../viewModel.js';
 import { noLitSwitches } from '../../shaders/flat/glassTint.js';
@@ -447,6 +461,17 @@ export class WebGL2Renderer {
     flatMorphedUniforms = null;
     flatBothProgram = null;
     flatBothUniforms = null;
+    /**
+     * The two skinned variants built with `SKIN_EIGHT` on, for a rig whose vertices name eight
+     * joints: compiled the first time such a mesh is created, and only then. See `skinning.ts`.
+     */
+    flatSkinned8Program = null;
+    flatSkinned8Uniforms = null;
+    flatBoth8Program = null;
+    flatBoth8Uniforms = null;
+    /** And its shadow caster, so the shadow parts from nothing the body does. */
+    depthSkinned8Program = null;
+    depthSkinned8Uniforms = null;
     /** The morph weights the following draws use, or null for none. */
     morphWeights = null;
     /**
@@ -480,6 +505,14 @@ export class WebGL2Renderer {
      * before this existed.
      */
     sceneTarget;
+    /**
+     * Skin's screen-space scattering, made where the profile asks for it and has a composite to add
+     * into, and null otherwise — which is every profile by default. See `GlSkinScatter`.
+     */
+    skinScatter;
+    /** Whether this frame has spread its skin: once, at its first blended draw or at its end. */
+    skinScattered = false;
+    skinInverseProjection = mat4.create();
     /** So the refusal below is once per renderer rather than once per frame. See `setColourGrade`. */
     warnedGradeWithoutComposite = false;
     /** Scratch for a volume's `uDepthToLocal`. Built per draw and never allocated in the loop. */
@@ -502,6 +535,21 @@ export class WebGL2Renderer {
     skinPalette = new SkinPaletteTexture();
     /** Whether a palette is currently chosen. Distinct from whether one was ever uploaded. */
     skinPaletteSet = false;
+    /**
+     * Cloth-bound skinned lit programs, keyed `eight|morphed`, compiled when a binding is made for a
+     * mesh of that kind; and their casters, keyed by `eight`. See `ensureClothPrograms`.
+     */
+    clothFlat = new Map();
+    clothDepth = new Map();
+    /** The cloth the next skinned draws are placed by, or null. See `setCloth`. */
+    cloth = null;
+    /**
+     * Each shading model's lit programs, keyed `variant|model` by the vertex variant they pair with,
+     * compiled the first time a draw asks for one. See `modelProgram`.
+     */
+    modelFlat = new Map();
+    /** The last palette chosen, which an eye's axis is turned by. See `setSkinPalette`. */
+    paletteData = null;
     emptyTexture2D;
     /** One glass resolution reused by every draw, so a pane allocates nothing. See `glass.ts`. */
     glassScratch = { transmission: 0, frost: 0, tint: [1, 1, 1] };
@@ -560,6 +608,11 @@ export class WebGL2Renderer {
     surfaceScene = new Float32Array(4);
     /** The two halves of `uWriteMode`, kept here because a `vec2` is written whole. */
     oitWeight = 0;
+    /**
+     * How the surfaces drawn next meet the medium: what `setSurfaceFog` set, and `FOG_RECEDE` from
+     * each `bindMeshPass`. A translucent draw's own fog is measured against this and puts it back.
+     */
+    surfaceFog = FOG_RECEDE;
     ditherFade = 0;
     /** Said once, not per frame, where the context cannot give the float target the sum needs. */
     oitRefused = false;
@@ -968,6 +1021,22 @@ export class WebGL2Renderer {
     materialHasMaps = false;
     /** The material last set, so a lit program rebuilt for glass can be given it. */
     currentMaterial = null;
+    /**
+     * The frame a dithered cutout's pattern is offset by, advanced at `beginFrame` and wrapped at 64
+     * so the noise's argument stays small. See `cutoutDither.ts`.
+     */
+    cutoutFrame = 0;
+    /** Scratch for `uCutout`, so a material write allocates nothing. */
+    cutoutVector = new Float32Array(4);
+    /** The material's model numbers, `uModelParams`, packed by `packModel`. */
+    modelParams = new Float32Array(MODEL_PARAM_FLOATS);
+    /** The material's four switches, `uMaterialFlags`: albedo, ORM map, emissive map, two-sided. */
+    materialFlags = new Int32Array(4);
+    /**
+     * The default framebuffer's sample count, read once, for a frame drawn with no scene target: a
+     * dithered cutout there takes alpha-to-coverage when the canvas itself is multisampled.
+     */
+    canvasSamples;
     /**
      * The lit stage's switches: what the lit programs were compiled with (`litOn`), and what the
      * profile and the content have asked for since (`litWanted`).
@@ -1104,7 +1173,7 @@ export class WebGL2Renderer {
                 gl.enable(gl.CULL_FACE);
             gl.useProgram(this.depthProgram);
         },
-        skinnedMesh: (mesh, model, palette, material) => {
+        skinnedMesh: (mesh, model, palette, material, cloth) => {
             if (!this.drawingGlassDepth && !castsDepth(material)) {
                 if (this.quality.glassShadows !== 'off' && glassOf(material, this.glassCasterScratch)) {
                     this.glassCasters.recordSkinned(mesh, model, palette, material, this.glassCasterScratch);
@@ -1114,8 +1183,20 @@ export class WebGL2Renderer {
             }
             this.shadowDrawBudget.ask();
             const { gl } = this;
-            const u = this.depthSkinnedUniforms;
-            gl.useProgram(this.depthSkinnedProgram);
+            /* A rig of eight casts through the caster built with SKIN_EIGHT on, as it draws. */
+            const eightCaster = mesh.isSkinnedEight &&
+                this.depthSkinned8Program !== null &&
+                this.depthSkinned8Uniforms !== null;
+            /* A garment casts through the cloth-bound caster of its rig's kind, as it draws. */
+            const clothCaster = cloth === undefined
+                ? undefined
+                : this.clothDepth.get(mesh.isSkinnedEight ? '8' : '4');
+            const u = clothCaster?.uniforms ??
+                (eightCaster
+                    ? this.depthSkinned8Uniforms
+                    : this.depthSkinnedUniforms);
+            gl.useProgram(clothCaster?.program ??
+                (eightCaster ? this.depthSkinned8Program : this.depthSkinnedProgram));
             gl.uniformMatrix4fv(u['uLightViewProj'] ?? null, false, this.activeDepthViewProj);
             gl.uniform1i(u['uPeelShadowLayer'] ?? null, this.activeDepthPeel ? 1 : 0);
             /* The peel layer reads the first pass's depths; `beginShadowPass` bound that texture to
@@ -1126,6 +1207,12 @@ export class WebGL2Renderer {
             this.skinPalette.update(gl, palette);
             this.skinPalette.bind(gl, SKIN_PALETTE_TEXTURE_UNIT);
             gl.uniform1i(u['uJointPalette'] ?? null, SKIN_PALETTE_TEXTURE_UNIT);
+            if (clothCaster !== undefined && cloth !== undefined) {
+                this.bindCloth(u, {
+                    binding: cloth.binding,
+                    particles: cloth.particles,
+                });
+            }
             /* Narrowing is safe for the reason `mesh` above gives: this renderer only ever handed
                out its own `Mesh`. */
             mesh.draw(gl);
@@ -1169,7 +1256,8 @@ export class WebGL2Renderer {
         if (this.activeDepthPeel)
             gl.uniform1i(u['uPreviousShadowMap'] ?? null, 0);
         gl.uniform2f(u['uUvScale'] ?? null, cutout.u, cutout.v);
-        gl.uniform1f(u['uAlphaCutout'] ?? null, cutout.cutoff);
+        gl.uniform2f(u['uUvOffset'] ?? null, cutout.uOffset, cutout.vOffset);
+        gl.uniform2f(u['uAlphaCutout'] ?? null, cutout.cutoff, cutout.dithered);
         /* Narrowed for the reason the sink's own `mesh` gives: this renderer only hands out its own. */
         cutout.albedo.bind(gl, SURFACE_TEXTURE_UNIT);
     }
@@ -1964,11 +2052,20 @@ export class WebGL2Renderer {
         this.sceneTarget = this.quality.screenEffects
             ? new SceneTarget(gl, this.quality.sceneSamples, this.quality.hdrScene, this.quality.discardResolvedAttachments)
             : null;
+        /* Screen-space skin needs the composite to add into; without one it is pre-integrated, said once. */
+        if (this.quality.skinScattering === 'screen-space' && this.sceneTarget === null) {
+            console.warn("WebGL2: skinScattering 'screen-space' needs screenEffects to add into; skin is pre-integrated");
+        }
+        this.skinScatter =
+            this.quality.skinScattering === 'screen-space' && this.sceneTarget !== null
+                ? new GlSkinScatter(gl)
+                : null;
         /*
          * Said once at init, because the number a caller asked for and the number the part gave
          * them are not always the same, and a silently clamped sample count is a quality setting
          * that does not apply — the same failure mode `capabilityClamp` exists to avoid.
          */
+        this.canvasSamples = Math.max(1, gl.getParameter(gl.SAMPLES) ?? 1);
         const got = this.sceneTarget?.sampleCount ?? 1;
         if (this.quality.sceneSamples > 1 && got !== this.quality.sceneSamples) {
             console.warn(`Renderer: ${this.quality.sceneSamples}x scene multisampling was requested and this ` +
@@ -2129,6 +2226,8 @@ export class WebGL2Renderer {
             return;
         this.disposed = true;
         const { gl } = this;
+        if (!this.contextLost)
+            this.skinScatter?.dispose();
         this.detachContextLoss();
         this.contextLostListeners.length = 0;
         this.contextRestoredListeners.length = 0;
@@ -2168,11 +2267,17 @@ export class WebGL2Renderer {
                 this.flatSkinnedProgram,
                 this.flatMorphedProgram,
                 this.flatBothProgram,
+                this.flatSkinned8Program,
+                this.flatBoth8Program,
+                this.depthSkinned8Program,
                 this.flatInstancedProgram,
             ]) {
                 if (extra !== null)
                     gl.deleteProgram(extra);
             }
+            for (const entry of [...this.clothFlat.values(), ...this.clothDepth.values()]) {
+                gl.deleteProgram(entry.program);
+            }
             for (const program of [
                 this.flatProgram,
                 this.panelProgram,
@@ -2269,13 +2374,19 @@ export class WebGL2Renderer {
      */
     warmVariants(data) {
         const skinnable = data.joints !== undefined;
+        /* A rig of eight takes the variants built with SKIN_EIGHT on, and a caster of its own. */
+        const eight = skinnable && data.joints2 !== undefined;
         const morphable = data.morphTargets !== undefined;
         for (const skinned of skinnable ? [false, true] : [false]) {
             for (const morphed of morphable ? [false, true] : [false]) {
                 if (skinned || morphed)
-                    this.ensureVariant(skinned, morphed);
+                    this.ensureVariant(skinned, morphed, skinned && eight);
             }
         }
+        if (eight && this.depthSkinned8Program === null && !this.contextLost) {
+            this.depthSkinned8Program = compileProgram(this.gl, skinEight(DEPTH_SKINNED_VERT), DEPTH_FRAG, 'depth-skinned8');
+            this.depthSkinned8Uniforms = uniformLocations(this.gl, this.depthSkinned8Program, 'depth-skinned8');
+        }
     }
     /**
      * Rewrite a mesh's positions, and its normals where the caller has them.
@@ -2317,24 +2428,39 @@ export class WebGL2Renderer {
      * `bindMeshPass` would otherwise carry every uniform at zero, and zero is a real value for most
      * of them — the failure this file records for `uGrain` and `uAmbientGround`.
      */
-    ensureVariant(skinned, morphed) {
+    ensureVariant(skinned, morphed, eight = false) {
         if (this.contextLost)
             return;
-        if (skinned && morphed && this.flatBothProgram !== null)
-            return;
-        if (skinned && !morphed && this.flatSkinnedProgram !== null)
-            return;
-        if (!skinned && morphed && this.flatMorphedProgram !== null)
-            return;
-        if (!skinned && !morphed)
-            return;
+        if (skinned && eight) {
+            if (morphed ? this.flatBoth8Program !== null : this.flatSkinned8Program !== null)
+                return;
+        }
+        else {
+            if (skinned && morphed && this.flatBothProgram !== null)
+                return;
+            if (skinned && !morphed && this.flatSkinnedProgram !== null)
+                return;
+            if (!skinned && morphed && this.flatMorphedProgram !== null)
+                return;
+            if (!skinned && !morphed)
+                return;
+        }
         const { gl } = this;
-        const label = `flat.${morphed ? 'morphed' : ''}${skinned ? 'skinned' : ''}`;
+        const label = `flat.${morphed ? 'morphed' : ''}${skinned ? (eight ? 'skinned8' : 'skinned') : ''}`;
         /* `flatFragSource`, not a fresh `flatFrag`: every variant shades through one fragment stage
            at one light budget, and the uploads are written for that budget. */
-        const program = compileProgram(gl, flatVert({ skinned, morphed, instanced: false }), this.flatFragSource, label);
+        const vertex = flatVert({ skinned, morphed, instanced: false });
+        const program = compileProgram(gl, skinned && eight ? skinEight(vertex) : vertex, this.flatFragSource, label);
         const uniforms = uniformLocations(gl, program, label);
-        if (skinned && morphed) {
+        if (skinned && eight && morphed) {
+            this.flatBoth8Program = program;
+            this.flatBoth8Uniforms = uniforms;
+        }
+        else if (skinned && eight) {
+            this.flatSkinned8Program = program;
+            this.flatSkinned8Uniforms = uniforms;
+        }
+        else if (skinned && morphed) {
             this.flatBothProgram = program;
             this.flatBothUniforms = uniforms;
         }
@@ -2352,6 +2478,8 @@ export class WebGL2Renderer {
         if (camera !== null && env !== null) {
             gl.useProgram(program);
             this.writeMeshPassState(uniforms, camera, env);
+            /* And the material the caller has set, which a program born mid-pass must carry too. */
+            this.writeMaterialState(uniforms, this.currentMaterial);
             this.useFlatProgram();
         }
     }
@@ -2364,7 +2492,21 @@ export class WebGL2Renderer {
      * the consumer's decision. What it gains is a GPU object with sane sampler state.
      */
     createSurfaceTexture(source, options = {}) {
-        return new SurfaceTexture(this.gl, source, options);
+        return new SurfaceTexture(this.gl, source, options, this.compressedFormats);
+    }
+    compressedCache = null;
+    /**
+     * The BC formats this device takes as blocks, each named with its colour space (`'bc7-srgb'`).
+     *
+     * **Ask before choosing**, because a phone usually answers none: a BC texture handed to
+     * `createSurfaceTexture` where its format is not here is refused by name rather than decoded,
+     * since core ships no decoder. `@driftengine/assets`' loader asks this for every BC texture in a
+     * container and decodes at load where the answer is no. Read from the four extensions WebGL2
+     * spreads BC across; see `glCompressed.ts`.
+     */
+    get compressedFormats() {
+        this.compressedCache ??= glCompressedFormats(this.gl);
+        return this.compressedCache;
     }
     /**
      * Upload several images of one size as the layers of one array, for a merged mesh that names a
@@ -2373,7 +2515,7 @@ export class WebGL2Renderer {
      * refusal names the first that is not.
      */
     createSurfaceTextureArray(sources, options = {}) {
-        return new SurfaceTexture(this.gl, sources, options);
+        return new SurfaceTexture(this.gl, sources, options, this.compressedFormats);
     }
     /**
      * Replace a surface texture's pixels, keeping the GPU object and its sampler state.
@@ -2431,6 +2573,148 @@ export class WebGL2Renderer {
         }
         this.skinPalette.update(this.gl, palette);
         this.skinPaletteSet = true;
+        this.paletteData = palette;
+    }
+    /**
+     * The lit program for one vertex variant shading by a model: the standard program's vertex
+     * stage, and the fragment stage with the model's switch on (`modelBound`). Compiled the first
+     * time a draw asks — a scene that names no model compiles none — and fed the pass and the
+     * material at once, as `ensureClothPrograms` feeds its own.
+     */
+    modelProgram(variant, kind, 
+    /** Which half of a skin it draws under the screen-space blur. See `SkinHalf`. */
+    half = 'whole') {
+        const key = `${variant}|${kind}|${half}`;
+        const held = this.modelFlat.get(key);
+        if (held !== undefined)
+            return held;
+        const { gl } = this;
+        const label = `flat.${variant}.${kind}.${half}`;
+        const program = compileProgram(gl, litVertexOf(variant), skinHalfBound(modelBound(this.flatFragSource, kind), half), label);
+        const made = { program, uniforms: uniformLocations(gl, program, label) };
+        this.modelFlat.set(key, made);
+        this.flatTargets.push(made);
+        gl.useProgram(program);
+        const camera = this.lastPassCamera;
+        const env = this.lastPassEnv;
+        if (camera !== null && env !== null)
+            this.writeMeshPassState(made.uniforms, camera, env);
+        this.writeMaterialState(made.uniforms, this.currentMaterial);
+        return made;
+    }
+    /**
+     * An eye's axis in the world for this draw, into its program's `uModelParams`: the material's
+     * own numbers with the axis turned by the draw's model matrix and the eye's joint. See
+     * `eyeAxisInWorld`.
+     */
+    writeEyeAxis(u, model) {
+        const eye = this.currentMaterial?.model;
+        if (eye?.kind !== 'eye')
+            return;
+        eyeAxisInWorld(eye, model, this.skinPaletteSet ? this.paletteData : null, this.modelParams, 4);
+        this.gl.uniform4fv(u['uModelParams'] ?? null, this.modelParams);
+    }
+    /**
+     * A mesh's cloth binding: which simulation triangle each of its vertices follows, where on it,
+     * and by how much. See `ClothBindingData`.
+     *
+     * Refused by name for a mesh with no rig — a binding blends a vertex between its skinning and the
+     * cloth — and for one that disagrees with the mesh. Compiles the programs that draw and cast it
+     * here, at creation, so no frame ever waits on a compile.
+     */
+    createClothBinding(mesh, data) {
+        const target = mesh;
+        if (!target.isSkinned) {
+            throw new Error('createClothBinding: this mesh has no rig, and a binding blends each vertex between its ' +
+                'skinning and the cloth');
+        }
+        validateClothBinding(data, target.vertexCount);
+        this.ensureClothPrograms(target.isSkinnedEight, target.morph !== null);
+        return new GlClothBinding(this.gl, data);
+    }
+    /** One character's particles, `count` of them, to be updated every frame. */
+    createClothParticles(count) {
+        return new GlClothParticles(this.gl, count);
+    }
+    /**
+     * This frame's particles, three floats each, world space; last frame's are kept for motion. A
+     * simulation's output, as it is.
+     */
+    updateClothParticles(particles, positions) {
+        if (this.contextLost)
+            return;
+        particles.update(this.gl, positions);
+    }
+    /**
+     * Place the following skinned draws by a cloth: `binding` the mesh's, `particles` the
+     * character's. Null for none, which is every draw until this is called. Both or neither, and
+     * the particles must be as many as the binding names.
+     */
+    setCloth(binding, particles = null) {
+        if (binding === null || particles === null) {
+            this.cloth = null;
+            return;
+        }
+        if (binding.particles !== particles.count) {
+            throw new Error(`setCloth: the binding names ${binding.particles} particles and these are ${particles.count}`);
+        }
+        this.cloth = { binding, particles };
+    }
+    disposeClothBinding(binding) {
+        if (this.contextLost)
+            return;
+        binding.dispose(this.gl);
+    }
+    disposeClothParticles(particles) {
+        if (this.contextLost)
+            return;
+        particles.dispose(this.gl);
+    }
+    /**
+     * The cloth-bound lit program and caster for a rig of this kind, once. Fed at once if a pass is
+     * bound, for the reason `ensureVariant` gives: a program compiled after `bindMeshPass` would
+     * otherwise carry every uniform at zero.
+     */
+    ensureClothPrograms(eight, morphed) {
+        if (this.contextLost)
+            return;
+        const { gl } = this;
+        const key = `${eight ? 8 : 4}|${morphed ? 'm' : '-'}`;
+        if (!this.clothFlat.has(key)) {
+            const label = `flat.cloth${eight ? '8' : ''}${morphed ? '.morphed' : ''}`;
+            const vertex = flatVert({ skinned: true, morphed, instanced: false });
+            const program = compileProgram(gl, clothBound(eight ? skinEight(vertex) : vertex), this.flatFragSource, label);
+            const uniforms = uniformLocations(gl, program, label);
+            this.clothFlat.set(key, { program, 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();
+            }
+        }
+        const depthKey = eight ? '8' : '4';
+        if (!this.clothDepth.has(depthKey)) {
+            const label = `depth-cloth${eight ? '8' : ''}`;
+            const program = compileProgram(gl, clothBound(eight ? skinEight(DEPTH_SKINNED_VERT) : DEPTH_SKINNED_VERT), DEPTH_FRAG, label);
+            this.clothDepth.set(depthKey, { program, uniforms: uniformLocations(gl, program, label) });
+        }
+    }
+    /** Bind the cloth's three textures to their units and name them to `u`. */
+    bindCloth(u, cloth) {
+        const { gl } = this;
+        gl.activeTexture(gl.TEXTURE0 + CLOTH_BINDING_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, cloth.binding.binding);
+        gl.uniform1i(u['uClothBinding'] ?? null, CLOTH_BINDING_TEXTURE_UNIT);
+        gl.activeTexture(gl.TEXTURE0 + CLOTH_PARTICLES_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, cloth.particles.current);
+        gl.uniform1i(u['uClothParticles'] ?? null, CLOTH_PARTICLES_TEXTURE_UNIT);
+        gl.activeTexture(gl.TEXTURE0 + CLOTH_REST_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, cloth.binding.rest);
+        gl.uniform1i(u['uClothRest'] ?? null, CLOTH_REST_TEXTURE_UNIT);
     }
     /**
      * Choose the morph weights the following `drawMesh` calls deform by, or null for none.
@@ -2452,6 +2736,11 @@ export class WebGL2Renderer {
         this.materialDoubleSided = material?.doubleSided === true;
         this.materialHasMaps = materialHasMaps(material);
         this.currentMaterial = material;
+        /* What the blur spreads this skin by: the last material to name a profile says. */
+        const model = material?.model;
+        if (model?.kind === 'skin' && this.skinScatter !== null) {
+            this.skinScatter.setProfile(model.profile, model.scatterColor[0] * model.radius, model.scatterColor[1] * model.radius, model.scatterColor[2] * model.radius);
+        }
         /*
          * Written to every flat program, because material state persists across draws and a skinned
          * draw is entitled to the material the caller set before it. A second program holding none of
@@ -2468,6 +2757,25 @@ export class WebGL2Renderer {
         }
         this.useFlatProgram();
     }
+    /**
+     * How a material's cutout edge is drawn this frame: the material's mode against what the frame can
+     * resolve. A translucent draw tests hard whatever the material says, because a blended draw has
+     * nothing to average a pattern with. See `cutoutDither.ts`.
+     */
+    cutoutResolveNow(material, translucent) {
+        if (translucent || material === null)
+            return 'hard';
+        return resolveCutout(material.cutoutMode ?? 'hard', this.temporalJittering, this.sceneTarget?.sampleCount ?? this.canvasSamples);
+    }
+    /** The lit pass's `uCutout` for a material this frame, into scratch. See `uCutout`. */
+    cutoutUniform(material, translucent) {
+        const v = this.cutoutVector;
+        v[0] = material?.cutout ?? 0;
+        v[1] = CUTOUT_RESOLVE_CODE[this.cutoutResolveNow(material, translucent)];
+        v[2] = this.cutoutFrame;
+        v[3] = 0;
+        return v;
+    }
     /**
      * One flat program's view of the current material.
      *
@@ -2512,7 +2820,7 @@ export class WebGL2Renderer {
         if (orm !== null)
             orm.bind(gl, ORM_TEXTURE_UNIT);
         gl.uniform1i(u['uOrmMap'] ?? null, ORM_TEXTURE_UNIT);
-        gl.uniform1i(u['uOrmEnabled'] ?? null, orm === null ? 0 : 1);
+        this.materialFlags[1] = orm === null ? 0 : 1;
         gl.uniform3f(u['uOrmScale'] ?? null, material?.occlusionStrength ?? 1, material?.roughnessScale ?? 1, material?.metallicScale ?? 1);
         /*
          * The emissive map, on exactly the terms the two maps above it are bound: before the albedo
@@ -2520,7 +2828,7 @@ export class WebGL2Renderer {
          *
          * **The stand-in is black, so the gate is what keeps a glow on.** The shader multiplies by
          * this map, and `emptyTexture2D` is opaque black rather than the multiplicative identity, so an
-         * unbound material keeps the arithmetic it had before only because `uEmissiveMapEnabled` is 0
+         * unbound material keeps the arithmetic it had before only because its flag in `uMaterialFlags` is 0
          * and the read never happens. What would make that wrong is a read taken outside that branch:
          * every glow on a material without a map would go out.
          */
@@ -2530,7 +2838,7 @@ export class WebGL2Renderer {
         if (emissiveMap !== null)
             emissiveMap.bind(gl, EMISSIVE_TEXTURE_UNIT);
         gl.uniform1i(u['uEmissiveMap'] ?? null, EMISSIVE_TEXTURE_UNIT);
-        gl.uniform1i(u['uEmissiveMapEnabled'] ?? null, emissiveMap === null ? 0 : 1);
+        this.materialFlags[2] = emissiveMap === null ? 0 : 1;
         const emissiveScale = material?.emissiveScale ?? null;
         gl.uniform3f(u['uEmissiveScale'] ?? null, emissiveScale?.[0] ?? 1, emissiveScale?.[1] ?? 1, emissiveScale?.[2] ?? 1);
         /*
@@ -2541,7 +2849,21 @@ export class WebGL2Renderer {
          * how big a dome was — WebGPU writes it before its own early return and WebGL2 did not.
          */
         gl.uniform2f(u['uUvScale'] ?? null, material?.uScale ?? 1, material?.vScale ?? 1);
-        gl.uniform1i(u['uDoubleSided'] ?? null, material?.doubleSided === true ? 1 : 0);
+        gl.uniform2f(u['uUvOffset'] ?? null, material?.uOffset ?? 0, material?.vOffset ?? 0);
+        this.materialFlags[3] = material?.doubleSided === true ? 1 : 0;
+        /*
+         * The material's shading model: its numbers, and its map or the stand-in, before the albedo
+         * early return as every map above is. Written to the standard programs too, which declare both
+         * and read neither — one decision for every program, as `setMaterial` says.
+         */
+        const modelMap = material?.modelMap ?? 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);
+        gl.uniform1i(u['uModelMap'] ?? null, MODEL_MAP_TEXTURE_UNIT);
+        packModel(material?.model ?? null, modelMap !== null, this.modelParams);
+        gl.uniform4fv(u['uModelParams'] ?? null, this.modelParams);
         /* 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) {
@@ -2560,12 +2882,14 @@ export class WebGL2Renderer {
                array target, and with nothing there it is incomplete. */
             gl.activeTexture(gl.TEXTURE0 + SURFACE_TEXTURE_UNIT);
             gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
-            gl.uniform1i(u['uAlbedoEnabled'] ?? null, 0);
+            this.materialFlags[0] = 0;
+            gl.uniform4iv(u['uMaterialFlags'] ?? null, this.materialFlags);
             return;
         }
         albedo.bind(gl, SURFACE_TEXTURE_UNIT);
-        gl.uniform1f(u['uAlbedoCutout'] ?? null, material?.cutout ?? 0);
-        gl.uniform1i(u['uAlbedoEnabled'] ?? null, 1);
+        gl.uniform4fv(u['uCutout'] ?? null, this.cutoutUniform(material, false));
+        this.materialFlags[0] = 1;
+        gl.uniform4iv(u['uMaterialFlags'] ?? null, this.materialFlags);
     }
     /**
      * @deprecated Use `setMaterial`.
@@ -2582,7 +2906,7 @@ export class WebGL2Renderer {
      * Rebind `SURFACE_TEXTURE_UNIT` to whatever `setSurfaceTexture` last put there.
      *
      * Only `drawSdfText` calls this, after the atlas has finished borrowing the same unit.
-     * No uniform is written here — the flat program's `uAlbedo`/`uAlbedoEnabled` were never
+     * No uniform is written here — the flat program's `uAlbedo` and its flag in `uMaterialFlags` were never
      * touched by the text draw and are still correct, since that draw runs its own separate
      * program. What moved is unit 15's actual `WebGLTexture` binding, which is GL state, not
      * program state, and this puts it back to what `currentSurfaceTexture` says it should be.
@@ -2669,6 +2993,28 @@ export class WebGL2Renderer {
         this.materials.dirty();
         this.writeFlatFloat('uGrain', Math.min(1, Math.max(0, amount)));
     }
+    /**
+     * Whether the surfaces drawn next meet the medium: distance fog and the global medium's haze.
+     * True is the default, and what `bindMeshPass` restores.
+     *
+     * **The opaque counterpart of `TranslucentMeshOptions.fog`**, which a translucent draw has had
+     * all along; the shader's per-draw switch was there, and nothing reached it for an ordinary mesh.
+     * What it is for is a medium that darkens one thing and not another — a floor receding into the
+     * distance under figures that must keep their full value however far from the camera they stand.
+     * Material state like `setSurfaceGrain`: instanced and skinned draws read it too, and a
+     * translucent draw's own `fog` is measured against it and puts it back.
+     *
+     * **What it gives up** is the medium's honesty: a surface out of the fog is drawn as though the
+     * air between it and the eye were empty, so it should be a surface the scene means to stand
+     * apart, not one whose distance is the point.
+     */
+    setSurfaceFog(enabled) {
+        if (this.contextLost)
+            return;
+        this.materials.dirty();
+        this.surfaceFog = enabled ? FOG_RECEDE : FOG_OFF;
+        this.writeFlatInt('uFogEnabled', this.surfaceFog);
+    }
     /**
      * One float of material state, into every flat program.
      *
@@ -2685,6 +3031,14 @@ export class WebGL2Renderer {
         }
         this.useFlatProgram();
     }
+    /** One int of material state, into every flat program, for `writeFlatFloat`'s reason. */
+    writeFlatInt(name, value) {
+        for (const target of this.flatTargets) {
+            this.gl.useProgram(target.program);
+            this.gl.uniform1i(target.uniforms[name] ?? null, value);
+        }
+        this.useFlatProgram();
+    }
     /**
      * How much of the surfaces drawn next survives a screen-door dither, for crossfading two levels
      * of detail of one thing.
@@ -2829,6 +3183,8 @@ export class WebGL2Renderer {
         if (camera !== null && env !== null) {
             gl.useProgram(program);
             this.writeMeshPassState(uniforms, camera, env);
+            /* And the material the caller has set, which a program born mid-pass must carry too. */
+            this.writeMaterialState(uniforms, this.currentMaterial);
             this.useFlatProgram();
         }
     }
@@ -2860,6 +3216,7 @@ export class WebGL2Renderer {
     }
     /** Draw every live instance, blended. See `drawTranslucentMesh` for what the options mean. */
     drawTranslucentInstanced(batch, data, opacity, options = {}) {
+        this.scatterSkin();
         this.submitInstanced(batch, data, opacity, true, options);
     }
     /** Release the placement. The mesh is the caller's and is not released. */
@@ -2899,8 +3256,11 @@ export class WebGL2Renderer {
             return;
         this.drawBudget.ask();
         this.ensureInstancedProgram();
-        const program = this.flatInstancedProgram;
-        const u = this.flatInstancedUniforms;
+        /* 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;
         if (program === null || u === null)
             return;
         const { gl } = this;
@@ -2913,7 +3273,7 @@ export class WebGL2Renderer {
         /* A blended batch shows what is behind it — refraction or glass — as a single draw does, and
            counts a material of its own for it by the rule both backends share (`materialChanges.ts`). */
         const refracting = blend && this.bindSeeThrough(u, options);
-        const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
+        const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting }, this.surfaceFog);
         if (own)
             this.materials.dirty();
         this.takeMaterial();
@@ -2939,16 +3299,16 @@ export class WebGL2Renderer {
          */
         if (!lit)
             gl.uniform1i(u['uLightingEnabled'] ?? null, 0);
-        if (fog !== FOG_RECEDE)
+        if (fog !== this.surfaceFog)
             gl.uniform1i(u['uFogEnabled'] ?? null, fog);
         if (!toneMapped)
             gl.uniform1i(u['uOutputTransform'] ?? null, Math.min(this.gradeCode(), 1));
         if (blend) {
             gl.enable(gl.BLEND);
             if (options.additive === true)
-                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ZERO, gl.ONE);
+                blendKeeping(gl, gl.SRC_ALPHA, gl.ONE);
             else
-                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                blendCovering(gl, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
             if (!depthWrite)
                 gl.depthMask(false);
         }
@@ -2963,10 +3323,23 @@ export class WebGL2Renderer {
            for both: without it a batch's far faces were culled here alone. */
         if (this.materialDoubleSided)
             gl.disable(gl.CULL_FACE);
+        /* A dithered cutout: coverage when this batch is opaque in a multisampled frame, the hard test
+           when it is blended. See `cutoutDither.ts`. */
+        const cutoutResolve = this.cutoutResolveNow(this.currentMaterial, false);
+        const coverage = !blend && cutoutResolve === 'coverage';
+        const ditheredBlend = blend && cutoutResolve !== 'hard';
+        if (coverage)
+            gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+        if (ditheredBlend)
+            gl.uniform4fv(u['uCutout'] ?? null, this.cutoutUniform(this.currentMaterial, true));
         if (culling && cullsInstances(count, mesh.indexCount))
             batch.drawCulled(gl, data, this.frustum);
         else
             batch.draw(gl, count);
+        if (coverage)
+            gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+        if (ditheredBlend)
+            gl.uniform4fv(u['uCutout'] ?? null, this.cutoutUniform(this.currentMaterial, false));
         if (this.materialDoubleSided)
             gl.enable(gl.CULL_FACE);
         if (layer > 0) {
@@ -2988,8 +3361,8 @@ export class WebGL2Renderer {
             this.unbindSeeThrough(u);
         if (!lit)
             gl.uniform1i(u['uLightingEnabled'] ?? null, 1);
-        if (fog !== FOG_RECEDE)
-            gl.uniform1i(u['uFogEnabled'] ?? null, FOG_RECEDE);
+        if (fog !== this.surfaceFog)
+            gl.uniform1i(u['uFogEnabled'] ?? null, this.surfaceFog);
         if (!toneMapped)
             gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
         if (own)
@@ -3126,6 +3499,7 @@ export class WebGL2Renderer {
     }
     /** Draw after the opaque scene: streaks are blended and write no depth. */
     drawWindStreaks(streaks, camera, wind, timeSeconds, tint, env) {
+        this.scatterSkin();
         // The engine decides, not the caller: every pass already knows where the
         // waterline is, and leaving it to each call site is how one of them ends up
         // raining dust into the sea.
@@ -3158,6 +3532,7 @@ export class WebGL2Renderer {
      * whatever box the caller lays out in, and the game's own card is not always the canvas.
      */
     drawText(text, viewportWidth, viewportHeight, originX, originY, style, timeSec) {
+        this.scatterSkin();
         if (text.draw(viewportWidth, viewportHeight, originX, originY, style, timeSec)) {
             this.textBudget.ask();
         }
@@ -3249,6 +3624,7 @@ export class WebGL2Renderer {
         return this.sceneTarget === null || !this.quality.hdrScene ? this.exposure : 1;
     }
     drawSdfText(handle, model, color, opacity) {
+        this.scatterSkin();
         if (this.contextLost)
             return;
         const viewProj = this.frameViewProj;
@@ -3320,6 +3696,7 @@ export class WebGL2Renderer {
      * whole milestone from a buffer nothing had ever written.
      */
     drawParticles(batch, data, camera, env, timeSeconds) {
+        this.scatterSkin();
         if (data.count === 0)
             return;
         const { gl } = this;
@@ -3365,6 +3742,7 @@ export class WebGL2Renderer {
      * it strobes as the rasteriser catches it on some frames and not others.
      */
     drawBolts(batch, data, camera, env, timeSeconds, core, edge, widthM, coreGain, minWidthPerMetre = 0.004) {
+        this.scatterSkin();
         if (data.count === 0)
             return;
         const { gl } = this;
@@ -3421,6 +3799,7 @@ export class WebGL2Renderer {
      * edge inward, as a fraction of the half-width; zero is a clean edge.
      */
     drawLines(lines, data, model, camera, env, color, widthM, opacity, softness = 0, minWidthPerMetre = 0, additive = false) {
+        this.scatterSkin();
         if (data.count === 0)
             return;
         const { gl } = this;
@@ -3604,6 +3983,7 @@ export class WebGL2Renderer {
     }
     // --- Draws that own their context ----------------------------------------
     drawPlumes(plumes, camera, timeSeconds, env, windX = 0, windZ = 0, originX = 0, originY = 0, originZ = 0) {
+        this.scatterSkin();
         plumes.draw(this.gl, this.frameViewFor(camera), timeSeconds, env, this.quality.underwaterAtmosphere, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.reflectionPassActive ? (this.planarReflection?.clipPlane ?? null) : null, windX, windZ, originX, originY, originZ);
     }
     drawWater(water, camera, timeSeconds, settings, env, windX = 0, windZ = 0) {
@@ -3617,6 +3997,7 @@ export class WebGL2Renderer {
      * from the water under them.
      */
     drawCaustics(caustics, camera, timeSeconds, env, windX = 0, windZ = 0, strength = 1) {
+        this.scatterSkin();
         if (caustics === null || !this.quality.water)
             return;
         const drew = caustics.draw(this.gl, this.frameViewFor(camera), timeSeconds, env.directionalDir, env.directionalColor, env.ambient, env, this.quality.underwaterAtmosphere, windX, windZ, strength);
@@ -3912,6 +4293,14 @@ export class WebGL2Renderer {
         this.uploadWind(this.depthUniforms, this.frameWind);
         gl.useProgram(this.depthSkinnedProgram);
         this.uploadWind(this.depthSkinnedUniforms, this.frameWind);
+        if (this.depthSkinned8Program !== null && this.depthSkinned8Uniforms !== null) {
+            gl.useProgram(this.depthSkinned8Program);
+            this.uploadWind(this.depthSkinned8Uniforms, this.frameWind);
+        }
+        for (const caster of this.clothDepth.values()) {
+            gl.useProgram(caster.program);
+            this.uploadWind(caster.uniforms, this.frameWind);
+        }
         gl.useProgram(this.depthCutoutProgram);
         this.uploadWind(this.depthCutoutUniforms, this.frameWind);
         gl.useProgram(this.depthProgram);
@@ -3937,14 +4326,18 @@ export class WebGL2Renderer {
             this.bindSceneCasterMaterial(material);
             this.drawMesh(mesh, model);
         },
-        skinnedMesh: (mesh, model, palette, material) => {
+        skinnedMesh: (mesh, model, palette, material, cloth) => {
             /* The opaque handle narrowed to this backend's own, for the reason `casterSink`
                gives about the mesh: nothing else ever handed one out. */
             this.bindSceneCasterMaterial(material);
             this.setSkinPalette(palette);
+            if (cloth !== undefined) {
+                this.setCloth(cloth.binding, cloth.particles);
+            }
             this.drawMesh(mesh, model);
             /* Put back, or the next rigid draw in the replay skins by whatever this one left bound. */
             this.setSkinPalette(null);
+            this.setCloth(null);
         },
         instanced: (batch, data, material) => {
             /* The opaque handle narrowed to this backend's own, for the reason `casterSink`
@@ -4068,7 +4461,8 @@ export class WebGL2Renderer {
         gl.uniform4fv(u['uGlassLight'] ?? null, this.glassLight);
         if (cutout !== null) {
             gl.uniform2f(u['uUvScale'] ?? null, cutout.u, cutout.v);
-            gl.uniform1f(u['uAlphaCutout'] ?? null, cutout.cutoff);
+            gl.uniform2f(u['uUvOffset'] ?? null, cutout.uOffset, cutout.vOffset);
+            gl.uniform2f(u['uAlphaCutout'] ?? null, cutout.cutoff, cutout.dithered);
             cutout.albedo.bind(gl, SURFACE_TEXTURE_UNIT);
             gl.uniform1i(u['uCutoutMap'] ?? null, SURFACE_TEXTURE_UNIT);
         }
@@ -4206,10 +4600,11 @@ 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) => {
+        const recompile = (old, skinned, morphed, instanced, label, eight = false) => {
             if (old === null)
                 return null;
-            const program = compileProgram(gl, flatVert({ skinned, morphed, instanced }), this.flatFragSource, label);
+            const vertex = flatVert({ skinned, morphed, instanced });
+            const program = compileProgram(gl, eight ? skinEight(vertex) : vertex, this.flatFragSource, label);
             gl.deleteProgram(old);
             return { program, uniforms: uniformLocations(gl, program, label) };
         };
@@ -4227,14 +4622,40 @@ export class WebGL2Renderer {
         const both = recompile(this.flatBothProgram, true, true, false, 'flat.morphedskinned');
         this.flatBothProgram = both?.program ?? null;
         this.flatBothUniforms = both?.uniforms ?? null;
+        const skinned8 = recompile(this.flatSkinned8Program, true, false, false, 'flat.skinned8', true);
+        this.flatSkinned8Program = skinned8?.program ?? null;
+        this.flatSkinned8Uniforms = skinned8?.uniforms ?? null;
+        const both8 = recompile(this.flatBoth8Program, true, true, false, 'flat.morphedskinned8', true);
+        this.flatBoth8Program = both8?.program ?? null;
+        this.flatBoth8Uniforms = both8?.uniforms ?? null;
         const instanced = recompile(this.flatInstancedProgram, false, false, true, 'flat.instanced');
         this.flatInstancedProgram = instanced?.program ?? null;
         this.flatInstancedUniforms = instanced?.uniforms ?? null;
+        for (const [key, entry] of this.clothFlat) {
+            const eight = key.startsWith('8');
+            const withMorph = key.endsWith('m');
+            const label = `flat.cloth${eight ? '8' : ''}${withMorph ? '.morphed' : ''}`;
+            const vertex = flatVert({ skinned: true, morphed: withMorph, instanced: false });
+            const program = compileProgram(gl, clothBound(eight ? skinEight(vertex) : vertex), this.flatFragSource, label);
+            gl.deleteProgram(entry.program);
+            this.clothFlat.set(key, { program, uniforms: uniformLocations(gl, program, label) });
+        }
+        for (const [key, entry] of this.modelFlat) {
+            const [variant, kind, half] = key.split('|');
+            const label = `flat.${variant}.${kind}.${half}`;
+            const program = compileProgram(gl, litVertexOf(variant), skinHalfBound(modelBound(this.flatFragSource, kind), half), label);
+            gl.deleteProgram(entry.program);
+            this.modelFlat.set(key, { program, uniforms: uniformLocations(gl, program, label) });
+        }
         this.flatTargets.length = 0;
-        for (const target of [plain, skinned, morphed, both, instanced]) {
+        for (const target of [plain, skinned, morphed, both, skinned8, both8, instanced]) {
             if (target !== null)
                 this.flatTargets.push(target);
         }
+        for (const target of this.clothFlat.values())
+            this.flatTargets.push(target);
+        for (const target of this.modelFlat.values())
+            this.flatTargets.push(target);
         const camera = this.lastPassCamera;
         const env = this.lastPassEnv;
         for (const target of this.flatTargets) {
@@ -4757,7 +5178,7 @@ export class WebGL2Renderer {
          */
         gl.disable(gl.CULL_FACE);
         gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        blendCovering(gl, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.uniform4f(this.panelUniforms['uRect'] ?? null, rect.left, rect.top, rect.width, rect.height);
         gl.uniform2f(this.panelUniforms['uViewport'] ?? null, Math.max(this.canvas.clientWidth, 1), Math.max(this.canvas.clientHeight, 1));
         /* Identity: this backend's clip space is the one the shader was written against. */
@@ -5295,12 +5716,15 @@ export class WebGL2Renderer {
     beginFrame(clearColor) {
         if (this.contextLost)
             return;
+        this.skinScattered = false;
+        this.skinScatter?.reset();
         if (this.litAsked) {
             this.litAsked = false;
             this.rebuildLit();
         }
         this.budget.reset();
         this.materials.dirty();
+        this.cutoutFrame = (this.cutoutFrame + 1) % 64;
         /*
          * Said once, for the reason `refuseOitMultisampled` gives: a quality setting that is enabled
          * and does nothing is the fault the capability clamp exists to prevent.
@@ -5375,6 +5799,8 @@ export class WebGL2Renderer {
         /* A view model left open would squeeze every pass after the world, the composite included. */
         if (this.viewModelActive)
             this.endViewModel();
+        /* Skin not yet spread, because nothing blended came after it, is spread now. */
+        this.scatterSkin();
         /*
          * Camera motion blur, built from the camera the frame was *rendered* with.
          *
@@ -5861,6 +6287,16 @@ export class WebGL2Renderer {
          * is a non-idempotent step entering this body; there is none today, and one added would show
          * as a skinned game behaving differently from an unskinned one.
          */
+        /*
+         * **A pass starts with no material**, so it cannot inherit one from the pass before it. Here
+         * rather than in `writeMeshPassState`, which also feeds a program compiled mid-pass — a model's,
+         * a cloth's, the instanced one — and there forgot the material the caller had set, so the next
+         * draws drew without it until somebody called `setMaterial` again.
+         */
+        this.materialDoubleSided = false;
+        this.materialHasMaps = false;
+        this.currentMaterial = null;
+        this.currentSurfaceTexture = null;
         for (const target of this.flatTargets) {
             this.gl.useProgram(target.program);
             this.writeMeshPassState(target.uniforms, camera, env);
@@ -6048,7 +6484,8 @@ export class WebGL2Renderer {
          * shape `uOpacity` and `uTint` already use.
          */
         gl.uniform1i(u['uLightingEnabled'] ?? null, 1);
-        gl.uniform1i(u['uFogEnabled'] ?? null, 1);
+        gl.uniform1i(u['uFogEnabled'] ?? null, FOG_RECEDE);
+        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`. */
@@ -6150,7 +6587,7 @@ export class WebGL2Renderer {
          * the sort of per-draw cost this renderer avoids everywhere else.
          */
         /*
-         * And the surface unit, which starts every pass with no texture on it: `uAlbedoEnabled`
+         * And the surface unit, which starts every pass with no texture on it: its flag in `uMaterialFlags`
          * is 0 until a caller asks for one, and a world that never asks would otherwise leave
          * this sampler incomplete for the whole session.
          */
@@ -6227,18 +6664,15 @@ export class WebGL2Renderer {
         gl.activeTexture(gl.TEXTURE0 + SURFACE_TEXTURE_UNIT);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         gl.uniform1i(u['uAlbedo'] ?? null, SURFACE_TEXTURE_UNIT);
-        gl.uniform1i(u['uAlbedoEnabled'] ?? null, 0);
+        /* Every material switch off — the albedo, both maps, two-sided — in their one row. */
+        gl.uniform4i(u['uMaterialFlags'] ?? null, 0, 0, 0, 0);
         /* No albedo, so no effects table: the stand-in, which the shader reads as none. */
         gl.activeTexture(gl.TEXTURE0 + SURFACE_EFFECTS_TEXTURE_UNIT);
         gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
         gl.uniform1i(u['uSurfaceEffects'] ?? null, SURFACE_EFFECTS_TEXTURE_UNIT);
         gl.uniform2f(u['uUvScale'] ?? null, 1, 1);
-        gl.uniform1f(u['uAlbedoCutout'] ?? null, 0);
-        gl.uniform1i(u['uDoubleSided'] ?? null, 0);
-        this.materialDoubleSided = false;
-        this.materialHasMaps = false;
-        this.currentMaterial = null;
-        this.currentSurfaceTexture = null;
+        gl.uniform2f(u['uUvOffset'] ?? null, 0, 0);
+        gl.uniform4f(u['uCutout'] ?? null, 0, 0, 0, 0);
         /*
          * **And the normal map, which this did not reset and had to.**
          *
@@ -6264,14 +6698,17 @@ export class WebGL2Renderer {
         gl.activeTexture(gl.TEXTURE0 + ORM_TEXTURE_UNIT);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         gl.uniform1i(u['uOrmMap'] ?? null, ORM_TEXTURE_UNIT);
-        gl.uniform1i(u['uOrmEnabled'] ?? null, 0);
         gl.uniform3f(u['uOrmScale'] ?? null, 1, 1, 1);
         /* And the emissive map. The scale goes back to one, which is the identity it multiplies by. */
         gl.activeTexture(gl.TEXTURE0 + EMISSIVE_TEXTURE_UNIT);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
         gl.uniform1i(u['uEmissiveMap'] ?? null, EMISSIVE_TEXTURE_UNIT);
-        gl.uniform1i(u['uEmissiveMapEnabled'] ?? null, 0);
         gl.uniform3f(u['uEmissiveScale'] ?? null, 1, 1, 1);
+        /* And the shading model: its map back to the stand-in and its numbers to the standard's. */
+        gl.activeTexture(gl.TEXTURE0 + MODEL_MAP_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.emptyTexture2DArray);
+        gl.uniform1i(u['uModelMap'] ?? null, MODEL_MAP_TEXTURE_UNIT);
+        gl.uniform4fv(u['uModelParams'] ?? null, NO_MODEL_PARAMS);
         /*
          * White, because a uniform nobody has written is **zero**, and this one multiplies
          * vertex colour.
@@ -6380,6 +6817,58 @@ export class WebGL2Renderer {
             return;
         this.drawBudget.ask();
         this.takeMaterial();
+        /* Skin under the screen-space blur draws its two halves: the frame's, then at once its diffuse. */
+        const splits = this.skinSplits();
+        this.drawMeshHalf(mesh, model, depthLayer, tint, splits ? 'scene' : 'whole');
+        if (splits && this.skinScatter !== null) {
+            this.skinScatter.begin();
+            this.drawMeshHalf(mesh, model, depthLayer, tint, 'diffuse');
+            this.sceneTarget?.bind();
+        }
+    }
+    /**
+     * Whether a skin draw now draws its two halves: the profile asked, the frame has not spread its
+     * skin yet, this is the frame's own picture — not a mirror's or a probe's, nor an overlay after
+     * the frame — and the blur's target can be had.
+     */
+    skinSplits() {
+        const skin = this.skinScatter;
+        const scene = this.sceneTarget;
+        return (skin !== null &&
+            scene !== null &&
+            this.currentMaterial?.model?.kind === 'skin' &&
+            !this.skinScattered &&
+            !this.reflectionPassActive &&
+            !this.probePassActive &&
+            !this.framePresented &&
+            skin.ready(scene));
+    }
+    /**
+     * Spread the frame's skin and add it back: once, at the first blended draw or at the frame's end.
+     * Called first in every draw WebGPU records as blended — translucent meshes and batches, text,
+     * particles, plumes, wind streaks, bolts, lines, caustics, film — so the two backends add skin at
+     * the same point. The frame's depth is copied for the blur to read, and where it cannot be the
+     * diffuse goes back unspread rather than not at all.
+     */
+    scatterSkin() {
+        const skin = this.skinScatter;
+        const scene = this.sceneTarget;
+        const projection = this.frameProjection;
+        if (skin === null || scene === null || this.skinScattered)
+            return;
+        /* Latched whether or not skin was drawn: a skin drawn after this point is the whole surface. */
+        this.skinScattered = true;
+        if (!skin.pending)
+            return;
+        if (this.reflectionPassActive || this.probePassActive || projection === null)
+            return;
+        const depth = scene.snapshotDepth(true);
+        mat4.invert(this.skinInverseProjection, projection);
+        skin.spread(scene, depth, this.emptyTexture2D, projection, this.skinInverseProjection);
+        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;
         /*
          * A rigged mesh takes the skinned program, an unrigged one the plain program.
@@ -6399,37 +6888,80 @@ export class WebGL2Renderer {
          * belongs to was never compiled. Deriving one from the other, as the first version did, made a
          * missing skinned-only program silently switch morph off as well.
          */
-        const both = wantSkin && wantMorph && this.flatBothUniforms !== null;
-        const skinned = both || (wantSkin && this.flatSkinnedUniforms !== null);
+        /* A rig of eight takes the pair built with SKIN_EIGHT on; `warmVariants` compiled them. */
+        const eight = wantSkin && mesh.isSkinnedEight;
+        /*
+         * **A cloth set and a skinned draw take the cloth-bound program of this rig's kind**, compiled
+         * when the binding was made. Its morph half is the mesh's whether weights are set or not: the
+         * program declares the deltas whenever the mesh has them, so they are bound, at zero weight
+         * 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 bothUniforms = eight ? this.flatBoth8Uniforms : this.flatBothUniforms;
+        const skinnedUniforms = eight ? this.flatSkinned8Uniforms : this.flatSkinnedUniforms;
+        const both = wantSkin && wantMorph && bothUniforms !== null;
+        const skinned = both || (wantSkin && skinnedUniforms !== null);
         const morphed = both || (wantMorph && !wantSkin && this.flatMorphedUniforms !== null);
         const variant = skinned && morphed
-            ? this.flatBothUniforms
+            ? bothUniforms
             : skinned
-                ? this.flatSkinnedUniforms
+                ? skinnedUniforms
                 : morphed
                     ? this.flatMorphedUniforms
                     : null;
-        const u = variant ?? this.flatUniforms;
-        const program = skinned && morphed
-            ? this.flatBothProgram
-            : skinned
-                ? this.flatSkinnedProgram
-                : morphed
-                    ? this.flatMorphedProgram
-                    : null;
+        let u = clothed?.uniforms ?? variant ?? this.flatUniforms;
+        let program = clothed !== undefined
+            ? clothed.program
+            : skinned && morphed
+                ? eight
+                    ? this.flatBoth8Program
+                    : this.flatBothProgram
+                : skinned
+                    ? 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
+                ? `cloth${eight ? 8 : 4}${mesh.morph !== null ? 'm' : '-'}`
+                : skinned && morphed
+                    ? eight
+                        ? 'both8'
+                        : 'both'
+                    : skinned
+                        ? eight
+                            ? 'skinned8'
+                            : 'skinned'
+                        : morphed
+                            ? 'morphed'
+                            : 'plain', modelKind, half);
+            program = modelled.program;
+            u = modelled.uniforms;
+        }
         if (program !== null) {
             gl.useProgram(program);
-            if (skinned) {
+            if (skinned || clothed !== undefined) {
                 this.skinPalette.bind(gl, SKIN_PALETTE_TEXTURE_UNIT);
                 gl.uniform1i(u['uJointPalette'] ?? null, SKIN_PALETTE_TEXTURE_UNIT);
             }
-            if (morphed && mesh.morph !== null) {
+            if ((morphed || clothed !== undefined) && mesh.morph !== null) {
                 mesh.morph.bind(gl, MORPH_DELTA_TEXTURE_UNIT);
                 gl.uniform1i(u['uMorphDeltas'] ?? null, MORPH_DELTA_TEXTURE_UNIT);
                 gl.uniform1i(u['uMorphTargetCount'] ?? null, mesh.morph.targetCount);
                 gl.uniform1i(u['uMorphTextureWidth'] ?? null, mesh.morph.width);
-                gl.uniform1fv(u['uMorphWeights'] ?? null, this.morphWeights);
+                gl.uniform1fv(u['uMorphWeights'] ?? null, this.morphWeights ?? NO_MORPH_WEIGHTS);
             }
+            if (clothed !== undefined && cloth !== null)
+                this.bindCloth(u, cloth);
+            if (modelKind === 'eye')
+                this.writeEyeAxis(u, model);
         }
         else {
             this.useFlatProgram();
@@ -6464,13 +6996,26 @@ export class WebGL2Renderer {
          * depth 1.0 against a buffer cleared to 1.0, and under `LESS` it would not draw at
          * all. Film, caustics and text lie flush on surfaces for the same reason.
          */
-        gl.depthFunc(this.reversedDepth ? gl.GREATER : gl.LESS);
+        /* A skin's diffuse half is the same surface again: it finds the depth its frame half wrote. */
+        const again = half === 'diffuse';
+        gl.depthFunc(again ? gl.EQUAL : this.reversedDepth ? gl.GREATER : gl.LESS);
+        if (again)
+            gl.depthMask(false);
+        /* A dithered cutout in a multisampled frame with no temporal resolve: its share becomes the
+           pixel's samples. Scoped to this draw, as the depth compare above is. See `cutoutDither.ts`. */
+        const coverage = !again && this.cutoutResolveNow(this.currentMaterial, false) === 'coverage';
+        if (coverage)
+            gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);
         if (layer === 0) {
             if (this.materialDoubleSided)
                 gl.disable(gl.CULL_FACE);
             mesh.draw(gl);
             if (this.materialDoubleSided)
                 gl.enable(gl.CULL_FACE);
+            if (coverage)
+                gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+            if (again)
+                gl.depthMask(true);
             gl.depthFunc(this.reversedDepth ? gl.GEQUAL : gl.LEQUAL);
             if (tint !== null)
                 gl.uniform3fv(u['uTint'] ?? null, WHITE_TINT);
@@ -6496,6 +7041,10 @@ export class WebGL2Renderer {
         mesh.draw(gl);
         if (this.materialDoubleSided)
             gl.enable(gl.CULL_FACE);
+        if (coverage)
+            gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+        if (again)
+            gl.depthMask(true);
         gl.polygonOffset(0, 0);
         gl.disable(gl.POLYGON_OFFSET_FILL);
         if (program !== null)
@@ -6544,6 +7093,7 @@ export class WebGL2Renderer {
      * handed straight back.
      */
     drawTranslucentMesh(mesh, model, opacity, options = {}) {
+        this.scatterSkin();
         if (this.contextLost)
             return;
         /* Geometry that has not all arrived is not drawn, nor a mesh with none. See `Mesh.complete`
@@ -6566,10 +7116,22 @@ export class WebGL2Renderer {
            order-independent transparency, and not once more when it was recorded. */
         this.drawBudget.ask();
         const { gl } = this;
-        const u = this.flatUniforms;
-        this.useFlatProgram();
+        /* 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);
+        const u = modelled?.uniforms ?? this.flatUniforms;
+        if (modelled === null)
+            this.useFlatProgram();
+        else
+            gl.useProgram(modelled.program);
+        if (modelKind === 'eye')
+            this.writeEyeAxis(u, model);
         gl.uniformMatrix4fv(u['uModel'] ?? null, false, model);
         gl.uniform1f(u['uOpacity'] ?? null, Math.min(opacity, 1));
+        /* A dithered cutout tests hard on a blended draw, and is put back below with the rest. */
+        const ditheredHere = this.cutoutResolveNow(this.currentMaterial, false) !== 'hard';
+        if (ditheredHere)
+            gl.uniform4fv(u['uCutout'] ?? null, this.cutoutUniform(this.currentMaterial, true));
         /*
          * Both default to what `bindMeshPass` already put there — lit and fogged — so the
          * common call with no fourth argument writes the same two values it always implicitly
@@ -6581,7 +7143,7 @@ export class WebGL2Renderer {
         const toneMapped = options.toneMapped ?? true;
         if (!lit)
             gl.uniform1i(u['uLightingEnabled'] ?? null, 0);
-        if (fog !== FOG_RECEDE)
+        if (fog !== this.surfaceFog)
             gl.uniform1i(u['uFogEnabled'] ?? null, fog);
         /* `1` is sRGB alone: the conversion without the curve, which is what dropping the tone map
            means rather than dropping the whole transform. `Math.min` rather than a literal, so a
@@ -6616,7 +7178,7 @@ export class WebGL2Renderer {
          */
         /* Taken for itself when any option differs from the pass, and put back below: the rule both
            backends count material changes by. See `materialChanges.ts`. */
-        const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
+        const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting }, this.surfaceFog);
         if (own)
             this.materials.dirty();
         this.takeMaterial();
@@ -6625,9 +7187,9 @@ export class WebGL2Renderer {
             gl.enable(gl.BLEND);
             /* Added, where asked: colour times alpha onto what is there, and the target's alpha kept. */
             if (options.additive === true)
-                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ZERO, gl.ONE);
+                blendKeeping(gl, gl.SRC_ALPHA, gl.ONE);
             else
-                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+                blendCovering(gl, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         }
         /*
          * The two depth options, both scoped to this draw and handed straight back — the same
@@ -6659,6 +7221,8 @@ export class WebGL2Renderer {
         if (ownsState)
             gl.disable(gl.BLEND);
         gl.uniform1f(u['uOpacity'] ?? null, 1);
+        if (ditheredHere)
+            gl.uniform4fv(u['uCutout'] ?? null, this.cutoutUniform(this.currentMaterial, false));
         if (tint !== null)
             gl.uniform3fv(u['uTint'] ?? null, WHITE_TINT);
         if (refracting)
@@ -6667,8 +7231,8 @@ export class WebGL2Renderer {
            cannot inherit a material from the draw before it. */
         if (!lit)
             gl.uniform1i(u['uLightingEnabled'] ?? null, 1);
-        if (fog !== FOG_RECEDE)
-            gl.uniform1i(u['uFogEnabled'] ?? null, FOG_RECEDE);
+        if (fog !== this.surfaceFog)
+            gl.uniform1i(u['uFogEnabled'] ?? null, this.surfaceFog);
         if (!toneMapped)
             gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
         if (own)
@@ -7036,7 +7600,7 @@ export class WebGL2Renderer {
             gl.uniform1i(u['uSceneDepth'] ?? null, 3);
         }
         gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+        blendKeeping(gl, gl.SRC_ALPHA, gl.ONE);
         gl.depthMask(false);
         gl.cullFace(inside ? gl.FRONT : gl.BACK);
         mesh.draw(gl);
@@ -7066,6 +7630,7 @@ export class WebGL2Renderer {
      * `beginPlanarReflection` for when that target exists.
      */
     drawFilm(mesh, camera, timeSeconds, env, sheen, options = {}) {
+        this.scatterSkin();
         const { gl } = this;
         const u = this.filmUniforms;
         gl.useProgram(this.filmProgram);
@@ -7104,7 +7669,7 @@ export class WebGL2Renderer {
         }
         bindAtmosphere(gl, u, env, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.quality.underwaterAtmosphere);
         gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        blendKeeping(gl, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.depthMask(false);
         mesh.draw(gl);
         gl.depthMask(true);
@@ -7187,3 +7752,20 @@ function angularDiscExponent(angularRadius) {
  * name to prefer. It goes when something else forces a major, and not before.
  */
 export { WebGL2Renderer as Renderer };
+/** The standard model's numbers: no model, no map. */
+const NO_MODEL_PARAMS = new Float32Array(MODEL_PARAM_FLOATS);
+/**
+ * The lit vertex stage a program of this variant compiles: the standard programs' and the cloth's,
+ * which `modelProgram` pairs a model's fragment stage with.
+ */
+function litVertexOf(variant) {
+    if (variant.startsWith('cloth')) {
+        const eight = variant[5] === '8';
+        const vertex = flatVert({ skinned: true, morphed: variant.endsWith('m'), instanced: false });
+        return clothBound(eight ? skinEight(vertex) : vertex);
+    }
+    const skinned = variant.startsWith('skinned') || variant.startsWith('both');
+    const morphed = variant === 'morphed' || variant.startsWith('both');
+    const vertex = flatVert({ skinned, morphed, instanced: variant === 'instanced' });
+    return variant.endsWith('8') ? skinEight(vertex) : vertex;
+}