@driftengine/core 4.8.2 → 4.8.4

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

@@ -52,6 +52,10 @@ import { createPanelBindGroup, createPanelBindGroupLayout, createPanelCorners, p
 import { createGpuTextCube, createTextBindGroup, createTextBindGroupLayout, GpuText, textPipeline, TEXT_FRAG_FIELDS, TEXT_FRAG_SIZE, TEXT_VERT_FIELDS, TEXT_VERT_SIZE, } from './textPass.js';
 import { deviceSnappedCellSize, deviceSnappedOrigin } from '../../textLayout.js';
 import { GpuSurfaceTexture } from './surfaceTexturePass.js';
+import { gpuCompressedFormats } from './compressedUpload.js';
+import { GpuClothBinding, GpuClothParticles, clothStandIn } from './clothTextures.js';
+import { MODEL_PARAM_FLOATS, eyeAxisInWorld, packModel } from '../../surfaceModel.js';
+import { validateClothBinding } from '../../clothBindingData.js';
 import { createSdfTextBindGroup, createSdfTextBindGroupLayout, GpuSdfText, sdfTextPipeline, SDF_TEXT_FRAG_FIELDS, SDF_TEXT_FRAG_SIZE, SDF_TEXT_VERT_FIELDS, SDF_TEXT_VERT_SIZE, } from './sdfTextPass.js';
 import { createFilmBindGroup, createFilmBindGroupLayout, filmPipeline, FILM_FRAG_FIELDS, FILM_FRAG_SIZE, FILM_VERT_FIELDS, FILM_VERT_SIZE, } from './filmPass.js';
 import { reflectionTargetSize } from '../../planarReflectionDraw.js';
@@ -61,7 +65,7 @@ import { ExposurePass } from './exposurePass.js';
 import { AO_STORE } from '../../shaders/ambientOcclusion.js';
 import { clampAutoExposure } from '../../shaders/exposure.js';
 import { clampLocalExposure } from '../../shaders/localExposure.js';
-import { createDepthResolveLayout, createPostStageLayout, depthResolvePipeline, postPipeline, postPipelineTargets, sceneColorFormat, AO_BLUR_FIELDS, AO_BLUR_FRAG_WGSL, AO_BLUR_SIZE, AO_BLUR_TEXTURES, AO_BLUR_UNIFORMS, AO_FRAG_FIELDS, AO_FRAG_SIZE, AO_FRAG_WGSL, AO_TEXTURES, AO_UNIFORMS, ADDITIVE_BLEND, BLOOM_DOWNSAMPLE_FIELDS, BLOOM_DOWNSAMPLE_FRAG_WGSL, BLOOM_PREFILTER_FIELDS, BLOOM_PREFILTER_FRAG_WGSL, BLOOM_STAGE_SIZE, BLOOM_TEXTURES, BLOOM_UNIFORMS, BLOOM_UPSAMPLE_FIELDS, BLOOM_UPSAMPLE_FRAG_WGSL, RESOLVED_DEPTH_FORMAT, RUSH_FRAG_FIELDS, RUSH_FRAG_SIZE, RUSH_FRAG_WGSL, RUSH_TEXTURES, RUSH_UNIFORMS, TAA_FRAG_FIELDS, TAA_FRAG_SIZE, TAA_TEXTURES, TAA_UNIFORMS, TEMPORAL_RESOLVE_FRAG_WGSL, MEDIUM_FRAG_FIELDS, MEDIUM_FRAG_SIZE, MEDIUM_FRAG_WGSL, MEDIUM_TEXTURES, MEDIUM_TRANSMIT_BLEND, MEDIUM_UNIFORMS, MEDIUM_UPSAMPLE_FIELDS, MEDIUM_UPSAMPLE_FRAG_WGSL, MEDIUM_UPSAMPLE_SIZE, MEDIUM_UPSAMPLE_TEXTURES, MEDIUM_UPSAMPLE_UNIFORMS, OIT_COMPOSITE_BLEND, OIT_RESOLVE_FRAG_WGSL, OIT_TEXTURES, DECAL_FRAG_FIELDS, DECAL_FRAG_SIZE, DECAL_MULTIPLY_BLEND, DECAL_PROJECT_FRAG_WGSL, DECAL_TEXTURES, DECAL_UNIFORMS, PREMULTIPLIED_OVER_BLEND, SSR_FRAG_FIELDS, SSR_FRAG_SIZE, SSR_RESOLVE_FRAG_WGSL, SSR_RESOLVE_TEXTURES, SSR_TEXTURES, SSR_TRACE_FRAG_WGSL, SSR_UNIFORMS, createOitResolveLayout, createSsrResolveLayout, } from './postPass.js';
+import { createDepthResolveLayout, createPostStageLayout, depthResolvePipeline, postPipeline, postPipelineTargets, sceneColorFormat, AO_BLUR_FIELDS, AO_BLUR_FRAG_WGSL, AO_BLUR_SIZE, AO_BLUR_TEXTURES, AO_BLUR_UNIFORMS, AO_FRAG_FIELDS, AO_FRAG_SIZE, AO_FRAG_WGSL, AO_TEXTURES, AO_UNIFORMS, ADDITIVE_BLEND, BLOOM_DOWNSAMPLE_FIELDS, BLOOM_DOWNSAMPLE_FRAG_WGSL, BLOOM_PREFILTER_FIELDS, BLOOM_PREFILTER_FRAG_WGSL, BLOOM_STAGE_SIZE, BLOOM_TEXTURES, BLOOM_UNIFORMS, BLOOM_UPSAMPLE_FIELDS, BLOOM_UPSAMPLE_FRAG_WGSL, RESOLVED_DEPTH_FORMAT, RUSH_FRAG_FIELDS, RUSH_FRAG_SIZE, RUSH_FRAG_WGSL, RUSH_TEXTURES, RUSH_UNIFORMS, TAA_FRAG_FIELDS, TAA_FRAG_SIZE, TAA_TEXTURES, TAA_UNIFORMS, TEMPORAL_RESOLVE_FRAG_WGSL, MEDIUM_FRAG_FIELDS, MEDIUM_FRAG_SIZE, MEDIUM_FRAG_WGSL, MEDIUM_TEXTURES, MEDIUM_TRANSMIT_BLEND, MEDIUM_UNIFORMS, MEDIUM_UPSAMPLE_FIELDS, MEDIUM_UPSAMPLE_FRAG_WGSL, MEDIUM_UPSAMPLE_SIZE, MEDIUM_UPSAMPLE_TEXTURES, MEDIUM_UPSAMPLE_UNIFORMS, OIT_COMPOSITE_BLEND, OIT_RESOLVE_FRAG_WGSL, OIT_TEXTURES, DECAL_FRAG_FIELDS, DECAL_FRAG_SIZE, DECAL_MULTIPLY_BLEND, DECAL_PROJECT_FRAG_WGSL, DECAL_TEXTURES, DECAL_UNIFORMS, PREMULTIPLIED_OVER_BLEND, REFLECTION_OVER_BLEND, SSR_FRAG_FIELDS, SSR_FRAG_SIZE, SSR_RESOLVE_FRAG_WGSL, SSR_RESOLVE_TEXTURES, SSR_TEXTURES, SSR_TRACE_FRAG_WGSL, SSR_UNIFORMS, createOitResolveLayout, createSsrResolveLayout, } from './postPass.js';
 import { GRADE_PLACEHOLDER_SIZE, identityGradeLut, validateGradeLut, } from '../../colourGrade.js';
 import { FILM_LOOK_WITHOUT_COMPOSITE, clampGrain, clampVignette, grainSeed, } from '../../shaders/filmLook.js';
 import { createProbeMipBindGroupLayout, createProbePrefilterBindGroupLayout, PREFILTER_UNIFORM_OFFSETS, probeLevels, probeMipPipeline, probePrefilterPipeline, PROBE_FACES, PROBE_FACE_BASIS, PROBE_FAR_M, PROBE_FOV_DEG, PROBE_MIP_UNIFORM_SIZE, PROBE_NEAR_M, } from './probePass.js';
@@ -87,6 +91,7 @@ import { SkinPaletteRing } from './skinPaletteRing.js';
 import { DEPTH_FORMAT, FLAT_VERT_FIELDS, FLAT_VERT_SIZE, createFlatBindGroup, createFlatBindGroupLayout, flatFragmentBindings, flatVariant, flatVertexBindings, flatPipeline, flatPipelineAsync, } from './flatPass.js';
 import { DEPTH_FRAG_BINDING, DEPTH_FRAG_SIZE, DEPTH_FRAG_WGSL, DEPTH_PREVIOUS_BINDING, DEPTH_CUTOUT_VERT_FIELDS, DEPTH_CUTOUT_VERT_SIZE, DEPTH_INSTANCED_CUTOUT_VERT_FIELDS, DEPTH_VERT_FIELDS, DEPTH_VERT_SIZE, SHADOW_FORMAT, createDepthBindGroup, createDepthBindGroupLayout, depthPipeline, } from './depthPass.js';
 import { PipelineCache } from './pipelineCache.js';
+import { SKIN_TARGET_FORMAT, SkinScatterPass } from './skinScatterPass.js';
 import { SKY_FIELDS, SKY_UNIFORM_SIZE, createSkyBindGroup, createSkyBindGroupLayout, skyPipeline, } from './skyPass.js';
 import { SCATTER_DEPTH_FIELDS, SCATTER_DEPTH_SIZE, SCATTER_FRAG_FIELDS, SCATTER_FRAG_SIZE, SCATTER_VERT_FIELDS, SCATTER_VERT_SIZE, createGpuScatter, createScatterBindGroup, createScatterBindGroupLayout, createScatterDepthBindGroup, createScatterDepthBindGroupLayout, scatterDepthPipeline, scatterPipeline, } from './scatterPass.js';
 import { WATER_FRAG_FIELDS, WATER_FRAG_SIZE, WATER_VERT_FIELDS, WATER_VERT_SIZE, createGpuWater, createWaterBindGroup, createWaterBindGroupLayout, waterPipeline, } from './waterPass.js';
@@ -100,7 +105,7 @@ import { LIGHT_VOLUME_VERT_FIELDS, LIGHT_VOLUME_VERT_SIZE, createLightVolumeBind
 import { aimReflection, createGpuReflection } from './reflectionPass.js';
 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 { DYNAMIC_ALIGNMENT as DYNAMIC_UNIFORM_ALIGNMENT, UniformRing } from './uniformRing.js';
 import { DecalQueue, MAX_DRAWN_DECALS } from '../../decalQueue.js';
 import { DistanceFieldScene } from '../../gi/fieldScene.js';
@@ -137,6 +142,7 @@ import { clusteredMode, createClusterLightSet, fillClusterLightSet, } from '../.
 import { computeAt, createComputeRegistry, } from '../../compute.js';
 import { GpuInstancedBatch } from './instanced.js';
 import { cutoutOf } from '../../cutoutCaster.js';
+import { CUTOUT_RESOLVE_CODE, resolveCutout } from '../../cutoutDither.js';
 import { LightField } from '../../driftLight/lightField.js';
 import { WorldLightField } from '../../driftLight/worldLightField.js';
 import { createDriftLightUniforms, resolveDriftLight } from '../../driftLight/uniforms.js';
@@ -864,6 +870,12 @@ export class WebGPURenderer {
     skinnedGroupsBeside = [];
     skinnedGroupsPalette = [];
     skinnedGroupsDeltas = [];
+    /** The cloth views each skinned twin was built with, compared by identity like the palette. */
+    skinnedGroupsCloth = [];
+    skinnedGroupsClothBinding = [];
+    /** The cloth the next skinned draws are placed by, or null. See `setCloth`. */
+    cloth = null;
+    clothStandCache = null;
     /**
      * Which palette slot the following draws skin by, or -1 for none.
      *
@@ -1257,6 +1269,16 @@ export class WebGPURenderer {
     refractSnapshotView = null;
     /** Whether this frame has taken it. One snapshot serves every refracting draw. */
     refractSnapshotTaken = false;
+    /**
+     * 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 `SkinScatterPass`.
+     */
+    skinScatter;
+    /** The pipelines skin's diffuse half is built for: the blur target's format, the frame's samples. */
+    skinPipelines;
+    /** Whether this frame has spread its skin: once, at its first blended draw or before its end. */
+    skinScattered = false;
+    skinInverseProjection = mat4.create();
     sceneColorView = null;
     /** The multisampled twin, when the profile asks for samples. Resolved into `sceneColor`. */
     sceneColorMsaa = null;
@@ -1435,6 +1457,17 @@ export class WebGPURenderer {
     temporalJitterX = 0;
     temporalJitterY = 0;
     temporalJittering = false;
+    /**
+     * The frame a dithered cutout's pattern is offset by, advanced at `beginFrame` and wrapped at 64.
+     * See `cutoutDither.ts`.
+     */
+    cutoutFrame = 0;
+    /**
+     * How the current material's cutout edge is drawn this frame, decided when the material is staged
+     * — after `bindMeshPass` has settled whether the frame is temporal — and read by every draw: a
+     * coverage edge is pipeline state here (`|a2c`), and a blended draw tests hard.
+     */
+    cutoutResolveStaged = 'hard';
     /**
      * Whether this frame is being reconstructed, settled once in `bindMeshPass`.
      *
@@ -2100,6 +2133,12 @@ export class WebGPURenderer {
     ormMap = null;
     /** The caller's emissive map, or null for the stand-in. See `setMaterial`. */
     emissiveMap = null;
+    /** The material's model map, or null for the stand-in. See `setMaterial` and `surfaceModel.ts`. */
+    modelMap = null;
+    /** The material's shading model, which picks the lit pipeline: null the standard. */
+    materialModel = null;
+    /** Its numbers, `uModelParams`, packed by `packModel`. */
+    modelParams = new Float32Array(MODEL_PARAM_FLOATS);
     /**
      * The flat group for a material, keyed on **all four** of its maps.
      *
@@ -2131,16 +2170,33 @@ export class WebGPURenderer {
     blankAlbedoBindGroup;
     /** Repeats across the mesh's own UV range. Per draw, because `uUvScale` is a vertex uniform. */
     uvScale = new Float32Array([1, 1]);
+    /** Where the texture starts, after the scale. Per draw, beside `uvScale`. */
+    uvOffset = new Float32Array([0, 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;
     /** Whether the bound material is seen from both faces. See `SurfaceMaterial.doubleSided`. */
     materialDoubleSided = false;
     /** Whether the bound material has a map, for the warning a mesh with no coordinates earns. */
     materialHasMaps = false;
     createSurfaceTexture(source, options = {}) {
-        return new GpuSurfaceTexture(this.surface.device, this.pipelines, source, options);
+        return new GpuSurfaceTexture(this.surface.device, this.pipelines, source, options, this.compressedFormats);
+    }
+    compressedCache = null;
+    /**
+     * The BC formats this device takes as blocks: every one where the device carries
+     * `texture-compression-bc`, which `select.ts` asks for wherever the adapter offers it, and none
+     * where it does not. See `Renderer.compressedFormats`.
+     */
+    get compressedFormats() {
+        this.compressedCache ??= gpuCompressedFormats(this.surface.device);
+        return this.compressedCache;
     }
     /** Several images of one size as an array's layers. See `RendererApi.createSurfaceTextureArray`. */
     createSurfaceTextureArray(sources, options = {}) {
-        return new GpuSurfaceTexture(this.surface.device, this.pipelines, sources, options);
+        return new GpuSurfaceTexture(this.surface.device, this.pipelines, sources, options, this.compressedFormats);
     }
     /**
      * GPU textures an `updateSurfaceTexture` replaced, destroyed when the next frame begins.
@@ -2191,6 +2247,8 @@ export class WebGPURenderer {
             this.ormMap = null;
         if (this.emissiveMap === texture)
             this.emissiveMap = null;
+        if (this.modelMap === texture)
+            this.modelMap = null;
         this.forgetBindingsOf(texture);
         texture.dispose();
     }
@@ -2215,7 +2273,7 @@ export class WebGPURenderer {
         this.albedo = null;
         this.blankAlbedoBindGroup = this.buildFlatBindGroup();
         this.albedo = held;
-        this.bindGroup = this.flatGroupForMaps(held, this.normalMap, this.ormMap, this.emissiveMap);
+        this.bindGroup = this.flatGroupForMaps(held, this.normalMap, this.ormMap, this.emissiveMap, this.modelMap);
     }
     /**
      * Choose the surface texture the following `drawMesh` calls sample, or null for none.
@@ -2243,6 +2301,104 @@ export class WebGPURenderer {
            one. See `SkinPaletteRing`; a full ring declines the draw instead of mixing two rigs. */
         this.skinPaletteSlot = this.skinPalettes.take(this.surface.device, palette) ?? -1;
     }
+    /**
+     * A mesh's cloth binding. See `RendererApi.createClothBinding`. The pipelines that draw it bound
+     * are warmed here, every way this mesh can be drawn, so none compiles inside the first frame
+     * that draws a garment.
+     */
+    createClothBinding(mesh, data) {
+        if (!mesh.isSkinned) {
+            throw new Error('createClothBinding: this mesh has no rig, and a binding blends each vertex between its ' +
+                'skinning and the cloth');
+        }
+        validateClothBinding(data, mesh.vertexCount);
+        const base = mesh.key ?? 'flat:s0:u0';
+        const present = this.meshPresent.get(base);
+        if (present !== undefined) {
+            const skin = mesh.isSkinnedEight ? '|skin8' : '|skin';
+            for (const morphed of mesh.morph !== null ? [false, true] : [false]) {
+                for (const translucent of [false, true]) {
+                    void flatPipelineAsync(this.targetPipelines(), this.surface.device, this.flatLayoutFor(true, morphed), this.variant, `${base}${morphed ? '|morph' : ''}${skin}|cloth${translucent ? '|blend' : ''}`, present, translucent, true, morphed, mesh.isSkinnedEight, true);
+                }
+            }
+        }
+        return new GpuClothBinding(this.surface.device, data);
+    }
+    /** One character's particles. See `RendererApi.createClothParticles`. */
+    createClothParticles(count) {
+        return new GpuClothParticles(this.surface.device, count);
+    }
+    /**
+     * This frame's particles. **Once a frame, before the character's draws**: a texture write lands
+     * ahead of every draw of the frame, so a second update between two draws would reach both.
+     */
+    updateClothParticles(particles, positions) {
+        if (this.surface.lost)
+            return;
+        /* A write between frames is the next frame's, as a rewritten mesh's is. See `changeFrames.ts`. */
+        particles.update(this.surface.device, positions, frameOfChange(this.moverFrame, this.inFrame));
+    }
+    /** Place the following skinned draws by a cloth, or by none. See `RendererApi.setCloth`. */
+    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 };
+    }
+    /** Retired rather than destroyed: a draw recorded earlier in this frame may still read them. */
+    disposeClothBinding(binding) {
+        this.retiredTextures.push(...binding.textures);
+    }
+    disposeClothParticles(particles) {
+        this.retiredTextures.push(...particles.textures);
+    }
+    /**
+     * The device and the frame's bookkeeping, for compute a consumer opts into by importing it —
+     * `createSkinnedCloth` — rather than for anything this renderer runs itself. See `computeHost.ts`.
+     */
+    computeHost() {
+        return this.computeHostCache;
+    }
+    computeHostCache = {
+        device: () => this.surface.device,
+        lost: () => this.surface.lost,
+        changeFrame: () => frameOfChange(this.moverFrame, this.inFrame),
+        retire: (textures) => {
+            this.retiredTextures.push(...textures);
+        },
+    };
+    /**
+     * An eye's axis in the world for this draw, into the open material's \`uModelParams\`, and a new
+     * material slot when it moved: the axis is per draw, and a slot already taken by an earlier draw
+     * of the same eye must not be written under it. See \`eyeAxisInWorld\`.
+     */
+    writeEyeAxis(model, skinned) {
+        const eye = this.materialModel;
+        if (eye?.kind !== 'eye')
+            return;
+        const at = this.materialField('uModelParams') + 4;
+        const f = this.perFrameFloats;
+        const before0 = f[at];
+        const before1 = f[at + 1];
+        const before2 = f[at + 2];
+        eyeAxisInWorld(eye, model, skinned ? this.skinPaletteData : null, f, at);
+        if (f[at] !== before0 || f[at + 1] !== before1 || f[at + 2] !== before2)
+            this.materials.dirty();
+    }
+    /** The views the draw's cloth binds, or the stand-in's where no cloth is set. */
+    clothViews() {
+        const cloth = this.cloth;
+        return cloth === null ? this.clothStand() : clothViewsOf(cloth.binding, cloth.particles);
+    }
+    /** The one-texel stand-in a skinned group binds where there is no cloth, made on first need. */
+    clothStand() {
+        this.clothStandCache ??= clothStandIn(this.surface.device);
+        return this.clothStandCache.views;
+    }
     /**
      * Choose the morph weights the following `drawMesh` calls deform by, or null for none.
      *
@@ -2260,19 +2416,39 @@ export class WebGPURenderer {
         const albedo = material?.albedo ?? null;
         this.uvScale[0] = material?.uScale ?? 1;
         this.uvScale[1] = material?.vScale ?? 1;
+        this.uvOffset[0] = material?.uOffset ?? 0;
+        this.uvOffset[1] = material?.vOffset ?? 0;
         this.materialDoubleSided = material?.doubleSided === true;
         this.materialHasMaps = materialHasMaps(material);
         const normal = (material?.normal ?? null);
         const orm = (material?.orm ?? null);
         const emissiveMap = (material?.emissive ?? null);
+        const modelMap = (material?.modelMap ?? null);
+        this.materialModel = material?.model ?? null;
+        /* 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);
+        }
         this.material((f, i) => {
-            i[this.materialField('uAlbedoEnabled')] = albedo === null ? 0 : 1;
-            f[this.materialField('uAlbedoCutout')] = material?.cutout ?? 0;
-            i[this.materialField('uDoubleSided')] = material?.doubleSided === true ? 1 : 0;
+            /* The material's four switches, one row: albedo, ORM map, emissive map, two-sided. */
+            const flags = this.materialField('uMaterialFlags');
+            i[flags] = albedo === null ? 0 : 1;
+            /* The cutoff, how this frame resolves a dithered edge, and the frame its pattern moves with. */
+            const cutoff = albedo === null ? 0 : (material?.cutout ?? 0);
+            this.cutoutResolveStaged =
+                cutoff > 0
+                    ? resolveCutout(material?.cutoutMode ?? 'hard', this.reconstructing || this.temporalJittering, this.samples)
+                    : 'hard';
+            const cut = this.materialField('uCutout');
+            f[cut] = cutoff;
+            f[cut + 1] = CUTOUT_RESOLVE_CODE[this.cutoutResolveStaged];
+            f[cut + 2] = this.cutoutFrame;
+            i[flags + 3] = material?.doubleSided === true ? 1 : 0;
             /* 0 is no map, and gates the whole block in the shader. See `uNormalStrength`. */
             f[this.materialField('uNormalStrength')] =
                 normal === null ? 0 : (material?.normalStrength ?? 1);
-            i[this.materialField('uOrmEnabled')] = orm === null ? 0 : 1;
+            i[flags + 1] = orm === null ? 0 : 1;
             /*
              * Component-aligned with the map — r occlusion, g roughness, b metallic — so this order is
              * the channel order rather than the field order of `SurfaceMaterial`. Written component by
@@ -2283,7 +2459,7 @@ export class WebGPURenderer {
             f[scale] = material?.occlusionStrength ?? 1;
             f[scale + 1] = material?.roughnessScale ?? 1;
             f[scale + 2] = material?.metallicScale ?? 1;
-            i[this.materialField('uEmissiveMapEnabled')] = emissiveMap === null ? 0 : 1;
+            i[flags + 2] = emissiveMap === null ? 0 : 1;
             /*
              * One rather than zero on every component, because this multiplies rather than adds: an
              * unwritten float is zero, and zero here would switch off every glow the mesh's own vertex
@@ -2294,6 +2470,9 @@ export class WebGPURenderer {
             f[emissive] = asked?.[0] ?? 1;
             f[emissive + 1] = asked?.[1] ?? 1;
             f[emissive + 2] = asked?.[2] ?? 1;
+            /* The model's numbers and whether its map is bound. See `packModel`. */
+            packModel(material?.model ?? null, modelMap !== null, this.modelParams);
+            f.set(this.modelParams, this.materialField('uModelParams'));
         });
         /*
          * **One lookup for the whole material, and nothing thrown away.**
@@ -2307,14 +2486,16 @@ export class WebGPURenderer {
         if (this.albedo === albedo &&
             this.normalMap === normal &&
             this.ormMap === orm &&
-            this.emissiveMap === emissiveMap) {
+            this.emissiveMap === emissiveMap &&
+            this.modelMap === modelMap) {
             return;
         }
         this.albedo = albedo;
         this.normalMap = normal;
         this.ormMap = orm;
         this.emissiveMap = emissiveMap;
-        this.bindGroup = this.flatGroupForMaps(albedo, normal, orm, emissiveMap);
+        this.modelMap = modelMap;
+        this.bindGroup = this.flatGroupForMaps(albedo, normal, orm, emissiveMap, modelMap);
     }
     /**
      * @deprecated Use `setMaterial`. See `renderer.ts` for why this stays: 56 call sites across four
@@ -2336,8 +2517,14 @@ export class WebGPURenderer {
      * asking. Passing them in as well is deliberate: it is what makes the key and the group agree by
      * construction rather than by the caller having remembered.
      */
-    flatGroupForMaps(albedo, normal, orm, emissive) {
-        if (albedo === null && normal === null && orm === null && emissive === null) {
+    flatGroupForMaps(albedo, normal, orm, emissive, 
+    /** The model map, a fifth level of the same cache. See `flatBindGroups`. */
+    modelMap) {
+        if (albedo === null &&
+            normal === null &&
+            orm === null &&
+            emissive === null &&
+            modelMap === null) {
             return this.blankAlbedoBindGroup;
         }
         let byNormal = this.flatBindGroups.get(albedo);
@@ -2355,12 +2542,17 @@ export class WebGPURenderer {
             byEmissive = new Map();
             byOrm.set(orm, byEmissive);
         }
-        const existing = byEmissive.get(emissive);
+        let byModel = byEmissive.get(emissive);
+        if (byModel === undefined) {
+            byModel = new Map();
+            byEmissive.set(emissive, byModel);
+        }
+        const existing = byModel.get(modelMap);
         if (existing !== undefined)
             return existing;
         const built = this.buildFlatBindGroup();
         this.bindGroupBudget.ask();
-        byEmissive.set(emissive, built);
+        byModel.set(modelMap, built);
         return built;
     }
     /* -- Material state ------------------------------------------------------------------ */
@@ -2408,6 +2600,13 @@ export class WebGPURenderer {
             f[this.materialField('uGrain')] = Math.min(1, Math.max(0, amount));
         });
     }
+    /** Whether the surfaces drawn next meet the medium. See `renderer.ts`. */
+    setSurfaceFog(enabled) {
+        this.surfaceFog = enabled ? FOG_RECEDE : FOG_OFF;
+        this.material((_f, i) => {
+            i[this.materialField('uFogEnabled')] = this.surfaceFog;
+        });
+    }
     /**
      * How much of the surfaces drawn next survives a screen-door dither. See `renderer.ts`.
      *
@@ -4249,6 +4448,8 @@ export class WebGPURenderer {
     shadowSkinnedGroups = [];
     shadowSkinnedGroupsBeside = [];
     shadowSkinnedGroupsPalette = [];
+    shadowSkinnedGroupsCloth = [];
+    shadowSkinnedGroupsClothBinding = [];
     /** Held from construction so the skinned group can be rebuilt without them being threaded. */
     shadowBlankView = null;
     shadowBlankSampler = null;
@@ -4363,11 +4564,14 @@ export class WebGPURenderer {
         groups.set(texture, group);
         return group;
     }
-    /** The cutoff and UV scale into a cutout draw's slot, at the offsets its own variant declares. */
+    /** The cutoff and UV scale and offset into a cutout draw's slot, at its own variant's offsets. */
     writeCutout(slot, cutout, fields) {
         this.shadowDraws.writeFloat(slot, fields.uUvScale.offset, cutout.u);
         this.shadowDraws.writeFloat(slot, fields.uUvScale.offset + 4, cutout.v);
+        this.shadowDraws.writeFloat(slot, fields.uUvOffset.offset, cutout.uOffset);
+        this.shadowDraws.writeFloat(slot, fields.uUvOffset.offset + 4, cutout.vOffset);
         this.shadowDraws.writeFloat(slot, fields.uAlphaCutout.offset, cutout.cutoff);
+        this.shadowDraws.writeFloat(slot, fields.uAlphaCutout.offset + 4, cutout.dithered);
     }
     shadowGroup() {
         return this.shadowLayerIsPeel && this.shadowPeelBindGroup !== null
@@ -4381,14 +4585,18 @@ export class WebGPURenderer {
      * second independently fading occluder can be recorded, and a character is not one — it is the
      * thing in front. Serving it would mean a second cached group for a case nothing produces.
      */
-    shadowSkinnedGroup(palette, at) {
+    shadowSkinnedGroup(palette, at, cloth) {
         const beside = this.shadowBindGroup;
         if ((this.shadowSkinnedGroups[at] ?? null) === null ||
             this.shadowSkinnedGroupsBeside[at] !== beside ||
-            this.shadowSkinnedGroupsPalette[at] !== palette) {
-            this.shadowSkinnedGroups[at] = createDepthBindGroup(this.surface.device, this.shadowSkinnedLayout, this.shadowDraws.buffer, this.shadowPassUniforms, this.shadowBlankView, this.shadowBlankSampler, palette);
+            this.shadowSkinnedGroupsPalette[at] !== palette ||
+            this.shadowSkinnedGroupsCloth[at] !== cloth.particles ||
+            this.shadowSkinnedGroupsClothBinding[at] !== cloth.binding) {
+            this.shadowSkinnedGroups[at] = createDepthBindGroup(this.surface.device, this.shadowSkinnedLayout, this.shadowDraws.buffer, this.shadowPassUniforms, this.shadowBlankView, this.shadowBlankSampler, palette, null, cloth);
             this.shadowSkinnedGroupsBeside[at] = beside;
             this.shadowSkinnedGroupsPalette[at] = palette;
+            this.shadowSkinnedGroupsCloth[at] = cloth.particles;
+            this.shadowSkinnedGroupsClothBinding[at] = cloth.binding;
         }
         return this.shadowSkinnedGroups[at];
     }
@@ -4427,6 +4635,8 @@ export class WebGPURenderer {
             void this.overlayPipelines.enable(feature);
         if (this.latePipelines !== this.pipelines)
             void this.latePipelines.enable(feature);
+        if (this.skinPipelines !== null)
+            void this.skinPipelines.enable(feature);
     }
     /** One resolution every glass caster is read through, so recording one allocates nothing. */
     glassCasterScratch = {
@@ -4517,7 +4727,7 @@ export class WebGPURenderer {
             pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
             pass.drawIndexed(geometry.indexCount, count);
         },
-        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);
@@ -4547,8 +4757,13 @@ export class WebGPURenderer {
             const geometry = mesh;
             if (geometry.vertexBuffers === undefined || geometry.indexCount === 0)
                 return;
-            pass.setPipeline(depthPipeline(this.pipelines, this.surface.device, this.shadowSkinnedLayout, `depth-skinned|${this.depthCullMode}|${geometry.key ?? ''}`, this.presentOf(geometry), this.depthCullMode, true));
-            pass.setBindGroup(0, this.shadowSkinnedGroup(view, paletteSlot), [slot]);
+            /* A garment casts placed by its cloth, as it draws; `|cloth` keys the pipeline that does. */
+            const clothed = cloth !== undefined;
+            const clothViews = clothed
+                ? clothViewsOf(cloth.binding, cloth.particles)
+                : this.clothStand();
+            pass.setPipeline(depthPipeline(this.pipelines, this.surface.device, this.shadowSkinnedLayout, `${geometry.isSkinnedEight ? 'depth-skinned8' : 'depth-skinned'}${clothed ? '|cloth' : ''}|${this.depthCullMode}|${geometry.key ?? ''}`, this.presentOf(geometry), this.depthCullMode, true, false, false, geometry.isSkinnedEight, clothed));
+            pass.setBindGroup(0, this.shadowSkinnedGroup(view, paletteSlot, clothViews), [slot]);
             for (let index = 0; index < geometry.vertexBuffers.length; index++) {
                 pass.setVertexBuffer(index, geometry.vertexBuffers[index]);
             }
@@ -4881,6 +5096,18 @@ export class WebGPURenderer {
             this.pipelines.format === RECON_HISTORY_FORMAT && this.samples === 1
                 ? this.pipelines
                 : new PipelineCache(device, RECON_HISTORY_FORMAT, 1, glassShadows, quality.clusteredLights);
+        /*
+         * Screen-space skin needs the composite: linear light to add into, and the depth it resolves.
+         * Without one it is the pre-integrated fit alone, which is the default anyway, and said once.
+         */
+        const skinScreen = quality.skinScattering === 'screen-space' && quality.screenEffects;
+        if (quality.skinScattering === 'screen-space' && !quality.screenEffects) {
+            console.warn("WebGPU: skinScattering 'screen-space' needs screenEffects to add into; skin is pre-integrated");
+        }
+        this.skinScatter = skinScreen ? new SkinScatterPass(device) : null;
+        this.skinPipelines = skinScreen
+            ? new PipelineCache(device, SKIN_TARGET_FORMAT, this.samples, glassShadows, quality.clusteredLights)
+            : null;
         this.issueBound = this.issueCommand.bind(this);
         this.pipelineTargets =
             this.overlayPipelines === this.pipelines
@@ -4935,7 +5162,7 @@ export class WebGPURenderer {
          */
         this.perFrame = new UniformRing(device, this.fragment.uniformSize, this.quality.materialChangesPerFrame, USAGE_UNIFORM_DST, 'flat.fragRing', this.materialBudget);
         /*
-         * A one-pixel stand-in for the albedo binding. `uAlbedoEnabled` is zero for untextured
+         * A one-pixel stand-in for the albedo binding. The albedo's flag is zero for untextured
          * geometry, which is nearly all of it, so the shader never samples this — but WebGPU
          * requires every declared binding to be filled. WebGL2 keeps an `emptyTexture2D` for
          * exactly the same reason.
@@ -5139,6 +5366,13 @@ export class WebGPURenderer {
                     ? { view: blankSurfaceView, sampler: blankSampler }
                     : { view: map.view, sampler: map.sampler };
             }
+            /* The material's model map, or the stand-in, for the reason `uNormalMap` gives above. */
+            if (name === 'uModelMap') {
+                const map = this.modelMap;
+                return map === null
+                    ? { view: blankSurfaceView, sampler: blankSampler }
+                    : { view: map.view, sampler: map.sampler };
+            }
             if (name === 'uOrmMap') {
                 const map = this.ormMap;
                 return map === null
@@ -5714,6 +5948,8 @@ export class WebGPURenderer {
         }
         /* Not a layout entry of its own — it widens `uvs` — so read from the key beside them. */
         present['layers'] = key.includes(':layers');
+        /* Nor is a dynamic mesh's split, which moves positions and normals into buffers of their own. */
+        present['dynamic'] = key.includes(':dynamic');
         return present;
     }
     /**
@@ -5726,6 +5962,7 @@ export class WebGPURenderer {
      */
     beginFrame(clearColor) {
         this.cullFrame += 1;
+        this.cutoutFrame = (this.cutoutFrame + 1) % 64;
         /* Whatever an update replaced during the last frame; nothing recorded can read it now. */
         for (const texture of this.retiredTextures)
             texture.destroy();
@@ -5789,6 +6026,8 @@ export class WebGPURenderer {
         this.volumeDepthTaken = false;
         /* Last frame's snapshot is last frame's scene. */
         this.refractSnapshotTaken = false;
+        this.skinScattered = false;
+        this.skinScatter?.reset();
         this.plumeVerts.reset();
         this.plumeFrags.reset();
         this.waterVerts.reset();
@@ -5965,7 +6204,7 @@ export class WebGPURenderer {
      * neither the pipeline set nor the key depends on whether the geometry lands in one call or
      * over six frames.
      */
-    warmFlatPipelines(data) {
+    warmFlatPipelines(data, dynamic) {
         /*
          * **Every optional attribute, not the two that come to mind.** `present` decides where
          * each attribute sits in the interleaved buffer, and `createGpuMesh` decides the same
@@ -5992,6 +6231,15 @@ export class WebGPURenderer {
             present['layers'] = true;
             key += ':layers';
         }
+        /*
+         * A dynamic mesh keeps its positions and normals in buffers of their own (`GpuMesh.update`), so
+         * it binds four buffers where a static one binds two: a different layout, and a key that says
+         * so, or the two would share a pipeline whose buffers one of them does not have.
+         */
+        if (dynamic) {
+            present['dynamic'] = true;
+            key += ':dynamic';
+        }
         const fullKey = `${this.variant}|${key}`;
         /*
          * **For every target this mesh can land on, which is two when the overlay is its own.**
@@ -6047,14 +6295,16 @@ export class WebGPURenderer {
              * guessing which the scene will use.
              */
             const skinnable = data.joints !== undefined;
+            /* An eight-influence rig takes its own skinned pipelines, keyed `|skin8`. See skinning.ts. */
+            const eight = skinnable && data.joints2 !== undefined;
             const morphable = data.morphTargets !== undefined;
             for (const wantSkin of skinnable ? [false, true] : [false]) {
                 for (const wantMorph of morphable ? [false, true] : [false]) {
                     if (!wantSkin && !wantMorph)
                         continue;
-                    const suffix = `${wantMorph ? '|morph' : ''}${wantSkin ? '|skin' : ''}`;
+                    const suffix = `${wantMorph ? '|morph' : ''}${wantSkin ? (eight ? '|skin8' : '|skin') : ''}`;
                     for (const translucent of [false, true]) {
-                        void flatPipelineAsync(pipelines, this.surface.device, this.flatLayoutFor(wantSkin, wantMorph), this.variant, `${fullKey}${suffix}${translucent ? '|blend' : ''}`, present, translucent, wantSkin, wantMorph);
+                        void flatPipelineAsync(pipelines, this.surface.device, this.flatLayoutFor(wantSkin, wantMorph), this.variant, `${fullKey}${suffix}${translucent ? '|blend' : ''}`, present, translucent, wantSkin, wantMorph, wantSkin && eight);
                     }
                 }
             }
@@ -6075,7 +6325,7 @@ export class WebGPURenderer {
         return keyed;
     }
     createMesh(data, options = {}) {
-        const fullKey = this.warmFlatPipelines(data);
+        const fullKey = this.warmFlatPipelines(data, options.dynamic === true);
         return this.keyed(createGpuMesh(this.surface.device, data, options.dynamic === true), fullKey);
     }
     /**
@@ -6088,7 +6338,7 @@ export class WebGPURenderer {
      * can do nothing about. Done with `complete` still false is the signal that it was abandoned.
      */
     createMeshIncremental(data, options = {}) {
-        const fullKey = this.warmFlatPipelines(data);
+        const fullKey = this.warmFlatPipelines(data, options.dynamic === true);
         const { mesh, upload } = createGpuMeshIncremental(this.surface.device, data, options.dynamic === true);
         const surface = this.surface;
         return {
@@ -6105,18 +6355,18 @@ export class WebGPURenderer {
     /**
      * Rewrite a mesh's positions, and its normals where the caller has them.
      *
-     * Refused in words on a mesh that did not declare itself dynamic, because the thing that makes
-     * an update possible on this backend — the interleaved array the vertex data was built from —
-     * is only kept when a consumer asked for it. See `GpuMesh.update`.
+     * Refused in words on a mesh that did not declare itself dynamic, because what makes an update
+     * cheap on this backend — positions and normals in buffers of their own — is a layout chosen at
+     * creation. See `GpuMesh.update`.
      */
     updateMesh(mesh, positions, normals) {
         if (mesh.update === null) {
-            throw new Error('this mesh was not created with { dynamic: true }, so the interleaved vertex data it ' +
-                'would be patched from was not kept. Say so at `createMesh` — the flag is what decides ' +
-                'what is kept and what a buffer is hinted as.');
+            throw new Error('this mesh was not created with { dynamic: true }, so its positions share one buffer with ' +
+                'every other attribute and cannot be rewritten alone. Say so at `createMesh` — the flag ' +
+                'decides the layout, and what a buffer is hinted as.');
         }
         /*
-         * **The rows before this rewrite are last frame's**, kept only for a reconstruction and only
+         * **The positions before this rewrite are last frame's**, kept only for a reconstruction and only
          * on the first rewrite of a frame — a second must not replace where the vertices were last
          * frame with where they were a moment ago. A rewrite between frames is the next frame's. See
          * `changeFrames.ts`.
@@ -6248,8 +6498,13 @@ export class WebGPURenderer {
          * these per draw through the material block, the same shape `uOpacity` already uses.
          */
         i[at('uLightingEnabled')] = 1;
-        i[at('uFogEnabled')] = 1;
-        i[at('uAlbedoEnabled')] = 0;
+        i[at('uFogEnabled')] = FOG_RECEDE;
+        this.surfaceFog = FOG_RECEDE;
+        /* Every material switch off — albedo, ORM map, emissive map, two-sided — as WebGL2 resets them. */
+        i.fill(0, at('uMaterialFlags'), at('uMaterialFlags') + 4);
+        f[at('uCutout')] = 0;
+        f[at('uCutout') + 1] = 0;
+        this.cutoutResolveStaged = 'hard';
         this.materialHasMaps = false;
         /*
          * **The camera medium, which this pass did not upload until 2026-08-29.**
@@ -6380,7 +6635,7 @@ export class WebGPURenderer {
         /*
          * The ORM scales, whose base is 1 and not 0 — the value an unwritten uniform would hold.
          *
-         * `uOrmEnabled` needs no line here: an unwritten int is zero, and zero is exactly "no map".
+         * The ORM map's flag is zeroed with the others above, and zero is exactly "no map".
          * These three are the opposite case, the one this block's own header is about: a scale of
          * zero is a real and wrong value, so leaving them silent would not switch the map off, it
          * would read every channel as its floor the moment one was bound.
@@ -6666,6 +6921,8 @@ export class WebGPURenderer {
         this.bindGroup = this.blankAlbedoBindGroup;
         this.uvScale[0] = 1;
         this.uvScale[1] = 1;
+        this.uvOffset[0] = 0;
+        this.uvOffset[1] = 0;
     }
     /**
      * The slot the next draw's material lives in, taking a new one when something dirtied it.
@@ -6744,7 +7001,10 @@ export class WebGPURenderer {
         if (this.tracksMotionNow())
             this.recordDrawMotion(mesh, model, previousModel);
         noteMapsWithoutUvs(mesh, mesh.hasUvs, this.materialHasMaps);
-        this.submitMesh(mesh, model, tint, 1, false, { depthLayer });
+        /* An opaque draw meets the medium as the dial says: `submitMesh` reads an absent `fog` as
+           true, which is a translucent draw's default and would put every opaque draw back in the fog
+           `setSurfaceFog(false)` took it out of. */
+        this.submitMesh(mesh, model, tint, 1, false, { depthLayer, fog: this.surfaceFog !== FOG_OFF });
     }
     /**
      * Draw a mesh that lets the world through, at `opacity`.
@@ -6894,6 +7154,7 @@ export class WebGPURenderer {
         /* The material's repeats, not a constant: geometry authored in metres is textured at
            whatever density the material asks for without rebuilding it. */
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
+        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvOffset.offset, this.uvOffset);
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
         /*
          * Whether this mesh's tangent frame is real. WebGPU has no disabled attribute, so location 10
@@ -6926,7 +7187,7 @@ export class WebGPURenderer {
         /* Added light fades in the medium rather than receding into it. See `drawFog.ts`. */
         const fog = fogModeOf(options.fog ?? true, blend && options.additive === true);
         const toneMapped = options.toneMapped ?? true;
-        const unlitOrUnfogged = !lit || fog !== FOG_RECEDE;
+        const unlitOrUnfogged = !lit || fog !== this.surfaceFog;
         if (unlitOrUnfogged) {
             if (!lit)
                 this.perFrameInts[this.materialField('uLightingEnabled')] = 0;
@@ -6947,11 +7208,20 @@ export class WebGPURenderer {
          * before last. That is the defined state the two-backends rule asks for.
          */
         const refracting = this.bindSeeThrough(options);
+        /* A dithered cutout tests hard on a blended draw, which has nothing to average a pattern with;
+           put back below with the rest. See `cutoutDither.ts`. */
+        const ditheredBlend = blend && this.cutoutResolveStaged !== 'hard';
+        if (ditheredBlend)
+            this.perFrameFloats[this.materialField('uCutout') + 1] = 0;
         /* Taken for itself when any of those 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) || ditheredBlend;
         if (own)
             this.materials.dirty();
+        /* An eye's axis is the draw's, written into the open material. See `eyeAxisInWorld`. */
+        const modelKind = this.materialModel?.kind ?? null;
+        if (modelKind === 'eye')
+            this.writeEyeAxis(model, this.skinPaletteSlot >= 0 && mesh.isSkinned);
         const base = mesh.key ?? 'flat:s0:u0';
         /*
          * A rigged mesh takes the skinned vertex variant, an unrigged one the plain variant, and the
@@ -6963,7 +7233,12 @@ export class WebGPURenderer {
         const skinned = this.skinPaletteSlot >= 0 && mesh.isSkinned;
         const morphed = this.morphWeights !== null && mesh.morph !== null;
         const deltas = morphed && mesh.morph !== null ? mesh.morph.view() : null;
-        const keyed = `${base}${morphed ? '|morph' : ''}${skinned ? '|skin' : ''}`;
+        const eight = skinned && mesh.isSkinnedEight;
+        /* A cloth set and a skinned draw: the pipeline built with CLOTH_BOUND on, warmed when the
+           binding was made. See `createClothBinding`. */
+        const clothed = skinned && this.cloth !== null;
+        const keyed = `${base}${morphed ? '|morph' : ''}${skinned ? (eight ? '|skin8' : '|skin') : ''}` +
+            `${clothed ? '|cloth' : ''}`;
         /*
          * Depth writing and the overlay layer are pipeline state on this backend, so they belong in
          * the key: two draws of one mesh differing only in these would otherwise share a cached
@@ -6978,13 +7253,22 @@ export class WebGPURenderer {
         const layer = Math.min(Math.max(Math.round(options.depthLayer ?? 0), 0), MAX_DEPTH_LAYER);
         /* Added rather than blended over: its own blend state, so its own pipeline. */
         const adds = blend && options.additive === true;
+        const coverage = !blend && this.cutoutResolveStaged === 'coverage';
+        /* Skin under the screen-space blur draws its two halves; see `keepSkinDiffuse`. */
+        const splits = modelKind === 'skin' && !blend && this.skinSplits();
         const key = `${keyed}${blend ? (adds ? '|add' : '|blend') : ''}` +
             `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
             /* The two order-independent buffers are two formats and two blend states, so a draw into
                one must never share a cached pipeline with the same mesh drawn into the other. */
             `${this.oitMode === 'none' ? '' : `|oit${this.oitMode}`}` +
             /* Culling is pipeline state here: a two-sided surface culls nothing. */
-            `${this.materialDoubleSided ? '|2s' : ''}`;
+            `${this.materialDoubleSided ? '|2s' : ''}` +
+            /* And so is alpha-to-coverage, for a dithered cutout in a multisampled frame. */
+            `${coverage ? '|a2c' : ''}` +
+            /* And the material's shading model, which is the fragment stage's own switch. */
+            `${modelKind === null ? '' : `|m:${modelKind}`}` +
+            /* And which half of a skin it draws, under the screen-space blur. */
+            `${splits ? '|ss' : ''}`;
         /*
          * The morph uniforms, written only for a morphed draw and read from the *morphed* variant's
          * field table. `FLAT_VERT_FIELDS` is the plain variant's and does not name them at all — every
@@ -7014,7 +7298,7 @@ export class WebGPURenderer {
             if (present === undefined) {
                 throw new Error(`WebGPU: no pipeline for ${key}; createMesh builds it`);
             }
-            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, key, present, adds ? 'additive' : blend, skinned, morphed, depthWrite, layer, false, this.oitMode, this.materialDoubleSided);
+            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, key, present, adds ? 'additive' : blend, skinned, morphed, depthWrite, layer, false, this.oitMode, this.materialDoubleSided, coverage, eight, clothed, modelKind, splits ? 'scene' : 'whole');
         }
         /*
          * Guards the draw call only, not the restore below.
@@ -7068,6 +7352,9 @@ export class WebGPURenderer {
                 pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
                 pass.drawIndexed(mesh.indexCount);
             }
+            if (splits) {
+                this.keepSkinDiffuse(mesh, key, base, skinned, morphed, deltas, layer, eight, clothed, slot, material);
+            }
         }
         /* Back to the defaults for whatever is drawn next, exactly as `renderer.ts` restores them —
            unconditionally, because the scratch state above is shared by every draw after this one
@@ -7079,7 +7366,7 @@ export class WebGPURenderer {
         if (unlitOrUnfogged) {
             if (!lit)
                 this.perFrameInts[this.materialField('uLightingEnabled')] = 1;
-            this.perFrameInts[this.materialField('uFogEnabled')] = FOG_RECEDE;
+            this.perFrameInts[this.materialField('uFogEnabled')] = this.surfaceFog;
         }
         /* Back to off for every other draw in the frame, exactly as `uOpacity` is: this scratch is
            shared, so a strength left set is worn by everything drawn after it. */
@@ -7088,6 +7375,10 @@ export class WebGPURenderer {
         if (!toneMapped) {
             this.perFrameInts[this.materialField('uOutputTransform')] = this.gradeCode();
         }
+        if (ditheredBlend) {
+            this.perFrameFloats[this.materialField('uCutout') + 1] =
+                CUTOUT_RESOLVE_CODE[this.cutoutResolveStaged];
+        }
         if (own)
             this.materials.dirty();
     }
@@ -7284,6 +7575,7 @@ export class WebGPURenderer {
         const lands = blend && options.reconstructed !== true && this.drawsLate();
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uViewProj.offset, lands ? this.correctedViewProj : this.viewProj);
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
+        this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvOffset.offset, this.uvOffset);
         this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
         this.perDraw.writeInt(slot, FLAT_VERT_FIELDS.uHasTangents.offset, mesh.hasTangents ? 1 : 0);
         const dimmed = opacity < 1;
@@ -7293,7 +7585,7 @@ export class WebGPURenderer {
         const lit = options.lit ?? true;
         const fog = fogModeOf(options.fog ?? true, blend && options.additive === true);
         const toneMapped = options.toneMapped ?? true;
-        const unlitOrUnfogged = !lit || fog !== FOG_RECEDE;
+        const unlitOrUnfogged = !lit || fog !== this.surfaceFog;
         if (unlitOrUnfogged) {
             if (!lit)
                 this.perFrameInts[this.materialField('uLightingEnabled')] = 0;
@@ -7306,9 +7598,17 @@ export class WebGPURenderer {
         const layer = Math.min(Math.max(Math.round(options.depthLayer ?? 0), 0), MAX_DEPTH_LAYER);
         /* A blended batch shows what is behind it — refraction or glass — as a single draw does. */
         const refracting = blend && this.bindSeeThrough(options);
-        const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
+        /* As a single draw: a blended batch tests a dithered cutout hard, an opaque one in a
+           multisampled frame takes coverage. See `cutoutDither.ts`. */
+        const ditheredBlend = blend && this.cutoutResolveStaged !== 'hard';
+        if (ditheredBlend)
+            this.perFrameFloats[this.materialField('uCutout') + 1] = 0;
+        const coverage = !blend && this.cutoutResolveStaged === 'coverage';
+        const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting }, this.surfaceFog) || ditheredBlend;
         if (own)
             this.materials.dirty();
+        /* A batch shades by its material's model too; an eye's axis is a placement's, not a batch's. */
+        const modelKind = this.materialModel?.kind ?? null;
         const base = mesh.key ?? 'flat:s0:u0';
         /* `|inst` in the key, for the reason every other suffix is there: an instanced pipeline binds
            a third vertex buffer and a different vertex module, and sharing a cache entry with the
@@ -7316,7 +7616,8 @@ export class WebGPURenderer {
         const adds = blend && options.additive === true;
         const key = `${base}|inst${blend ? (adds ? '|add' : '|blend') : ''}` +
             `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
-            `${this.materialDoubleSided ? '|2s' : ''}`;
+            `${this.materialDoubleSided ? '|2s' : ''}${coverage ? '|a2c' : ''}` +
+            `${modelKind === null ? '' : `|m:${modelKind}`}`;
         const pipelines = blend ? this.blendedPipelines(lands) : this.targetPipelines();
         let pipeline = pipelines.peek(key);
         if (pipeline === undefined) {
@@ -7324,7 +7625,7 @@ export class WebGPURenderer {
             if (present === undefined) {
                 throw new Error(`WebGPU: no mesh attributes recorded for ${base}; createMesh records them`);
             }
-            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(false, false), this.variant, key, present, adds ? 'additive' : blend, false, false, depthWrite, layer, true, 'none', this.materialDoubleSided);
+            pipeline = flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(false, false), this.variant, key, present, adds ? 'additive' : blend, false, false, depthWrite, layer, true, 'none', this.materialDoubleSided, coverage, false, false, modelKind);
         }
         const material = this.materialSlotForDraw();
         if (material !== null) {
@@ -7375,13 +7676,17 @@ export class WebGPURenderer {
         }
         if (unlitOrUnfogged) {
             this.perFrameInts[this.materialField('uLightingEnabled')] = 1;
-            this.perFrameInts[this.materialField('uFogEnabled')] = FOG_RECEDE;
+            this.perFrameInts[this.materialField('uFogEnabled')] = this.surfaceFog;
         }
         if (!toneMapped) {
             this.perFrameInts[this.materialField('uOutputTransform')] = this.gradeCode();
         }
         if (refracting)
             this.releaseSeeThrough();
+        if (ditheredBlend) {
+            this.perFrameFloats[this.materialField('uCutout') + 1] =
+                CUTOUT_RESOLVE_CODE[this.cutoutResolveStaged];
+        }
         if (own)
             this.materials.dirty();
     }
@@ -7599,12 +7904,16 @@ export class WebGPURenderer {
             this.bindSceneCasterMaterial(material);
             this.drawMesh(mesh, model);
         },
-        skinnedMesh: (mesh, model, palette, material) => {
+        skinnedMesh: (mesh, model, palette, material, cloth) => {
             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) => {
             this.bindSceneCasterMaterial(material);
@@ -8354,14 +8663,20 @@ export class WebGPURenderer {
         /* Slot `k` caches at `k + 1`; index 0 is the morphed draw that is not skinned and has no
            slot of its own. See `skinnedGroups`. */
         const at = skinned ? this.skinPaletteSlot + 1 : 0;
+        /* A skinned group carries the cloth's views, or the stand-in's: see `clothViews`. */
+        const cloth = skinned ? this.clothViews() : null;
         if ((this.skinnedGroups[at] ?? null) === null ||
             this.skinnedGroupsBeside[at] !== this.bindGroup ||
             this.skinnedGroupsPalette[at] !== palette ||
-            this.skinnedGroupsDeltas[at] !== deltas) {
-            this.skinnedGroups[at] = createFlatBindGroup(this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, this.perDraw.buffer, this.perFrame.buffer, this.flatTextures, palette, deltas);
+            this.skinnedGroupsDeltas[at] !== deltas ||
+            this.skinnedGroupsCloth[at] !== (cloth?.particles ?? null) ||
+            this.skinnedGroupsClothBinding[at] !== (cloth?.binding ?? null)) {
+            this.skinnedGroups[at] = createFlatBindGroup(this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, this.perDraw.buffer, this.perFrame.buffer, this.flatTextures, palette, deltas, cloth);
             this.skinnedGroupsBeside[at] = this.bindGroup;
             this.skinnedGroupsPalette[at] = palette;
             this.skinnedGroupsDeltas[at] = deltas;
+            this.skinnedGroupsCloth[at] = cloth?.particles ?? null;
+            this.skinnedGroupsClothBinding[at] = cloth?.binding ?? null;
         }
         return this.skinnedGroups[at];
     }
@@ -8430,16 +8745,19 @@ export class WebGPURenderer {
         const normalMap = this.normalMap;
         const ormMap = this.ormMap;
         const emissiveMap = this.emissiveMap;
+        const modelMap = this.modelMap;
         this.albedo = null;
         this.normalMap = null;
         this.ormMap = null;
         this.emissiveMap = null;
+        this.modelMap = null;
         this.blankAlbedoBindGroup = this.buildFlatBindGroup();
         this.albedo = albedo;
         this.normalMap = normalMap;
         this.ormMap = ormMap;
         this.emissiveMap = emissiveMap;
-        this.bindGroup = this.flatGroupForMaps(this.albedo, this.normalMap, this.ormMap, this.emissiveMap);
+        this.modelMap = modelMap;
+        this.bindGroup = this.flatGroupForMaps(this.albedo, this.normalMap, this.ormMap, this.emissiveMap, this.modelMap);
         /* The open material lives in a slot of a buffer that no longer exists. */
         this.materials.dirty();
     }
@@ -8477,13 +8795,14 @@ export class WebGPURenderer {
         if (this.albedo === null &&
             this.normalMap === null &&
             this.ormMap === null &&
-            this.emissiveMap === null) {
+            this.emissiveMap === null &&
+            this.modelMap === null) {
             this.blankAlbedoBindGroup = this.buildFlatBindGroup();
             this.bindGroupBudget.ask();
             this.bindGroup = this.blankAlbedoBindGroup;
             return;
         }
-        this.bindGroup = this.flatGroupForMaps(this.albedo, this.normalMap, this.ormMap, this.emissiveMap);
+        this.bindGroup = this.flatGroupForMaps(this.albedo, this.normalMap, this.ormMap, this.emissiveMap, this.modelMap);
     }
     /**
      * The sky, as one triangle covering the screen with the world reconstructed per fragment.
@@ -9142,6 +9461,9 @@ export class WebGPURenderer {
      * the only moment they can land; everything else keeps the path it has.
      */
     recordBlended(reads, lands = this.drawsLate()) {
+        /* Skin is spread and added before anything blended lands over it. See `runSkinScatter`. */
+        if (this.skinScatter !== null && !this.skinScattered)
+            this.runSkinScatter();
         const late = this.latePass;
         if (late !== null && lands)
             return late.take();
@@ -9207,6 +9529,14 @@ export class WebGPURenderer {
         const dynamic = mesh.motion;
         const rows = dynamic?.previous ?? null;
         const rewritten = rows !== null && dynamic !== null && dynamic.changed === this.moverFrame;
+        const cloth = this.cloth;
+        if (cloth !== null &&
+            this.skinPaletteSlot >= 0 &&
+            mesh.isSkinned &&
+            mesh.skinOffsets !== null) {
+            this.recordClothMotion(mesh, model, previous, cloth);
+            return;
+        }
         if (previous === null) {
             if (rewritten)
                 this.motionPass?.recordDynamic(mesh, model, model, rows);
@@ -9251,6 +9581,41 @@ export class WebGPURenderer {
             return;
         this.motionPass?.recordSkinned(mesh, model, mover.previousModel, now, was);
     }
+    /**
+     * A cloth-bound draw's motion. **Recorded even where the caller named no previous place**, as a
+     * rewritten mesh's is: the particles carry their own past, and a garment swinging on a character
+     * standing still is motion nobody else can see. Where the rig is a `Mover` its last pose is taken
+     * as a skinned mover's is; otherwise the rig is taken not to have moved.
+     */
+    recordClothMotion(mesh, model, previous, cloth) {
+        const now = this.skinPalettes.view(this.skinPaletteSlot);
+        if (now === null)
+            return;
+        let was = now;
+        let wasModel = model;
+        if (previous !== null && isMover(previous)) {
+            const verdict = advanceMover(previous, this.moverRenderer, this.moverFrame, model, this.skinPaletteData);
+            if (verdict === MOVER_TWICE) {
+                this.warnMoverTwice();
+                return;
+            }
+            if (verdict === MOVER_MOTION) {
+                const slot = this.skinPalettes.take(this.surface.device, previous.previousPalette);
+                was = slot === null ? null : this.skinPalettes.view(slot);
+                wasModel = previous.previousModel;
+            }
+        }
+        else if (previous !== null) {
+            wasModel = previous;
+        }
+        if (was === null)
+            return;
+        const particlesWas = cloth.particles.previousAt(this.moverFrame);
+        /* Nothing said it moved and nothing did: the camera's motion, derived from depth, is the answer. */
+        if (previous === null && particlesWas === cloth.particles.current)
+            return;
+        this.motionPass?.recordCloth(mesh, model, wasModel, now, was, cloth.binding.bindingView, cloth.particles.current, particlesWas);
+    }
     warnMoverTwice() {
         if (this.warnedMoverTwice)
             return;
@@ -9583,7 +9948,7 @@ export class WebGPURenderer {
             label: 'post.ssr.resolve',
             colorAttachments: [{ view: scene, loadOp: 'load', storeOp: 'store' }],
         });
-        resolve.setPipeline(postPipeline(this.pipelines, device, this.ssrResolveLayout, 'post.ssrResolve', SSR_RESOLVE_FRAG_WGSL, this.pipelines.format, PREMULTIPLIED_OVER_BLEND));
+        resolve.setPipeline(postPipeline(this.pipelines, device, this.ssrResolveLayout, 'post.ssrResolve', SSR_RESOLVE_FRAG_WGSL, this.pipelines.format, REFLECTION_OVER_BLEND));
         resolve.setBindGroup(0, resolveGroup);
         resolve.draw(3);
         resolve.end();
@@ -10173,6 +10538,106 @@ export class WebGPURenderer {
         this.refractSnapshotTaken = true;
         return true;
     }
+    /**
+     * Whether a skin draw now draws its two halves: the profile asked, the frame has not spread its
+     * skin yet, and this is the frame's own picture — not a mirror's, a probe's, an overlay after
+     * the frame, or an order-independent set, none of which the spread reads.
+     */
+    skinSplits() {
+        return (this.skinScatter !== null &&
+            !this.skinScattered &&
+            !this.reflectionPassActive &&
+            !this.probePassActive &&
+            !this.framePresented &&
+            !this.overlayActive &&
+            this.oitMode === 'none');
+    }
+    /**
+     * A skin draw's diffuse half, kept for the spread: the frame's draw again, with the same slots,
+     * buffers and bind group, through the pipeline that writes the diffuse alone into the blur's
+     * target and tests for the depth its frame half wrote.
+     */
+    keepSkinDiffuse(mesh, frameKey, base, skinned, morphed, deltas, layer, eight, clothed, slot, material) {
+        const skin = this.skinScatter;
+        const pipelines = this.skinPipelines;
+        const present = this.meshPresent.get(base);
+        if (skin === null || pipelines === null || present === undefined)
+            return;
+        const key = `${frameKey}|sd`;
+        const pipeline = pipelines.peek(key) ??
+            flatPipeline(pipelines, this.surface.device, this.flatLayoutFor(skinned, morphed), this.variant, key, present, false, skinned, morphed, true, layer, false, 'none', this.materialDoubleSided, false, eight, clothed, 'skin', 'diffuse');
+        const command = skin.take();
+        command.pipeline = pipeline;
+        command.bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
+        command.offsetA = slot;
+        command.offsetB = material;
+        command.offsetCount = 2;
+        for (let index = 0; index < mesh.vertexBuffers.length; index++) {
+            command.vertexBuffers[index] = mesh.vertexBuffers[index];
+        }
+        command.vertexCount = mesh.vertexBuffers.length;
+        command.indexBuffer = mesh.indexBuffer;
+        command.indexed = true;
+        command.count = mesh.indexCount;
+        command.instances = 1;
+        command.indirect = null;
+    }
+    /**
+     * Spread the frame's skin and add it back: once, at the first blended draw or before the frame's
+     * last flush. **A fifth instance of the boundary `takeRefractSnapshot` describes** — flush, end
+     * the pass, work between passes, reopen with `loadOp: 'load'` — and refused where that one is,
+     * for its reasons. Between the passes: the kept diffuse halves into their target against the
+     * frame's depth, the depth resolved, and `SkinScatterPass.spread` across and then down into the
+     * frame's colour.
+     */
+    runSkinScatter() {
+        const skin = this.skinScatter;
+        if (skin === null || this.skinScattered)
+            return;
+        /* Latched whether or not skin was kept: a skin drawn after this point is the whole surface. */
+        this.skinScattered = true;
+        if (!skin.pending)
+            return;
+        if (this.reflectionPassActive || this.probePassActive || this.oitReplaying)
+            return;
+        const encoder = this.encoder;
+        const depth = this.depthView;
+        const resolved = this.resolvedDepthView;
+        const target = this.compositeTarget();
+        const projection = this.frameProjection;
+        if (encoder === null || depth === null || resolved === null)
+            return;
+        if (target === null || projection === null)
+            return;
+        if (this.pass === null && this.openPass() === null)
+            return;
+        if (this.pass === null)
+            return;
+        if (this.quality.frameGraph)
+            this.flushGraph();
+        this.pass.end();
+        const size = this.sceneSize();
+        skin.size(size.width, size.height, this.samples);
+        skin.drawDiffuse(encoder, depth, this.issueBound, this.gpuTimer.writesFor());
+        this.resolveDepth(encoder);
+        mat4.invert(this.skinInverseProjection, projection);
+        const multisampled = this.compositeMsaa();
+        skin.spread(encoder, this.pipelines, resolved, multisampled ?? target, multisampled === null ? null : target, this.samples, projection, this.skinInverseProjection, () => this.gpuTimer.writesFor());
+        this.pass = encoder.beginRenderPass({
+            label: 'skin.scattered',
+            timestampWrites: this.gpuTimer.writesFor(),
+            colorAttachments: [
+                {
+                    view: multisampled ?? target,
+                    resolveTarget: multisampled !== null ? target : undefined,
+                    /* Loaded, not cleared: the frame so far, with its skin added. */
+                    loadOp: 'load',
+                    storeOp: resolvedStoreOp(multisampled !== null, false, this.quality.discardResolvedAttachments),
+                },
+            ],
+            depthStencilAttachment: { view: depth, depthLoadOp: 'load', depthStoreOp: 'store' },
+        });
+    }
     takeVolumeDepth() {
         /*
          * **Never while the mirror is open, and this is a correctness fix rather than a saving.**
@@ -10795,6 +11260,8 @@ export class WebGPURenderer {
          * `beginFrame` resets it. Silent, and exactly the kind of loss the arena is designed
          * against everywhere else.
          */
+        /* Before the last flush, which may let the depth go that the spread still reads. */
+        this.runSkinScatter();
         this.flushGraph('boundary', this.liveOutFinalFlush());
         /*
          * `ensurePass` rather than a null check: the frame's pass is opened on demand now, so a
@@ -13612,6 +14079,7 @@ export class WebGPURenderer {
      * the 2026-08-13 rule asks for — one decision, bound twice.
      */
     dispose() {
+        this.skinScatter?.dispose();
         this.motionPass?.dispose();
         this.motionPass = null;
         this.latePass?.dispose();
@@ -13651,3 +14119,11 @@ export class WebGPURenderer {
         this.surface.dispose();
     }
 }
+/**
+ * The views a binding and a character's particles bind as, built once a pair and kept on the
+ * particles: a bind group is cached by its views' identity, so a fresh object a draw would rebuild
+ * the group every draw.
+ */
+function clothViewsOf(binding, particles) {
+    return particles.viewsWith(binding);
+}