@driftengine/core 4.4.2 → 4.6.0

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

@@ -103,6 +103,28 @@ export const VERTEX_LAYOUT: readonly VertexAttribute[] = [
 ];
 
 /** Geometry on the device, with the buffers bound in layout order. */
+/**
+ * The texture coordinates of a mesh that names texture-array layers: (u, v, layer), three floats.
+ *
+ * **Three only where layers exist.** Every location is spent, so the layer rides in this attribute,
+ * and widening it for every textured mesh would add four bytes to each of its vertices for nothing.
+ * A mesh without layers keeps two, and the shader's `vec3` input reads z as 0 — WebGPU fills a
+ * component the format does not carry with 0 (and w with 1) — which is layer 0. The pipeline key
+ * carries `:layers`, so the two vertex layouts never share a pipeline.
+ */
+export const LAYERED_UVS: VertexAttribute = {
+  name: 'uvs',
+  shaderLocation: 5,
+  format: 'float32x3',
+  components: 3,
+  optional: true,
+};
+
+/** The attribute as this mesh lays it out: the UV field widens where the mesh names layers. */
+function laidOut(attribute: VertexAttribute, layered: boolean): VertexAttribute {
+  return layered && attribute.name === 'uvs' ? LAYERED_UVS : attribute;
+}
+
 export interface GpuMesh {
   /**
    * The buffers a draw binds, in the order `vertexBufferLayouts` describes them.
@@ -125,6 +147,12 @@ export interface GpuMesh {
    * its own does.
    */
   readonly vertexStride: number;
+  /**
+   * Byte offsets of the joint indices and weights in the interleaved vertex, or null for a mesh
+   * that supplied neither. For a pass that skins through a shader of its own — the motion pass —
+   * which has to find them without the `present` map the generated pipelines are keyed by.
+   */
+  readonly skinOffsets: { readonly joints: number; readonly weights: number } | null;
   readonly indexBuffer: GPUBuffer;
   readonly indexCount: number;
   /**
@@ -192,7 +220,19 @@ export interface GpuMesh {
    * than every mesh paying it.
    */
   readonly update:
-    ((device: GPUDevice, positions: Float32Array, normals?: Float32Array) => void) | null;
+    | ((
+        device: GPUDevice,
+        positions: Float32Array,
+        normals?: Float32Array,
+        previous?: GPUBuffer | null,
+      ) => void)
+    | null;
+  /**
+   * A dynamic mesh's motion state, which the renderer owns: a buffer for last frame's interleaved
+   * rows, made the first time a reconstructing renderer rewrites the mesh, and the frame of the
+   * last rewrite. Null on a mesh created without `{ dynamic: true }`, which never moves a vertex.
+   */
+  readonly motion: { previous: GPUBuffer | null; changed: number } | null;
   dispose(): void;
 }
 
@@ -263,9 +303,10 @@ export function createGpuMeshIncremental(
   validateMeshData(data);
   const bounds = boundsOfPositions(data.positions, createBounds());
   const vertexCount = data.positions.length / 3;
+  const layered = data.layers !== undefined;
   const supplied = VERTEX_LAYOUT.filter(
     (attribute) => !attribute.optional || data[attribute.name as keyof MeshData] !== undefined,
-  );
+  ).map((attribute) => laidOut(attribute, layered));
 
   /* Interleaved: one stride holding every attribute the mesh actually supplied. */
   const stride = supplied.reduce((sum, attribute) => sum + attribute.components * 4, 0);
