@driftengine/core 4.8.2 → 4.8.4

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

@@ -0,0 +1,50 @@
+import type { SceneTarget } from '../../sceneTarget.ts';
+export declare class GlSkinScatter {
+    private readonly gl;
+    private readonly program;
+    private readonly uniforms;
+    private readonly vao;
+    /** Each profile's scatter distance per channel, in metres: four floats a profile. */
+    private readonly profiles;
+    private readonly step;
+    private readonly depthToViewZ;
+    private diffuse;
+    private across;
+    private multisampled;
+    private drawFramebuffer;
+    private resolveFramebuffer;
+    private acrossFramebuffer;
+    private width;
+    private height;
+    private samples;
+    private sharedDepth;
+    /** Refused once and for good: a driver that will not render to half floats. */
+    private unavailable;
+    private cleared;
+    private drawn;
+    constructor(gl: WebGL2RenderingContext);
+    /** Whether any skin's diffuse was drawn this frame. */
+    get pending(): boolean;
+    /** 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;
+    /**
+     * Whether a skin can be drawn in two halves now: the target fits the frame and shares its depth.
+     * False where this driver will not render to half floats, and then skin is drawn whole.
+     */
+    ready(scene: SceneTarget): boolean;
+    /** Bind the target for one skin's diffuse half, cleared the first time a frame does. */
+    begin(): void;
+    /**
+     * Across into the second target, then down and added into the frame, which `scene` binds. `depth`
+     * is the frame's depth as a single-sampled texture, or null where none could be had — and then
+     * the diffuse goes back unspread rather than not at all, so the skin keeps its light.
+     */
+    spread(scene: SceneTarget, depth: WebGLTexture | null, empty: WebGLTexture, projection: ArrayLike<number>, inverse: ArrayLike<number>): void;
+    /** Spent at the frame's start: what was drawn into the target was last frame's. */
+    reset(): void;
+    dispose(): void;
+    private allocate;
+    private refuse;
+    private halfFloatTexture;
+    private release;
+}

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

