@driftengine/core 4.13.1 → 4.13.2

package/dist/render/pointSkin.d.ts

@@ -0,0 +1,55 @@
+/**
+ * A mesh posed on the device from weighted points in its joints' own spaces: the data, its checks,
+ * and the bounds a pose is culled by. Each backend's binding poses the vertices.
+ *
+ * **What it is for.** Some formats store a vertex as up to four points, each in the space of a
+ * joint, with a weight each and a normal in the space of the first: posed, the vertex is the
+ * weighted sum of each point moved by its joint. That is not ordinary skinning, which moves one
+ * bind-pose position by a blend of joints, so a rig of that kind had to be posed on the main thread
+ * and its positions uploaded every frame. Reported at 38% of the main thread's drawing time.
+ * Posed on the device into a dynamic mesh's own buffers, the main thread hands over the joints.
+ *
+ * **Into a dynamic mesh rather than in the vertex stage**, because a skinned vertex stage has no
+ * attribute left for four more points, and every pass that draws a mesh would need a variant that
+ * reads them: lit, cast, glass, motion. Posed once into the mesh's positions and normals, it is an
+ * ordinary dynamic mesh to every one of them, motion vectors included. What it costs is the mesh's
+ * two buffers, written a pose, and a pass that runs before the draws.
+ *
+ * **The bounds are a box of spheres, not the posed vertices**, which the CPU never sees. Each joint
+ * reaches as far as the farthest point a weighted influence holds in its space, scaled by its
+ * largest axis; a weighted sum of points inside those spheres lies inside their box, scaled by the
+ * least and greatest sums of a vertex's weights. Conservative, so it culls nothing visible; loose
+ * by the joints' reach where a mesh is long and thin, which culls a little less than it could.
+ */
+import type { Bounds } from '../math/bounds.ts';
+/** A point skin, one entry a vertex unless said otherwise. */
+export interface PointSkinData {
+    /** Four joint indices a vertex, as floats, as `MeshData.joints` is. */
+    readonly joints: Float32Array;
+    /** Four weights a vertex. An influence of weight 0 is skipped, whatever its joint and point. */
+    readonly weights: Float32Array;
+    /** Four points a vertex, three floats each: influence `k`'s point in joint `k`'s own space. */
+    readonly points: Float32Array;
+    /** One normal a vertex, in the space of its first joint. */
+    readonly normals: Float32Array;
+}
+/** How far a skin reaches from each joint, and what its weights sum to: what a pose's bounds need. */
+export interface PointSkinReach {
+    /** Joints a pose must hand over: one past the highest any vertex names and uses. */
+    readonly joints: number;
+    /** For each joint, the farthest point a weighted influence holds in its space; -1 where none. */
+    readonly reach: Float32Array;
+    /** The least and the greatest sum of one vertex's weights. */
+    readonly sums: readonly [number, number];
+}
+/** Refuse a skin whose arrays disagree with a mesh of `vertices`, or that names a joint past the rest. */
+export declare function validatePointSkin(data: PointSkinData, vertices: number): void;
+/** Measure a skin's reach once, at creation. */
+export declare function reachOf(data: PointSkinData): PointSkinReach;
+/**
+ * The bounds of a pose, into the mesh's own: `matrices` holds each joint's transform into the
+ * mesh's model space, sixteen floats, column-major. Allocates nothing.
+ */
+export declare function poseBounds(matrices: Float32Array, skin: PointSkinReach, out: Bounds): void;
+/** Refuse a pose that hands over fewer joints than the skin names. */
+export declare function validatePose(matrices: Float32Array, skin: PointSkinReach): void;

package/dist/render/pointSkin.js

