@driftengine/core 4.9.0 → 4.11.0

package/dist/render/backend/webgl2/skinPaletteTexture.d.ts

@@ -19,9 +19,11 @@ export declare class SkinPaletteTexture {
     /**
      * Upload a palette, reallocating only when the joint count changes.
      *
-     * A rig's joint count is fixed for its life, so the reallocation path runs once per skeleton and
-     * the steady state is one `texSubImage2D`. Reallocating per frame would be a GPU allocation in
-     * the frame loop, which is the same class of mistake as allocating on the CPU there.
+     * **The texture grows and never shrinks**, so the steady state is one `texSubImage2D` whatever
+     * mix of rigs a frame draws. It was rebuilt whenever the joint count changed, which with one
+     * texture for every skinned draw meant a character and a prop drawn in turn reallocated it at
+     * every draw: a GPU allocation in the frame loop. The shader reads joints by index, so a texture
+     * wider than the rig is read exactly as one that fits.
      */
     update(gl: WebGL2RenderingContext, palette: Float32Array): void;
     /** Bind to a **vertex-stage** unit. See `SKIN_PALETTE_TEXTURE_UNIT` for why that is free. */

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

@@ -20,15 +20,17 @@ export class SkinPaletteTexture {
     /**
      * Upload a palette, reallocating only when the joint count changes.
      *
-     * A rig's joint count is fixed for its life, so the reallocation path runs once per skeleton and
-     * the steady state is one `texSubImage2D`. Reallocating per frame would be a GPU allocation in
-     * the frame loop, which is the same class of mistake as allocating on the CPU there.
+     * **The texture grows and never shrinks**, so the steady state is one `texSubImage2D` whatever
+     * mix of rigs a frame draws. It was rebuilt whenever the joint count changed, which with one
+     * texture for every skinned draw meant a character and a prop drawn in turn reallocated it at
+     * every draw: a GPU allocation in the frame loop. The shader reads joints by index, so a texture
+     * wider than the rig is read exactly as one that fits.
      */
     update(gl, palette) {
         validateSkinPalette(palette);
         const joints = palette.length / 16;
         const width = paletteTextureWidth(joints);
-        if (this.texture === null || this.joints !== joints) {
+        if (this.texture === null || joints > this.joints) {
             if (this.texture !== null)
                 gl.deleteTexture(this.texture);
             const created = gl.createTexture();

package/dist/render/backend/webgpu/boneAnimations.d.ts

@@ -0,0 +1,34 @@
+/**
+ * A bone animation's textures on this backend, and a batch's clocks: what
+ * `shaders/boneAnimation.ts` reads by index, made once and never filtered.
+ *
+ * **`rgba32float` places and turns, and `rg32float` clocks**, all read with `textureLoad` and bound
+ * `unfilterable-float`, as the joint palette is: a turn in half floats moves a crowd's hands by a
+ * thousandth of their reach, a jitter at the frame's rate, and the bytes are a clip's, once.
+ */
+import { type BoneAnimationHandle, type BoneAnimationTexels } from '../../boneAnimation.ts';
+/** A clip on the device, from `createBoneAnimation`. */
+export declare class GpuBoneAnimation implements BoneAnimationHandle {
+    readonly bones: number;
+    readonly frames: number;
+    readonly framesPerSecond: number;
+    readonly boneScale: number;
+    readonly placesView: GPUTextureView;
+    readonly turnsView: GPUTextureView;
+    disposed: boolean;
+    private readonly places;
+    private readonly turns;
+    constructor(device: GPUDevice, texels: BoneAnimationTexels);
+    dispose(): void;
+}
+/** A batch's clocks: two floats an instance, wrapped onto rows `CLOCK_TEXTURE_WIDTH` wide. */
+export declare class GpuInstanceClocks {
+    readonly view: GPUTextureView;
+    readonly staging: Float32Array;
+    private readonly texture;
+    private readonly width;
+    constructor(device: GPUDevice, capacity: number, label: string);
+    /** The rows that hold the first `count` instances, from `staging`. */
+    upload(queue: GPUQueue, count: number): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,76 @@
+/**
+ * A bone animation's textures on this backend, and a batch's clocks: what
+ * `shaders/boneAnimation.ts` reads by index, made once and never filtered.
+ *
+ * **`rgba32float` places and turns, and `rg32float` clocks**, all read with `textureLoad` and bound
+ * `unfilterable-float`, as the joint palette is: a turn in half floats moves a crowd's hands by a
+ * thousandth of their reach, a jitter at the frame's rate, and the bytes are a clip's, once.
+ */
+import { CLOCK_TEXTURE_WIDTH, } from '../../boneAnimation.js';
+const USAGE_TEXTURE = 0x4 | 0x2; // TEXTURE_BINDING | COPY_DST
+/** A clip on the device, from `createBoneAnimation`. */
+export class GpuBoneAnimation {
+    bones;
+    frames;
+    framesPerSecond;
+    boneScale;
+    placesView;
+    turnsView;
+    disposed = false;
+    places;
+    turns;
+    constructor(device, texels) {
+        this.bones = texels.bones;
+        this.frames = texels.frames;
+        this.framesPerSecond = texels.framesPerSecond;
+        this.boneScale = texels.boneScale;
+        const make = (label, data) => {
+            const texture = device.createTexture({
+                label,
+                size: [texels.bones, texels.frames],
+                format: 'rgba32float',
+                usage: USAGE_TEXTURE,
+            });
+            device.queue.writeTexture({ texture }, data, { bytesPerRow: texels.bones * 16, rowsPerImage: texels.frames }, [texels.bones, texels.frames]);
+            return texture;
+        };
+        this.places = make('bones.places', texels.places);
+        this.turns = make('bones.turns', texels.turns);
+        this.placesView = this.places.createView();
+        this.turnsView = this.turns.createView();
+    }
+    dispose() {
+        this.disposed = true;
+        this.places.destroy();
+        this.turns.destroy();
+    }
+}
+/** A batch's clocks: two floats an instance, wrapped onto rows `CLOCK_TEXTURE_WIDTH` wide. */
+export class GpuInstanceClocks {
+    view;
+    staging;
+    texture;
+    width;
+    constructor(device, capacity, label) {
+        this.width = Math.max(1, Math.min(capacity, CLOCK_TEXTURE_WIDTH));
+        const rows = Math.max(1, Math.ceil(capacity / this.width));
+        this.staging = new Float32Array(this.width * rows * 2);
+        this.texture = device.createTexture({
+            label,
+            size: [this.width, rows],
+            format: 'rg32float',
+            usage: USAGE_TEXTURE,
+        });
+        this.view = this.texture.createView();
+    }
+    /** The rows that hold the first `count` instances, from `staging`. */
+    upload(queue, count) {
+        if (count <= 0)
+            return;
+        const rows = Math.ceil(count / this.width);
+        queue.writeTexture({ texture: this.texture }, this.staging, { bytesPerRow: this.width * 8, rowsPerImage: rows }, [this.width, rows]);
+    }
+    dispose() {
+        this.texture.destroy();
+    }
+}

package/dist/render/backend/webgpu/buffers.d.ts

@@ -75,8 +75,13 @@ export interface GpuMesh {
         /** The second four influences' offsets, or -1 for a mesh with four. */
         readonly joints2: number;
         readonly weights2: number;
+        /** How the weights are read: floats, or sixteen-bit fixed point (`vertexPacking.ts`). */
+        readonly weightsFormat: GPUVertexFormat;
+        readonly weights2Format: GPUVertexFormat;
     } | null;
     readonly indexBuffer: GPUBuffer;
+    /** Sixteen or thirty-two bits an index: every pass that binds `indexBuffer` says which. */
+    readonly indexFormat: GPUIndexFormat;
     /**
      * How many indices the mesh draws. **Zero is a mesh with nothing to draw, and no pass draws it**:
      * a level can hold none of some kind of geometry, and a draw of zero indices does nothing but
@@ -156,18 +161,33 @@ export interface GpuMesh {
      * changed, reported at 2.8 MB a frame for one character. What the split costs is a pipeline per
      * layout, keyed by `:dynamic`, and two more buffers bound per draw of such a mesh.
      */
-    readonly update: ((device: GPUDevice, positions: Float32Array, normals?: Float32Array, previous?: GPUBuffer | null) => void) | null;
+    readonly update: ((device: GPUDevice, positions: Float32Array, normals?: Float32Array, staged?: StagedRewrite | null) => void) | null;
     /**
-     * A dynamic mesh's motion state, which the renderer owns: a buffer for last frame's positions,
-     * 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.
+     * A dynamic mesh's motion state, which the renderer owns: a buffer for last frame's positions and
+     * one the new positions are staged in, each 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;
+        staging: GPUBuffer | null;
         changed: number;
     } | null;
     dispose(): void;
 }
+/**
+ * A rewrite a reconstructing renderer stages rather than writes, so last frame's positions can be
+ * kept with no submit of the rewrite's own: the new positions are written into `staging`, and two
+ * copies are recorded into `encoder` — the live positions into `previous` first, where the frame's
+ * first rewrite keeps them, then the staged ones in. The renderer submits that encoder at the head
+ * of the frame's next submit, which is what keeps both copies ahead of every draw that reads the
+ * mesh. A `writeBuffer` straight to the live positions would land before the copy aside could run.
+ */
+export interface StagedRewrite {
+    encoder: GPUCommandEncoder;
+    staging: GPUBuffer;
+    previous: GPUBuffer | null;
+}
 /** A mesh on its way to the device, and the iterator that gets it there. */
 export interface IncrementalGpuMesh {
     /**

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

@@ -4,6 +4,9 @@ import { validateMeshData } from '../../mesh.js';
 import { ABSENT_ATTRIBUTE } from '../../vertexDefaults.js';
 import { UPLOAD_BYTES_PER_STEP } from '../../uploadStep.js';
 import { INSTANCE_STRIDE } from '../../instances.js';
+import { compactIndices } from '../../indexWidth.js';
+import { SNORM16_ONE, UNORM16_ONE, packingFor, sharedValue, vertexPackingOf, } from '../../vertexPacking.js';
+import { formatBytes, interleaveFixed, packedFormat, packingIn } from './vertexFormats.js';
 /**
  * Mesh geometry as WebGPU buffers.
  *
@@ -160,13 +163,33 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
     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] !== undefined) &&
-        !(dynamic && isStreamed(attribute))).map((attribute) => laidOut(attribute, layered));
+    /* How each attribute travels, which the pipeline key says too: `vertexPacking.ts`. */
+    const packing = vertexPackingOf(data, dynamic);
     /* Interleaved: one stride holding every attribute the mesh actually supplied — less a dynamic
-       mesh's positions and normals, which are buffers of their own. */
-    const stride = supplied.reduce((sum, attribute) => sum + attribute.components * 4, 0);
-    const step = stride / 4;
-    const interleaved = new Float32Array(step * vertexCount);
+       mesh's positions and normals, which are buffers of their own, and any attribute every vertex
+       shares, which is a constant. */
+    const fields = [];
+    let stride = 0;
+    for (const declared of VERTEX_LAYOUT) {
+        if (declared.optional && data[declared.name] === undefined)
+            continue;
+        if (dynamic && isStreamed(declared))
+            continue;
+        const attribute = laidOut(declared, layered);
+        const how = packingFor(packing, attribute.name);
+        if (how === 'constant')
+            continue;
+        const format = packedFormat(attribute.format, how);
+        fields.push({ attribute, packing: how, format, offset: stride });
+        stride += formatBytes(format);
+    }
+    const buffer = new ArrayBuffer(stride * vertexCount);
+    const rows = {
+        floats: new Float32Array(buffer),
+        signed: new Int16Array(buffer),
+        unsigned: new Uint16Array(buffer),
+        bytes: new Uint8Array(buffer),
+    };
     /*
      * **Refused here, in one sentence, rather than by the driver a hundred times.**
      *
@@ -181,7 +204,7 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
      * whose adapter caps at the default, and it deserves a sentence naming the model's size and
      * the device's rather than a wall of validation.
      */
-    const byteLength = align4(interleaved.byteLength);
+    const byteLength = align4(buffer.byteLength);
     const ceiling = device.limits.maxBufferSize;
     if (typeof ceiling === 'number' && byteLength > ceiling) {
         throw new Error(`this mesh needs a ${Math.round(byteLength / 1024 / 1024)} MB vertex buffer and this GPU ` +
@@ -216,10 +239,20 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
             continue;
         absent.set(value, slot * (CONSTANT_SLOT / 4));
     }
+    /* And what every vertex shares, where a mesh's attribute is one value: `vertexPacking.ts`. */
+    for (let slot = 0; slot < VERTEX_LAYOUT.length; slot++) {
+        const attribute = VERTEX_LAYOUT[slot];
+        if (packingFor(packing, attribute.name) !== 'constant')
+            continue;
+        const values = data[attribute.name];
+        absent.set(sharedValue(values, attribute.components), slot * (CONSTANT_SLOT / 4));
+    }
     device.queue.writeBuffer(constants, 0, absent);
+    /* Sixteen bits where every vertex fits, which every draw of this mesh says: indexWidth.ts. */
+    const indices = compactIndices(data.indices, vertexCount);
     const indexBuffer = device.createBuffer({
         label: 'mesh.indices',
-        size: align4(data.indices.byteLength),
+        size: align4(indices.byteLength),
         usage: USAGE.INDEX | USAGE.COPY_DST,
     });
     /* A dynamic mesh's two moving streams: copied from as well as written, for last frame's positions. */
@@ -243,10 +276,11 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
      * buffer never holds a torn one even for the frame between two steps.
      */
     const verticesPerStep = Math.max(1, Math.floor(UPLOAD_BYTES_PER_STEP / (stride + (dynamic ? 24 : 0))));
-    const indexWidth = data.indices.BYTES_PER_ELEMENT;
-    const indicesPerStep = Math.max(1, Math.floor(UPLOAD_BYTES_PER_STEP / indexWidth));
+    /* Whole four-byte words a step, which is all a queue writes: two sixteen-bit indices to one. */
+    const indexWidth = indices.BYTES_PER_ELEMENT;
+    const indicesPerStep = Math.max(1, Math.floor(UPLOAD_BYTES_PER_STEP / 4)) * (4 / indexWidth);
     const totalSteps = Math.max(1, Math.ceil(vertexCount / verticesPerStep)) +
-        Math.max(1, Math.ceil(data.indices.length / indicesPerStep));
+        Math.max(1, Math.ceil(indices.length / indicesPerStep));
     /*
      * **The mesh is assembled out here, by functions of its own, and that is the fix for a copy
      * nobody named.** It was an object literal in this scope, and its `complete` getter shared this
@@ -262,6 +296,7 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
         constants,
         streams,
         indexBuffer,
+        indexFormat: indices instanceof Uint16Array ? 'uint16' : 'uint32',
         stride: streams === null ? stride : 12,
         indexCount: data.indices.length,
         bounds,
@@ -271,7 +306,7 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
         isSkinnedEight: data.joints !== undefined && data.joints2 !== undefined,
         vertexCount,
         hasUvs: data.uvs !== undefined,
-        skinOffsets: streams === null ? skinOffsetsOf(supplied) : null,
+        skinOffsets: streams === null ? skinOffsetsOf(fields) : null,
         hasChannel: data.channel !== undefined,
         morph: data.morphTargets === undefined || data.morphTargetCount === undefined
             ? null
@@ -282,14 +317,14 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
     });
     const job = {
         data,
-        interleaved,
+        indices,
+        rows,
         device,
-        supplied,
+        fields,
         streams,
         vertices,
         indexBuffer,
         vertexCount,
-        step,
         stride,
         verticesPerStep,
         indicesPerStep,
@@ -299,26 +334,35 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
     return { mesh, upload: uploadSteps(job) };
 }
 function* uploadSteps(job) {
-    const { device, supplied, vertices, indexBuffer, vertexCount, step, stride } = job;
+    const { device, fields, vertices, indexBuffer, vertexCount, stride } = job;
+    /* Floats and halves a vertex: every field is whole words, so both divide. */
+    const step = stride / 4;
+    const halves = stride / 2;
     let taken = 0;
     for (let from = 0; from < vertexCount; from += job.verticesPerStep) {
         const data = job.data;
-        const interleaved = job.interleaved;
+        const rows = job.rows;
         const to = Math.min(from + job.verticesPerStep, vertexCount);
-        let fieldOffset = 0;
-        for (const attribute of supplied) {
+        for (const field of fields) {
+            const attribute = field.attribute;
             const source = data[attribute.name];
-            if (attribute === LAYERED_UVS) {
+            if (field.packing === 'snorm16') {
+                interleaveFixed(rows.signed, source, attribute.components, halves, field.offset / 2, from, to, SNORM16_ONE);
+            }
+            else if (field.packing === 'unorm16') {
+                interleaveFixed(rows.unsigned, source, attribute.components, halves, field.offset / 2, from, to, UNORM16_ONE);
+            }
+            else 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, 1, step, fieldOffset + 2, from, to);
+                const at = field.offset / 4;
+                interleaveField(rows.floats, source, 2, step, at, from, to);
+                interleaveField(rows.floats, data.layers, 1, step, at + 2, from, to);
             }
             else {
-                interleaveField(interleaved, source, attribute.components, step, fieldOffset, from, to);
+                interleaveField(rows.floats, source, attribute.components, step, field.offset / 4, from, to);
             }
-            fieldOffset += attribute.components;
         }
-        device.queue.writeBuffer(vertices, from * stride, interleaved, from * step, (to - from) * step);
+        device.queue.writeBuffer(vertices, from * stride, rows.bytes, from * stride, (to - from) * stride);
         if (job.streams !== null) {
             const count = (to - from) * 3;
             device.queue.writeBuffer(job.streams.positions, from * 12, data.positions, from * 3, count);
@@ -328,7 +372,7 @@ function* uploadSteps(job) {
         if (taken < job.totalSteps)
             yield;
     }
-    const indices = job.data.indices;
+    const indices = job.indices;
     const indexWidth = indices.BYTES_PER_ELEMENT;
     for (let from = 0; from < indices.length; from += job.indicesPerStep) {
         const to = Math.min(from + job.indicesPerStep, indices.length);
@@ -338,7 +382,8 @@ function* uploadSteps(job) {
             yield;
     }
     job.data = null;
-    job.interleaved = null;
+    job.indices = null;
+    job.rows = null;
     job.progress.uploaded = true;
 }
 /**
@@ -383,32 +428,39 @@ function interleaveField(rows, source, width, step, fieldOffset, from, to) {
  * 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) {
-    let floats = 0;
+function skinOffsetsOf(fields) {
     let joints = -1;
     let weights = -1;
     let joints2 = -1;
     let weights2 = -1;
-    for (const attribute of supplied) {
-        if (attribute.name === 'joints')
-            joints = floats * 4;
-        if (attribute.name === 'weights')
-            weights = floats * 4;
-        if (attribute.name === 'joints2')
-            joints2 = floats * 4;
-        if (attribute.name === 'weights2')
-            weights2 = floats * 4;
-        floats += attribute.components;
+    let weightsFormat = 'float32x4';
+    let weights2Format = 'float32x4';
+    for (const field of fields) {
+        const name = field.attribute.name;
+        if (name === 'joints')
+            joints = field.offset;
+        if (name === 'joints2')
+            joints2 = field.offset;
+        if (name === 'weights') {
+            weights = field.offset;
+            weightsFormat = field.format;
+        }
+        if (name === 'weights2') {
+            weights2 = field.offset;
+            weights2Format = field.format;
+        }
     }
     if (joints < 0 || weights < 0)
         return null;
     return joints2 >= 0 && weights2 >= 0
-        ? { joints, weights, joints2, weights2 }
-        : { joints, weights, joints2: -1, weights2: -1 };
+        ? { joints, weights, joints2, weights2, weightsFormat, weights2Format }
+        : { joints, weights, joints2: -1, weights2: -1, weightsFormat, weights2Format };
 }
 /** The handle, made where it can see only what it hands out. */
 function gpuMeshOf(parts) {
-    const motion = parts.update === null ? null : { previous: null, changed: -1 };
+    const motion = parts.update === null
+        ? null
+        : { previous: null, staging: null, changed: -1 };
     const { vertices, constants, streams, indexBuffer, progress } = parts;
     return {
         vertexBuffers: streams === null
@@ -417,6 +469,7 @@ function gpuMeshOf(parts) {
         vertexStride: parts.stride,
         skinOffsets: parts.skinOffsets,
         indexBuffer,
+        indexFormat: parts.indexFormat,
         indexCount: parts.indexCount,
         bounds: parts.bounds,
         get complete() {
@@ -433,6 +486,7 @@ function gpuMeshOf(parts) {
         motion,
         dispose() {
             motion?.previous?.destroy();
+            motion?.staging?.destroy();
             streams?.positions.destroy();
             streams?.normals.destroy();
             vertices.destroy();
@@ -447,12 +501,12 @@ function isStreamed(attribute) {
 }
 /**
  * A dynamic mesh's `update`: the caller's positions, and its normals where it has them, each
- * written to its own buffer as it came. Last frame's positions, where a reconstruction wants them,
- * are copied on the device before the write — a copy submitted ahead of a `writeBuffer` runs ahead
- * of it on the queue — so no CPU copy of anything is kept.
+ * written to its own buffer as it came — or, where a reconstruction keeps last frame's positions,
+ * the positions staged and copied in on the device behind the copy aside (`StagedRewrite`), so no
+ * CPU copy of anything is kept and the rewrite submits nothing of its own.
  */
 function streamUpdate(positionsBuffer, normalsBuffer, streamBytes, bounds, vertexCount) {
-    return (target, positions, normals, previous = null) => {
+    return (target, positions, normals, staged = null) => {
         for (const [name, values] of [
             ['update', positions],
             ['normals', normals],
@@ -463,15 +517,19 @@ function streamUpdate(positionsBuffer, normalsBuffer, streamBytes, bounds, verte
                 "A mesh's vertex count is fixed at creation: the index buffer, the pipeline and " +
                 'every other attribute are sized against it.');
         }
-        if (previous !== null) {
-            const encoder = target.createCommandEncoder({ label: 'mesh.previousPositions' });
-            encoder.copyBufferToBuffer(positionsBuffer, 0, previous, 0, streamBytes);
-            target.queue.submit([encoder.finish()]);
-        }
         /* 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);
-        target.queue.writeBuffer(positionsBuffer, 0, positions);
+        if (staged === null) {
+            target.queue.writeBuffer(positionsBuffer, 0, positions);
+        }
+        else {
+            target.queue.writeBuffer(staged.staging, 0, positions);
+            if (staged.previous !== null) {
+                staged.encoder.copyBufferToBuffer(positionsBuffer, 0, staged.previous, 0, streamBytes);
+            }
+            staged.encoder.copyBufferToBuffer(staged.staging, 0, positionsBuffer, 0, streamBytes);
+        }
         if (normals !== undefined)
             target.queue.writeBuffer(normalsBuffer, 0, normals);
     };
@@ -546,7 +604,9 @@ instanced = false) {
          * in the interleaved one. A *skinned* mesh interleaves them, so removing them would shift
          * the stride under every other attribute — which is why `createInstanced` refuses one.
          */
-        const supplied = !attribute.optional || present[String(attribute.name)] === true;
+        /* One value every vertex shares sits with the absent ones: `vertexPacking.ts`. */
+        const packing = packingIn(present, String(attribute.name));
+        const supplied = (!attribute.optional || present[String(attribute.name)] === true) && packing !== 'constant';
         if (instanced && INSTANCE_LOCATIONS.has(attribute.shaderLocation)) {
             /*
              * **Free to drop only because the mesh does not supply it.** An absent optional attribute
@@ -566,12 +626,9 @@ instanced = false) {
             return;
         }
         if (supplied) {
-            interleaved.push({
-                shaderLocation: attribute.shaderLocation,
-                offset,
-                format: attribute.format,
-            });
-            offset += attribute.components * 4;
+            const format = packedFormat(attribute.format, packing);
+            interleaved.push({ shaderLocation: attribute.shaderLocation, offset, format });
+            offset += formatBytes(format);
             return;
         }
         constants.push({

package/dist/render/backend/webgpu/clothKernels.d.ts

@@ -0,0 +1,8 @@
+export declare const CLOTH_ENTRIES: readonly ['clothPose', 'clothRest', 'clothBegin', 'clothPredict', 'clothDistance', 'clothBending', 'clothTether', 'clothLimit', 'clothFinish', 'clothBlend', 'clothPublish'];
+export type ClothEntry = (typeof CLOTH_ENTRIES)[number];
+export interface ClothKernels {
+    readonly layout: GPUBindGroupLayout;
+    readonly outputLayout: GPUBindGroupLayout;
+    readonly pipelines: Readonly<Record<ClothEntry, GPUComputePipeline>>;
+}
+export declare function clothKernelsFor(device: GPUDevice): ClothKernels;

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

@@ -0,0 +1,76 @@
+/**
+ * The cloth solver's layouts and one compute pipeline an entry point of `shaders/clothSolve.wgsl.ts`,
+ * built once a device and shared by every set of garments on it.
+ */
+import { CLOTH_SOLVE_WGSL } from './shaders/clothSolve.wgsl.js';
+import { shaderModule } from './shaderModules.js';
+const COMPUTE = 0x4;
+export const CLOTH_ENTRIES = [
+    'clothPose',
+    'clothRest',
+    'clothBegin',
+    'clothPredict',
+    'clothDistance',
+    'clothBending',
+    'clothTether',
+    'clothLimit',
+    'clothFinish',
+    'clothBlend',
+    'clothPublish',
+];
+const kernelsByDevice = new WeakMap();
+export function clothKernelsFor(device) {
+    const held = kernelsByDevice.get(device);
+    if (held !== undefined)
+        return held;
+    const uniform = (binding, dynamic) => ({
+        binding,
+        visibility: COMPUTE,
+        buffer: { type: 'uniform', hasDynamicOffset: dynamic },
+    });
+    const storage = (binding, type) => ({
+        binding,
+        visibility: COMPUTE,
+        buffer: { type },
+    });
+    /* Seven storage buffers of the eight a stage is granted: the shader's header says why so few. */
+    const layout = device.createBindGroupLayout({
+        label: 'cloth.solve',
+        entries: [
+            uniform(0, false),
+            uniform(1, true),
+            uniform(2, true),
+            storage(3, 'storage'),
+            storage(4, 'storage'),
+            storage(5, 'read-only-storage'),
+            storage(6, 'read-only-storage'),
+            storage(7, 'storage'),
+            storage(8, 'read-only-storage'),
+            storage(9, 'read-only-storage'),
+        ],
+    });
+    const outputLayout = device.createBindGroupLayout({
+        label: 'cloth.publish',
+        entries: [
+            {
+                binding: 0,
+                visibility: COMPUTE,
+                storageTexture: { access: 'write-only', format: 'rgba32float' },
+            },
+        ],
+    });
+    const module = shaderModule(device, { label: 'cloth.solve', code: CLOTH_SOLVE_WGSL });
+    const solve = device.createPipelineLayout({ bindGroupLayouts: [layout] });
+    const publish = device.createPipelineLayout({ bindGroupLayouts: [layout, outputLayout] });
+    const pipelines = {};
+    for (const entry of CLOTH_ENTRIES) {
+        pipelines[entry] = device.createComputePipeline({
+            label: `cloth.${entry}`,
+            layout: entry === 'clothPublish' ? publish : solve,
+            compute: { module, entryPoint: entry },
+        });
+    }
+    const kernels = { layout, outputLayout, pipelines };
+    kernelsByDevice.set(device, kernels);
+    return kernels;
+}