@driftengine/core 4.9.0 → 4.11.0

package/src/render/backend/webgl2/skinPaletteTexture.ts

@@ -22,16 +22,18 @@ 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: WebGL2RenderingContext, palette: Float32Array): void {
     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();
       if (created === null) throw new Error('skin palette: failed to create the palette texture');

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

@@ -0,0 +1,97 @@
+/**
+ * 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,
+  type BoneAnimationHandle,
+  type BoneAnimationTexels,
+} from '../../boneAnimation.ts';
+
+const USAGE_TEXTURE = 0x4 | 0x2; // TEXTURE_BINDING | COPY_DST
+
+/** A clip on the device, from `createBoneAnimation`. */
+export class GpuBoneAnimation implements BoneAnimationHandle {
+  readonly bones: number;
+  readonly frames: number;
+  readonly framesPerSecond: number;
+  readonly boneScale: number;
+  readonly placesView: GPUTextureView;
+  readonly turnsView: GPUTextureView;
+  disposed = false;
+  private readonly places: GPUTexture;
+  private readonly turns: GPUTexture;
+
+  constructor(device: GPUDevice, texels: BoneAnimationTexels) {
+    this.bones = texels.bones;
+    this.frames = texels.frames;
+    this.framesPerSecond = texels.framesPerSecond;
+    this.boneScale = texels.boneScale;
+    const make = (label: string, data: Float32Array): GPUTexture => {
+      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(): void {
+    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 {
+  readonly view: GPUTextureView;
+  readonly staging: Float32Array;
+  private readonly texture: GPUTexture;
+  private readonly width: number;
+
+  constructor(device: GPUDevice, capacity: number, label: string) {
+    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: GPUQueue, count: number): void {
+    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(): void {
+    this.texture.destroy();
+  }
+}

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

@@ -6,6 +6,16 @@ import type { MeshData } from '../../mesh.ts';
 import { ABSENT_ATTRIBUTE } from '../../vertexDefaults.ts';
 import { UPLOAD_BYTES_PER_STEP } from '../../uploadStep.ts';
 import { INSTANCE_STRIDE } from '../../instances.ts';
+import { compactIndices } from '../../indexWidth.ts';
+import {
+  SNORM16_ONE,
+  UNORM16_ONE,
+  packingFor,
+  sharedValue,
+  vertexPackingOf,
+  type AttributePacking,
+} from '../../vertexPacking.ts';
+import { formatBytes, interleaveFixed, packedFormat, packingIn } from './vertexFormats.ts';
 
 /**
  * Mesh geometry as WebGPU buffers.
@@ -172,8 +182,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
@@ -258,18 +273,37 @@ export interface GpuMesh {
         device: GPUDevice,
         positions: Float32Array,
         normals?: Float32Array,
-        previous?: GPUBuffer | null,
+        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; changed: number } | null;
+  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 {
   /**
@@ -338,17 +372,31 @@ export function createGpuMeshIncremental(
   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) &&
-      !(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: Field[] = [];
+  let stride = 0;
+  for (const declared of VERTEX_LAYOUT) {
+    if (declared.optional && data[declared.name as keyof MeshData] === 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: 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.**
@@ -364,7 +412,7 @@ export function createGpuMeshIncremental(
    * 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(
@@ -401,11 +449,20 @@ export function createGpuMeshIncremental(
     if (value === undefined) 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] as VertexAttribute;
+    if (packingFor(packing, attribute.name) !== 'constant') continue;
+    const values = data[attribute.name as keyof MeshData] as Float32Array;
+    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,
   });
 
@@ -434,11 +491,12 @@ export function createGpuMeshIncremental(
     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
@@ -455,6 +513,7 @@ export function createGpuMeshIncremental(
     constants,
     streams,
     indexBuffer,
+    indexFormat: indices instanceof Uint16Array ? 'uint16' : 'uint32',
     stride: streams === null ? stride : 12,
     indexCount: data.indices.length,
     bounds,
@@ -464,7 +523,7 @@ export function createGpuMeshIncremental(
     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
@@ -483,14 +542,14 @@ export function createGpuMeshIncremental(
 
   const job: UploadJob = {
     data,
-    interleaved,
+    indices,
+    rows,
     device,
-    supplied,
+    fields,
     streams,
     vertices,
     indexBuffer,
     vertexCount,
-    step,
     stride,
     verticesPerStep,
     indicesPerStep,
@@ -500,20 +559,38 @@ export function createGpuMeshIncremental(
   return { mesh, upload: uploadSteps(job) };
 }
 
+/** One attribute as a mesh interleaves it: how it travels, the format it is read with, where. */
+interface Field {
+  readonly attribute: VertexAttribute;
+  readonly packing: AttributePacking;
+  readonly format: GPUVertexFormat;
+  /** Bytes into the vertex. */
+  readonly offset: number;
+}
+
+/** The interleaved rows, viewed as each field's type writes them. */
+interface Rows {
+  readonly floats: Float32Array;
+  readonly signed: Int16Array;
+  readonly unsigned: Uint16Array;
+  readonly bytes: Uint8Array;
+}
+
 /**
  * What an upload reads, held by the upload alone and let go when it finishes — so a caller that
  * keeps its iterator, as a streamer keeps the handle it was given, keeps nothing through it.
  */
 interface UploadJob {
   data: MeshData | null;
-  interleaved: Float32Array | null;
+  /** The mesh's indices at the width its buffer holds them: `compactIndices`. */
+  indices: Uint16Array | Uint32Array | null;
+  rows: Rows | null;
   readonly device: GPUDevice;
-  readonly supplied: readonly VertexAttribute[];
+  readonly fields: readonly Field[];
   readonly streams: { readonly positions: GPUBuffer; readonly normals: GPUBuffer } | null;
   readonly vertices: GPUBuffer;
   readonly indexBuffer: GPUBuffer;
   readonly vertexCount: number;
-  readonly step: number;
   readonly stride: number;
   readonly verticesPerStep: number;
   readonly indicesPerStep: number;
@@ -522,33 +599,64 @@ interface UploadJob {
 }
 
 function* uploadSteps(job: UploadJob): Generator<void, void, void> {
-  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 as MeshData;
-    const interleaved = job.interleaved as Float32Array;
+    const rows = job.rows as 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 as keyof MeshData] as Float32Array;
-      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);
+        const at = field.offset / 4;
+        interleaveField(rows.floats, source, 2, step, at, from, to);
+        interleaveField(rows.floats, data.layers as Float32Array, 1, step, at + 2, from, to);
+      } else {
         interleaveField(
-          interleaved,
-          data.layers as Float32Array,
-          1,
+          rows.floats,
+          source,
+          attribute.components,
           step,
-          fieldOffset + 2,
+          field.offset / 4,
           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);
+    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);
@@ -558,7 +666,7 @@ function* uploadSteps(job: UploadJob): Generator<void, void, void> {
     if (taken < job.totalSteps) yield;
   }
 
-  const indices = (job.data as MeshData).indices;
+  const indices = job.indices as Uint16Array | Uint32Array;
   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);
@@ -568,7 +676,8 @@ function* uploadSteps(job: UploadJob): Generator<void, void, void> {
   }
 
   job.data = null;
-  job.interleaved = null;
+  job.indices = null;
+  job.rows = null;
   job.progress.uploaded = true;
 }
 
@@ -619,23 +728,30 @@ 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;
+function skinOffsetsOf(fields: readonly Field[]): GpuMesh['skinOffsets'] {
   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: GPUVertexFormat = 'float32x4';
+  let weights2Format: GPUVertexFormat = '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. */
@@ -644,6 +760,7 @@ function gpuMeshOf(parts: {
   readonly constants: GPUBuffer;
   readonly streams: { readonly positions: GPUBuffer; readonly normals: GPUBuffer } | null;
   readonly indexBuffer: GPUBuffer;
+  readonly indexFormat: GPUIndexFormat;
   readonly stride: number;
   readonly indexCount: number;
   readonly bounds: Bounds;
@@ -658,7 +775,10 @@ function gpuMeshOf(parts: {
   readonly morph: MorphTexture | null;
   readonly update: GpuMesh['update'];
 }): GpuMesh {
-  const motion = parts.update === null ? null : { previous: null as GPUBuffer | null, changed: -1 };
+  const motion =
+    parts.update === null
+      ? null
+      : { previous: null as GPUBuffer | null, staging: null as GPUBuffer | null, changed: -1 };
   const { vertices, constants, streams, indexBuffer, progress } = parts;
   return {
     vertexBuffers:
@@ -668,6 +788,7 @@ function gpuMeshOf(parts: {
     vertexStride: parts.stride,
     skinOffsets: parts.skinOffsets,
     indexBuffer,
+    indexFormat: parts.indexFormat,
     indexCount: parts.indexCount,
     bounds: parts.bounds,
     get complete(): boolean {
@@ -684,6 +805,7 @@ function gpuMeshOf(parts: {
     motion,
     dispose(): void {
       motion?.previous?.destroy();
+      motion?.staging?.destroy();
       streams?.positions.destroy();
       streams?.normals.destroy();
       vertices.destroy();
@@ -700,9 +822,9 @@ function isStreamed(attribute: VertexAttribute): boolean {
 
 /**
  * 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: GPUBuffer,
@@ -715,7 +837,7 @@ function streamUpdate(
     target: GPUDevice,
     positions: Float32Array,
     normals?: Float32Array,
-    previous: GPUBuffer | null = null,
+    staged: StagedRewrite | null = null,
   ): void => {
     for (const [name, values] of [
       ['update', positions],
@@ -728,15 +850,18 @@ function streamUpdate(
           '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);
   };
 }
@@ -818,7 +943,10 @@ export function vertexBufferLayouts(
      * 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
@@ -840,12 +968,9 @@ export function vertexBufferLayouts(
       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({