@@ -0,0 +1,121 @@
+import { MAX_JOINTS } from './skinPalette.js';
+/** Refuse a skin whose arrays disagree with a mesh of `vertices`, or that names a joint past the rest. */
+export function validatePointSkin(data, vertices) {
+    const fail = (what) => {
+        throw new Error(`point skin: ${what}`);
+    };
+    for (const [name, values, width] of [
+        ['joints', data.joints, 4],
+        ['weights', data.weights, 4],
+        ['points', data.points, 12],
+        ['normals', data.normals, 3],
+    ]) {
+        if (values.length !== vertices * width) {
+            fail(`${name} holds ${values.length / width} vertices and the mesh has ${vertices}`);
+        }
+    }
+    for (let at = 0; at < data.joints.length; at++) {
+        const joint = data.joints[at];
+        if (!(Number.isInteger(joint) && joint >= 0 && joint < MAX_JOINTS)) {
+            fail(`vertex ${Math.floor(at / 4)} names joint ${joint}; a joint is 0 to ${MAX_JOINTS - 1}`);
+        }
+    }
+}
+/** Measure a skin's reach once, at creation. */
+export function reachOf(data) {
+    const reach = new Float32Array(MAX_JOINTS).fill(-1);
+    let joints = 0;
+    let least = Infinity;
+    let most = -Infinity;
+    const vertices = data.weights.length / 4;
+    for (let v = 0; v < vertices; v++) {
+        /* The first joint carries the normal, so it is named whatever its weight. */
+        joints = Math.max(joints, data.joints[v * 4] + 1);
+        let sum = 0;
+        for (let k = 0; k < 4; k++) {
+            const weight = data.weights[v * 4 + k];
+            if (weight === 0)
+                continue;
+            sum += weight;
+            const joint = data.joints[v * 4 + k];
+            joints = Math.max(joints, joint + 1);
+            const at = (v * 4 + k) * 3;
+            const x = data.points[at];
+            const y = data.points[at + 1];
+            const z = data.points[at + 2];
+            reach[joint] = Math.max(reach[joint], Math.sqrt(x * x + y * y + z * z));
+        }
+        least = Math.min(least, sum);
+        most = Math.max(most, sum);
+    }
+    return {
+        joints,
+        reach: reach.slice(0, joints),
+        sums: vertices === 0 ? [1, 1] : [least, most],
+    };
+}
+/**
+ * The bounds of a pose, into the mesh's own: `matrices` holds each joint's transform into the
+ * mesh's model space, sixteen floats, column-major. Allocates nothing.
+ */
+export function poseBounds(matrices, skin, out) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let minZ = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let maxZ = -Infinity;
+    for (let j = 0; j < skin.joints; j++) {
+        const reach = skin.reach[j];
+        if (reach < 0)
+            continue;
+        const m = j * 16;
+        const scale = Math.sqrt(Math.max(columnLength2(matrices, m), columnLength2(matrices, m + 4), columnLength2(matrices, m + 8)));
+        const r = reach * scale;
+        const x = matrices[m + 12];
+        const y = matrices[m + 13];
+        const z = matrices[m + 14];
+        minX = Math.min(minX, x - r);
+        minY = Math.min(minY, y - r);
+        minZ = Math.min(minZ, z - r);
+        maxX = Math.max(maxX, x + r);
+        maxY = Math.max(maxY, y + r);
+        maxZ = Math.max(maxZ, z + r);
+    }
+    if (minX > maxX) {
+        out.min.fill(0);
+        out.max.fill(0);
+        out.centre.fill(0);
+        out.radius = 0;
+        return;
+    }
+    /* A sum of weights other than one scales the box about the origin, by the least and the most. */
+    const [least, most] = skin.sums;
+    out.min[0] = Math.min(least * minX, most * minX);
+    out.min[1] = Math.min(least * minY, most * minY);
+    out.min[2] = Math.min(least * minZ, most * minZ);
+    out.max[0] = Math.max(least * maxX, most * maxX);
+    out.max[1] = Math.max(least * maxY, most * maxY);
+    out.max[2] = Math.max(least * maxZ, most * maxZ);
+    let radius2 = 0;
+    for (let axis = 0; axis < 3; axis++) {
+        const centre = (out.min[axis] + out.max[axis]) / 2;
+        out.centre[axis] = centre;
+        const half = out.max[axis] - centre;
+        radius2 += half * half;
+    }
+    out.radius = Math.sqrt(radius2);
+}
+/** The squared length of one column's first three components. */
+function columnLength2(m, at) {
+    const x = m[at];
+    const y = m[at + 1];
+    const z = m[at + 2];
+    return x * x + y * y + z * z;
+}
+/** Refuse a pose that hands over fewer joints than the skin names. */
+export function validatePose(matrices, skin) {
+    if (matrices.length % 16 !== 0 || matrices.length / 16 < skin.joints) {
+        throw new Error(`point skin: a pose of ${matrices.length / 16} joints for a skin that names ${skin.joints}`);
+    }
+}

