@driftengine/core 4.8.3 → 4.8.5

package/dist/render/surfaceTexture.js

@@ -1,14 +1,6 @@
-/**
- * A GPU image the caller supplies, sampled by the flat shader as surface colour — or several, as
- * the layers of one array.
- *
- * **Every surface texture is an array; a plain image is an array of one.** The lit pass has three of
- * WebGL2's guaranteed sixteen texture units free, so a second set of array samplers beside the 2D
- * ones was never affordable. Making the one set of samplers arrays costs no unit, and a one-layer
- * array samples exactly as a 2D texture does. A mesh names its layer per vertex (`MeshData.layers`),
- * so a merged block wearing forty facades is one draw.
- */
-import { isSourceList, layerSize, refuseArrayUpdate, sourceSize } from './textureSource.js';
+import { layerSize, refuseArrayUpdate, sourceSize } from './textureSource.js';
+import { compressedLayers, planBlocks, refuseBlockUpdate } from './compressedSource.js';
+import { uploadCompressedArray } from './glCompressed.js';
 import { SURFACE_EFFECT_TEXELS, packSurfaceEffects } from './surfaceEffects.js';
 const DEFAULT_ANISOTROPY = 4;
 /**
@@ -29,48 +21,39 @@ export class SurfaceTexture {
     layers;
     /** The per-layer effects table, or null for a texture given none. See `surfaceEffects.ts`. */
     effectsTable = null;
+    /** The block format a compressed texture holds, or null for one uploaded from images. */
+    blockFormat;
     /**
      * One image, or an array of images that must share one size (`layerSize` refuses otherwise).
-     * Uploaded unflipped either way; see the constructor body for why.
+     * Uploaded unflipped either way; see the constructor body for why. Or blocks, uploaded as they are
+     * where `compressed` — the formats this context samples — has theirs; see `compressedSource.ts`.
      */
-    constructor(gl, source, options = {}) {
-        const sources = isSourceList(source) ? source : [source];
-        const { width, height } = layerSize(sources);
-        this.layers = sources.length;
+    constructor(gl, source, options = {}, compressed = []) {
+        const listed = (Array.isArray(source) ? source : [source]);
+        const blocks = compressedLayers(listed);
+        this.srgb = (options.colorSpace ?? 'linear') === 'srgb';
+        /* Refused before anything is allocated, so a refusal leaves no texture behind. */
+        const plan = blocks === null ? null : planBlocks(blocks, this.srgb, compressed);
         const texture = gl.createTexture();
         if (texture === null)
             throw new Error('SurfaceTexture: createTexture failed');
         this.texture = texture;
-        this.mipmapped = options.mipmap ?? true;
-        this.srgb = (options.colorSpace ?? 'linear') === 'srgb';
         const wrap = (options.wrap ?? 'repeat') === 'repeat' ? gl.REPEAT : gl.CLAMP_TO_EDGE;
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, texture);
-        /*
-         * **Not flipped, and this used to be, which is the bug it is written down for.**
-         *
-         * The flip was here with a comment saying every source is a 2D drawing surface whose Y
-         * runs down from the top-left, so without it "every texture arrives mirrored". That is
-         * true of a canvas and **WebGL ignores `UNPACK_FLIP_Y_WEBGL` entirely for an
-         * `ImageBitmap`**, which carries its own orientation. So the two source types the same
-         * method accepts arrived the opposite way up from each other, and nothing caught it
-         * because every canvas-sourced texture in this repository was symmetric under a vertical
-         * flip: eroded noise, a radial halo, a sleeve blurred to 24 pixels and back. One consumer
-         * painted lettering to a canvas beside a sleeve decoded as a bitmap and the text was
-         * upside down.
-         *
-         * **Made to agree by dropping the flip rather than by extending it**, and the direction
-         * is a deliberate choice about blast radius rather than a coin toss: `drftLoader` builds
-         * every model texture from an `ImageBitmap`, so flipping bitmaps to match canvases would
-         * turn over every painted surface on every loaded model. Dropping it changes only
-         * canvas-sourced textures, and every one of those that exists today is symmetric.
-         *
-         * A caller that was mirroring its own canvas to cancel this must stop.
-         */
-        /* Allocated mutable rather than with texStorage3D, so `update` can hand a one-layer texture a
-           new size, as texImage2D always could. Each layer is then written in place. */
-        gl.texImage3D(gl.TEXTURE_2D_ARRAY, 0, this.srgb ? gl.SRGB8_ALPHA8 : gl.RGBA, width, height, sources.length, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        for (let layer = 0; layer < sources.length; layer++) {
-            gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, layer, width, height, 1, gl.RGBA, gl.UNSIGNED_BYTE, sources[layer]);
+        if (blocks !== null && plan !== null) {
+            /* The stored chain, or level 0 alone where no chain was asked for. Nothing is generated:
+               `generateMipmap` cannot write a compressed format. */
+            this.layers = blocks.length;
+            this.blockFormat = blocks[0].format;
+            this.mipmapped = (options.mipmap ?? true) && plan.levels > 1;
+            uploadCompressedArray(gl, plan.name, blocks, this.mipmapped ? plan.levels : 1);
+        }
+        else {
+            const sources = listed;
+            this.layers = sources.length;
+            this.blockFormat = null;
+            this.mipmapped = options.mipmap ?? true;
+            uploadImages(gl, sources, this.srgb);
         }
         gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, wrap);
         gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, wrap);
