@driftengine/core 4.13.1 → 4.13.3

package/dist/render/surfaceDetail.d.ts

@@ -0,0 +1,79 @@
+/**
+ * A material's tiled detail: small normal maps, and occlusion, repeated many times over the base
+ * maps, a region map choosing which one each texel wears. `SurfaceMaterial.detail`, packed into
+ * `uDetail` for `shaders/flat/detail.ts`.
+ *
+ * **What it is for.** A surface's finest grain — leather, a weave, brushed metal, a face's pores —
+ * is a map of a few hundred texels repeated tens of times across it. Baked into the base maps it is
+ * lost: a 256-texel detail tiled forty times over a 2048-texel map would want some ten thousand
+ * texels a side. So the base maps carry the shape and a detail map the grain, each garment region
+ * with its own grain at its own repeat, which is how such surfaces are authored.
+ *
+ * **Where the maps are.** The lit stage has no texture binding to spare on either backend, so the
+ * detail maps are layers of the array read where a shading model's map is (`uModelMap`), and the
+ * region map is a layer of the material's own ORM array, one index a texel in its red. What that
+ * gives up, said where each is refused: a material whose shading model has a map must put its
+ * detail layers in that same array; a layered material whose mask is a map cannot have detail; and
+ * the region map shares the ORM array's size and format, which must keep an index exactly, so an
+ * uncompressed one.
+ *
+ * **Sixteen regions, two vectors each**, behind one vector saying how many and where the region
+ * map is: thirty-three in all, which is why WebGL2 compiles them in only when a material first asks
+ * and refuses them on a part with no room for them.
+ */
+/** Regions a material may name. */
+export declare const MAX_DETAIL_REGIONS = 16;
+/** Floats `uDetail` holds: a header vector, then two vectors a region. */
+export declare const DETAIL_FLOATS: number;
+/** One region's detail. */
+export interface SurfaceDetailRegion {
+    /** The layer of the detail array holding this region's tangent-space normal map. */
+    readonly normalLayer: number;
+    /** The layer holding its occlusion, in red; absent, the region adds none. */
+    readonly occlusionLayer?: number;
+    /** Repeats across the base coordinates, the same both ways or across and down apart. */
+    readonly repeat: number | readonly [number, number];
+    /** Added to the repeated coordinates, so neighbouring regions need not line up. Default none. */
+    readonly offset?: readonly [number, number];
+    /** How far the detail turns the normal: 0 lies flat, 1 as drawn, more steeper. Default 1. */
+    readonly normalStrength?: number;
+    /** How much of its occlusion is laid on, from 0 to 1. Default 1. */
+    readonly occlusionStrength?: number;
+}
+/** A material's tiled detail. */
+export interface SurfaceDetail<Texture> {
+    /**
+     * The array whose layers the regions name, read where a shading model's map is. A material with
+     * a `modelMap` puts its detail layers in that array and names it here too.
+     */
+    readonly maps: Texture;
+    /**
+     * The layer of the material's ORM array holding the region map: in its red, each texel's region
+     * as an index from 0, stored as `index / 255`, read exactly at the base coordinates. Absent, every
+     * texel is region 0, which is a surface with one detail all over: a face's pores.
+     */
+    readonly regionLayer?: number;
+    /** Up to sixteen, by index. A texel naming a region past the last wears the last. */
+    readonly regions: readonly SurfaceDetailRegion[];
+}
+/**
+ * Pack a material's detail into `out`, `DETAIL_FLOATS` long; zeros for none, which the shader reads
+ * as no detail. `hasOrm` says whether the material carries the ORM array a region map is a layer
+ * of; without one every texel is region 0. Allocates nothing.
+ */
+export declare function packSurfaceDetail(detail: SurfaceDetail<unknown> | null, hasOrm: boolean, out: Float32Array): void;
+/** Why a material's detail is drawn without, or null where nothing stands in its way. */
+export type DetailRefusal = 'slot' | 'projection';
+/**
+ * Whether a material's detail can be drawn, given what else wants the slot its maps are read
+ * through: a shading model's own map, or a layered material's mask where it is a map. Either must
+ * be the detail's array itself. And a material placed by the world has no base coordinates for a
+ * region map to be read at, so its detail is refused too.
+ */
+export declare function detailRefusal(detail: SurfaceDetail<unknown>, slotTakenBy: unknown, projected: boolean): DetailRefusal | null;
+/** A material's detail, or null where it names none or no region. */
+export declare function detailOf<Texture>(material: {
+    readonly detail?: SurfaceDetail<Texture> | null;
+} | null): SurfaceDetail<Texture> | null;
+/** The sentence each backend says once when it draws a material without its detail. */
+export declare function detailRefusalWarning(refusal: DetailRefusal): string;