package/dist/render/rendererHarness.js

@@ -77,6 +77,12 @@ export function recordingGl(options = {}) {
         ONE: 1,
         ONE_MINUS_SRC_ALPHA: 0x0303,
         TRIANGLES: 0x0004,
+        /* Transform feedback's, so a point skin's pose can be seen to discard, capture and undo both. */
+        POINTS: 0x0000,
+        RASTERIZER_DISCARD: 0x8c89,
+        TRANSFORM_FEEDBACK: 0x8e22,
+        TRANSFORM_FEEDBACK_BUFFER: 0x8c8e,
+        SEPARATE_ATTRIBS: 0x8c8d,
         /* The winding a pass names, so a test can tell which one it chose. */
         CW: 0x0900,
         CCW: 0x0901,

package/dist/render/shader.d.ts

@@ -1,5 +1,7 @@
 /** Shader compilation with fail-fast diagnostics (init-time only, never per-frame). */
-export declare function compileProgram(gl: WebGL2RenderingContext, vertexSource: string, fragmentSource: string, label: string): WebGLProgram;
+export declare function compileProgram(gl: WebGL2RenderingContext, vertexSource: string, fragmentSource: string, label: string, 
+/** Vertex outputs captured by transform feedback, one buffer each; named before the link. */
+feedback?: readonly string[]): WebGLProgram;
 /**
  * A program compiled and linked without asking whether that worked, since asking waits for the
  * driver to finish: for a context offering `KHR_parallel_shader_compile`, whose

package/dist/render/shader.js

@@ -1,5 +1,7 @@
 /** Shader compilation with fail-fast diagnostics (init-time only, never per-frame). */
-export function compileProgram(gl, vertexSource, fragmentSource, label) {
+export function compileProgram(gl, vertexSource, fragmentSource, label, 
+/** Vertex outputs captured by transform feedback, one buffer each; named before the link. */
+feedback) {
     const vs = compileStage(gl, gl.VERTEX_SHADER, vertexSource, `${label}.vert`);
     const fs = compileStage(gl, gl.FRAGMENT_SHADER, fragmentSource, `${label}.frag`);
     const program = gl.createProgram();
@@ -7,6 +9,9 @@ export function compileProgram(gl, vertexSource, fragmentSource, label) {
         throw new Error(`[${label}] createProgram failed`);
     gl.attachShader(program, vs);
     gl.attachShader(program, fs);
+    if (feedback !== undefined) {
+        gl.transformFeedbackVaryings(program, feedback, gl.SEPARATE_ATTRIBS);
+    }
     gl.linkProgram(program);
     gl.deleteShader(vs);
     gl.deleteShader(fs);

package/dist/render/vertexPacking.d.ts

@@ -22,15 +22,27 @@ import type { MeshData } from '@driftengine/drft';
  * on the CPU. What would make this wrong is a value outside its range, which the range check sends
  * to floats rather than clamping, or a shader reading an attribute as something other than the
  * value it carries.
+ *
+ * **A mesh whose colours are rewritten keeps them as floats in a buffer of their own** (`stream`),
+ * whatever they are: one value every vertex shares has no buffer to rewrite, sixteen bits would
+ * have to be packed on the CPU every rewrite, and colours interleaved with the rest of a vertex
+ * could only be rewritten by keeping the rows, which a mesh lets go once it is uploaded. It costs
+ * twelve bytes a vertex where the colours might have cost none, which is why a mesh asks for it.
+ */
+/**
+ * Floats; sixteen-bit fixed point, signed or not; one value for every vertex; or floats in a
+ * buffer of their own, for an attribute a caller rewrites.
  */
-/** Floats; sixteen-bit fixed point, signed or not; or one value for every vertex. */
-export type AttributePacking = 'float' | 'snorm16' | 'unorm16' | 'constant';
+export type AttributePacking = 'float' | 'snorm16' | 'unorm16' | 'constant' | 'stream';
 /** The attributes this decides for. Every other one travels as floats. */
 export declare const PACKED_ATTRIBUTES: readonly ['normals', 'tangents', 'colors', 'emissive', 'weights', 'weights2'];
 export type PackedAttribute = (typeof PACKED_ATTRIBUTES)[number];
 export type VertexPacking = Readonly<Record<PackedAttribute, AttributePacking>>;
-/** The choice for this mesh. `dynamic` is a mesh whose positions and normals are rewritten. */
-export declare function vertexPackingOf(data: MeshData, dynamic: boolean): VertexPacking;
+/**
+ * The choice for this mesh. `dynamic` is a mesh whose positions and normals are rewritten, and
+ * `dynamicColors` one whose colours are.
+ */
+export declare function vertexPackingOf(data: MeshData, dynamic: boolean, dynamicColors?: boolean): VertexPacking;
 /**
  * What 1 is in each fixed point, the values WebGPU's `snorm16` and `unorm16` and WebGL2's
  * normalised `SHORT` and `UNSIGNED_SHORT` divide by. A value is stored rounded to nearest, so 1, 0

package/dist/render/vertexPacking.js

@@ -7,12 +7,19 @@ export const PACKED_ATTRIBUTES = [
     'weights',
     'weights2',
 ];
-/** The choice for this mesh. `dynamic` is a mesh whose positions and normals are rewritten. */
-export function vertexPackingOf(data, dynamic) {
+/**
+ * The choice for this mesh. `dynamic` is a mesh whose positions and normals are rewritten, and
+ * `dynamicColors` one whose colours are.
+ */
+export function vertexPackingOf(data, dynamic, dynamicColors = false) {
     return {
         normals: dynamic ? 'float' : fixedOrFloat(data.normals, -1),
         tangents: fixedOrFloat(data.tangents, -1),
-        colors: shared(data.colors, 3) ? 'constant' : fixedOrFloat(data.colors, 0),
+        colors: dynamicColors
+            ? 'stream'
+            : shared(data.colors, 3)
+                ? 'constant'
+                : fixedOrFloat(data.colors, 0),
         emissive: shared(data.emissive, 1) ? 'constant' : 'float',
         weights: fixedOrFloat(data.weights, 0),
         weights2: fixedOrFloat(data.weights2, 0),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@driftengine/core",
-  "version": "4.13.1",
+  "version": "4.13.2",
   "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.13.1",
-    "@driftengine/physics": "4.13.1",
+    "@driftengine/drft": "4.13.2",
+    "@driftengine/physics": "4.13.2",
     "gl-matrix": "^3.4.3"
   },
   "author": "Drift Technologies",
@@ -67,8 +67,8 @@
     "prepack": "node ../../scripts/build.mjs @driftengine/core"
   },
   "devDependencies": {
-    "@driftengine/nav": "4.13.1",
-    "@driftengine/network": "4.13.1",
-    "@driftengine/texture": "4.13.1"
+    "@driftengine/nav": "4.13.2",
+    "@driftengine/network": "4.13.2",
+    "@driftengine/texture": "4.13.2"
   }
 }

package/src/index.ts

@@ -483,6 +483,7 @@ export type {
   BoltHandle,
   CausticsHandle,
   ClothBindingHandle,
+  PointSkinHandle,
   ClothParticlesHandle,
   FlockHandle,
   IncrementalMeshHandle,
@@ -503,6 +504,7 @@ export type {
   WindStreakHandle,
 } from './render/backend/api.ts';
 export type { ClothBindingData } from './render/clothBindingData.ts';
+export type { PointSkinData } from './render/pointSkin.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

package/src/render/backend/api.ts

@@ -12,6 +12,7 @@ import type { CompressedTextureSource, SurfaceSource } from '../compressedSource
 import type { LightmapPage } from '../lightmap.ts';
 import type { DeviceParticles } from '../particlePool.ts';
 import type { ClothBindingData } from '../clothBindingData.ts';
+import type { PointSkinData } from '../pointSkin.ts';
 import type { TextStyle } from '../textLayout.ts';
 import type { SdfFont } from '../sdfFont.ts';
 import type { SdfTextStyle } from '../sdfTextLayout.ts';
@@ -64,6 +65,15 @@ export interface ClothBindingHandle {
   /* Deliberately empty, for the weak-type reason `MeshHandle` explains. */
 }
 
+/**
+ * A dynamic mesh's point skin on the device, from `createPointSkin`: its vertices as weighted points
+ * in its joints' spaces. Opaque likewise.
+ */
+/* eslint-disable-next-line @typescript-eslint/no-empty-object-type -- opaque by design */
+export interface PointSkinHandle {
+  /* 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 {
@@ -249,11 +259,20 @@ export interface MeshOptions {
   /**
    * Whether this mesh's positions will be rewritten with `updateMesh`.
    *
-   * Costs a `DYNAMIC_DRAW` hint on WebGL2 and a CPU-side copy of the interleaved vertex data on
-   * WebGPU, which interleaves every attribute into one buffer and so cannot patch a position
-   * without the rest of the vertex in hand. Both are paid only where a consumer asks.
+   * Costs a `DYNAMIC_DRAW` hint on WebGL2, and on WebGPU two buffers of its own for the positions
+   * and the normals beside the rest of the vertex, bound with it on every draw, and floats for the
+   * normals where they might have been sixteen bits. Paid only where a consumer asks.
    */
   readonly dynamic?: boolean;
+  /**
+   * Whether this mesh's colours will be rewritten with `updateMeshColors`.
+   *
+   * Costs the colours as floats in a buffer of their own, twelve bytes a vertex where they might
+   * have been sixteen bits or, for one colour every vertex shares, nothing at all. Independent of
+   * `dynamic`: a surface shaded again as a camera moves rewrites its colours every frame and its
+   * positions never, and should pay for neither the positions' buffers nor their motion.
+   */
+  readonly dynamicColors?: boolean;
 }
 
 export type RendererApi = Omit<
@@ -262,6 +281,7 @@ export type RendererApi = Omit<
   | 'createMesh'
   | 'createMeshIncremental'
   | 'updateMesh'
+  | 'updateMeshColors'
   | 'drawMesh'
   | 'disposeMesh'
   | 'drawTranslucentMesh'
@@ -330,6 +350,9 @@ export type RendererApi = Omit<
   | 'setCloth'
   | 'disposeClothBinding'
   | 'disposeClothParticles'
+  | 'createPointSkin'
+  | 'posePointSkin'
+  | 'disposePointSkin'
 > & {
   /**
    * A mesh's cloth binding: which simulation triangle each of its vertices follows, where on it and
@@ -354,6 +377,29 @@ export type RendererApi = Omit<
   setCloth(binding: ClothBindingHandle | null, particles?: ClothParticlesHandle | null): void;
   disposeClothBinding(binding: ClothBindingHandle): void;
   disposeClothParticles(particles: ClothParticlesHandle): void;
+  /**
+   * A dynamic mesh posed on the device from weighted points in its joints' own spaces
+   * (`PointSkinData`): each vertex the weighted sum of up to four points, each moved by its joint,
+   * and a normal turned by its first joint. Posed into the mesh's own positions and normals, so
+   * every pass draws it as any dynamic mesh, motion vectors included. See `pointSkin.ts`.
+   *
+   * **For a rig whose vertices are stored that way**, which ordinary skinning cannot pose: it moves
+   * one bind-pose position by a blend of joints. Such a rig was posed on the main thread and
+   * uploaded every frame, reported at 38% of the main thread's drawing time.
+   *
+   * The mesh must be `{ dynamic: true }` and have the skin's vertex count; any other is refused in
+   * words, as is a joint past 511.
+   */
+  createPointSkin(mesh: MeshHandle, data: PointSkinData): PointSkinHandle;
+  /**
+   * Pose a skin: `matrices` holds each joint's transform into the mesh's model space, sixteen floats
+   * a joint, column-major, at least as many joints as the skin names. **Once a frame, before the
+   * mesh's draws**: a second pose in a frame reaches every draw of it on WebGPU, as a second
+   * `updateMesh` does. The mesh's bounds become a box around every joint's reach, so it is culled
+   * as it moves without the posed vertices ever coming back to the CPU.
+   */
+  posePointSkin(skin: PointSkinHandle, matrices: Float32Array): void;
+  disposePointSkin(skin: PointSkinHandle): void;
   /**
    * What the following draws lay over their surfaces beyond their materials — a rim of light, a
    * dissolve with a glowing edge, wrinkle normals by region — or null for none, which every pass
@@ -928,10 +974,12 @@ export type RendererApi = Omit<
    * quads with a matrix each, which caps the resolution at the number of draw calls a consumer
    * can afford. A consumer found it by trying to hang a banner.
    *
-   * **Only positions and normals.** Colour, emissive and the rest describe what a surface *is*
-   * and do not change because it bent; rewriting them every frame would be uploading unchanged
-   * bytes. The vertex *count* is fixed: the index buffer, the pipeline and every other attribute
-   * are sized against it, and an update of a different size is refused naming both.
+   * **Only positions and normals.** Emissive and the rest describe what a surface *is* and do not
+   * change because it bent; rewriting them every frame would be uploading unchanged bytes. Colour
+   * is the exception a consumer found, a surface shaded again every frame without moving, and it
+   * has `updateMeshColors` of its own rather than a place here, so a rewrite of either sends only
+   * what changed. The vertex *count* is fixed: the index buffer, the pipeline and every other
+   * attribute are sized against it, and an update of a different size is refused naming both.
    *
    * The mesh must have been created with `{ dynamic: true }`. That is not ceremony — it decides
    * the buffer hint on one backend and what has to be kept on the other, and a mesh that never
@@ -939,6 +987,21 @@ export type RendererApi = Omit<
    */
   updateMesh(mesh: MeshHandle, positions: Float32Array, normals?: Float32Array): void;
 
+  /**
+   * Rewrite a mesh's colours, three floats a vertex, linear as `MeshData.colors` is.
+   *
+   * **For a surface whose colour changes while it stays where it is**: ground shaded with its
+   * distance from a moving camera, a heat map, a tile lit by a game's own rules. Without it such a
+   * surface is made again as a new mesh every frame, which is a buffer allocated and let go each
+   * frame on both backends and every pipeline it draws with looked up again.
+   *
+   * The mesh must have been created with `{ dynamicColors: true }`, which gives the colours a buffer
+   * of their own; any other is refused in words. Nothing else moves: not the positions, not the
+   * bounds, and no motion vector, since a colour does not move. A different vertex count is refused
+   * naming both.
+   */
+  updateMeshColors(mesh: MeshHandle, colors: Float32Array): void;
+
   /** Draw a handle this renderer made. Passing one from the other backend is a caller error. */
   drawMesh(
     mesh: MeshHandle,

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

@@ -0,0 +1,173 @@
+/**
+ * A point skin on WebGL2: posed by transform feedback, a vertex stage run once a vertex with the
+ * rasteriser off, its two outputs captured into the dynamic mesh's own position and normal buffers.
+ * What a point skin is, and why it poses into a mesh, is `pointSkin.ts`; the same arithmetic in the
+ * same order is `backend/webgpu/shaders/pointSkin.wgsl.ts`.
+ *
+ * **Every binding it makes it undoes**, because it runs between a frame's draws: the program, the
+ * vertex array, the joint texture on its own unit, the feedback buffers and the discard. A buffer
+ * left bound for feedback while a draw reads it as vertices is an error WebGL2 raises at the draw.
+ */
+import { POINT_SKIN_TEXTURE_UNIT } from '../../lightBudget.ts';
+import type { Mesh } from '../../mesh.ts';
+import { reachOf, type PointSkinData, type PointSkinReach } from '../../pointSkin.ts';
+import { compileProgram } from '../../shader.ts';
+
+const POSE_VERT = /* glsl */ `#version 300 es
+precision highp float;
+precision highp int;
+layout(location = 0) in vec4 aNamed;
+layout(location = 1) in vec4 aWeights;
+layout(location = 2) in vec3 aPoint0;
+layout(location = 3) in vec3 aPoint1;
+layout(location = 4) in vec3 aPoint2;
+layout(location = 5) in vec3 aPoint3;
+layout(location = 6) in vec3 aNormal;
+uniform highp sampler2D uJoints;
+out vec3 vPosition;
+out vec3 vNormal;
+
+mat4 jointAt(float joint) {
+  int at = int(joint) * 4;
+  return mat4(
+    texelFetch(uJoints, ivec2(at, 0), 0),
+    texelFetch(uJoints, ivec2(at + 1, 0), 0),
+    texelFetch(uJoints, ivec2(at + 2, 0), 0),
+    texelFetch(uJoints, ivec2(at + 3, 0), 0)
+  );
+}
+
+void main() {
+  vec3 p = vec3(0.0);
+  if (aWeights.x != 0.0) p += aWeights.x * (jointAt(aNamed.x) * vec4(aPoint0, 1.0)).xyz;
+  if (aWeights.y != 0.0) p += aWeights.y * (jointAt(aNamed.y) * vec4(aPoint1, 1.0)).xyz;
+  if (aWeights.z != 0.0) p += aWeights.z * (jointAt(aNamed.z) * vec4(aPoint2, 1.0)).xyz;
+  if (aWeights.w != 0.0) p += aWeights.w * (jointAt(aNamed.w) * vec4(aPoint3, 1.0)).xyz;
+  vec3 raw = mat3(jointAt(aNamed.x)) * aNormal;
+  float l = length(raw);
+  vNormal = l > 0.0 ? raw / l : raw;
+  vPosition = p;
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+}
+`;
+
+const POSE_FRAG = /* glsl */ `#version 300 es
+precision mediump float;
+out vec4 colour;
+void main() {
+  colour = vec4(0.0);
+}
+`;
+
+/** The program and feedback object every skin on a context poses with, made at the first skin. */
+export interface PointSkinPose {
+  readonly program: WebGLProgram;
+  readonly feedback: WebGLTransformFeedback;
+}
+
+export function createPointSkinPose(gl: WebGL2RenderingContext): PointSkinPose {
+  const program = compileProgram(gl, POSE_VERT, POSE_FRAG, 'pointSkin.pose', [
+    'vPosition',
+    'vNormal',
+  ]);
+  gl.useProgram(program);
+  gl.uniform1i(gl.getUniformLocation(program, 'uJoints'), POINT_SKIN_TEXTURE_UNIT);
+  gl.useProgram(null);
+  const feedback = gl.createTransformFeedback();
+  if (feedback === null) throw new Error('createTransformFeedback failed');
+  return { program, feedback };
+}
+
+export class GlPointSkin {
+  readonly mesh: Mesh;
+  readonly reach: PointSkinReach;
+  private readonly count: number;
+  private readonly vao: WebGLVertexArrayObject;
+  private readonly buffers: WebGLBuffer[] = [];
+  private readonly joints: WebGLTexture;
+  private readonly width: number;
+
+  constructor(gl: WebGL2RenderingContext, mesh: Mesh, data: PointSkinData) {
+    this.mesh = mesh;
+    this.reach = reachOf(data);
+    this.count = data.weights.length / 4;
+    const vao = gl.createVertexArray();
+    if (vao === null) throw new Error('createVertexArray failed');
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    this.attach(gl, data.joints, [[0, 4, 16, 0]]);
+    this.attach(gl, data.weights, [[1, 4, 16, 0]]);
+    this.attach(gl, data.points, [
+      [2, 3, 48, 0],
+      [3, 3, 48, 12],
+      [4, 3, 48, 24],
+      [5, 3, 48, 36],
+    ]);
+    this.attach(gl, data.normals, [[6, 3, 12, 0]]);
+    gl.bindVertexArray(null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+    /* One row, four texels a joint, as the skin palette is. */
+    this.width = Math.max(1, this.reach.joints * 4);
+    const joints = gl.createTexture();
+    if (joints === null) throw new Error('createTexture failed');
+    this.joints = joints;
+    gl.activeTexture(gl.TEXTURE0 + POINT_SKIN_TEXTURE_UNIT);
+    gl.bindTexture(gl.TEXTURE_2D, joints);
+    gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA32F, this.width, 1);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+  }
+
+  /** One buffer, read as each `[location, size, stride, offset]` says. */
+  private attach(
+    gl: WebGL2RenderingContext,
+    values: Float32Array,
+    reads: readonly (readonly [number, number, number, number])[],
+  ): void {
+    const buffer = gl.createBuffer();
+    if (buffer === null) throw new Error('createBuffer failed');
+    this.buffers.push(buffer);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, values, gl.STATIC_DRAW);
+    for (const [location, size, stride, offset] of reads) {
+      gl.enableVertexAttribArray(location);
+      gl.vertexAttribPointer(location, size, gl.FLOAT, false, stride, offset);
+    }
+  }
+
+  /** Pose every vertex into the mesh's buffers now, and undo every binding it made. */
+  pose(gl: WebGL2RenderingContext, pose: PointSkinPose, matrices: Float32Array): void {
+    const streams = this.mesh.streams;
+    if (streams === null) return;
+    gl.useProgram(pose.program);
+    gl.bindVertexArray(this.vao);
+    gl.activeTexture(gl.TEXTURE0 + POINT_SKIN_TEXTURE_UNIT);
+    gl.bindTexture(gl.TEXTURE_2D, this.joints);
+    if (this.reach.joints > 0) {
+      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.width, 1, gl.RGBA, gl.FLOAT, matrices, 0);
+    }
+    gl.enable(gl.RASTERIZER_DISCARD);
+    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, pose.feedback);
+    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, streams.positions);
+    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, streams.normals);
+    gl.beginTransformFeedback(gl.POINTS);
+    gl.drawArrays(gl.POINTS, 0, this.count);
+    gl.endTransformFeedback();
+    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
+    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, null);
+    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
+    gl.bindBuffer(gl.TRANSFORM_FEEDBACK_BUFFER, null);
+    gl.disable(gl.RASTERIZER_DISCARD);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindVertexArray(null);
+    gl.useProgram(null);
+  }
+
+  dispose(gl: WebGL2RenderingContext): void {
+    for (const buffer of this.buffers) gl.deleteBuffer(buffer);
+    gl.deleteTexture(this.joints);
+    gl.deleteVertexArray(this.vao);
+  }
+}