@driftengine/core 4.8.2 → 4.8.4

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

@@ -0,0 +1,309 @@
+/**
+ * Skin's screen-space scattering on this backend: the targets, the kept draws and the two passes
+ * that spread them. `skinBlur.ts` is what the blur computes and why; this is where it runs.
+ *
+ * **What the renderer hands it.** Each skin draw, recorded into the frame with its diffuse taken
+ * out, is recorded a second time here with the diffuse alone. When the frame first draws something
+ * blended — or ends, if nothing is — the renderer ends its pass and calls `drawDiffuse`, which
+ * replays them into a half-float target against the frame's own depth; resolves the depth; and
+ * calls `spread`, which blurs across into a second target and then down, adding into the frame.
+ *
+ * **The draws are commands, not calls**, for the reason `LatePass` keeps its own pool: the frame
+ * graph's is spent at every flush, and these are replayed after the flush that ends the frame's
+ * pass. Each holds the per-draw ring slot its frame half used, and those stay valid until the
+ * encoder is replaced, which is after this has run.
+ *
+ * **What it costs**: every skin draw twice; two half-float targets the size of the frame, and a
+ * third multisampled one under multisampling; a depth resolve; and two full-screen passes that
+ * leave at once wherever no skin was drawn.
+ */
+import { SKIN_PROFILES } from '../../skinBlur.ts';
+import { SKINBLUR_BINDINGS, SKIN_BLUR_FRAG_WGSL } from '../../shaders/generated/skinBlur.wgsl.ts';
+import { SCENE_ALPHA_KEEPS } from '../../sceneCoverage.ts';
+import type { CommandPool, DrawCommand } from './drawCommand.ts';
+import { createCommandPool, resetPool, takeCommand } from './drawCommand.ts';
+import type { PipelineCache } from './pipelineCache.ts';
+import { createPostStageLayout, postPipeline, postPipelineTargets } from './postPass.ts';
+import { DYNAMIC_ALIGNMENT } from './uniformRing.ts';
+
+const BINDINGS = SKINBLUR_BINDINGS.SKIN_BLUR_FRAG;
+const SLOT = Math.ceil(BINDINGS.uniformSize / DYNAMIC_ALIGNMENT) * DYNAMIC_ALIGNMENT;
+const USAGE_TARGET = 0x10 | 0x4; // RENDER_ATTACHMENT | TEXTURE_BINDING
+const USAGE_UNIFORM_DST = 0x40 | 0x8; // UNIFORM | COPY_DST
+
+/** The format the diffuse lands in: half floats, because it is linear light before any grade. */
+export const SKIN_TARGET_FORMAT: GPUTextureFormat = 'rgba16float';
+
+export class SkinScatterPass {
+  private readonly device: GPUDevice;
+  private readonly layout: GPUBindGroupLayout;
+  private readonly uniforms: GPUBuffer;
+  private readonly staging = new Float32Array((SLOT * 2) / 4);
+  private readonly linear: GPUSampler;
+  private readonly nearest: GPUSampler;
+  private readonly commands: CommandPool = createCommandPool(16);
+  /** Each profile's scatter distance per channel, in metres: four floats a profile. */
+  private readonly profiles = new Float32Array(SKIN_PROFILES * 4);
+  private diffuse: GPUTexture | null = null;
+  private diffuseMsaa: GPUTexture | null = null;
+  private across: GPUTexture | null = null;
+  private diffuseView: GPUTextureView | null = null;
+  private diffuseMsaaView: GPUTextureView | null = null;
+  private acrossView: GPUTextureView | null = null;
+  private groupAcross: GPUBindGroup | null = null;
+  private groupDown: GPUBindGroup | null = null;
+  private groupsDepth: GPUTextureView | null = null;
+
+  constructor(device: GPUDevice) {
+    this.device = device;
+    this.layout = createPostStageLayout(device, BINDINGS.uniforms, BINDINGS.uniformSize, [
+      { binding: BINDINGS.textures.uSkin },
+      { binding: BINDINGS.textures.uDepth, filterable: false },
+    ]);
+    this.uniforms = device.createBuffer({
+      label: 'skin.blurUniforms',
+      size: SLOT * 2,
+      usage: USAGE_UNIFORM_DST,
+    });
+    this.linear = device.createSampler({
+      label: 'skin.linear',
+      magFilter: 'linear',
+      minFilter: 'linear',
+      addressModeU: 'clamp-to-edge',
+      addressModeV: 'clamp-to-edge',
+    });
+    this.nearest = device.createSampler({
+      label: 'skin.nearest',
+      addressModeU: 'clamp-to-edge',
+      addressModeV: 'clamp-to-edge',
+    });
+  }
+
+  /** Whether any skin was kept for this frame. */
+  get pending(): boolean {
+    return this.commands.taken > 0;
+  }
+
+  /** A command for one skin draw's diffuse half, filled by the caller. */
+  take(): DrawCommand {
+    return this.commands.commands[takeCommand(this.commands)] as DrawCommand;
+  }
+
+  /** What one profile scatters, per channel, in metres: the last material to name it says. */
+  setProfile(index: number, r: number, g: number, b: number): void {
+    const at = Math.min(Math.max(Math.round(index), 0), SKIN_PROFILES - 1) * 4;
+    this.profiles[at] = r;
+    this.profiles[at + 1] = g;
+    this.profiles[at + 2] = b;
+  }
+
+  /** The targets at the frame's size and sample count, made again only when either changes. */
+  size(width: number, height: number, samples: number): void {
+    if (
+      this.diffuse !== null &&
+      this.diffuse.width === width &&
+      this.diffuse.height === height &&
+      samples > 1 === (this.diffuseMsaa !== null) &&
+      (this.diffuseMsaa === null || this.diffuseMsaa.sampleCount === samples)
+    ) {
+      return;
+    }
+    this.releaseTargets();
+    const make = (label: string, count: number): GPUTexture =>
+      this.device.createTexture({
+        label,
+        size: [width, height],
+        format: SKIN_TARGET_FORMAT,
+        sampleCount: count,
+        usage: count > 1 ? 0x10 : USAGE_TARGET,
+      });
+    this.diffuse = make('skin.diffuse', 1);
+    this.across = make('skin.across', 1);
+    this.diffuseMsaa = samples > 1 ? make('skin.diffuseMsaa', samples) : null;
+    this.diffuseView = this.diffuse.createView();
+    this.acrossView = this.across.createView();
+    this.diffuseMsaaView = this.diffuseMsaa?.createView() ?? null;
+    this.groupAcross = null;
+    this.groupDown = null;
+  }
+
+  /**
+   * Every kept draw's diffuse into the target, against the frame's own depth, which it reads and
+   * does not write. Called with no pass open on `encoder`.
+   */
+  drawDiffuse(
+    encoder: GPUCommandEncoder,
+    depth: GPUTextureView,
+    issue: (pass: GPURenderPassEncoder, command: DrawCommand) => void,
+    timestampWrites: GPURenderPassTimestampWrites | undefined,
+  ): void {
+    const target = this.diffuseView;
+    if (target === null) return;
+    const pass = encoder.beginRenderPass({
+      label: 'skin.diffuse',
+      timestampWrites,
+      colorAttachments: [
+        {
+          view: this.diffuseMsaaView ?? target,
+          resolveTarget: this.diffuseMsaaView === null ? undefined : target,
+          clearValue: [0, 0, 0, 0],
+          loadOp: 'clear',
+          storeOp: this.diffuseMsaaView === null ? 'store' : 'discard',
+        },
+      ],
+      depthStencilAttachment: { view: depth, depthLoadOp: 'load', depthStoreOp: 'store' },
+    });
+    for (let i = 0; i < this.commands.taken; i += 1) {
+      issue(pass, this.commands.commands[i] as DrawCommand);
+    }
+    pass.end();
+  }
+
+  /**
+   * Across into the second target, then down and added into the frame's colour — `frame` the
+   * attachment its pass draws into, `resolve` where a multisampled one resolves, `samples` its
+   * count. `projection` is the frame's, `height` the frame's height in pixels.
+   */
+  spread(
+    encoder: GPUCommandEncoder,
+    pipelines: PipelineCache,
+    depth: GPUTextureView,
+    frame: GPUTextureView,
+    resolve: GPUTextureView | null,
+    samples: number,
+    projection: ArrayLike<number>,
+    inverseProjection: ArrayLike<number>,
+    timestampWrites: () => GPURenderPassTimestampWrites | undefined,
+  ): void {
+    const diffuse = this.diffuse;
+    if (diffuse === null || this.diffuseView === null || this.acrossView === null) return;
+    if (this.groupAcross === null || this.groupDown === null || this.groupsDepth !== depth) {
+      this.groupAcross = this.group('skin.blurAcross', this.diffuseView, depth);
+      this.groupDown = this.group('skin.blurDown', this.acrossView, depth);
+      this.groupsDepth = depth;
+    }
+    this.writeUniforms(diffuse.width, diffuse.height, projection, inverseProjection);
+
+    const across = postPipeline(
+      pipelines,
+      this.device,
+      this.layout,
+      'skin.blurAcross',
+      SKIN_BLUR_FRAG_WGSL,
+      SKIN_TARGET_FORMAT,
+    );
+    const down = postPipelineTargets(
+      pipelines,
+      this.device,
+      this.layout,
+      `skin.blurDown:${pipelines.format}:${samples}`,
+      SKIN_BLUR_FRAG_WGSL,
+      [
+        {
+          format: pipelines.format,
+          /* Added: its colour onto the frame's, the frame's alpha kept. */
+          blend: {
+            color: { srcFactor: 'one', dstFactor: 'one', operation: 'add' },
+            alpha: SCENE_ALPHA_KEEPS,
+          },
+        },
+      ],
+      samples,
+    );
+
+    const first = encoder.beginRenderPass({
+      label: 'skin.blurAcross',
+      timestampWrites: timestampWrites(),
+      colorAttachments: [
+        { view: this.acrossView, clearValue: [0, 0, 0, 0], loadOp: 'clear', storeOp: 'store' },
+      ],
+    });
+    first.setPipeline(across);
+    first.setBindGroup(0, this.groupAcross, [0]);
+    first.draw(3);
+    first.end();
+
+    const second = encoder.beginRenderPass({
+      label: 'skin.blurDown',
+      timestampWrites: timestampWrites(),
+      colorAttachments: [
+        {
+          view: frame,
+          resolveTarget: resolve ?? undefined,
+          loadOp: 'load',
+          storeOp: 'store',
+        },
+      ],
+    });
+    second.setPipeline(down);
+    second.setBindGroup(0, this.groupDown, [SLOT]);
+    second.draw(3);
+    second.end();
+  }
+
+  /** Spent at the frame's start: the kept draws were this frame's. */
+  reset(): void {
+    resetPool(this.commands);
+  }
+
+  dispose(): void {
+    this.releaseTargets();
+    this.uniforms.destroy();
+  }
+
+  private group(label: string, skin: GPUTextureView, depth: GPUTextureView): GPUBindGroup {
+    return this.device.createBindGroup({
+      label,
+      layout: this.layout,
+      entries: [
+        {
+          binding: BINDINGS.uniforms,
+          resource: { buffer: this.uniforms, size: BINDINGS.uniformSize },
+        },
+        { binding: BINDINGS.textures.uSkin.texture, resource: skin },
+        { binding: BINDINGS.textures.uSkin.sampler, resource: this.linear },
+        { binding: BINDINGS.textures.uDepth.texture, resource: depth },
+        { binding: BINDINGS.textures.uDepth.sampler, resource: this.nearest },
+      ],
+    });
+  }
+
+  /** Both axes' blocks: the step along each, and what they share. Column-major matrices. */
+  private writeUniforms(
+    width: number,
+    height: number,
+    projection: ArrayLike<number>,
+    inverse: ArrayLike<number>,
+  ): void {
+    const f = this.staging;
+    const fields = BINDINGS.fields;
+    for (let axis = 0; axis < 2; axis += 1) {
+      const base = (axis * SLOT) / 4;
+      f[base + fields.uStep.offset / 4] = axis === 0 ? 1 / width : 0;
+      f[base + fields.uStep.offset / 4 + 1] = axis === 0 ? 0 : 1 / height;
+      /* The four terms that carry a depth back to view-space metres: the occlusion blur's own. */
+      const toZ = base + fields.uDepthToViewZ.offset / 4;
+      f[toZ] = (inverse[10] as number) ?? 0;
+      f[toZ + 1] = (inverse[14] as number) ?? 0;
+      f[toZ + 2] = (inverse[11] as number) ?? 0;
+      f[toZ + 3] = (inverse[15] as number) ?? 1;
+      /* Pixels a metre spans at a metre: the vertical focal length, which is the horizontal one
+         too wherever a pixel is square. */
+      f[base + fields.uFocal.offset / 4] = ((projection[5] as number) * height) / 2;
+      f.set(this.profiles, base + fields.uProfiles.offset / 4);
+    }
+    this.device.queue.writeBuffer(this.uniforms, 0, f);
+  }
+
+  private releaseTargets(): void {
+    this.diffuse?.destroy();
+    this.diffuseMsaa?.destroy();
+    this.across?.destroy();
+    this.diffuse = null;
+    this.diffuseMsaa = null;
+    this.across = null;
+    this.diffuseView = null;
+    this.diffuseMsaaView = null;
+    this.acrossView = null;
+  }
+}

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