package/dist/render/surfaceDetail.js

@@ -0,0 +1,86 @@
+/**
+ * A material's tiled detail: small normal maps, and occlusion, repeated many times over the base
+ * maps, a region map choosing which one each texel wears. `SurfaceMaterial.detail`, packed into
+ * `uDetail` for `shaders/flat/detail.ts`.
+ *
+ * **What it is for.** A surface's finest grain — leather, a weave, brushed metal, a face's pores —
+ * is a map of a few hundred texels repeated tens of times across it. Baked into the base maps it is
+ * lost: a 256-texel detail tiled forty times over a 2048-texel map would want some ten thousand
+ * texels a side. So the base maps carry the shape and a detail map the grain, each garment region
+ * with its own grain at its own repeat, which is how such surfaces are authored.
+ *
+ * **Where the maps are.** The lit stage has no texture binding to spare on either backend, so the
+ * detail maps are layers of the array read where a shading model's map is (`uModelMap`), and the
+ * region map is a layer of the material's own ORM array, one index a texel in its red. What that
+ * gives up, said where each is refused: a material whose shading model has a map must put its
+ * detail layers in that same array; a layered material whose mask is a map cannot have detail; and
+ * the region map shares the ORM array's size and format, which must keep an index exactly, so an
+ * uncompressed one.
+ *
+ * **Sixteen regions, two vectors each**, behind one vector saying how many and where the region
+ * map is: thirty-three in all, which is why WebGL2 compiles them in only when a material first asks
+ * and refuses them on a part with no room for them.
+ */
+/** Regions a material may name. */
+export const MAX_DETAIL_REGIONS = 16;
+/** Floats `uDetail` holds: a header vector, then two vectors a region. */
+export const DETAIL_FLOATS = 4 + MAX_DETAIL_REGIONS * 8;
+/**
+ * Pack a material's detail into `out`, `DETAIL_FLOATS` long; zeros for none, which the shader reads
+ * as no detail. `hasOrm` says whether the material carries the ORM array a region map is a layer
+ * of; without one every texel is region 0. Allocates nothing.
+ */
+export function packSurfaceDetail(detail, hasOrm, out) {
+    out.fill(0);
+    if (detail === null)
+        return;
+    const count = Math.min(MAX_DETAIL_REGIONS, detail.regions.length);
+    out[0] = count;
+    const regionLayer = detail.regionLayer;
+    out[1] = hasOrm && regionLayer !== undefined ? Math.max(0, Math.floor(regionLayer)) : -1;
+    for (let i = 0; i < count; i++) {
+        const region = detail.regions[i];
+        const at = 4 + i * 8;
+        const repeat = region.repeat;
+        const across = typeof repeat === 'number' ? repeat : repeat[0];
+        const down = typeof repeat === 'number' ? repeat : repeat[1];
+        out[at] = Math.max(0, Math.floor(region.normalLayer));
+        out[at + 1] =
+            region.occlusionLayer === undefined ? -1 : Math.max(0, Math.floor(region.occlusionLayer));
+        out[at + 2] = Math.max(0, region.normalStrength ?? 1);
+        out[at + 3] = Math.min(1, Math.max(0, region.occlusionStrength ?? 1));
+        /* A repeat at or below zero has no grain to show, so it is one rather than a mirror or nothing. */
+        out[at + 4] = across > 0 ? across : 1;
+        out[at + 5] = down > 0 ? down : 1;
+        out[at + 6] = region.offset?.[0] ?? 0;
+        out[at + 7] = region.offset?.[1] ?? 0;
+    }
+}
+/**
+ * Whether a material's detail can be drawn, given what else wants the slot its maps are read
+ * through: a shading model's own map, or a layered material's mask where it is a map. Either must
+ * be the detail's array itself. And a material placed by the world has no base coordinates for a
+ * region map to be read at, so its detail is refused too.
+ */
+export function detailRefusal(detail, slotTakenBy, projected) {
+    if (projected)
+        return 'projection';
+    if (slotTakenBy !== null && slotTakenBy !== undefined && slotTakenBy !== detail.maps) {
+        return 'slot';
+    }
+    return null;
+}
+/** A material's detail, or null where it names none or no region. */
+export function detailOf(material) {
+    const detail = material?.detail ?? null;
+    return detail === null || detail.regions.length === 0 ? null : detail;
+}
+/** The sentence each backend says once when it draws a material without its detail. */
+export function detailRefusalWarning(refusal) {
+    return refusal === 'slot'
+        ? "Renderer: a material's detail is drawn without: its maps are read where a shading model's " +
+            "map goes, and this material binds another array there, its `modelMap` or its layers' " +
+            'mask. Put the detail layers in the `modelMap` array and name that array as `detail.maps`.'
+        : "Renderer: a material's detail is drawn without: it is placed by the world (`projection`), " +
+            'so there are no base coordinates for its regions and repeats to be read at.';
+}