@@ -377,6 +418,7 @@ export function createGpuMeshIncremental(
     progress,
     hasTangents: data.tangents !== undefined,
     isSkinned: data.joints !== undefined,
+    skinOffsets: skinOffsetsOf(supplied),
     hasChannel: data.channel !== undefined,
     morph:
       data.morphTargets === undefined || data.morphTargetCount === undefined
@@ -440,7 +482,21 @@ function* uploadSteps(job: UploadJob): Generator<void, void, void> {
     let fieldOffset = 0;
     for (const attribute of supplied) {
       const source = data[attribute.name as keyof MeshData] as Float32Array;
-      interleaveField(interleaved, source, attribute.components, step, fieldOffset, from, to);
+      if (attribute === LAYERED_UVS) {
+        /* (u, v) from the coordinates and the layer after them, one field of three. */
+        interleaveField(interleaved, source, 2, step, fieldOffset, from, to);
+        interleaveField(
+          interleaved,
+          data.layers as Float32Array,
+          1,
+          step,
+          fieldOffset + 2,
+          from,
+          to,
+        );
+      } else {
+        interleaveField(interleaved, source, attribute.components, step, fieldOffset, from, to);
+      }
       fieldOffset += attribute.components;
     }
     device.queue.writeBuffer(vertices, from * stride, interleaved, from * step, (to - from) * step);
@@ -505,6 +561,22 @@ function interleaveField(
   }
 }
 
+/**
+ * Where the joints and weights sit in a vertex of `supplied`, the attributes a mesh interleaves in
+ * layout order; null unless it supplied both.
+ */
+function skinOffsetsOf(supplied: readonly VertexAttribute[]): GpuMesh['skinOffsets'] {
+  let floats = 0;
+  let joints = -1;
+  let weights = -1;
+  for (const attribute of supplied) {
+    if (attribute.name === 'joints') joints = floats * 4;
+    if (attribute.name === 'weights') weights = floats * 4;
+    floats += attribute.components;
+  }
+  return joints >= 0 && weights >= 0 ? { joints, weights } : null;
+}
+
 /** The handle, made where it can see only what it hands out. */
 function gpuMeshOf(parts: {
   readonly vertices: GPUBuffer;
@@ -516,14 +588,17 @@ function gpuMeshOf(parts: {
   readonly progress: { readonly uploaded: boolean };
   readonly hasTangents: boolean;
   readonly isSkinned: boolean;
+  readonly skinOffsets: GpuMesh['skinOffsets'];
   readonly hasChannel: boolean;
   readonly morph: MorphTexture | null;
   readonly update: GpuMesh['update'];
 }): GpuMesh {
+  const motion = parts.update === null ? null : { previous: null as GPUBuffer | null, changed: -1 };
   const { vertices, constants, indexBuffer, progress } = parts;
   return {
     vertexBuffers: [vertices, constants],
     vertexStride: parts.stride,
+    skinOffsets: parts.skinOffsets,
     indexBuffer,
     indexCount: parts.indexCount,
     bounds: parts.bounds,
@@ -535,7 +610,9 @@ function gpuMeshOf(parts: {
     hasChannel: parts.hasChannel,
     morph: parts.morph,
     update: parts.update,
+    motion,
     dispose(): void {
+      motion?.previous?.destroy();
       vertices.destroy();
       constants.destroy();
       indexBuffer.destroy();
@@ -557,7 +634,12 @@ function dynamicUpdate(
   positionField: number,
   normalField: number,
 ): NonNullable<GpuMesh['update']> {
-  return (target: GPUDevice, positions: Float32Array, normals?: Float32Array): void => {
+  return (
+    target: GPUDevice,
+    positions: Float32Array,
+    normals?: Float32Array,
+    previous: GPUBuffer | null = null,
+  ): void => {
     if (positions.length !== vertexCount * 3) {
       throw new Error(
         `this mesh has ${vertexCount} vertices and the update has ${positions.length / 3}. ` +
@@ -565,6 +647,9 @@ function dynamicUpdate(
           'every other attribute are sized against it.',
       );
     }
+    /* The rows as they stand are last frame's, handed over before a position of them changes.
+       `writeBuffer` copies at the call, so patching the array afterwards cannot reach this copy. */
+    if (previous !== null) target.queue.writeBuffer(previous, 0, interleaved);
     /* Everything that decides whether this is on screen starts from the bounds, so a cloth
        that blew sideways out of its original box would be culled while still visible. */
     boundsOfPositions(positions, bounds);
@@ -630,7 +715,9 @@ export function vertexBufferLayouts(
   const constants: GPUVertexAttribute[] = [];
   let offset = 0;
 
-  VERTEX_LAYOUT.forEach((attribute, index) => {
+  const layered = present['layers'] === true;
+  VERTEX_LAYOUT.forEach((declared, index) => {
+    const attribute = laidOut(declared, layered);
     /*
      * **The instanced pipeline reclaims the two skinning locations, and it is allowed to because
      * it cannot skin.** Locations 11 and 12 are the joint indices and weights; the INSTANCED

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

@@ -122,7 +122,8 @@ export function createDepthBindGroupLayout(
       {
         binding: PREVIOUS.texture,
         visibility: VISIBILITY_FRAGMENT,
-        texture: { sampleType: 'unfilterable-float' },
+        /* An array since the sun's maps became one (`shadowMap.ts`): the peel reads its static layer. */
+        texture: { sampleType: 'unfilterable-float', viewDimension: '2d-array' },
       },
       {
         binding: PREVIOUS.sampler,
@@ -136,7 +137,11 @@ export function createDepthBindGroupLayout(
             {
               binding: CUTOUT_MAP.texture,
               visibility: VISIBILITY_FRAGMENT,
-              texture: { sampleType: 'float' as GPUTextureSampleType },
+              /* A surface texture, and every surface texture is a `2d-array` view. */
+              texture: {
+                sampleType: 'float' as GPUTextureSampleType,
+                viewDimension: '2d-array' as GPUTextureViewDimension,
+              },
             },
             {
               binding: CUTOUT_MAP.sampler,

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

@@ -28,6 +28,11 @@ export interface DrawCommand {
   indexed: boolean;
   count: number;
   instances: number;
+  /**
+   * A `drawIndexedIndirect` record to draw from instead of `count` and `instances`: an instance
+   * cull's survivors, counted on the device. Null for every other draw.
+   */
+  indirect: GPUBuffer | null;
 }
 
 export interface CommandPool {
@@ -50,6 +55,7 @@ function emptyCommand(): DrawCommand {
     indexed: false,
     count: 0,
     instances: 1,
+    indirect: null,
   };
 }
 

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

@@ -8,6 +8,14 @@ import { vertexBufferLayouts } from './buffers.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
 
+/** The material maps the flat pass reads: `2d-array` colour, filtered, not shadow maps. */
+const SURFACE_MAPS: ReadonlySet<string> = new Set([
+  'uAlbedo',
+  'uNormalMap',
+  'uOrmMap',
+  'uEmissiveMap',
+]);
+
 /**
  * The flat pipeline: the shader that draws the world.
  *
@@ -82,6 +90,8 @@ export interface StageBindings {
     >
   >;
   readonly textures: Readonly<Record<string, TextureBinding>>;
+  /** Each pipeline-overridable constant's id, by the GLSL name it was declared under. */
+  readonly overrides?: Readonly<Record<string, number>>;
 }
 
 /*
@@ -188,6 +198,20 @@ export function flatFragmentBindings(variant: FlatVariant): StageBindings {
   return found;
 }
 
+/**
+ * The lit fragment stage's constants, set from the cache: the glass switch, keyed by its **id**.
+ *
+ * Not by its name, because an override declared with `@id` answers to the id alone — WebGPU's
+ * "pipeline-overridable constant identifier string" — and naga writes one on every specialisation
+ * constant. Keyed by name, Chrome refused every lit pipeline: *Pipeline overridable constant
+ * "GLASS_SHADOWS" not found*, and the frame drew nothing.
+ */
+function flatFragmentConstants(variant: FlatVariant, cache: PipelineCache): Record<string, number> {
+  const id = flatFragmentBindings(variant).overrides?.['GLASS_SHADOWS'];
+  if (id === undefined) throw new Error(`flatPass: variant "${variant}" has no glass switch`);
+  return { [String(id)]: cache.glassShadows ? 1 : 0 };
+}
+
 /** The depth format both backends compare with. */
 /* Re-exported so the twenty passes that already import it from here do not each learn a new
    module; `depthConvention.ts` is where the decision lives and why. */
@@ -272,8 +296,22 @@ export function createFlatBindGroupLayout(
     const integer = texture.type === 'usampler2D' || texture.type === 'usampler3D';
     /* DriftLight's brick index and atlas, the lit pass's only volumes. See `driftLight.ts`. */
     const volume = texture.type === 'sampler3D' || texture.type === 'usampler3D';
+    /* Glass tints are colour, mipmapped and filtered: a frosted pane is read at a coarser level. */
+    const tint = name.endsWith('GlassTints');
+    /*
+     * **The four material maps are arrays too, and they are colour.** Every surface texture is a
+     * `2d-array` view since texture arrays landed, so the rule below — an array is a shadow map —
+     * would declare albedo unfilterable and bind a non-filtering sampler to it, which reads as
+     * every textured surface going nearest-neighbour and losing its mip chain. Named, as
+     * `uEnvironment` is, because a pattern wide enough to catch them catches the shadow arrays.
+     */
+    const surface = SURFACE_MAPS.has(name);
     const isShadow =
-      integer || (name !== 'uEnvironment' && (name.endsWith('ShadowMap') || cube || array));
+      integer ||
+      (!tint &&
+        !surface &&
+        name !== 'uEnvironment' &&
+        (name.endsWith('ShadowMap') || cube || array));
     entries.push({
       binding: texture.texture,
       visibility: VISIBILITY_FRAGMENT,
@@ -443,8 +481,11 @@ export function flatPipeline(
    * `depthMask` alone and only turns blending on. A translucent part of a loaded model is a
    * pane of glass in a solid object, not a particle, and it has to occlude what is behind it
    * for the rest of the model to sort correctly.
+   *
+   * `'additive'` adds instead: colour times alpha onto the target, its alpha kept. The key must
+   * carry it (`|add`).
    */
-  translucent = false,
+  translucent: boolean | 'additive' = false,
   /** Whether this pipeline reads a joint palette. See `FlatVertexOptions`. */
   skinned = false,
   /** Whether this pipeline reads morph deltas. See `FlatVertexOptions`. */
@@ -557,7 +598,7 @@ function flatDescriptor(
   variant: FlatVariant,
   key: string,
   present: Readonly<Record<string, boolean>>,
-  translucent: boolean,
+  translucent: boolean | 'additive',
   /** Whether this pipeline reads a joint palette. See `FlatVertexOptions`. */
   skinned: boolean,
   /** Whether this pipeline reads morph deltas. See `FlatVertexOptions`. */
@@ -603,21 +644,31 @@ function flatDescriptor(
         code: FLAT_FRAG_WGSL[variant] ?? '',
       }),
       entryPoint: 'main',
+      /* Every variant declares it, so every lit pipeline may set it: see `PipelineCache`. */
+      constants: flatFragmentConstants(variant, cache),
       targets: [
         oitTarget(oit) ??
-          (translucent
+          (translucent === 'additive'
             ? {
                 format: cache.format,
                 blend: {
-                  color: {
-                    srcFactor: 'src-alpha',
-                    dstFactor: 'one-minus-src-alpha',
-                    operation: 'add',
-                  },
-                  alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                  color: { srcFactor: 'src-alpha', dstFactor: 'one', operation: 'add' },
+                  alpha: { srcFactor: 'zero', dstFactor: 'one', operation: 'add' },
                 },
               }
-            : { format: cache.format }),
+            : translucent
+              ? {
+                  format: cache.format,
+                  blend: {
+                    color: {
+                      srcFactor: 'src-alpha',
+                      dstFactor: 'one-minus-src-alpha',
+                      operation: 'add',
+                    },
+                    alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                  },
+                }
+              : { format: cache.format }),
       ],
     },
     primitive: { topology: 'triangle-list', cullMode: doubleSided ? 'none' : 'back' },

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

@@ -0,0 +1,245 @@
+/**
+ * What a pane lets through, drawn into a shadow's tint layer on this device: the layouts, the
+ * per-draw block, the bind groups and the pipelines for the five tint programs (`depth.ts`).
+ *
+ * **The vertex half is the depth pass's**, block for block — the tint's vertex stages are the depth
+ * ones with the world position handed on — so a draw's vertex slot comes from the shadow pass's own
+ * ring and only the pane's 32 bytes are this file's. **The fragment half multiplies**: an
+ * `rgba8unorm` target cleared to white, `dst × src` for colour and `dst-alpha × src` for clarity, and
+ * no depth, so every pane on a ray counts in any order. Built the first time glass casts, so a scene
+ * with no glass builds none of it.
+ */
+import { DEPTH_BINDINGS } from '../../shaders/generated/depth.wgsl.ts';
+import {
+  GLASS_TINT_CUTOUT_FRAG_WGSL,
+  GLASS_TINT_CUTOUT_VERT_WGSL,
+  GLASS_TINT_FRAG_WGSL,
+  GLASS_TINT_INSTANCED_CUTOUT_VERT_WGSL,
+  GLASS_TINT_INSTANCED_VERT_WGSL,
+  GLASS_TINT_SKINNED_VERT_WGSL,
+  GLASS_TINT_VERT_WGSL,
+} from '../../shaders/generated/depth.wgsl.ts';
+import type { ResolvedGlass } from '../../glass.ts';
+import { vertexBufferLayouts } from './buffers.ts';
+import type { PipelineCache } from './pipelineCache.ts';
+import { shaderModule } from './shaderModules.ts';
+import { UniformRing } from './uniformRing.ts';
+
+const VISIBILITY_VERTEX = 0x1;
+const VISIBILITY_FRAGMENT = 0x2;
+const USAGE_UNIFORM_DST = 0x40 | 0x8; // UNIFORM | COPY_DST
+
+const VERT = DEPTH_BINDINGS.GLASS_TINT_VERT;
+const CUTOUT_VERT = DEPTH_BINDINGS.GLASS_TINT_CUTOUT_VERT;
+const FRAG = DEPTH_BINDINGS.GLASS_TINT_FRAG;
+const CUTOUT_MAP = DEPTH_BINDINGS.GLASS_TINT_CUTOUT_FRAG.textures.uCutoutMap;
+const PALETTE = DEPTH_BINDINGS.GLASS_TINT_SKINNED_VERT.textures.uJointPalette;
+const PANE = FRAG.fields.uGlassPane.offset;
+const LIGHT = FRAG.fields.uGlassLight.offset;
+
+/** Panes a frame can tint: a pane is a draw per shadow it reaches, and panes are few. */
+const MAX_TINT_DRAWS = 512;
+
+export type GlassTintKind = 'rigid' | 'instanced' | 'skinned' | 'cutout' | 'instancedCutout';
+
+/** The multiplying state: colour times what passes, clarity times clarity, order-free. */
+export const GLASS_TINT_BLEND: GPUBlendState = {
+  color: { operation: 'add', srcFactor: 'dst', dstFactor: 'zero' },
+  alpha: { operation: 'add', srcFactor: 'dst-alpha', dstFactor: 'zero' },
+};
+
+export class GpuGlassTint {
+  readonly frag: UniformRing;
+  private readonly layouts: Record<'plain' | 'cutout' | 'skinned', GPUBindGroupLayout>;
+  private plainGroup: GPUBindGroup | null = null;
+  private groupVertBuffer: GPUBuffer | null = null;
+  private groupFragBuffer: GPUBuffer | null = null;
+  private readonly cutoutGroups = new Map<GPUTextureView, GPUBindGroup>();
+  private readonly skinnedGroups = new Map<GPUTextureView, GPUBindGroup>();
+  private readonly device: GPUDevice;
+
+  constructor(device: GPUDevice) {
+    this.device = device;
+    this.frag = new UniformRing(
+      device,
+      FRAG.uniformSize,
+      MAX_TINT_DRAWS,
+      USAGE_UNIFORM_DST,
+      'glassTint.ring',
+    );
+    const vert = (size: number): GPUBindGroupLayoutEntry => ({
+      binding: VERT.uniforms,
+      visibility: VISIBILITY_VERTEX,
+      buffer: { type: 'uniform', hasDynamicOffset: true, minBindingSize: size },
+    });
+    const frag: GPUBindGroupLayoutEntry = {
+      binding: FRAG.uniforms,
+      visibility: VISIBILITY_FRAGMENT,
+      buffer: { type: 'uniform', hasDynamicOffset: true, minBindingSize: FRAG.uniformSize },
+    };
+    this.layouts = {
+      plain: device.createBindGroupLayout({
+        label: 'glassTint.layout',
+        entries: [vert(VERT.uniformSize), frag],
+      }),
+      cutout: device.createBindGroupLayout({
+        label: 'glassTint.layout.cutout',
+        entries: [
+          vert(CUTOUT_VERT.uniformSize),
+          frag,
+          {
+            binding: CUTOUT_MAP.texture,
+            visibility: VISIBILITY_FRAGMENT,
+            /* A surface texture, and every surface texture is a `2d-array` view. */
+            texture: { sampleType: 'float', viewDimension: '2d-array' },
+          },
+          {
+            binding: CUTOUT_MAP.sampler,
+            visibility: VISIBILITY_FRAGMENT,
+            sampler: { type: 'filtering' },
+          },
+        ],
+      }),
+      skinned: device.createBindGroupLayout({
+        label: 'glassTint.layout.skinned',
+        entries: [
+          {
+            binding: PALETTE.texture,
+            visibility: VISIBILITY_VERTEX,
+            texture: { sampleType: 'unfilterable-float' },
+          },
+          vert(VERT.uniformSize),
+          frag,
+        ],
+      }),
+    };
+  }
+
+  /** One pane's block: what it lets through, how clear it is, and the light it is drawn for. */
+  writePane(slot: number, glass: ResolvedGlass, light: Float32Array): void {
+    const pane = paneScratch;
+    pane[0] = glass.transmission * glass.tint[0];
+    pane[1] = glass.transmission * glass.tint[1];
+    pane[2] = glass.transmission * glass.tint[2];
+    pane[3] = 1 - glass.frost;
+    this.frag.writeFloats(slot, PANE, pane);
+    this.frag.writeFloats(slot, LIGHT, light);
+  }
+
+  /** The plain group, rebuilt only when a ring has grown a new buffer under it. */
+  group(vertBuffer: GPUBuffer): GPUBindGroup {
+    if (
+      this.plainGroup === null ||
+      this.groupVertBuffer !== vertBuffer ||
+      this.groupFragBuffer !== this.frag.buffer
+    ) {
+      this.cutoutGroups.clear();
+      this.skinnedGroups.clear();
+      this.groupVertBuffer = vertBuffer;
+      this.groupFragBuffer = this.frag.buffer;
+      this.plainGroup = this.device.createBindGroup({
+        label: 'glassTint.group',
+        layout: this.layouts.plain,
+        entries: [
+          { binding: VERT.uniforms, resource: { buffer: vertBuffer, size: VERT.uniformSize } },
+          {
+            binding: FRAG.uniforms,
+            resource: { buffer: this.frag.buffer, size: FRAG.uniformSize },
+          },
+        ],
+      });
+    }
+    return this.plainGroup;
+  }
+
+  /** A cutout pane's group, one per map, built the first time that map casts colour. */
+  cutoutGroup(vertBuffer: GPUBuffer, view: GPUTextureView, sampler: GPUSampler): GPUBindGroup {
+    this.group(vertBuffer);
+    const held = this.cutoutGroups.get(view);
+    if (held !== undefined) return held;
+    const made = this.device.createBindGroup({
+      label: 'glassTint.group.cutout',
+      layout: this.layouts.cutout,
+      entries: [
+        {
+          binding: CUTOUT_VERT.uniforms,
+          resource: { buffer: vertBuffer, size: CUTOUT_VERT.uniformSize },
+        },
+        { binding: FRAG.uniforms, resource: { buffer: this.frag.buffer, size: FRAG.uniformSize } },
+        { binding: CUTOUT_MAP.texture, resource: view },
+        { binding: CUTOUT_MAP.sampler, resource: sampler },
+      ],
+    });
+    this.cutoutGroups.set(view, made);
+    return made;
+  }
+
+  /** A skinned pane's group, one per palette view. */
+  skinnedGroup(vertBuffer: GPUBuffer, palette: GPUTextureView): GPUBindGroup {
+    this.group(vertBuffer);
+    const held = this.skinnedGroups.get(palette);
+    if (held !== undefined) return held;
+    const made = this.device.createBindGroup({
+      label: 'glassTint.group.skinned',
+      layout: this.layouts.skinned,
+      entries: [
+        { binding: PALETTE.texture, resource: palette },
+        { binding: VERT.uniforms, resource: { buffer: vertBuffer, size: VERT.uniformSize } },
+        { binding: FRAG.uniforms, resource: { buffer: this.frag.buffer, size: FRAG.uniformSize } },
+      ],
+    });
+    this.skinnedGroups.set(palette, made);
+    return made;
+  }
+
+  /** The pipeline for one kind of caster, cull mode and vertex layout, cached by key. */
+  pipeline(
+    cache: PipelineCache,
+    kind: GlassTintKind,
+    key: string,
+    present: Readonly<Record<string, boolean>>,
+    cullMode: GPUCullMode,
+  ): GPURenderPipeline {
+    const cutout = kind === 'cutout' || kind === 'instancedCutout';
+    const instanced = kind === 'instanced' || kind === 'instancedCutout';
+    const layout =
+      kind === 'skinned' ? this.layouts.skinned : cutout ? this.layouts.cutout : this.layouts.plain;
+    const vertex =
+      kind === 'rigid'
+        ? GLASS_TINT_VERT_WGSL
+        : kind === 'instanced'
+          ? GLASS_TINT_INSTANCED_VERT_WGSL
+          : kind === 'skinned'
+            ? GLASS_TINT_SKINNED_VERT_WGSL
+            : kind === 'cutout'
+              ? GLASS_TINT_CUTOUT_VERT_WGSL
+              : GLASS_TINT_INSTANCED_CUTOUT_VERT_WGSL;
+    const label = `glass-tint|${kind}|${cullMode}|${key}`;
+    return cache.get(label, () => ({
+      label,
+      layout: this.device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+      vertex: {
+        module: shaderModule(this.device, { label: `glassTint.${kind}.vert`, code: vertex }),
+        entryPoint: 'main',
+        buffers: vertexBufferLayouts(present, instanced),
+      },
+      fragment: {
+        module: shaderModule(this.device, {
+          label: cutout ? 'glassTint.cutout.frag' : 'glassTint.frag',
+          code: cutout ? GLASS_TINT_CUTOUT_FRAG_WGSL : GLASS_TINT_FRAG_WGSL,
+        }),
+        entryPoint: 'main',
+        targets: [{ format: 'rgba8unorm', blend: GLASS_TINT_BLEND }],
+      },
+      /* The depth pass's primitive state exactly — its winding included, for the reason
+         `depthPipeline` gives: this map is sampled, not presented. */
+      primitive: { topology: 'triangle-list', cullMode, frontFace: 'cw' },
+    }));
+  }
+
+  dispose(): void {
+    this.frag.dispose();
+  }
+}
+
+const paneScratch = new Float32Array(4);