@@ -1,7 +1,15 @@
 import type { SurfaceTextureOptions } from '../../surfaceTexture.ts';
 import { SURFACE_EFFECT_TEXELS, packSurfaceEffects } from '../../surfaceEffects.ts';
 import { toHalfFloats } from '../../halfFloat.ts';
-import { isSourceList, layerSize, refuseArrayUpdate, sourceSize } from '../../textureSource.ts';
+import { layerSize, refuseArrayUpdate, sourceSize } from '../../textureSource.ts';
+import { compressedLayers, planBlocks, refuseBlockUpdate } from '../../compressedSource.ts';
+import type {
+  BlockFormat,
+  CompressedTextureFormat,
+  CompressedTextureSource,
+  SurfaceSource,
+} from '../../compressedSource.ts';
+import { createCompressedTexture } from './compressedUpload.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
 
@@ -179,24 +187,45 @@ export class GpuSurfaceTexture {
   private effectsTable: GPUTexture | null = null;
   /** Its view, which the flat group binds beside this image when it is a material's albedo. */
   effectsView: GPUTextureView | null = null;
+  /** The block format a compressed texture holds, or null for one uploaded from images. */
+  private readonly blockFormat: BlockFormat | null;
 
   constructor(
     private readonly device: GPUDevice,
     private readonly pipelines: PipelineCache,
-    source: TexImageSource | readonly TexImageSource[],
+    source: SurfaceSource | readonly SurfaceSource[],
     options: SurfaceTextureOptions = {},
+    compressed: readonly CompressedTextureFormat[] = [],
   ) {
-    const sources: readonly TexImageSource[] = isSourceList(source) ? source : [source];
-    const { width, height } = layerSize(sources);
-    this.layers = sources.length;
-    this.mipmapped = options.mipmap ?? true;
+    const listed = (Array.isArray(source) ? source : [source]) as readonly SurfaceSource[];
+    const blocks = compressedLayers(listed);
+    const srgb = (options.colorSpace ?? 'linear') === 'srgb';
     /* `SRGB8_ALPHA8`'s equivalent. Decoded in the sampler, before filtering, which is the only
        place it is correct — `surfaceTexture.ts` makes the argument in full. */
-    this.format = (options.colorSpace ?? 'linear') === 'srgb' ? 'rgba8unorm-srgb' : 'rgba8unorm';
-    this.width = width;
-    this.height = height;
-    this.levels = this.mipmapped ? mipLevelCount(width, height) : 1;
-    this.texture = this.allocate();
+    this.format = srgb ? 'rgba8unorm-srgb' : 'rgba8unorm';
+    if (blocks !== null) {
+      /* Refused before anything is allocated; the stored chain, or level 0 alone where no chain
+         was asked for. See `compressedUpload.ts`. */
+      const plan = planBlocks(blocks, srgb, compressed);
+      const first = blocks[0] as CompressedTextureSource;
+      this.layers = blocks.length;
+      this.blockFormat = first.format;
+      this.mipmapped = (options.mipmap ?? true) && plan.levels > 1;
+      this.width = first.width;
+      this.height = first.height;
+      this.levels = this.mipmapped ? plan.levels : 1;
+      this.texture = createCompressedTexture(device, plan.name, blocks, this.levels);
+    } else {
+      const sources = listed as readonly TexImageSource[];
+      const { width, height } = layerSize(sources);
+      this.layers = sources.length;
+      this.blockFormat = null;
+      this.mipmapped = options.mipmap ?? true;
+      this.width = width;
+      this.height = height;
+      this.levels = this.mipmapped ? mipLevelCount(width, height) : 1;
+      this.texture = this.allocate();
+    }
     this.current = this.arrayView(this.texture);
 
     const wrap: GPUAddressMode =
@@ -232,7 +261,7 @@ export class GpuSurfaceTexture {
           : 1,
     });
 
-    this.upload(sources);
+    if (blocks === null) this.upload(listed as readonly TexImageSource[]);
 
     /* Half floats, as `renderer.ts` uploads it: filterable, so the ordinary float layout takes it,
        and read by `textureLoad` alone, so the filter never runs. */
@@ -283,6 +312,7 @@ export class GpuSurfaceTexture {
     const replaced = this.texture;
     if (replaced === null) return null;
     refuseArrayUpdate(this.layers);
+    refuseBlockUpdate(this.blockFormat);
     const { width, height } = sourceSize(source);
     if (width === this.width && height === this.height) {
       this.upload([source]);

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

@@ -9,6 +9,7 @@ import type { UniformFields } from './scatterPass.ts';
 import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The text pass: a string as instanced glyph cubes, drawn over the scene.
@@ -208,7 +209,7 @@ export function textPipeline(
           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' },
+            alpha: SCENE_ALPHA_COVERS,
           },
         },
       ],

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

@@ -9,6 +9,7 @@ import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import type { UniformFields } from './scatterPass.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The water pass: two sheets and a patch, displaced by a wave field in the vertex stage.
@@ -199,7 +200,7 @@ export function waterPipeline(
           format: cache.format,
           blend: {
             color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-            alpha: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: SCENE_ALPHA_COVERS,
           },
         },
       ],

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