@@ -86,7 +69,7 @@ export class SurfaceTexture {
             : nearest
                 ? gl.NEAREST
                 : gl.LINEAR);
-        if (this.mipmapped)
+        if (this.mipmapped && this.blockFormat === null)
             gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
         applyAnisotropy(gl, options.anisotropy ?? DEFAULT_ANISOTROPY);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
@@ -107,7 +90,6 @@ export class SurfaceTexture {
             this.effectsTable = table;
         }
     }
-    /** Bind the effects table to `unit`, or `fallback` for a texture given none. */
     /** Whether this texture carries an effects table, which the lit program reads only once one exists. */
     get hasEffects() {
         return this.effectsTable !== null;
@@ -131,6 +113,7 @@ export class SurfaceTexture {
         if (this.texture === null)
             return;
         refuseArrayUpdate(this.layers);
+        refuseBlockUpdate(this.blockFormat);
         const { width, height } = sourceSize(source);
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
         /* Unflipped, matching the constructor. See it for why, and for what it cost. */
@@ -154,6 +137,37 @@ export class SurfaceTexture {
         this.effectsTable = null;
     }
 }
+/** Images into the bound array, level 0 of each layer; the chain, if any, is generated after. */
+function uploadImages(gl, sources, srgb) {
+    const { width, height } = layerSize(sources);
+    /*
+     * **Not flipped, and this used to be, which is the bug it is written down for.**
+     *
+     * The flip was here with a comment saying every source is a 2D drawing surface whose Y
+     * runs down from the top-left, so without it "every texture arrives mirrored". That is
+     * true of a canvas and **WebGL ignores `UNPACK_FLIP_Y_WEBGL` entirely for an
+     * `ImageBitmap`**, which carries its own orientation. So the two source types the same
+     * method accepts arrived the opposite way up from each other, and nothing caught it
+     * because every canvas-sourced texture in this repository was symmetric under a vertical
+     * flip: eroded noise, a radial halo, a sleeve blurred to 24 pixels and back. One consumer
+     * painted lettering to a canvas beside a sleeve decoded as a bitmap and the text was
+     * upside down.
+     *
+     * **Made to agree by dropping the flip rather than by extending it**, and the direction
+     * is a deliberate choice about blast radius rather than a coin toss: `drftLoader` builds
+     * every model texture from an `ImageBitmap`, so flipping bitmaps to match canvases would
+     * turn over every painted surface on every loaded model. Dropping it changes only
+     * canvas-sourced textures, and every one of those that exists today is symmetric.
+     *
+     * A caller that was mirroring its own canvas to cancel this must stop.
+     */
+    /* Allocated mutable rather than with texStorage3D, so `update` can hand a one-layer texture a
+         new size, as texImage2D always could. Each layer is then written in place. */
+    gl.texImage3D(gl.TEXTURE_2D_ARRAY, 0, srgb ? gl.SRGB8_ALPHA8 : gl.RGBA, width, height, sources.length, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    for (let layer = 0; layer < sources.length; layer++) {
+        gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, layer, width, height, 1, gl.RGBA, gl.UNSIGNED_BYTE, sources[layer]);
+    }
+}
 /**
  * Set anisotropic filtering when the driver offers it, and stay silent when it does not.
  *

package/dist/render/vertexDefaults.js

@@ -65,6 +65,13 @@ export const ABSENT_ATTRIBUTE = {
      */
     joints: [0, 0, 0, 0],
     weights: [1, 0, 0, 0],
+    /**
+     * The second four influences, absent: all zero, so a four-influence mesh drawn through a pipeline
+     * built for eight adds nothing. **Not the first set's trap**: there a zero sum collapses the
+     * vertex, here the first set already sums to one and zero is exactly "no more influences".
+     */
+    joints2: [0, 0, 0, 0],
+    weights2: [0, 0, 0, 0],
     /**
      * The four-lane channel: planted, fully sunlit, opaque, and a reserved lane.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@driftengine/core",
-  "version": "4.8.3",
+  "version": "4.8.5",
   "description": "The runtime of DriftEngine, a WebGPU game engine with a WebGL2 fallback: renderer, loop, input, cameras, scene graph and physics",
   "license": "Apache-2.0",
   "type": "module",
@@ -29,8 +29,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@driftengine/drft": "4.8.3",
-    "@driftengine/physics": "4.8.3",
+    "@driftengine/drft": "4.8.5",
+    "@driftengine/physics": "4.8.5",
     "gl-matrix": "^3.4.3"
   },
   "author": "Drift Technologies",
@@ -67,8 +67,8 @@
     "prepack": "node ../../scripts/build.mjs @driftengine/core"
   },
   "devDependencies": {
-    "@driftengine/nav": "4.8.3",
-    "@driftengine/network": "4.8.3",
-    "@driftengine/texture": "4.8.3"
+    "@driftengine/nav": "4.8.5",
+    "@driftengine/network": "4.8.5",
+    "@driftengine/texture": "4.8.5"
   }
 }

package/src/geometry/meshConcat.ts

@@ -28,6 +28,8 @@ const OPTIONAL = [
   ['channel', 4],
   ['joints', 4],
   ['weights', 4],
+  ['joints2', 4],
+  ['weights2', 4],
   ['layers', 1],
 ] as const;
 

package/src/index.ts

@@ -6,7 +6,6 @@ export type { LoopHooks, FrameSource, LoopOptions } from './core/loop.ts';
 export { StepBudget } from './core/stepBudget.ts';
 export type { StepBudgetOptions } from './core/stepBudget.ts';
 export { hashToUnit, mulberry32, pickBySeed, savableMulberry32 } from './core/rng.ts';
-export { exactAcos, exactCos, exactExp, exactLog, exactSin } from './math/exact.ts';
 export type { SavableRandom } from './core/rng.ts';
 export { TickTrace } from './core/tickTrace.ts';
 export type { TickTraceLike } from './core/tickTrace.ts';
@@ -467,6 +466,8 @@ export type { ProbeVerdict } from './render/backend/probe.ts';
 export type {
   BoltHandle,
   CausticsHandle,
+  ClothBindingHandle,
+  ClothParticlesHandle,
   FlockHandle,
   IncrementalMeshHandle,
   LineHandle,
@@ -484,6 +485,27 @@ export type {
   WaterHandle,
   WindStreakHandle,
 } from './render/backend/api.ts';
+export type { ClothBindingData } from './render/clothBindingData.ts';
+/*
+ * A material's shading model, for what the standard one is not: brushed metal, hair, skin, an eye.
+ * A frozen descriptor made by a factory and set as `SurfaceMaterial.model`; each is a pipeline of
+ * its own, compiled the first time a draw asks.
+ */
+export { anisotropicModel, eyeModel, hairModel, skinModel } from './render/surfaceModel.ts';
+export type {
+  AnisotropicModel,
+  EyeModel,
+  HairModel,
+  SkinModel,
+  SurfaceModel,
+  SurfaceModelKind,
+} from './render/surfaceModel.ts';
+/*
+ * A skinned cloth solved where the renderer can: compute on WebGPU, the CPU under WebGL2. A function
+ * rather than a renderer method so only a game that imports it carries the solver.
+ */
+export { createSkinnedCloth } from './render/skinnedClothRun.ts';
+export type { SkinnedClothSolver } from './render/skinnedClothRun.ts';
 
 /**
  * What a frame asked of a backend, against the ceilings that backend imposes.
@@ -507,6 +529,7 @@ export type { FrameTimer } from './render/backend/timer.ts';
 export type {
   SceneCasterMaterial,
   SceneCasters,
+  ShadowCasterCloth,
   ShadowCasterSink,
   ShadowCasters,
 } from './render/shadowCasters.ts';
@@ -593,6 +616,7 @@ export type {
   RenderQuality,
   RenderQualityOptions,
   ShadowFilterTaps,
+  SkinScattering,
   WaterReflectionFilterTaps,
 } from './render/renderQuality.ts';
 export { MAX_POINT_LIGHTS, SURFACE_TEXTURE_UNIT } from './render/lightBudget.ts';
@@ -600,6 +624,21 @@ export { MAX_POINT_LIGHTS, SURFACE_TEXTURE_UNIT } from './render/lightBudget.ts'
 export { MAX_CLUSTERED_LIGHTS } from './render/clusteredLights.ts';
 export { SurfaceTexture } from './render/surfaceTexture.ts';
 export type { SurfaceMaterial, SurfaceTextureOptions } from './render/surfaceTexture.ts';
+/*
+ * BC compressed textures: the source `createSurfaceTexture` takes as blocks, and the one question to
+ * ask before handing one over — whether this device takes its format (`renderer.compressedFormats`).
+ */
+export {
+  compressedFormatName,
+  isCompressedSource,
+  uploadsCompressed,
+} from './render/compressedSource.ts';
+export type {
+  BlockFormat,
+  CompressedTextureFormat,
+  CompressedTextureSource,
+  SurfaceSource,
+} from './render/compressedSource.ts';
 export { DEFAULT_GOVERNOR_LIMITS, ResolutionGovernor } from './render/resolutionGovernor.ts';
 export type { GovernorLimits } from './render/resolutionGovernor.ts';
 export { isWeakGpuFamily } from './render/gpuCapability.ts';

package/src/math/scalar.ts

@@ -30,7 +30,7 @@ export function damp(a: number, b: number, lambda: number, dt: number): number {
    * **What a simulation wants instead**, if it ever wants exponential approach inside the fixed
    * step, is a per-tick factor computed once from `lambda` and the fixed `dt` and passed in as a
    * number: at a constant step the factor is a constant, so nothing has to call `exp` on a tick at
-   * all. `exactExp` in `math/exact.ts` is the other answer, and is the one to reach for when the
+   * all. `exactExp` in `@driftengine/physics`' `exact.ts` is the other answer, and is the one to reach for when the
    * rate itself varies.
    */
   // determinism: build-time — presentation smoothing; see the note above for a simulation

package/src/render/anisotropicLobe.ts

@@ -0,0 +1,41 @@
+/**
+ * The anisotropic model's lobe, as `shaders/flat/anisotropic.ts` computes it: the reference its
+ * tests hold the arithmetic to, and nothing at run time calls it.
+ *
+ * **GGX stretched along a direction in the surface**, after glTF's `KHR_materials_anisotropy`: the
+ * roughness across the direction is the material's, and along it is raised toward 1 by the
+ * strength squared — `alphaT = mix(alpha, 1, strength²)`, `alphaB = alpha` — so a brushed disc's
+ * highlight is a streak across its grooves.
+ *
+ * **Divided by its own peak, as `specularLobe` is**, because this engine's highlights are in those
+ * units: a look control that peaks at 1 whatever its width, rather than an energy-conserving BRDF
+ * (`lobes.ts` says why). So at strength 0 this *is* `specularLobe`, which is the property a material
+ * that turns anisotropy down to nothing must have, and which the tests hold. **What it gives up** is
+ * the Smith masking a physically based anisotropic lobe carries at grazing angles; the standard lobe
+ * carries none either, and the two must agree at strength 0.
+ */
+import { MIN_LOBE_ALPHA } from './shaders/flat/lobes.ts';
+
+/** The two widths, along the direction and across it, into `out` as [alongT, acrossB]. */
+export function anisotropicAlphas(roughness: number, strength: number, out: Float64Array): void {
+  const alpha = Math.max(roughness * roughness, MIN_LOBE_ALPHA);
+  out[0] = alpha + (1 - alpha) * strength * strength;
+  out[1] = alpha;
+}
+
+/**
+ * The lobe at a half vector whose components along the direction, across it and along the normal
+ * are `th`, `bh` and `nh`. 1 at the mirror direction.
+ */
+export function anisotropicLobe(
+  th: number,
+  bh: number,
+  nh: number,
+  alphaT: number,
+  alphaB: number,
+): number {
+  const x = th / alphaT;
+  const y = bh / alphaB;
+  const d = x * x + y * y + nh * nh;
+  return 1 / Math.max(d * d, 1e-8);
+}

package/src/render/backend/api.ts

@@ -6,6 +6,8 @@ import type { ProbeBakeOptions } from '../reflectionProbe.ts';
 import type { Renderer, TranslucentMeshOptions } from './webgl2/renderer.ts';
 import type { InstancedOptions, MeshInstances } from '../instances.ts';
 import type { SurfaceMaterial } from '../surfaceTexture.ts';
+import type { SurfaceSource } from '../compressedSource.ts';
+import type { ClothBindingData } from '../clothBindingData.ts';
 import type { TextStyle } from '../textLayout.ts';
 import type { SdfFont } from '../sdfFont.ts';
 import type { SdfTextStyle } from '../sdfTextLayout.ts';
@@ -49,6 +51,21 @@ export interface MeshHandle {
   readonly complete: boolean;
 }
 
+/**
+ * A mesh's cloth binding on the device, from `createClothBinding`: which simulation triangle each
+ * vertex follows. Opaque, for the reason `MeshHandle` gives.
+ */
+/* eslint-disable-next-line @typescript-eslint/no-empty-object-type -- opaque by design */
+export interface ClothBindingHandle {
+  /* Deliberately empty, for the weak-type reason `MeshHandle` explains. */
+}
+
+/** One character's cloth particles on the device, from `createClothParticles`. Opaque likewise. */
+/* eslint-disable-next-line @typescript-eslint/no-empty-object-type -- opaque by design */
+export interface ClothParticlesHandle {
+  /* Deliberately empty, for the weak-type reason `MeshHandle` explains. */
+}
+
 /** A mesh on its way to the device, and the iterator that gets it there. */
 export interface IncrementalMeshHandle {
   /**
@@ -287,10 +304,42 @@ export type RendererApi = Omit<
   | 'disposeSurfaceTexture'
   | 'setSurfaceTexture'
   | 'setMaterial'
+  | 'createClothBinding'
+  | 'createClothParticles'
+  | 'updateClothParticles'
+  | 'setCloth'
+  | 'disposeClothBinding'
+  | 'disposeClothParticles'
 > & {
-  /** Upload a caller's image. See `SurfaceTextureHandle` for the boundary this guards. */
+  /**
+   * A mesh's cloth binding: which simulation triangle each of its vertices follows, where on it and
+   * by how much (`ClothBindingData`). The mesh must be skinned — a binding blends each vertex
+   * between its skinning and the cloth — and is checked against the binding by name.
+   */
+  createClothBinding(mesh: MeshHandle, data: ClothBindingData): ClothBindingHandle;
+  /** One character's particles, `count` of them, updated every frame with `updateClothParticles`. */
+  createClothParticles(count: number): ClothParticlesHandle;
+  /**
+   * This frame's particles, three floats each, world space — a simulation's output as it is.
+   * **Once a frame, before the character's draws**: a second update in one frame reaches every
+   * draw of it on WebGPU, whose texture writes land ahead of the frame's commands. Last frame's
+   * are kept for the motion a temporal resolve needs, and a frame with no update did not move.
+   */
+  updateClothParticles(particles: ClothParticlesHandle, positions: Float32Array): void;
+  /**
+   * Place the skinned draws that follow — lit and cast — by a cloth: the mesh's binding and the
+   * character's particles. Null for none, which every draw is until this is called; per-draw state,
+   * as `setSkinPalette` is.
+   */
+  setCloth(binding: ClothBindingHandle | null, particles?: ClothParticlesHandle | null): void;
+  disposeClothBinding(binding: ClothBindingHandle): void;
+  disposeClothParticles(particles: ClothParticlesHandle): void;
+  /**
+   * Upload a caller's image, or a BC image's blocks with their stored chain where
+   * `compressedFormats` has the format. See `SurfaceTextureHandle` for the boundary this guards.
+   */
   createSurfaceTexture(
-    source: TexImageSource,
+    source: SurfaceSource,
     options?: Parameters<Renderer['createSurfaceTexture']>[1],
   ): SurfaceTextureHandle;
 
@@ -308,7 +357,7 @@ export type RendererApi = Omit<
    * `updateSurfaceTexture` refuses an array.
    */
   createSurfaceTextureArray(
-    sources: readonly TexImageSource[],
+    sources: readonly SurfaceSource[],
     options?: Parameters<Renderer['createSurfaceTexture']>[1],
   ): SurfaceTextureHandle;
 

package/src/render/backend/select.ts

@@ -247,6 +247,14 @@ async function acquireWebGpu(
     if (wantsGpuTiming && adapter.features?.has('timestamp-query') === true) {
       features.push('timestamp-query');
     }
+    /*
+     * BC compressed textures, on the same terms: asked for wherever the adapter offers it, because
+     * a device without it still draws — the loader decodes for it — and one with it samples a BC7
+     * texture at a byte a texel instead of four. See `compressedUpload.ts`.
+     */
+    if (adapter.features?.has('texture-compression-bc') === true) {
+      features.push('texture-compression-bc');
+    }
     const descriptor: GPUDeviceDescriptor = {};
     if (Object.keys(required).length > 0) descriptor.requiredLimits = required;
     if (features.length > 0) descriptor.requiredFeatures = features;

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

@@ -0,0 +1,120 @@
+/**
+ * A cloth binding's textures on WebGL2: the binding and the rest particles once, a mesh's; the
+ * particles every frame, a character's.
+ *
+ * `RGBA32F`, one storage level and `NEAREST` both ways, as the joint palette is: the vertex stage
+ * reads them with `texelFetch`, so nothing filters and nothing selects a mip. Rows of at most 2048
+ * texels; see `clothBindingData.ts`.
+ *
+ * **Two particle textures that swap on each update**, so last frame's positions are still there for
+ * a motion vector without a copy: an update writes the older of the two and makes it current.
+ */
+import { clothTextureSize, packClothBinding, packClothParticles } from '../../clothBindingData.ts';
+import type { ClothBindingData } from '../../clothBindingData.ts';
+
+function floatTexture(
+  gl: WebGL2RenderingContext,
+  width: number,
+  height: number,
+  texels: Float32Array | null,
+): WebGLTexture {
+  const texture = gl.createTexture();
+  if (texture === null) throw new Error('cloth: createTexture failed');
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA32F, width, height);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  if (texels !== null) {
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, gl.RGBA, gl.FLOAT, texels);
+  }
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return texture;
+}
+
+/** A mesh's binding and its particles at rest. Validated by the renderer against the mesh. */
+export class GlClothBinding {
+  readonly binding: WebGLTexture;
+  readonly rest: WebGLTexture;
+  /** How many particles the binding names. */
+  readonly particles: number;
+
+  constructor(gl: WebGL2RenderingContext, data: ClothBindingData) {
+    const vertices = data.weights.length;
+    const size = clothTextureSize(vertices * 2);
+    this.binding = floatTexture(gl, size.width, size.height, packClothBinding(data));
+    this.particles = data.rest.length / 3;
+    const rest = clothTextureSize(this.particles);
+    const texels = new Float32Array(rest.width * rest.height * 4);
+    packClothParticles(data.rest, texels);
+    this.rest = floatTexture(gl, rest.width, rest.height, texels);
+  }
+
+  dispose(gl: WebGL2RenderingContext): void {
+    gl.deleteTexture(this.binding);
+    gl.deleteTexture(this.rest);
+  }
+}
+
+/** One character's particles: this frame's and the last, in two textures that swap. */
+export class GlClothParticles {
+  readonly count: number;
+  private readonly width: number;
+  private readonly height: number;
+  private readonly staging: Float32Array;
+  private readonly textures: [WebGLTexture, WebGLTexture];
+  private latest = 0;
+
+  constructor(gl: WebGL2RenderingContext, count: number) {
+    this.count = count;
+    const size = clothTextureSize(count);
+    this.width = size.width;
+    this.height = size.height;
+    this.staging = new Float32Array(size.width * size.height * 4);
+    this.textures = [
+      floatTexture(gl, size.width, size.height, this.staging),
+      floatTexture(gl, size.width, size.height, this.staging),
+    ];
+  }
+
+  /** This frame's particles. */
+  get current(): WebGLTexture {
+    return this.textures[this.latest] as WebGLTexture;
+  }
+
+  /** Last frame's. */
+  get previous(): WebGLTexture {
+    return this.textures[1 - this.latest] as WebGLTexture;
+  }
+
+  /** Write `positions` (three floats a particle, world space) as this frame's; last frame's stays. */
+  update(gl: WebGL2RenderingContext, positions: Float32Array): void {
+    if (positions.length !== this.count * 3) {
+      throw new Error(
+        `cloth: ${this.count} particles and an update of ${positions.length / 3}; a cloth's ` +
+          'particle count is fixed when its particles are created',
+      );
+    }
+    packClothParticles(positions, this.staging);
+    this.latest = 1 - this.latest;
+    gl.bindTexture(gl.TEXTURE_2D, this.current);
+    gl.texSubImage2D(
+      gl.TEXTURE_2D,
+      0,
+      0,
+      0,
+      this.width,
+      this.height,
+      gl.RGBA,
+      gl.FLOAT,
+      this.staging,
+    );
+    gl.bindTexture(gl.TEXTURE_2D, null);
+  }
+
+  dispose(gl: WebGL2RenderingContext): void {
+    gl.deleteTexture(this.textures[0]);
+    gl.deleteTexture(this.textures[1]);
+  }
+}