@@ -0,0 +1,256 @@
+/**
+ * Skin's screen-space scattering on WebGL2: the target skin's diffuse half is drawn into, and the
+ * two passes that spread it. `skinBlur.ts` is what the blur computes and why; the WebGPU backend's
+ * `skinScatterPass.ts` is the same thing in that backend's terms.
+ *
+ * **Drawn as it goes, not kept**: this backend issues a draw when it is asked for, and the state a
+ * skin draw reads — its joint palette, its uniforms — is rewritten by the draw after it. So the
+ * renderer draws each skin twice in place, the frame's half and then at once its diffuse half into
+ * this target, which shares the frame's depth and tests for equality against it.
+ *
+ * **The units it reads are its own** — `SKIN_BLUR_TEXTURE_UNIT` and the one after — past every
+ * unit a lit program binds, because it runs in the middle of a frame and the draws after it must
+ * find their textures where they left them.
+ */
+import { SKIN_BLUR_DEPTH_UNIT, SKIN_BLUR_TEXTURE_UNIT } from '../../lightBudget.js';
+import { blendKeeping } from '../../sceneCoverage.js';
+import { compileProgram, uniformLocations } from '../../shader.js';
+import { FULLSCREEN_VERT } from '../../shaders/fullscreen.js';
+import { SKIN_BLUR_FRAG } from '../../shaders/skinBlur.js';
+import { SKIN_PROFILES } from '../../skinBlur.js';
+const CLEAR = new Float32Array(4);
+export class GlSkinScatter {
+    gl;
+    program;
+    uniforms;
+    vao;
+    /** Each profile's scatter distance per channel, in metres: four floats a profile. */
+    profiles = new Float32Array(SKIN_PROFILES * 4);
+    step = new Float32Array(2);
+    depthToViewZ = new Float32Array(4);
+    diffuse = null;
+    across = null;
+    multisampled = null;
+    drawFramebuffer = null;
+    resolveFramebuffer = null;
+    acrossFramebuffer = null;
+    width = 0;
+    height = 0;
+    samples = 1;
+    sharedDepth = null;
+    /** Refused once and for good: a driver that will not render to half floats. */
+    unavailable = false;
+    cleared = false;
+    drawn = false;
+    constructor(gl) {
+        this.gl = gl;
+        this.program = compileProgram(gl, FULLSCREEN_VERT, SKIN_BLUR_FRAG, 'skinBlur');
+        this.uniforms = uniformLocations(gl, this.program, 'skinBlur');
+        const vao = gl.createVertexArray();
+        if (vao === null)
+            throw new Error('GlSkinScatter: createVertexArray failed');
+        this.vao = vao;
+        /*
+         * Rendering to half floats is the extension's, not WebGL2's — the scene target asks for it
+         * only when it keeps range, so this asks for itself. Without it, skin is drawn whole.
+         */
+        if (gl.getExtension('EXT_color_buffer_float') === null)
+            this.refuse();
+    }
+    /** Whether any skin's diffuse was drawn this frame. */
+    get pending() {
+        return this.drawn;
+    }
+    /** What one profile scatters, per channel, in metres: the last material to name it says. */
+    setProfile(index, r, g, b) {
+        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;
+    }
+    /**
+     * Whether a skin can be drawn in two halves now: the target fits the frame and shares its depth.
+     * False where this driver will not render to half floats, and then skin is drawn whole.
+     */
+    ready(scene) {
+        if (this.unavailable)
+            return false;
+        const depth = scene.sharedDepth();
+        const attached = depth.renderbuffer ?? depth.texture;
+        if (attached === null)
+            return false;
+        if (this.drawFramebuffer !== null &&
+            this.width === depth.width &&
+            this.height === depth.height &&
+            this.samples === depth.samples &&
+            this.sharedDepth === attached) {
+            return true;
+        }
+        const made = this.allocate(depth.width, depth.height, depth.samples, depth.texture, depth.renderbuffer);
+        /* Asked in the middle of a frame: the frame's own framebuffer goes back as it was. */
+        scene.bind();
+        return made;
+    }
+    /** Bind the target for one skin's diffuse half, cleared the first time a frame does. */
+    begin() {
+        const { gl } = this;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.drawFramebuffer);
+        gl.viewport(0, 0, this.width, this.height);
+        if (!this.cleared) {
+            gl.clearBufferfv(gl.COLOR, 0, CLEAR);
+            this.cleared = true;
+        }
+        this.drawn = true;
+    }
+    /**
+     * Across into the second target, then down and added into the frame, which `scene` binds. `depth`
+     * is the frame's depth as a single-sampled texture, or null where none could be had — and then
+     * the diffuse goes back unspread rather than not at all, so the skin keeps its light.
+     */
+    spread(scene, depth, empty, projection, inverse) {
+        const { gl } = this;
+        if (this.multisampled !== null) {
+            gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.drawFramebuffer);
+            gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.resolveFramebuffer);
+            gl.blitFramebuffer(0, 0, this.width, this.height, 0, 0, this.width, this.height, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        }
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.CULL_FACE);
+        gl.disable(gl.BLEND);
+        gl.depthMask(false);
+        gl.bindVertexArray(this.vao);
+        gl.useProgram(this.program);
+        const u = this.uniforms;
+        gl.uniform1i(u['uSkin'] ?? null, SKIN_BLUR_TEXTURE_UNIT);
+        gl.uniform1i(u['uDepth'] ?? null, SKIN_BLUR_DEPTH_UNIT);
+        /* The four terms that carry a depth back to view-space metres: the occlusion blur's own. */
+        this.depthToViewZ[0] = inverse[10] ?? 0;
+        this.depthToViewZ[1] = inverse[14] ?? 0;
+        this.depthToViewZ[2] = inverse[11] ?? 0;
+        this.depthToViewZ[3] = inverse[15] ?? 1;
+        gl.uniform4fv(u['uDepthToViewZ'] ?? null, this.depthToViewZ);
+        /* Pixels a metre spans at a metre; nothing to measure against without a depth, so nothing spreads. */
+        gl.uniform1f(u['uFocal'] ?? null, depth === null ? 0 : (projection[5] * this.height) / 2);
+        gl.uniform4fv(u['uProfiles'] ?? null, this.profiles);
+        gl.activeTexture(gl.TEXTURE0 + SKIN_BLUR_DEPTH_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, depth ?? empty);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.acrossFramebuffer);
+        gl.viewport(0, 0, this.width, this.height);
+        gl.activeTexture(gl.TEXTURE0 + SKIN_BLUR_TEXTURE_UNIT);
+        gl.bindTexture(gl.TEXTURE_2D, this.diffuse);
+        this.step[0] = 1 / this.width;
+        this.step[1] = 0;
+        gl.uniform2fv(u['uStep'] ?? null, this.step);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        scene.bind();
+        gl.bindTexture(gl.TEXTURE_2D, this.across);
+        this.step[0] = 0;
+        this.step[1] = 1 / this.height;
+        gl.uniform2fv(u['uStep'] ?? null, this.step);
+        /* Added: its colour onto the frame's, the frame's alpha kept. */
+        gl.enable(gl.BLEND);
+        gl.blendEquation(gl.FUNC_ADD);
+        blendKeeping(gl, gl.ONE, gl.ONE);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        /* The world pass's own state, as the next draw expects to find it. */
+        gl.disable(gl.BLEND);
+        gl.enable(gl.DEPTH_TEST);
+        gl.enable(gl.CULL_FACE);
+        gl.depthMask(true);
+        gl.bindVertexArray(null);
+    }
+    /** Spent at the frame's start: what was drawn into the target was last frame's. */
+    reset() {
+        this.cleared = false;
+        this.drawn = false;
+    }
+    dispose() {
+        const { gl } = this;
+        this.release();
+        gl.deleteProgram(this.program);
+        gl.deleteVertexArray(this.vao);
+    }
+    allocate(width, height, samples, depthTexture, depthRenderbuffer) {
+        const { gl } = this;
+        this.release();
+        this.width = width;
+        this.height = height;
+        this.samples = samples;
+        /* Its own unit, so making its textures unbinds nothing a lit program reads. */
+        gl.activeTexture(gl.TEXTURE0 + SKIN_BLUR_TEXTURE_UNIT);
+        this.sharedDepth = depthRenderbuffer ?? depthTexture;
+        this.diffuse = this.halfFloatTexture(width, height);
+        this.across = this.halfFloatTexture(width, height);
+        this.drawFramebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.drawFramebuffer);
+        if (samples > 1 && depthRenderbuffer !== null) {
+            this.multisampled = gl.createRenderbuffer();
+            gl.bindRenderbuffer(gl.RENDERBUFFER, this.multisampled);
+            gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.RGBA16F, width, height);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, this.multisampled);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRenderbuffer);
+        }
+        else {
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.diffuse, 0);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
+        }
+        const drawReady = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+        if (this.multisampled !== null) {
+            this.resolveFramebuffer = gl.createFramebuffer();
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this.resolveFramebuffer);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.diffuse, 0);
+        }
+        this.acrossFramebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.acrossFramebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.across, 0);
+        const acrossReady = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        if (drawReady && acrossReady)
+            return true;
+        this.release();
+        this.refuse();
+        return false;
+    }
+    refuse() {
+        if (this.unavailable)
+            return;
+        this.unavailable = true;
+        console.warn("WebGL2: this driver will not render skin's diffuse to half floats, so skinScattering " +
+            "'screen-space' draws skin pre-integrated. The frame is otherwise unaffected.");
+    }
+    halfFloatTexture(width, height) {
+        const { gl } = this;
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, width, height, 0, gl.RGBA, gl.HALF_FLOAT, null);
+        /* Linear: the blur takes taps between texels, and reads a part-covered one for the part it is. */
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        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);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
+    release() {
+        const { gl } = this;
+        if (this.drawFramebuffer !== null)
+            gl.deleteFramebuffer(this.drawFramebuffer);
+        if (this.resolveFramebuffer !== null)
+            gl.deleteFramebuffer(this.resolveFramebuffer);
+        if (this.acrossFramebuffer !== null)
+            gl.deleteFramebuffer(this.acrossFramebuffer);
+        if (this.multisampled !== null)
+            gl.deleteRenderbuffer(this.multisampled);
+        if (this.diffuse !== null)
+            gl.deleteTexture(this.diffuse);
+        if (this.across !== null)
+            gl.deleteTexture(this.across);
+        this.drawFramebuffer = null;
+        this.resolveFramebuffer = null;
+        this.acrossFramebuffer = null;
+        this.multisampled = null;
+        this.diffuse = null;
+        this.across = null;
+        this.sharedDepth = null;
+    }
+}

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

