@driftengine/core 4.10.0 → 4.11.1

package/src/render/backend/webgpu/renderer.ts

@@ -1,3 +1,5 @@
+import { vertexPackingOf } from '../../vertexPacking.ts';
+import { markPacking, markPackingOfKey, packingKey } from './vertexFormats.ts';
 import { mat4 } from 'gl-matrix';
 import type { ProbeBakeOptions } from '../../reflectionProbe.ts';
 import { probeFaceRange } from '../../reflectionProbe.ts';
@@ -57,7 +59,7 @@ import type {
   SkyColors,
   TranslucentMeshOptions,
 } from '../webgl2/renderer.ts';
-import type { IncrementalMeshHandle, MeshOptions } from '../api.ts';
+import type { IncrementalMeshHandle, MeshOptions, PrepareOptions } from '../api.ts';
 import { resolveAtmosphere, type ResolvedAtmosphere } from '../../atmosphere.ts';
 import { AMBIENT_SH_FLOATS, packAmbientSH } from '../../ambientHarmonics.ts';
 import {
@@ -194,6 +196,18 @@ import {
   packSurfaceOverlay,
   type SurfaceOverlay,
 } from '../../surfaceOverlay.ts';
+import { PROJECTION_FLOATS, packSurfaceProjection } from '../../surfaceProjection.ts';
+import { resolveTransmission } from '../../transmission.ts';
+import { resolveOcclusionFade } from '../../occlusionFade.ts';
+import { orthographicDepthSpan } from '../../lightMatrix.ts';
+import {
+  LAYER_FLOATS,
+  layerMaskMap,
+  layeredProjection,
+  layersFitBeside,
+  packSurfaceLayers,
+} from '../../surfaceLayers.ts';
+import type { SurfaceLayers } from '../../surfaceLayers.ts';
 import {
   frameReflectionsRefused,
   resolveFrameReflections,
@@ -750,6 +764,12 @@ const MAX_OVERLAYS = 64;
  */
 const MAX_SKY_DRAWS = 64;
 
+/** The draw a preparation asks pipelines for: every option at its default. See `prepareMesh`. */
+const PREPARED_DRAW: TranslucentMeshOptions = {};
+/** A preparation's morph states for a mesh with no targets, and for one with some. */
+const NOT_MORPHED: readonly boolean[] = [false];
+const MORPHED_OR_NOT: readonly boolean[] = [false, true];
+
 /**
  * Whether the environment probe's permutation fits this device's per-stage binding limits.
  *
@@ -1530,7 +1550,21 @@ export class WebGPURenderer implements RendererApi {
    * flight at the time, so a consumer that builds more meshes later can wait again.
    */
   async ready(): Promise<void> {
-    await Promise.all(this.pipelineTargets.map((cache) => cache.ready()));
+    await Promise.all(this.pipelineCaches().map((cache) => cache.ready()));
+  }
+
+  /** Every distinct cache a lit draw reaches: the frame's, the canvas's, the late pass's, skin's. */
+  private pipelineCaches(): PipelineCache[] {
+    const caches = [...this.pipelineTargets];
+    for (const cache of [this.latePipelines, this.skinPipelines]) {
+      if (cache !== null && !caches.includes(cache)) caches.push(cache);
+    }
+    return caches;
+  }
+
+  /** Whether a lit draw whose pipeline is not built is left out while it compiles. */
+  private skipCompiling(skips: boolean): void {
+    for (const cache of this.pipelineCaches()) cache.skipsCompiling = skips;
   }
 
   private presentedFrameCount = 0;
@@ -2327,6 +2361,8 @@ export class WebGPURenderer implements RendererApi {
 
   private readonly aoStaging = new ArrayBuffer(AO_FRAG_SIZE);
   private readonly aoFloats = new Float32Array(this.aoStaging);
+  /** Where occlusion fades out with distance, `uFade`: none until a caller sets one. */
+  private readonly aoFade = new Float32Array([-1, 0]);
   private aoBindGroup: GPUBindGroup | null = null;
   private readonly aoBlurLayout: GPUBindGroupLayout;
   /**
@@ -2927,6 +2963,7 @@ export class WebGPURenderer implements RendererApi {
       }
       filmCommand.vertexCount = geometry.vertexBuffers.length;
       filmCommand.indexBuffer = geometry.indexBuffer;
+      filmCommand.indexFormat = geometry.indexFormat;
       filmCommand.indexed = true;
       filmCommand.count = geometry.indexCount;
     } else {
@@ -2937,7 +2974,7 @@ export class WebGPURenderer implements RendererApi {
       for (let index = 0; index < geometry.vertexBuffers.length; index++) {
         pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
       }
-      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.setIndexBuffer(geometry.indexBuffer, geometry.indexFormat);
       pass.drawIndexed(geometry.indexCount);
     }
   }
@@ -2974,6 +3011,17 @@ export class WebGPURenderer implements RendererApi {
   private modelMap: GpuSurfaceTexture | null = null;
   /** The material's shading model, which picks the lit pipeline: null the standard. */
   private materialModel: SurfaceModel | null = null;
+  /** `uWorldUv`, the material's projection packed by `packSurfaceProjection`. */
+  private readonly projection = new Float32Array(PROJECTION_FLOATS);
+  /** `uLayers`, the material's layers packed by `packSurfaceLayers`. */
+  private readonly layerFloats = new Float32Array(LAYER_FLOATS);
+  /**
+   * `uGlassTint` as the material leaves it, its light from behind and that light's colour, which a
+   * pane overwrites for its own draw and `releaseSeeThrough` puts back. See `transmission.ts`.
+   */
+  private readonly transmission = new Float32Array([-1, -1, -1, 0]);
+  private warnedLayersModelMap = false;
+  private warnedLayersTriplanar = false;
   /** Its numbers, `uModelParams`, packed by `packModel`. */
   private readonly modelParams = new Float32Array(MODEL_PARAM_FLOATS);
   /**
@@ -3448,7 +3496,10 @@ export class WebGPURenderer implements RendererApi {
     const normal = (material?.normal ?? null) as GpuSurfaceTexture | null;
     const orm = (material?.orm ?? null) as GpuSurfaceTexture | null;
     const emissiveMap = (material?.emissive ?? null) as GpuSurfaceTexture | null;
-    const modelMap = (material?.modelMap ?? null) as GpuSurfaceTexture | null;
+    const ownModelMap = (material?.modelMap ?? null) as GpuSurfaceTexture | null;
+    /* A layered material's mask, where it is a map, goes where a model's would: surfaceLayers.ts. */
+    const layers = this.layersOf(material);
+    const modelMap = ownModelMap ?? layerMaskMap(layers);
     this.materialModel = material?.model ?? null;
     const reflectivity = material?.reflectivity;
     const environmentGain = material?.environmentGain;
@@ -3459,7 +3510,7 @@ export class WebGPURenderer implements RendererApi {
     this.writeEnvironmentDials();
     /* What the blur spreads this skin by: the last material to name a profile says. */
     const model = material?.model;
-    warnUnpagedLightmap(model, modelMap);
+    warnUnpagedLightmap(model, ownModelMap);
     if (model?.kind === 'skin' && this.skinScatter !== null) {
       this.skinScatter.setProfile(
         model.profile,
@@ -3518,12 +3569,25 @@ export class WebGPURenderer implements RendererApi {
       /* The model's numbers and whether its map is bound. See `packModel`. */
       packModel(
         material?.model ?? null,
-        modelMap !== null,
+        ownModelMap !== null,
         this.modelParams,
         material?.physicalSpecular === true,
       );
       /* The first physical highlight asked for is when the lit pipelines start carrying one. */
       if (material?.physicalSpecular === true) this.enableLit('PHYSICAL_SPECULAR');
+      /* Maps placed by the world: the first material that asks is when lit pipelines carry it. */
+      const projection = layeredProjection(material?.projection, layers);
+      if (projection !== (material?.projection ?? null)) this.warnLayersTriplanar();
+      packSurfaceProjection(projection, this.projection);
+      f.set(this.projection, this.materialField('uWorldUv'));
+      /* How much light from behind it lets through, and its colour: transmission.ts. */
+      resolveTransmission(material, this.transmission);
+      f.set(this.transmission, this.materialField('uGlassTint'));
+      if ((this.projection[0] as number) > 0) this.enableLit('WORLD_UVS');
+      /* And its layers, the first time a material blends any: layered.ts. */
+      packSurfaceLayers(layers, this.layerFloats);
+      f.set(this.layerFloats, this.materialField('uLayers'));
+      if (layers !== null) this.enableLit('LAYERED');
       f.set(this.modelParams, this.materialField('uModelParams'));
     });
     /*
@@ -3731,6 +3795,14 @@ export class WebGPURenderer implements RendererApi {
     this.materials.dirty();
   }
 
+  /** Whether the draws that follow spend their own opacity on that screen door. See `renderer.ts`. */
+  setDitherOpacity(on: boolean): void {
+    if (this.surface.lost) return;
+    /* The third lane of `uWriteMode`, beside the fade. */
+    this.perFrameFloats[this.materialField('uWriteMode') + 2] = on ? 1 : 0;
+    this.materials.dirty();
+  }
+
   /**
    * How strong the microscopic relief on the surfaces drawn next is, and how coarse.
    *
@@ -5228,6 +5300,11 @@ export class WebGPURenderer implements RendererApi {
         at('uLightViewProj'),
         env === undefined ? NO_LIGHT_MATRIX : (env.lightViewProj as Float32Array),
       );
+      ring.writeFloats(
+        fragmentSlot,
+        at('uMovingLightViewProj'),
+        env === undefined ? NO_LIGHT_MATRIX : (this.movingLightFor(env) as Float32Array),
+      );
       ring.writeFloat(fragmentSlot, at('uShadowMapSize'), this.quality.directionalShadowMapSize);
       /* Sampled only where a pass filled it — see `peelFilled` for why existing is not enough. */
       ring.writeInt(fragmentSlot, at('uPeeledShadowEnabled'), this.peelFilled ? 1 : 0);
@@ -5267,6 +5344,7 @@ export class WebGPURenderer implements RendererApi {
       }
       volumeCommand.vertexCount = mesh.vertexBuffers.length;
       volumeCommand.indexBuffer = mesh.indexBuffer;
+      volumeCommand.indexFormat = mesh.indexFormat;
       volumeCommand.indexed = true;
       volumeCommand.count = mesh.indexCount;
     } else {
@@ -5275,7 +5353,7 @@ export class WebGPURenderer implements RendererApi {
       for (let index = 0; index < mesh.vertexBuffers.length; index++) {
         pass.setVertexBuffer(index, mesh.vertexBuffers[index] as GPUBuffer);
       }
-      pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
+      pass.setIndexBuffer(mesh.indexBuffer, mesh.indexFormat);
       pass.drawIndexed(mesh.indexCount);
     }
   }
@@ -6116,6 +6194,22 @@ export class WebGPURenderer implements RendererApi {
    * the texel-for-texel comparison that settled it.
    */
   private readonly correctedLightViewProj = new Float32Array(16);
+  /**
+   * What a receiver projects through to read the sun's static layers: the environment's
+   * `lightViewProj`, taken at `bindMeshPass` as WebGL2 takes it there.
+   *
+   * **It was the last shadow pass's matrix**, which is the environment's wherever both layers are
+   * drawn with one and the moving layer's wherever they are not: the static layer was then read
+   * through the moving layer's tight square, and a distant pillar lost its shadow on WebGPU and kept
+   * it on WebGL2, measured on demo/dev/sunLayers.html?moving=tight.
+   */
+  private readonly receiverLightViewProj = new Float32Array(16);
+  /**
+   * The matrix the sun's dynamic shadow pass was last drawn with, uncorrected as the lit stage
+   * projects with, and whether one has been. See `movingLightFor`.
+   */
+  private readonly movingLightViewProj = new Float32Array(16);
+  private movingLightKnown = false;
   /**
    * The same matrix *uncorrected*, which is what the flat shader must project with.
    *
@@ -6246,6 +6340,59 @@ export class WebGPURenderer implements RendererApi {
     this.enableLit('GLASS_SHADOWS');
   }
 
+  /**
+   * A material's layers where they can be drawn: none asked, or a model's map in the mask's place,
+   * said once, leave one layer.
+   */
+  private layersOf(
+    material: SurfaceMaterial<GpuSurfaceTexture> | null,
+  ): SurfaceLayers<GpuSurfaceTexture> | null {
+    const layers = material?.layers ?? null;
+    if (layers === null || layers.repeats.length === 0) return null;
+    if (layersFitBeside(layers, material?.modelMap)) return layers;
+    if (!this.warnedLayersModelMap) {
+      this.warnedLayersModelMap = true;
+      console.warn(
+        "WebGPU: a material's layers are drawn as one: its mask is a map, read where a model's map " +
+          "goes, and this material carries a `modelMap` too. A mask in the ORM array (`mask: 'orm'`) " +
+          "or the vertex colour (`mask: 'vertex'`) leaves the slot free.",
+      );
+    }
+    return null;
+  }
+
+  /** Says once that a layered material's triplanar projection is laid on the horizontal plane. */
+  private warnLayersTriplanar(): void {
+    if (this.warnedLayersTriplanar) return;
+    this.warnedLayersTriplanar = true;
+    console.warn(
+      "WebGPU: a layered material's triplanar projection is laid on the horizontal plane: every " +
+        "layer's maps on three planes would be three times the reads. See `SurfaceMaterial.layers`.",
+    );
+  }
+
+  /**
+   * What the sun's moving layer is read through: the matrix its shadow pass was last drawn with,
+   * where the lit pipelines carry one (`MOVING_SUN`); the environment's otherwise, which every caller
+   * drawing both layers with one matrix hands it anyway.
+   */
+  private movingLightFor(env: Environment): ReadonlyMat4 {
+    return this.movingLightKnown && this.pipelines.litSwitches.MOVING_SUN
+      ? this.movingLightViewProj
+      : env.lightViewProj;
+  }
+
+  /** The moving layer's own matrix on, the first time a frame draws that layer with one. */
+  private enableMovingSun(env: Environment): void {
+    if (this.pipelines.litSwitches.MOVING_SUN || !this.movingLightKnown) return;
+    for (let k = 0; k < 16; k++) {
+      if (this.movingLightViewProj[k] !== env.lightViewProj[k]) {
+        this.enableLit('MOVING_SUN');
+        return;
+      }
+    }
+  }
+
   /** One of the lit stage's switches on, in every cache a lit pipeline can come from. */
   private enableLit(feature: LitSwitch): void {
     if (this.pipelines.litSwitches[feature]) return;
@@ -6311,7 +6458,7 @@ export class WebGPURenderer implements RendererApi {
       for (let index = 0; index < geometry.vertexBuffers.length; index++) {
         pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
       }
-      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.setIndexBuffer(geometry.indexBuffer, geometry.indexFormat);
       pass.drawIndexed(geometry.indexCount);
     },
     /**
@@ -6401,7 +6548,7 @@ export class WebGPURenderer implements RendererApi {
         pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
       }
       pass.setVertexBuffer(index, gpuBatch.buffer);
-      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.setIndexBuffer(geometry.indexBuffer, geometry.indexFormat);
       pass.drawIndexed(geometry.indexCount, count);
     },
     skinnedMesh: (mesh, model, palette, material, cloth) => {
@@ -6463,7 +6610,7 @@ export class WebGPURenderer implements RendererApi {
       for (let index = 0; index < geometry.vertexBuffers.length; index++) {
         pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
       }
-      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.setIndexBuffer(geometry.indexBuffer, geometry.indexFormat);
       pass.drawIndexed(geometry.indexCount);
     },
     /**
@@ -6886,6 +7033,8 @@ export class WebGPURenderer implements RendererApi {
       this.overlayPipelines === this.pipelines
         ? [this.pipelines]
         : [this.pipelines, this.overlayPipelines];
+    /* A lit draw first needed inside a frame waits for its compile or is left out while it runs. */
+    this.skipCompiling(quality.pipelineCompile === 'skip');
     this.variant = flatVariant({
       directionalShadows: quality.directionalShadows,
       /* No `bakeReflectionProbe` here; see the field. */
@@ -8138,6 +8287,8 @@ export class WebGPURenderer implements RendererApi {
     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');
+    /* Nor how each attribute travels, which moves every field after a packed one. */
+    markPackingOfKey(present, key);
     return present;
   }
 
@@ -8447,6 +8598,13 @@ export class WebGPURenderer implements RendererApi {
       present['dynamic'] = true;
       key += ':dynamic';
     }
+    /*
+     * And how each attribute travels (`vertexPacking.ts`): a field read as sixteen bits rather than
+     * thirty-two, or not interleaved at all, moves every field after it, so the key says so.
+     */
+    const packing = vertexPackingOf(data, dynamic);
+    markPacking(present, packing);
+    key += packingKey(packing);
     const fullKey = `${this.variant}|${key}`;
     /*
      * **For every target this mesh can land on, which is two when the overlay is its own.**
@@ -8691,6 +8849,8 @@ export class WebGPURenderer implements RendererApi {
    */
   bindMeshPass(camera: Camera, env: Environment): void {
     if (this.surface.lost) return;
+    /* The matrix every receiver projects through: the environment's, as WebGL2's. See the field. */
+    this.receiverLightViewProj.set(env.lightViewProj as Float32Array);
 
     /* Rectangles past the fixed arm's are the froxel table's, and without it nobody shades them. */
     if (
@@ -8809,6 +8969,13 @@ export class WebGPURenderer implements RendererApi {
     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);
+    /* And no projection: maps follow the mesh's coordinates until a material asks otherwise. */
+    f.fill(0, at('uWorldUv'), at('uWorldUv') + 4);
+    /* Nor light through from behind. See `SurfaceMaterial.diffuseTransmission`. */
+    resolveTransmission(null, this.transmission);
+    f.set(this.transmission, at('uGlassTint'));
+    /* Nor layers: one layer until a material asks for more. */
+    f.fill(0, at('uLayers'), at('uLayers') + LAYER_FLOATS);
     f[at('uCutout')] = 0;
     f[at('uCutout') + 1] = 0;
     this.cutoutResolveStaged = 'hard';
@@ -8891,6 +9058,7 @@ export class WebGPURenderer implements RendererApi {
     /* No weighting and no dither until a pass or a crossfade asks. See `setDitherFade`. */
     f[at('uWriteMode')] = 0;
     f[at('uWriteMode') + 1] = 0;
+    f[at('uWriteMode') + 2] = 0;
     /* 1, not 0: a multiplier's identity is one. See `setEnvironmentGain`. */
     f[at('uEnvironmentDials') + 2] = 1;
     /* No overlay until a draw sets one. See `setSurfaceOverlay`. */
@@ -9184,6 +9352,11 @@ export class WebGPURenderer implements RendererApi {
       f[at('uShadowStrength')] = env.shadowStrength;
       f[at('uShadowMapSize')] = this.quality.directionalShadowMapSize;
       f[at('uShadowDepthSpan')] = env.shadowDepthSpan;
+      /* The moving layer's own matrix and span, where the lit stage reads one: `movingLightFor`. */
+      this.enableMovingSun(env);
+      const moving = this.movingLightFor(env);
+      f.set(moving as Float32Array, at('uMovingLightViewProj'));
+      f[at('uMovingShadowDepthSpan')] = orthographicDepthSpan(moving);
       f[at('uShadowMaxDistance')] = this.quality.directionalShadowMaxDistance;
       f[at('uShadowMaxSlope')] = this.quality.directionalShadowMaxSlope;
       /* Sampled only where a pass filled it — see `peelFilled` for why existing is not enough. */
@@ -9386,7 +9559,7 @@ export class WebGPURenderer implements RendererApi {
   /** A view block: the camera, the light's matrix and the frame's wind, into `ring` at `slot`. */
   private writeView(ring: UniformRing, slot: number, viewProj: Float32Array): void {
     ring.writeFloats(slot, FLAT_VIEW_FIELDS.uViewProj.offset, viewProj);
-    ring.writeFloats(slot, FLAT_VIEW_FIELDS.uLightViewProj.offset, this.lightViewProj);
+    ring.writeFloats(slot, FLAT_VIEW_FIELDS.uLightViewProj.offset, this.receiverLightViewProj);
     /* The scene's clock, which a bone animation's instances read their moment from. */
     ring.writeFloat(slot, FLAT_VIEW_FIELDS.uSceneTime.offset, this.animationTime);
     const d = this.frameWind;
@@ -9595,6 +9768,225 @@ export class WebGPURenderer implements RendererApi {
     );
   }
 
+  /**
+   * Compile off the main thread every pipeline a draw of `mesh` in `material` takes. **The other
+   * backend's `prepareMesh` carries the contract**; here a draw's key is `meshShape`'s, so a prepared
+   * key is exactly the one the draw asks for, and the compiles are started as a skipping draw starts
+   * them (`PipelineCache.lit`) whatever `pipelineCompile` says, into the frame's own caches.
+   */
+  prepareMesh(
+    mesh: GpuMesh,
+    material: SurfaceMaterial<GpuSurfaceTexture> | null,
+    options: PrepareOptions = {},
+  ): void {
+    if (this.surface.lost) return;
+    this.preparing(
+      material,
+      (into, blend) => {
+        const skinned = mesh.isSkinned;
+        const eight = skinned && mesh.isSkinnedEight;
+        for (const morphed of mesh.morph === null ? NOT_MORPHED : MORPHED_OR_NOT) {
+          this.meshShape(mesh, blend, PREPARED_DRAW, skinned, morphed, eight, false);
+          this.meshPipeline(blend, false, skinned, morphed, eight, false, into);
+        }
+      },
+      options,
+    );
+  }
+
+  /** `prepareMesh` for an instanced batch. See the other backend's `prepareInstanced`. */
+  prepareInstanced(
+    batch: GpuInstancedBatch,
+    material: SurfaceMaterial<GpuSurfaceTexture> | null,
+    options: PrepareOptions = {},
+  ): void {
+    if (this.surface.lost) return;
+    this.preparing(
+      material,
+      (into, blend) => {
+        const coverage = !blend && this.cutoutResolveStaged === 'coverage';
+        this.instancedPipeline(
+          batch.mesh,
+          batch.animation !== null,
+          blend,
+          false,
+          PREPARED_DRAW,
+          true,
+          0,
+          coverage,
+          into,
+        );
+      },
+      options,
+    );
+  }
+
+  /**
+   * `material` set, every cache a draw in it may build into passed to `start` with whether that draw
+   * blends, compiles started rather than built (`PipelineCache.lit`), and then no material set and
+   * each cache back to what `pipelineCompile` says.
+   */
+  private preparing(
+    material: SurfaceMaterial<GpuSurfaceTexture> | null,
+    start: (into: PipelineCache, blend: boolean) => void,
+    options: PrepareOptions,
+  ): void {
+    this.setMaterial(material);
+    this.skipCompiling(true);
+    try {
+      start(this.pipelines, false);
+      if (options.translucent === true) {
+        start(this.pipelines, true);
+        /* A blended draw in a reconstructing frame lands in the late pass, whose cache is its own. */
+        if (this.latePipelines !== this.pipelines) start(this.latePipelines, true);
+      }
+    } finally {
+      this.skipCompiling(this.quality.pipelineCompile === 'skip');
+      this.setMaterial(null);
+    }
+  }
+
+  /** What `meshShape` worked out for the mesh draw at hand. Reused, so a draw allocates no record. */
+  private readonly drawShape = {
+    base: '',
+    key: '',
+    depthWrite: true,
+    layer: 0,
+    adds: false,
+    coverage: false,
+    splits: false,
+    modelKind: null as SurfaceModelKind | null,
+  };
+
+  /**
+   * The key a mesh draw's pipeline is cached under, and the pipeline state that key encodes, under
+   * the current material and these options, into `drawShape`. **The one statement of it**:
+   * `submitMesh` draws by it and `prepareMesh` compiles by it, so the two cannot disagree about a key.
+   */
+  private meshShape(
+    mesh: GpuMesh,
+    blend: boolean,
+    options: TranslucentMeshOptions,
+    skinned: boolean,
+    morphed: boolean,
+    eight: boolean,
+    clothed: boolean,
+  ): WebGPURenderer['drawShape'] {
+    const modelKind = this.materialModel?.kind ?? null;
+    const base = (mesh as GpuMesh & { key?: string }).key ?? 'flat:s0:u0';
+    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
+     * pipeline and the second would silently take the first one's depth behaviour.
+     *
+     * **Both suffixes are empty for the defaults**, which is what keeps the keys `createMesh`
+     * warms — `fullKey` and `${'`'}${'$'}{fullKey}|blend${'`'}` — the ones an ordinary draw still asks for. A
+     * caller that opts in pays one compile on its first draw, the same bargain the overlay
+     * pipelines above already make.
+     */
+    const depthWrite = options.depthWrite ?? true;
+    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' : ''}` +
+      /* 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' : ''}`;
+
+    const shape = this.drawShape;
+    shape.base = base;
+    shape.key = key;
+    shape.depthWrite = depthWrite;
+    shape.layer = layer;
+    shape.adds = adds;
+    shape.coverage = coverage;
+    shape.splits = splits;
+    shape.modelKind = modelKind;
+    return shape;
+  }
+
+  /**
+   * The pipeline `drawShape` names: the one built, one built here, or none where draws skip a
+   * compile and this one has not landed (`PipelineCache.lit`) — and none for a split skin until all
+   * of its halves have.
+   */
+  private meshPipeline(
+    blend: boolean,
+    lands: boolean,
+    skinned: boolean,
+    morphed: boolean,
+    eight: boolean,
+    clothed: boolean,
+    /** Which cache to build into: the one the draw's target reads, unless a preparation says. */
+    into: PipelineCache | null = null,
+  ): GPURenderPipeline | null {
+    const { base, key, depthWrite, layer, adds, coverage, splits, modelKind } = this.drawShape;
+    /*
+     * **Asynchronous by default, synchronous if it has to be, and never absent.**
+     *
+     * `createMesh` compiles off the main thread, so a draw can legitimately arrive before the
+     * driver has finished — a consumer that awaits `ready()` never sees this, and one that
+     * draws immediately gets the old behaviour rather than an exception. Correctness cannot be
+     * allowed to depend on which of those happened, so the miss builds the pipeline here and
+     * pays the compile it was trying to avoid. That is a slow frame; the alternative is a
+     * thrown error in the middle of one.
+     */
+    const pipelines = into ?? (blend ? this.blendedPipelines(lands) : this.targetPipelines());
+    let pipeline: GPURenderPipeline | null = pipelines.peek(key) ?? null;
+    if (pipeline === null) {
+      const present = this.meshPresent.get(base);
+      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,
+        coverage,
+        eight,
+        clothed,
+        modelKind,
+        splits ? 'scene' : 'whole',
+      );
+    }
+    /* A split skin draws its three halves or none of them. */
+    if (
+      pipeline !== null &&
+      splits &&
+      !this.skinHalvesReady(key, base, skinned, morphed, layer, eight, clothed)
+    ) {
+      pipeline = null;
+    }
+    return pipeline;
+  }
+
   /**
    * @param blend Which of the two entry points above this came through, and **not** something to
    * infer from `opacity`.
@@ -9720,7 +10112,6 @@ export class WebGPURenderer implements RendererApi {
     /* 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 as GpuMesh & { key?: string }).key ?? 'flat:s0:u0';
     /*
      * A rigged mesh takes the skinned vertex variant, an unrigged one the plain variant, and the
      * key carries the flag so the two never share a cached pipeline. A rigged mesh whose caller
@@ -9735,41 +10126,6 @@ export class WebGPURenderer implements RendererApi {
     /* 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
-     * pipeline and the second would silently take the first one's depth behaviour.
-     *
-     * **Both suffixes are empty for the defaults**, which is what keeps the keys `createMesh`
-     * warms — `fullKey` and `${'`'}${'$'}{fullKey}|blend${'`'}` — the ones an ordinary draw still asks for. A
-     * caller that opts in pays one compile on its first draw, the same bargain the overlay
-     * pipelines above already make.
-     */
-    const depthWrite = options.depthWrite ?? true;
-    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' : ''}` +
-      /* 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
@@ -9782,45 +10138,17 @@ export class WebGPURenderer implements RendererApi {
       this.perDraw.writeInt(slot, fields.uMorphTargetCount.offset, mesh.morph.targetCount);
       this.perDraw.writeInt(slot, fields.uMorphTextureWidth.offset, mesh.morph.width);
     }
-    /*
-     * **Asynchronous by default, synchronous if it has to be, and never absent.**
-     *
-     * `createMesh` compiles off the main thread, so a draw can legitimately arrive before the
-     * driver has finished — a consumer that awaits `ready()` never sees this, and one that
-     * draws immediately gets the old behaviour rather than an exception. Correctness cannot be
-     * allowed to depend on which of those happened, so the miss builds the pipeline here and
-     * pays the compile it was trying to avoid. That is a slow frame; the alternative is a
-     * thrown error in the middle of one.
-     */
-    const pipelines = blend ? this.blendedPipelines(lands) : this.targetPipelines();
-    let pipeline = pipelines.peek(key);
-    if (pipeline === undefined) {
-      const present = this.meshPresent.get(base);
-      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,
-        coverage,
-        eight,
-        clothed,
-        modelKind,
-        splits ? 'scene' : 'whole',
-      );
-    }
+    /* Its pipeline, by the key a prepared draw compiled too: see `meshShape`. */
+    const { base, key, layer, depthWrite, splits } = this.meshShape(
+      mesh,
+      blend,
+      options,
+      skinned,
+      morphed,
+      eight,
+      clothed,
+    );
+    let pipeline = this.meshPipeline(blend, lands, skinned, morphed, eight, clothed);
 
     /*
      * Guards the draw call only, not the restore below.
@@ -9838,8 +10166,9 @@ export class WebGPURenderer implements RendererApi {
      * close to the 256-slot budget before the gateway, the play controls, the waveform, the
      * label handles and the sparkles are even counted.
      */
-    const material = this.materialSlotForDraw();
-    if (material !== null) {
+    /* A draw whose pipeline is still compiling is left out, its state restored all the same. */
+    const material = pipeline === null ? null : this.materialSlotForDraw();
+    if (pipeline !== null && material !== null) {
       /*
        * Record rather than issue. Every per-draw value is already in `slot` and `material` —
        * the uniform rings are the state arena this design would otherwise have had to build —
@@ -9861,6 +10190,7 @@ export class WebGPURenderer implements RendererApi {
         }
         command.vertexCount = mesh.vertexBuffers.length;
         command.indexBuffer = mesh.indexBuffer;
+        command.indexFormat = mesh.indexFormat;
         command.indexed = true;
         command.count = mesh.indexCount;
       } else {
@@ -9876,7 +10206,7 @@ export class WebGPURenderer implements RendererApi {
         for (let index = 0; index < mesh.vertexBuffers.length; index++) {
           pass.setVertexBuffer(index, mesh.vertexBuffers[index] as GPUBuffer);
         }
-        pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
+        pass.setIndexBuffer(mesh.indexBuffer, mesh.indexFormat);
         pass.drawIndexed(mesh.indexCount);
       }
       if (splits) {
@@ -10209,6 +10539,8 @@ export class WebGPURenderer implements RendererApi {
     const seeAt = this.materialField('uSeeThrough');
     this.perFrameFloats[seeAt] = 0;
     this.perFrameFloats[seeAt + 2] = 0;
+    /* The material's light through, over the pane's tint: transmission.ts. */
+    this.perFrameFloats.set(this.transmission, this.materialField('uGlassTint'));
   }
 
   /**
@@ -10223,6 +10555,76 @@ export class WebGPURenderer implements RendererApi {
    * **What it gives up** against `drawMesh` is skinning and morphing, refused where the variant
    * is built, and a per-instance opacity: `opacity` here dims the whole batch.
    */
+  /**
+   * An instanced draw's pipeline under the current material and these options: the one built, one
+   * built here, or none while it compiles (`PipelineCache.lit`), its key, base and model left in
+   * `drawShape`. **The one statement of an instanced key**: `submitInstanced` draws by it and
+   * `prepareInstanced` compiles by it.
+   */
+  private instancedPipeline(
+    mesh: GpuMesh,
+    animated: boolean,
+    blend: boolean,
+    lands: boolean,
+    options: TranslucentMeshOptions,
+    depthWrite: boolean,
+    layer: number,
+    coverage: boolean,
+    /** Which cache to build into: the one the draw's target reads, unless a preparation says. */
+    into: PipelineCache | null = null,
+  ): GPURenderPipeline | null {
+    /* 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 as GpuMesh & { key?: string }).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
+       plain one would hand a draw the wrong layout. */
+    const adds = blend && options.additive === true;
+    const key =
+      `${base}|inst${!animated ? '' : '|anim'}${blend ? (adds ? '|add' : '|blend') : ''}` +
+      `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
+      `${this.materialDoubleSided ? '|2s' : ''}${coverage ? '|a2c' : ''}` +
+      `${modelKind === null ? '' : `|m:${modelKind}`}`;
+
+    const shape = this.drawShape;
+    shape.base = base;
+    shape.key = key;
+    shape.modelKind = modelKind;
+    const pipelines = into ?? (blend ? this.blendedPipelines(lands) : this.targetPipelines());
+    let pipeline: GPURenderPipeline | null = pipelines.peek(key) ?? null;
+    if (pipeline === null) {
+      const present = this.meshPresent.get(base);
+      if (present === undefined) {
+        throw new Error(`WebGPU: no mesh attributes recorded for ${base}; createMesh records them`);
+      }
+      pipeline = flatPipeline(
+        pipelines,
+        this.surface.device,
+        !animated ? this.flatLayoutFor(false, false) : this.animatedBindGroupLayout,
+        this.variant,
+        key,
+        present,
+        adds ? 'additive' : blend,
+        false,
+        false,
+        depthWrite,
+        layer,
+        true,
+        'none',
+        this.materialDoubleSided,
+        coverage,
+        false,
+        false,
+        modelKind,
+        'whole',
+        false,
+        animated,
+      );
+    }
+
+    return pipeline;
+  }
+
   /**
    * The next of a batch's cull slots this frame, with its cull queued against the current view; null
    * when the batch has drawn from `MAX_CULL_SLOTS` views already or the frame's job ring is full,
@@ -10341,53 +10743,22 @@ export class WebGPURenderer implements RendererApi {
     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 as GpuMesh & { key?: string }).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
-       plain one would hand a draw the wrong layout. */
-    const adds = blend && options.additive === true;
-    const key =
-      `${base}|inst${animation === null ? '' : '|anim'}${blend ? (adds ? '|add' : '|blend') : ''}` +
-      `${depthWrite ? '' : '|nodepth'}${layer > 0 ? `|dl${layer}` : ''}` +
-      `${this.materialDoubleSided ? '|2s' : ''}${coverage ? '|a2c' : ''}` +
-      `${modelKind === null ? '' : `|m:${modelKind}`}`;
-
-    const pipelines = blend ? this.blendedPipelines(lands) : this.targetPipelines();
-    let pipeline = pipelines.peek(key);
-    if (pipeline === undefined) {
-      const present = this.meshPresent.get(base);
-      if (present === undefined) {
-        throw new Error(`WebGPU: no mesh attributes recorded for ${base}; createMesh records them`);
-      }
-      pipeline = flatPipeline(
-        pipelines,
-        this.surface.device,
-        animation === null ? this.flatLayoutFor(false, false) : this.animatedBindGroupLayout,
-        this.variant,
-        key,
-        present,
-        adds ? 'additive' : blend,
-        false,
-        false,
-        depthWrite,
-        layer,
-        true,
-        'none',
-        this.materialDoubleSided,
-        coverage,
-        false,
-        false,
-        modelKind,
-        'whole',
-        false,
-        animation !== null,
-      );
-    }
+    /* Its pipeline, by the key a prepared batch compiled too: see `instancedPipeline`. */
+    const pipeline = this.instancedPipeline(
+      mesh,
+      animation !== null,
+      blend,
+      lands,
+      options,
+      depthWrite,
+      layer,
+      coverage,
+    );
+    const { base, key, modelKind } = this.drawShape;
 
-    const material = this.materialSlotForDraw();
-    if (material !== null) {
+    /* A batch whose pipeline is still compiling is left out, as a mesh is. */
+    const material = pipeline === null ? null : this.materialSlotForDraw();
+    if (pipeline !== null && material !== null) {
       const command = blend
         ? this.recordBlended(0, lands)
         : this.recordDraw(0, this.currentTarget());
@@ -10409,6 +10780,7 @@ export class WebGPURenderer implements RendererApi {
         command.vertexBuffers[index] = instanceBuffer;
         command.vertexCount = mesh.vertexBuffers.length + 1;
         command.indexBuffer = mesh.indexBuffer;
+        command.indexFormat = mesh.indexFormat;
         command.indexed = true;
         command.count = mesh.indexCount;
         command.instances = count;
@@ -10429,7 +10801,7 @@ export class WebGPURenderer implements RendererApi {
           pass.setVertexBuffer(index, mesh.vertexBuffers[index] as GPUBuffer);
         }
         pass.setVertexBuffer(index, instanceBuffer);
-        pass.setIndexBuffer(mesh.indexBuffer, 'uint32');
+        pass.setIndexBuffer(mesh.indexBuffer, mesh.indexFormat);
         if (cut === null) pass.drawIndexed(mesh.indexCount, count);
         else pass.drawIndexedIndirect(cut.args, 0);
       }
@@ -10664,6 +11036,11 @@ export class WebGPURenderer implements RendererApi {
     if (view === null) return false;
 
     this.lightViewProj.set(lightViewProj as Float32Array);
+    /* The moving layer is read through the matrix it is drawn with: see `movingLightFor`. */
+    if (dynamic) {
+      this.movingLightViewProj.set(lightViewProj as Float32Array);
+      this.movingLightKnown = true;
+    }
     this.reopenViews();
     mat4.multiply(this.correctedLightViewProj, SHADOW_CLIP_CORRECTION, lightViewProj);
     this.shadowLayerIsPeel = peel;
@@ -10975,10 +11352,13 @@ export class WebGPURenderer implements RendererApi {
     this.lateViewBlock.slot = list.viewOffset(0);
     this.materials.dirty();
     this.staticRecording = recording;
+    /* A recorded list keeps what it recorded, so every draw of it waits for its pipeline. */
+    this.skipCompiling(false);
     try {
       this.sceneCasterMaterial = undefined;
       replayStaticDraws(list, this.sceneCasterSink);
     } finally {
+      this.skipCompiling(this.quality.pipelineCompile === 'skip');
       this.staticRecording = null;
       this.perDraw = perDraw;
       this.passRing = passRing;
@@ -11285,7 +11665,7 @@ export class WebGPURenderer implements RendererApi {
       for (let index = 0; index < geometry.vertexBuffers.length; index++) {
         pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
       }
-      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.setIndexBuffer(geometry.indexBuffer, geometry.indexFormat);
       pass.drawIndexed(geometry.indexCount);
     },
     instanced: (batch, data, material, glass) => {
@@ -11330,7 +11710,7 @@ export class WebGPURenderer implements RendererApi {
         pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
       }
       pass.setVertexBuffer(index, gpuBatch.buffer);
-      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.setIndexBuffer(geometry.indexBuffer, geometry.indexFormat);
       pass.drawIndexed(geometry.indexCount, count);
     },
     skinnedMesh: (mesh, model, palette, _material, glass) => {
@@ -11366,7 +11746,7 @@ export class WebGPURenderer implements RendererApi {
       for (let index = 0; index < geometry.vertexBuffers.length; index++) {
         pass.setVertexBuffer(index, geometry.vertexBuffers[index] as GPUBuffer);
       }
-      pass.setIndexBuffer(geometry.indexBuffer, 'uint32');
+      pass.setIndexBuffer(geometry.indexBuffer, geometry.indexFormat);
       pass.drawIndexed(geometry.indexCount);
     },
   };
@@ -13865,6 +14245,10 @@ export class WebGPURenderer implements RendererApi {
     /* Uncorrected, for the reason the shaft's own copy of this line carries: the shader does its
        own `* 0.5 + 0.5`, and correcting the matrix as well doubles it. */
     f.set(env?.lightViewProj ?? this.mediumIdentity, at('uLightViewProj'));
+    f.set(
+      (env === null ? this.mediumIdentity : this.movingLightFor(env)) as Float32Array,
+      at('uMovingLightViewProj'),
+    );
     ints[at('uPeeledShadowEnabled')] = this.peelView === null || !this.peelFilled ? 0 : 1;
     device.queue.writeBuffer(this.mediumUniforms, 0, this.mediumStaging);
 
@@ -13945,6 +14329,7 @@ export class WebGPURenderer implements RendererApi {
     const f = this.aoFloats;
     const at = (name: string): number => this.postField(AO_FRAG_FIELDS, name);
     f[at('uRadius')] = this.quality.ambientOcclusionRadius;
+    f.set(this.aoFade, at('uFade'));
     f.set(this.aoProjScale, at('uProjScale'));
     f.set(this.aoInvProjection, at('uInvProjection'));
     device.queue.writeBuffer(this.aoUniforms, 0, this.aoStaging);
@@ -14389,6 +14774,8 @@ export class WebGPURenderer implements RendererApi {
         true,
         animation !== null,
       );
+    /* Still compiling where draws skip: the probe stands in for this surface until it lands. */
+    if (pipeline === null) return;
     /* A static list's surface halves go into its own pool, beside its draws. */
     const command =
       this.staticRecording === null ? surface.take() : takeRecorded(this.staticRecording.surface);
@@ -14409,6 +14796,7 @@ export class WebGPURenderer implements RendererApi {
     if (instanceBuffer !== null) command.vertexBuffers[index++] = instanceBuffer;
     command.vertexCount = index;
     command.indexBuffer = mesh.indexBuffer;
+    command.indexFormat = mesh.indexFormat;
     command.indexed = true;
     command.count = mesh.indexCount;
     command.instances = instances;
@@ -14421,6 +14809,78 @@ export class WebGPURenderer implements RendererApi {
    * light alone and its colour alone into the blur's targets and test for the depth its frame half
    * wrote.
    */
+  /**
+   * Whether a split skin draw's two kept halves have pipelines, starting the compile of either that
+   * has not: a skin drawn without them would lose its diffuse light for the frames they take, so a
+   * split skin draws all three halves or none. See `PipelineCache.lit`.
+   */
+  private skinHalvesReady(
+    frameKey: string,
+    base: string,
+    skinned: boolean,
+    morphed: boolean,
+    layer: number,
+    eight: boolean,
+    clothed: boolean,
+  ): boolean {
+    let ready = true;
+    for (const half of SKIN_KEPT_HALVES) {
+      const pipeline = this.skinHalfPipeline(
+        half,
+        frameKey,
+        base,
+        skinned,
+        morphed,
+        layer,
+        eight,
+        clothed,
+      );
+      if (pipeline === null) ready = false;
+    }
+    return ready;
+  }
+
+  /** One kept half's pipeline, or none where it is still compiling: see `PipelineCache.lit`. */
+  private skinHalfPipeline(
+    half: (typeof SKIN_KEPT_HALVES)[number],
+    frameKey: string,
+    base: string,
+    skinned: boolean,
+    morphed: boolean,
+    layer: number,
+    eight: boolean,
+    clothed: boolean,
+  ): GPURenderPipeline | null {
+    const pipelines = this.skinPipelines;
+    const present = this.meshPresent.get(base);
+    if (pipelines === null || present === undefined) return null;
+    const key = `${frameKey}|${half === 'diffuse' ? 'sd' : 'sa'}`;
+    return (
+      pipelines.peek(key) ??
+      flatPipeline(
+        pipelines,
+        this.surface.device,
+        this.flatLayoutFor(skinned, morphed),
+        this.variant,
+        key,
+        present,
+        false,
+        skinned,
+        morphed,
+        true,
+        layer,
+        false,
+        'none',
+        this.materialDoubleSided,
+        false,
+        eight,
+        clothed,
+        'skin',
+        half,
+      )
+    );
+  }
+
   private keepSkinDiffuse(
     mesh: GpuMesh,
     frameKey: string,
@@ -14446,30 +14906,18 @@ export class WebGPURenderer implements RendererApi {
     const bindGroup = this.flatBindGroupFor(skinned, morphed, deltas);
     /* The light alone, which the blur spreads, then the colour alone, which it is multiplied by. */
     for (const half of SKIN_KEPT_HALVES) {
-      const key = `${frameKey}|${half === 'diffuse' ? 'sd' : 'sa'}`;
-      const pipeline =
-        pipelines.peek(key) ??
-        flatPipeline(
-          pipelines,
-          this.surface.device,
-          this.flatLayoutFor(skinned, morphed),
-          this.variant,
-          key,
-          present,
-          false,
-          skinned,
-          morphed,
-          true,
-          layer,
-          false,
-          'none',
-          this.materialDoubleSided,
-          false,
-          eight,
-          clothed,
-          'skin',
-          half,
-        );
+      const pipeline = this.skinHalfPipeline(
+        half,
+        frameKey,
+        base,
+        skinned,
+        morphed,
+        layer,
+        eight,
+        clothed,
+      );
+      /* Both landed before the draw was let through: see `skinHalvesReady`. */
+      if (pipeline === null) return;
       const command = half === 'diffuse' ? skin.take() : skin.takeAlbedo();
       command.pipeline = pipeline;
       command.bindGroup = bindGroup;
@@ -14483,6 +14931,7 @@ export class WebGPURenderer implements RendererApi {
       }
       command.vertexCount = mesh.vertexBuffers.length;
       command.indexBuffer = mesh.indexBuffer;
+      command.indexFormat = mesh.indexFormat;
       command.indexed = true;
       command.count = mesh.indexCount;
       command.instances = 1;
@@ -14936,6 +15385,7 @@ export class WebGPURenderer implements RendererApi {
     command.offsetCount = 0;
     command.vertexCount = 0;
     command.indexBuffer = null;
+    command.indexFormat = 'uint32';
     command.indexed = false;
     command.instances = 1;
     command.indirect = null;
@@ -14995,7 +15445,7 @@ export class WebGPURenderer implements RendererApi {
       if (buffer != null) pass.setVertexBuffer(i, buffer);
     }
     if (command.indexed && command.indexBuffer !== null) {
-      pass.setIndexBuffer(command.indexBuffer, 'uint32');
+      pass.setIndexBuffer(command.indexBuffer, command.indexFormat);
       if (command.indirect !== null) pass.drawIndexedIndirect(command.indirect, 0);
       else pass.drawIndexed(command.count, command.instances);
     } else {
@@ -16781,6 +17231,14 @@ export class WebGPURenderer implements RendererApi {
     this.rebuildRushBindGroup();
   }
 
+  /**
+   * Where ambient occlusion fades out with distance. **The other backend's
+   * `setAmbientOcclusionFade` carries the reasoning**; this is the same setter over the same state.
+   */
+  setAmbientOcclusionFade(distance: number, radius: number): void {
+    resolveOcclusionFade(distance, radius, this.aoFade);
+  }
+
   /**
    * Where this frame's lens is focused, how deep the sharp zone is, and how much of the ceiling
    * to take. **The other backend's `setDepthOfField` carries the reasoning**, whole: the