@@ -9,6 +9,7 @@ import type { UniformFields } from './scatterPass.ts';
 import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The wind-streak pass: a lattice of debris that follows the camera and wraps.
@@ -184,7 +185,7 @@ export function windStreakPipeline(
               dstFactor: 'one-minus-src-alpha',
               operation: 'add',
             },
-            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: SCENE_ALPHA_COVERS,
           },
         },
       ],

package/src/render/boltBatch.ts

@@ -2,6 +2,7 @@ import { compileProgram, uniformLocations } from './shader.ts';
 import { BOLT_FRAG, BOLT_VERT } from './shaders/bolt.ts';
 import { buildSegmentQuads, expandBoltSegments } from './segmentQuads.ts';
 import type { BoltSegments } from './boltPool.ts';
+import { blendKeeping } from './sceneCoverage.ts';
 
 /**
  * One draw call for a pool of electrical arcs.
@@ -86,7 +87,7 @@ export class BoltBatch {
   drawTo(gl: WebGL2RenderingContext, segmentCount: number): void {
     if (segmentCount === 0) return;
     gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+    blendKeeping(gl, gl.SRC_ALPHA, gl.ONE);
     gl.depthMask(false);
     gl.disable(gl.CULL_FACE);
 

package/src/render/causticsRenderer.ts

@@ -7,6 +7,7 @@ import type { Atmosphere } from './atmosphere.ts';
 import { buildSheets } from './surfaceSheet.ts';
 import type { SheetSpan } from './surfaceSheet.ts';
 import { seaStateForWind } from './seaState.ts';
+import { blendKeeping } from './sceneCoverage.ts';
 
 /**
  * A surface lit by nearby water: the floor of a pool, the bottom of a flooded
@@ -149,7 +150,7 @@ export class CausticsRenderer {
     bindAtmosphere(gl, u, atmosphere, camera.position[1] ?? 0, underwaterEnabled);
 
     gl.enable(gl.BLEND);
-    gl.blendFunc(gl.ONE, gl.ONE);
+    blendKeeping(gl, gl.ONE, gl.ONE);
     /*
      * No depth write, but depth *testing* stays on: the sheet sits a couple of
      * centimetres under the surface it lights, so geometry in front of it — the

package/src/render/clothBindingData.ts

@@ -0,0 +1,89 @@
+/**
+ * A mesh's cloth binding as data, and the texel layouts both backends upload it in.
+ *
+ * **What a consumer hands over** is per render vertex: the simulation triangle it follows (three
+ * particle indices — the same index three times for a vertex that follows one particle), where on
+ * it (barycentric u and v for the second and third particle), how far along the triangle's normal,
+ * and how much it follows at all (0 skinned, 1 cloth — commonly painted into a vertex colour); and
+ * the particles' rest positions in the mesh's model space. A garment's port decodes all of this
+ * from the cooked data; the engine owns placing the vertices, in `shaders/clothBinding.ts`.
+ *
+ * **Textures wrap onto rows of at most 2048 texels**, the width WebGL2 guarantees, padded to whole
+ * rows: a garment of 40,000 vertices is 80,000 binding texels, 40 rows. Validated by name before a
+ * byte goes to a device, because an index past the particles reads the padding — a vertex pinned
+ * to the origin, which looks like a broken rig rather than a bad binding.
+ */
+
+/** A mesh's cloth binding, one entry a render vertex unless said otherwise. */
+export interface ClothBindingData {
+  /** Three particle indices a vertex. */
+  readonly triangles: Uint32Array;
+  /** Barycentric u and v a vertex, for the second and third particle; the first takes the rest. */
+  readonly coordinates: Float32Array;
+  /** Metres along the triangle's normal. */
+  readonly offsets: Float32Array;
+  /** How much of the cloth's place a vertex takes: 0 skinned, 1 cloth. */
+  readonly weights: Float32Array;
+  /** The particles at rest, three floats each, in the mesh's model space. */
+  readonly rest: Float32Array;
+}
+
+/** The widest row a texture is wrapped onto. */
+export const CLOTH_TEXTURE_WIDTH = 2048;
+
+/** A texture of `texels`, wrapped onto rows. */
+export function clothTextureSize(texels: number): { width: number; height: number } {
+  const width = Math.max(1, Math.min(CLOTH_TEXTURE_WIDTH, texels));
+  return { width, height: Math.max(1, Math.ceil(texels / width)) };
+}
+
+/** Refuse a binding whose arrays disagree with a mesh of `vertices`, or that names a missing particle. */
+export function validateClothBinding(data: ClothBindingData, vertices: number): void {
+  const count = data.weights.length;
+  const fail = (what: string): never => {
+    throw new Error(`cloth binding: ${what}`);
+  };
+  if (count !== vertices) fail(`binds ${count} vertices and the mesh has ${vertices}`);
+  if (data.triangles.length !== count * 3)
+    fail(`${data.triangles.length / 3} triangles for ${count} vertices`);
+  if (data.coordinates.length !== count * 2)
+    fail(`${data.coordinates.length / 2} coordinates for ${count} vertices`);
+  if (data.offsets.length !== count) fail(`${data.offsets.length} offsets for ${count} vertices`);
+  const particles = data.rest.length / 3;
+  if (!Number.isInteger(particles) || particles === 0)
+    fail(`rest holds ${data.rest.length} floats`);
+  for (let i = 0; i < data.triangles.length; i++) {
+    if ((data.triangles[i] as number) >= particles) {
+      fail(`vertex ${Math.floor(i / 3)} names particle ${data.triangles[i]} of ${particles}`);
+    }
+  }
+}
+
+/** The binding as RGBA float texels, two a vertex, padded to whole rows. */
+export function packClothBinding(data: ClothBindingData): Float32Array {
+  const vertices = data.weights.length;
+  const { width, height } = clothTextureSize(vertices * 2);
+  const out = new Float32Array(width * height * 4);
+  for (let v = 0; v < vertices; v++) {
+    const at = v * 8;
+    out[at] = data.triangles[v * 3] as number;
+    out[at + 1] = data.triangles[v * 3 + 1] as number;
+    out[at + 2] = data.triangles[v * 3 + 2] as number;
+    out[at + 3] = data.weights[v] as number;
+    out[at + 4] = data.coordinates[v * 2] as number;
+    out[at + 5] = data.coordinates[v * 2 + 1] as number;
+    out[at + 6] = data.offsets[v] as number;
+  }
+  return out;
+}
+
+/** Particles, three floats each, into RGBA texels in `out`. Allocation-free, for every frame. */
+export function packClothParticles(positions: Float32Array, out: Float32Array): void {
+  const count = positions.length / 3;
+  for (let i = 0; i < count; i++) {
+    out[i * 4] = positions[i * 3] as number;
+    out[i * 4 + 1] = positions[i * 3 + 1] as number;
+    out[i * 4 + 2] = positions[i * 3 + 2] as number;
+    out[i * 4 + 3] = 0;
+  }
+}