@@ -42,14 +42,16 @@ export interface GpuMesh {
      *
      * **Two, and the first is interleaved** — every attribute this mesh actually supplied, woven
      * into one stride — while the second holds one value per *absent* optional attribute at a stride
-     * of zero. It is emphatically not one buffer per attribute, which this comment said until
+     * of zero. **A dynamic mesh has four**: its positions and its normals, each a buffer of its own so
+     * `update` writes them alone, then the interleaved rest and the constants. It is emphatically not one buffer per attribute, which this comment said until
      * 2026-09-17 and which cost the motion pass an afternoon: a pipeline built to that description
      * reads a position out of every twelve bytes of an interleaved vertex, draws geometry that is
      * not the mesh, and fails no validation at all.
      */
     readonly vertexBuffers: readonly GPUBuffer[];
     /**
-     * Bytes a vertex takes in the first of those buffers.
+     * Bytes a vertex takes in the first of those buffers: the interleaved stride, or twelve for a
+     * dynamic mesh, whose first buffer is its positions.
      *
      * Kept because it is a function of which *optional* attributes this mesh supplied, so it differs
      * between two meshes drawn by the same pipeline — and a pass that reads only the position still
@@ -62,10 +64,17 @@ export interface GpuMesh {
      * Byte offsets of the joint indices and weights in the interleaved vertex, or null for a mesh
      * that supplied neither. For a pass that skins through a shader of its own — the motion pass —
      * which has to find them without the `present` map the generated pipelines are keyed by.
+     *
+     * **Null on a dynamic mesh too**, whose first buffer holds positions alone: the motion pass reads
+     * joints from that buffer, so a dynamic skinned mesh's motion between rewrites is its model's
+     * rather than its pose's. A rewrite carries its own motion, from last frame's positions.
      */
     readonly skinOffsets: {
         readonly joints: number;
         readonly weights: number;
+        /** The second four influences' offsets, or -1 for a mesh with four. */
+        readonly joints2: number;
+        readonly weights2: number;
     } | null;
     readonly indexBuffer: GPUBuffer;
     /**
@@ -114,6 +123,10 @@ export interface GpuMesh {
      * the key is built before the present map is consulted.
      */
     readonly isSkinned: boolean;
+    /** Whether its rig moves a vertex by eight influences, which keys a pipeline with `SKIN_EIGHT`. */
+    readonly isSkinnedEight: boolean;
+    /** How many vertices it has, which a cloth binding is checked against. */
+    readonly vertexCount: number;
     /** Whether it has texture coordinates, without which a material's maps read one texel. */
     readonly hasUvs: boolean;
     /**
@@ -135,18 +148,19 @@ export interface GpuMesh {
     /**
      * Rewrite this mesh's positions, and its normals where the caller has them.
      *
-     * Absent unless the mesh was created `dynamic`. **This backend interleaves every attribute into
-     * one buffer**, so a position is not contiguous with the next one — writing them individually
-     * would be one `writeBuffer` per vertex. So a dynamic mesh keeps the interleaved array it was
-     * built from, patches the two fields that move, and uploads the lot in one call. The cost is
-     * one CPU-side copy of the vertex data per dynamic mesh, which is why the flag exists rather
-     * than every mesh paying it.
+     * Absent unless the mesh was created `dynamic`. **A dynamic mesh's positions and normals are
+     * buffers of their own**, so this is one `writeBuffer` of the caller's positions and one of its
+     * normals, and nothing else moves. Until 4.8.4 every attribute was interleaved into one buffer,
+     * and a dynamic mesh kept a CPU copy of it to patch and upload whole — a garment's colours,
+     * coordinates, tangents and joints re-sent every frame for the twenty-four bytes a vertex that
+     * 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;
     /**
-     * A dynamic mesh's motion state, which the renderer owns: a buffer for last frame's interleaved
-     * rows, made the first time a reconstructing renderer rewrites the mesh, and the frame of the
-     * last rewrite. Null on a mesh created without `{ dynamic: true }`, which never moves a vertex.
+     * 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.
      */
     readonly motion: {
         previous: GPUBuffer | null;

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

@@ -20,6 +20,7 @@ import { INSTANCE_STRIDE } from '../../instances.js';
  * without one.
  */
 const USAGE = {
+    COPY_SRC: 0x0004,
     COPY_DST: 0x0008,
     INDEX: 0x0010,
     VERTEX: 0x0020,
@@ -83,6 +84,13 @@ export const VERTEX_LAYOUT = [
      * three lanes and a spare live here instead of three attributes that do not fit.
      */
     { name: 'channel', shaderLocation: 13, format: 'float32x4', components: 4, optional: true },
+    /*
+     * The fifth to eighth influences, at the last two locations. Only a skinned variant reads them,
+     * and only with `SKIN_EIGHT` on; every other mesh is fed zeros by the constants buffer. An
+     * instanced pipeline reclaims 14 and 15 with the rest of 11 to 15, as `INSTANCE_LOCATIONS` says.
+     */
+    { name: 'joints2', shaderLocation: 14, format: 'float32x4', components: 4, optional: true },
+    { name: 'weights2', shaderLocation: 15, format: 'float32x4', components: 4, optional: true },
 ];
 /** Geometry on the device, with the buffers bound in layout order. */
 /**
@@ -152,8 +160,10 @@ 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).map((attribute) => laidOut(attribute, layered));
-    /* Interleaved: one stride holding every attribute the mesh actually supplied. */
+    const supplied = VERTEX_LAYOUT.filter((attribute) => (!attribute.optional || data[attribute.name] !== undefined) &&
+        !(dynamic && isStreamed(attribute))).map((attribute) => laidOut(attribute, layered));
+    /* 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);
@@ -212,27 +222,27 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
         size: align4(data.indices.byteLength),
         usage: USAGE.INDEX | USAGE.COPY_DST,
     });
-    /*
-     * Where the position and normal fields sit inside one vertex, in floats. Found from the same
-     * `supplied` list the interleave walks, so the two cannot disagree — reading them off
-     * `VERTEX_LAYOUT` instead would be right until a mesh omits an optional attribute before them,
-     * which is the bug `present` already records once in this file.
-     */
-    let positionField = -1;
-    let normalField = -1;
-    let walked = 0;
-    for (const attribute of supplied) {
-        if (attribute.name === 'positions')
-            positionField = walked;
-        if (attribute.name === 'normals')
-            normalField = walked;
-        walked += attribute.components;
-    }
+    /* A dynamic mesh's two moving streams: copied from as well as written, for last frame's positions. */
+    const streamBytes = align4(vertexCount * 12);
+    const streams = dynamic
+        ? {
+            positions: device.createBuffer({
+                label: 'mesh.positions',
+                size: streamBytes,
+                usage: USAGE.VERTEX | USAGE.COPY_DST | USAGE.COPY_SRC,
+            }),
+            normals: device.createBuffer({
+                label: 'mesh.normals',
+                size: streamBytes,
+                usage: USAGE.VERTEX | USAGE.COPY_DST,
+            }),
+        }
+        : null;
     /*
      * The chunks, in whole vertices and whole indices: a step never writes half of either, so the
      * 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));
+    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));
     const totalSteps = Math.max(1, Math.ceil(vertexCount / verticesPerStep)) +
@@ -250,28 +260,32 @@ export function createGpuMeshIncremental(device, data, dynamic = false) {
     const mesh = gpuMeshOf({
         vertices,
         constants,
+        streams,
         indexBuffer,
-        stride,
+        stride: streams === null ? stride : 12,
         indexCount: data.indices.length,
         bounds,
         progress,
         hasTangents: data.tangents !== undefined,
         isSkinned: data.joints !== undefined,
+        isSkinnedEight: data.joints !== undefined && data.joints2 !== undefined,
+        vertexCount,
         hasUvs: data.uvs !== undefined,
-        skinOffsets: skinOffsetsOf(supplied),
+        skinOffsets: streams === null ? skinOffsetsOf(supplied) : null,
         hasChannel: data.channel !== undefined,
         morph: data.morphTargets === undefined || data.morphTargetCount === undefined
             ? null
             : new MorphTexture(device, data.morphTargets, data.positions.length / 3, data.morphTargetCount),
-        update: !dynamic
+        update: streams === null
             ? null
-            : dynamicUpdate(interleaved, vertices, bounds, vertexCount, step, positionField, normalField),
+            : streamUpdate(streams.positions, streams.normals, streamBytes, bounds, vertexCount),
     });
     const job = {
         data,
         interleaved,
         device,
         supplied,
+        streams,
         vertices,
         indexBuffer,
         vertexCount,
@@ -305,6 +319,11 @@ function* uploadSteps(job) {
             fieldOffset += attribute.components;
         }
         device.queue.writeBuffer(vertices, from * stride, interleaved, from * step, (to - from) * step);
+        if (job.streams !== null) {
+            const count = (to - from) * 3;
+            device.queue.writeBuffer(job.streams.positions, from * 12, data.positions, from * 3, count);
+            device.queue.writeBuffer(job.streams.normals, from * 12, data.normals, from * 3, count);
+        }
         taken += 1;
         if (taken < job.totalSteps)
             yield;
@@ -368,21 +387,33 @@ function skinOffsetsOf(supplied) {
     let floats = 0;
     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;
     }
-    return joints >= 0 && weights >= 0 ? { joints, weights } : null;
+    if (joints < 0 || weights < 0)
+        return null;
+    return joints2 >= 0 && weights2 >= 0
+        ? { joints, weights, joints2, weights2 }
+        : { joints, weights, joints2: -1, weights2: -1 };
 }
 /** 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 { vertices, constants, indexBuffer, progress } = parts;
+    const { vertices, constants, streams, indexBuffer, progress } = parts;
     return {
-        vertexBuffers: [vertices, constants],
+        vertexBuffers: streams === null
+            ? [vertices, constants]
+            : [streams.positions, streams.normals, vertices, constants],
         vertexStride: parts.stride,
         skinOffsets: parts.skinOffsets,
         indexBuffer,
@@ -393,6 +424,8 @@ function gpuMeshOf(parts) {
         },
         hasTangents: parts.hasTangents,
         isSkinned: parts.isSkinned,
+        isSkinnedEight: parts.isSkinnedEight,
+        vertexCount: parts.vertexCount,
         hasUvs: parts.hasUvs,
         hasChannel: parts.hasChannel,
         morph: parts.morph,
@@ -400,43 +433,47 @@ function gpuMeshOf(parts) {
         motion,
         dispose() {
             motion?.previous?.destroy();
+            streams?.positions.destroy();
+            streams?.normals.destroy();
             vertices.destroy();
             constants.destroy();
             indexBuffer.destroy();
         },
     };
 }
+/** Whether an attribute is one a dynamic mesh keeps in a buffer of its own. */
+function isStreamed(attribute) {
+    return attribute.name === 'positions' || attribute.name === 'normals';
+}
 /**
- * A dynamic mesh's `update`, which keeps the interleaved rows and nothing else: it rewrites the
- * positions and normals in them and uploads the whole buffer, so the other attributes it does not
- * receive have to still be there.
+ * 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.
  */
-function dynamicUpdate(interleaved, vertices, bounds, vertexCount, step, positionField, normalField) {
+function streamUpdate(positionsBuffer, normalsBuffer, streamBytes, bounds, vertexCount) {
     return (target, positions, normals, previous = null) => {
-        if (positions.length !== vertexCount * 3) {
-            throw new Error(`this mesh has ${vertexCount} vertices and the update has ${positions.length / 3}. ` +
+        for (const [name, values] of [
+            ['update', positions],
+            ['normals', normals],
+        ]) {
+            if (values === undefined || values.length === vertexCount * 3)
+                continue;
+            throw new Error(`this mesh has ${vertexCount} vertices and the ${name} has ${values.length / 3}. ` +
                 "A mesh's vertex count is fixed at creation: the index buffer, the pipeline and " +
                 'every other attribute are sized against it.');
         }
-        /* The rows as they stand are last frame's, handed over before a position of them changes.
-           `writeBuffer` copies at the call, so patching the array afterwards cannot reach this copy. */
-        if (previous !== null)
-            target.queue.writeBuffer(previous, 0, interleaved);
+        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);
-        for (let vertex = 0; vertex < vertexCount; vertex++) {
-            const at = vertex * step;
-            interleaved[at + positionField] = positions[vertex * 3] ?? 0;
-            interleaved[at + positionField + 1] = positions[vertex * 3 + 1] ?? 0;
-            interleaved[at + positionField + 2] = positions[vertex * 3 + 2] ?? 0;
-            if (normals === undefined)
-                continue;
-            interleaved[at + normalField] = normals[vertex * 3] ?? 0;
-            interleaved[at + normalField + 1] = normals[vertex * 3 + 1] ?? 0;
-            interleaved[at + normalField + 2] = normals[vertex * 3 + 2] ?? 0;
-        }
-        target.queue.writeBuffer(vertices, 0, interleaved);
+        target.queue.writeBuffer(positionsBuffer, 0, positions);
+        if (normals !== undefined)
+            target.queue.writeBuffer(normalsBuffer, 0, normals);
     };
 }
 /**
@@ -481,8 +518,20 @@ instanced = false) {
     const constants = [];
     let offset = 0;
     const layered = present['layers'] === true;
+    /* A dynamic mesh's positions and normals: buffers of their own, ahead of the rest. */
+    const dynamic = present['dynamic'] === true;
+    const layouts = [];
     VERTEX_LAYOUT.forEach((declared, index) => {
         const attribute = laidOut(declared, layered);
+        if (dynamic && isStreamed(attribute)) {
+            layouts.push({
+                arrayStride: attribute.components * 4,
+                attributes: [
+                    { shaderLocation: attribute.shaderLocation, offset: 0, format: attribute.format },
+                ],
+            });
+            return;
+        }
         /*
          * **The instanced pipeline reclaims the two skinning locations, and it is allowed to because
          * it cannot skin.** Locations 11 and 12 are the joint indices and weights; the INSTANCED
@@ -530,7 +579,7 @@ instanced = false) {
             format: attribute.format,
         });
     });
-    const layouts = [{ arrayStride: offset, attributes: interleaved }];
+    layouts.push({ arrayStride: offset, attributes: interleaved });
     /*
      * The constants buffer is always bound, even with nothing in it: the pipeline layout has
      * to match the buffers a draw sets, and a mesh supplying every attribute would otherwise