package/dist/render/surfaceTexture.d.ts

@@ -8,6 +8,7 @@
  * 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 type { SurfaceDetail } from './surfaceDetail.ts';
 import type { SurfaceLayers } from './surfaceLayers.ts';
 import type { SurfaceProjection } from './surfaceProjection.ts';
 import type { SurfaceModel } from './surfaceModel.ts';
@@ -235,6 +236,14 @@ export interface SurfaceMaterial<Texture = SurfaceTexture> {
      * vertices. See `surfaceLayers.ts` for the rest and what it gives up.
      */
     layers?: SurfaceLayers<Texture> | null;
+    /**
+     * Fine grain tiled over the base maps: up to sixteen regions, each a detail normal map, and an
+     * occlusion, at its own repeat and strength, a region map in the ORM array choosing which one each
+     * texel wears. The detail maps are layers of an array read where `modelMap` goes, so a material
+     * with a shading model's map puts them in that array. **A lit switch**, compiled in the first time
+     * a material asks. See `surfaceDetail.ts` for the rest and what it gives up.
+     */
+    detail?: SurfaceDetail<Texture> | null;
 }
 export interface SurfaceTextureOptions {
     /**

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.3",
   "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.3",
+    "@driftengine/physics": "4.13.3",
     "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.3",
+    "@driftengine/network": "4.13.3",
+    "@driftengine/texture": "4.13.3"
   }
 }

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
@@ -675,6 +677,8 @@ export { SurfaceTexture } from './render/surfaceTexture.ts';
 export type { SurfaceMaterial, SurfaceTextureOptions } from './render/surfaceTexture.ts';
 export type { SurfaceProjection } from './render/surfaceProjection.ts';
 export type { SurfaceLayers } from './render/surfaceLayers.ts';
+export type { SurfaceDetail, SurfaceDetailRegion } from './render/surfaceDetail.ts';
+export { MAX_DETAIL_REGIONS } from './render/surfaceDetail.ts';
 export type { SurfaceLayerLook } from './render/surfaceLayerLooks.ts';
 /*
  * Compressed textures — BC, ETC2 and EAC, ASTC: the source `createSurfaceTexture` takes as blocks,

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);
+  }
+}