@netforge/engine 0.0.0-stage → 0.1.0

package/dist/runtime/render/vat.js

@@ -0,0 +1,219 @@
+import { AnimationMixer, BufferGeometry, DataTexture, DynamicDrawUsage, Float32BufferAttribute, FloatType, InstancedBufferAttribute, InstancedBufferGeometry, Mesh, NearestFilter, RGBAFormat, Vector3, } from "three/webgpu";
+import { cameraViewMatrix, cos, float, floor, fract, instancedBufferAttribute, int, materialEmissive, ivec2, mix, mod, normalize, sin, textureLoad, uniform, varying, vec3, vec4, vertexIndex, } from "three/tsl";
+/**
+ * Bake one or more clips of a skinned mesh into a vertex animation texture
+ * (CPU, at load). Frames are laid out clip after clip; a crowd then plays
+ * any clip on thousands of instances in one draw (`VatCrowd`).
+ */
+export function bakeVertexAnimation(mesh, clips, opts = {}) {
+    const list = Array.isArray(clips) ? clips : [clips];
+    const fps = opts.fps ?? 30;
+    const geometry = mesh.geometry;
+    const count = geometry.getAttribute("position").count;
+    const width = Math.min(count, opts.maxWidth ?? 2048);
+    const rowsPerFrame = Math.ceil(count / width);
+    const plan = [];
+    let total = 0;
+    for (const c of list) {
+        const frames = Math.max(1, opts.frames ?? Math.ceil(c.duration * fps));
+        plan.push({ name: c.name, start: total, frames });
+        total += frames;
+    }
+    const height = rowsPerFrame * total;
+    const pos = new Float32Array(width * height * 4);
+    const wantNormals = opts.normals ?? true;
+    const nor = wantNormals ? new Float32Array(width * height * 4) : null;
+    const scratch = wantNormals ? new BufferGeometry() : null;
+    if (scratch) {
+        if (geometry.index)
+            scratch.setIndex(geometry.index);
+        scratch.setAttribute("position", new Float32BufferAttribute(new Float32Array(count * 3), 3));
+    }
+    const mixer = new AnimationMixer(mesh);
+    const v = new Vector3();
+    list.forEach((clip, ci) => {
+        const p = plan[ci];
+        mixer.stopAllAction();
+        const action = mixer.clipAction(clip);
+        action.reset().play();
+        for (let f = 0; f < p.frames; f++) {
+            mixer.setTime(p.frames > 1 ? (f / p.frames) * clip.duration : 0);
+            mesh.updateMatrixWorld(true);
+            mesh.skeleton.update();
+            const sp = scratch?.getAttribute("position").array;
+            for (let i = 0; i < count; i++) {
+                mesh.getVertexPosition(i, v);
+                const row = (p.start + f) * rowsPerFrame + Math.floor(i / width);
+                const o = (row * width + (i % width)) * 4;
+                pos[o] = v.x;
+                pos[o + 1] = v.y;
+                pos[o + 2] = v.z;
+                pos[o + 3] = 1;
+                if (sp) {
+                    sp[i * 3] = v.x;
+                    sp[i * 3 + 1] = v.y;
+                    sp[i * 3 + 2] = v.z;
+                }
+            }
+            if (scratch && nor) {
+                scratch.getAttribute("position").needsUpdate = true;
+                scratch.computeVertexNormals();
+                const n = scratch.getAttribute("normal");
+                for (let i = 0; i < count; i++) {
+                    const row = (p.start + f) * rowsPerFrame + Math.floor(i / width);
+                    const o = (row * width + (i % width)) * 4;
+                    nor[o] = n.getX(i);
+                    nor[o + 1] = n.getY(i);
+                    nor[o + 2] = n.getZ(i);
+                    nor[o + 3] = 0;
+                }
+            }
+        }
+        action.stop();
+    });
+    mixer.uncacheRoot(mesh);
+    const tex = (data) => {
+        const t = new DataTexture(data, width, height, RGBAFormat, FloatType);
+        t.minFilter = NearestFilter;
+        t.magFilter = NearestFilter;
+        t.generateMipmaps = false;
+        t.needsUpdate = true;
+        return t;
+    };
+    return {
+        positions: tex(pos),
+        normals: nor ? tex(nor) : null,
+        vertexCount: count,
+        width,
+        rowsPerFrame,
+        totalFrames: total,
+        fps,
+        clips: plan,
+        geometry,
+    };
+}
+/**
+ * Thousands of animated characters in one draw: every instance samples the
+ * VAT at its own clip, phase and rate, then is rotated, scaled and placed
+ * from per-instance attributes. CPU work per instance is one 12-float write.
+ */
+export class VatCrowd {
+    vat;
+    capacity;
+    mesh;
+    time = uniform(0);
+    count = 0;
+    xform;
+    anim;
+    clip;
+    clipIndex = new Map();
+    constructor(vat, material, capacity, opts = {}) {
+        this.vat = vat;
+        this.capacity = capacity;
+        for (const c of vat.clips)
+            this.clipIndex.set(c.name, c);
+        const g = new InstancedBufferGeometry();
+        const src = vat.geometry;
+        if (src.index)
+            g.setIndex(src.index);
+        for (const name of ["position", "normal", "uv"]) {
+            const a = src.getAttribute(name);
+            if (a)
+                g.setAttribute(name, a);
+        }
+        g.instanceCount = 0;
+        const mk = () => {
+            const a = new InstancedBufferAttribute(new Float32Array(capacity * 4), 4);
+            a.setUsage(DynamicDrawUsage);
+            return a;
+        };
+        this.xform = mk(); // x, y, z, yaw
+        this.anim = mk(); // phase s, rate, scale, flash
+        this.clip = mk(); // start frame, frames
+        const X = instancedBufferAttribute(this.xform, "vec4");
+        const A = instancedBufferAttribute(this.anim, "vec4");
+        const C = instancedBufferAttribute(this.clip, "vec4");
+        const tt = this.time.mul(A.y).add(A.x).mul(vat.fps);
+        const frames = C.y.max(1);
+        const f0 = mod(floor(tt), frames);
+        const f1 = mod(f0.add(1), frames);
+        const a = fract(tt);
+        const vi = int(vertexIndex);
+        const w = int(vat.width);
+        const col = vi.mod(w);
+        const row = vi.div(w);
+        const rpf = int(vat.rowsPerFrame);
+        const at = (f) => ivec2(col, int(C.x.add(f)).mul(rpf).add(row));
+        const p0 = textureLoad(vat.positions, at(f0)).xyz;
+        const p1 = textureLoad(vat.positions, at(f1)).xyz;
+        const p = mix(p0, p1, a).mul(A.z);
+        const cy = cos(X.w);
+        const sy = sin(X.w);
+        const rot = (v) => {
+            const n = v;
+            return vec3(n.x.mul(cy).add(n.z.mul(sy)), n.y, n.x.mul(sy).negate().add(n.z.mul(cy)));
+        };
+        material.positionNode = rot(p).add(X.xyz);
+        const useNormals = (opts.bakedNormals ?? true) && vat.normals !== null && material.flatShading !== true;
+        if (useNormals && vat.normals) {
+            const n = mix(textureLoad(vat.normals, at(f0)).xyz, textureLoad(vat.normals, at(f1)).xyz, a);
+            const nw = varying(rot(n));
+            material.normalNode = normalize(cameraViewMatrix.mul(vec4(nw, 0)).xyz);
+        }
+        if ("emissiveNode" in material) {
+            material.emissiveNode = materialEmissive.add(vec3(varying(A.w)).mul(float(2.5)));
+        }
+        this.mesh = new Mesh(g, material);
+        this.mesh.frustumCulled = false;
+        this.mesh.castShadow = true;
+        this.mesh.name = "VatCrowd";
+    }
+    clipNamed(name) {
+        return this.clipIndex.get(name);
+    }
+    begin() {
+        this.count = 0;
+    }
+    /** Add one instance this frame. `phase` offsets the clip in seconds; `rate` scales playback. */
+    push(x, y, z, yaw, opts = {}) {
+        if (this.count >= this.capacity)
+            return;
+        const o = this.count * 4;
+        const X = this.xform.array;
+        const A = this.anim.array;
+        const C = this.clip.array;
+        X[o] = x;
+        X[o + 1] = y;
+        X[o + 2] = z;
+        X[o + 3] = yaw;
+        A[o] = opts.phase ?? 0;
+        A[o + 1] = opts.rate ?? 1;
+        A[o + 2] = opts.scale ?? 1;
+        A[o + 3] = Math.min(1, Math.max(0, opts.flash ?? 0));
+        const c = (opts.clip !== undefined ? this.clipIndex.get(opts.clip) : undefined) ?? this.vat.clips[0];
+        C[o] = c?.start ?? 0;
+        C[o + 1] = c?.frames ?? 1;
+        this.count++;
+    }
+    /** Upload the instances written since `begin` and set the time (seconds). */
+    end(timeSeconds) {
+        this.time.value = timeSeconds;
+        this.mesh.geometry.instanceCount = this.count;
+        for (const a of [this.xform, this.anim, this.clip]) {
+            a.clearUpdateRanges();
+            if (this.count > 0)
+                a.addUpdateRange(0, this.count * 4);
+            a.needsUpdate = true;
+        }
+    }
+    addTo(parent) {
+        parent.add(this.mesh);
+        return this;
+    }
+    dispose() {
+        this.mesh.removeFromParent();
+        this.mesh.geometry.dispose();
+        this.vat.positions.dispose();
+        this.vat.normals?.dispose();
+    }
+}

package/dist/runtime/renderer.d.ts

@@ -0,0 +1,19 @@
+import { WebGPURenderer } from "three/webgpu";
+export type Backend = "webgpu" | "webgl2";
+export interface RendererOptions {
+    /** Skip WebGPU even where the browser has it (testing, or a known-bad driver). */
+    readonly forceWebGL?: boolean;
+    readonly antialias?: boolean;
+    /** Cap on devicePixelRatio; the quality tier lowers it. Default 2. */
+    readonly maxPixelRatio?: number;
+}
+export interface RendererHandle {
+    readonly renderer: WebGPURenderer;
+    readonly backend: Backend;
+}
+/**
+ * three.js WebGPURenderer. It targets WebGPU where `navigator.gpu` yields an
+ * adapter and falls back to its WebGL2 backend otherwise, so one code path
+ * (node materials, instancing) covers every browser (spec §5).
+ */
+export declare function createRenderer(canvas: HTMLCanvasElement, opts?: RendererOptions): Promise<RendererHandle>;

package/dist/runtime/renderer.js

@@ -0,0 +1,18 @@
+import { WebGPURenderer } from "three/webgpu";
+/**
+ * three.js WebGPURenderer. It targets WebGPU where `navigator.gpu` yields an
+ * adapter and falls back to its WebGL2 backend otherwise, so one code path
+ * (node materials, instancing) covers every browser (spec §5).
+ */
+export async function createRenderer(canvas, opts = {}) {
+    const renderer = new WebGPURenderer({
+        canvas,
+        antialias: opts.antialias ?? true,
+        forceWebGL: opts.forceWebGL ?? false,
+        powerPreference: "high-performance",
+    });
+    renderer.setPixelRatio(Math.min(globalThis.devicePixelRatio || 1, opts.maxPixelRatio ?? 2));
+    await renderer.init();
+    const backend = renderer.backend.isWebGPUBackend ? "webgpu" : "webgl2";
+    return { renderer, backend };
+}

package/dist/runtime/stats.d.ts

@@ -0,0 +1,11 @@
+/** Rolling frame-time statistics (ms) over the last `size` frames. */
+export declare class FrameStats {
+    private readonly buf;
+    private i;
+    private n;
+    constructor(size?: number);
+    push(ms: number): void;
+    get count(): number;
+    mean(): number;
+    percentile(q: number): number;
+}

package/dist/runtime/stats.js

@@ -0,0 +1,29 @@
+/** Rolling frame-time statistics (ms) over the last `size` frames. */
+export class FrameStats {
+    buf;
+    i = 0;
+    n = 0;
+    constructor(size = 240) {
+        this.buf = new Float64Array(size);
+    }
+    push(ms) {
+        this.buf[this.i] = ms;
+        this.i = (this.i + 1) % this.buf.length;
+        this.n = Math.min(this.n + 1, this.buf.length);
+    }
+    get count() {
+        return this.n;
+    }
+    mean() {
+        let s = 0;
+        for (let k = 0; k < this.n; k++)
+            s += this.buf[k] ?? 0;
+        return this.n ? s / this.n : 0;
+    }
+    percentile(q) {
+        if (!this.n)
+            return 0;
+        const a = Array.from(this.buf.subarray(0, this.n)).sort((x, y) => x - y);
+        return a[Math.min(a.length - 1, Math.floor(q * (a.length - 1)))] ?? 0;
+    }
+}

package/dist/runtime/styles/handdrawn/ground.d.ts

@@ -0,0 +1,11 @@
+import type { Texture } from "three/webgpu";
+/** A meadow at the scale of one tile: washes, pen grass, pebbles and flowers. */
+export declare function paintField(seed?: number, size?: number): Texture | null;
+/**
+ * A pool of light as a painter leaves it: a soft wash with a ragged edge
+ * and a faint tide line, white with alpha (the template tints it). Not
+ * tiled: one pool per texture.
+ */
+export declare function paintGlow(seed?: number, size?: number): Texture | null;
+/** A paved yard tile: four slabs ruled in pencil, with stains and cracks. */
+export declare function paintPaving(seed?: number, size?: number): Texture | null;

package/dist/runtime/styles/handdrawn/ground.js

@@ -0,0 +1,282 @@
+/**
+ * Painted surfaces for template-built ground: a field (loose washes of
+ * green and ochre, pen grass, pebbles, a few flowers) and a paved yard
+ * (slabs ruled in pencil, stains, cracks). Painted once on a canvas with
+ * the style's pigments, tileable, deterministic. Original work.
+ */
+import { CanvasTexture, RepeatWrapping, SRGBColorSpace } from "three/webgpu";
+import { PIGMENTS } from "./palette.js";
+import { seeded } from "./textures.js";
+const css = (hex, a = 1) => `rgba(${(hex >> 16) & 255},${(hex >> 8) & 255},${hex & 255},${a})`;
+function canvas(size) {
+    if (typeof OffscreenCanvas !== "undefined") {
+        const c = new OffscreenCanvas(size, size);
+        const g = c.getContext("2d");
+        return g ? { c, g } : null;
+    }
+    if (typeof document === "undefined")
+        return null;
+    const c = document.createElement("canvas");
+    c.width = c.height = size;
+    const g = c.getContext("2d");
+    return g ? { c, g } : null;
+}
+/** Draw at (x, y) and at its wrapped copies near the edges, so the tile repeats seamlessly. */
+function tiled(size, x, y, reach, draw) {
+    for (const dx of [-size, 0, size]) {
+        for (const dy of [-size, 0, size]) {
+            const px = x + dx;
+            const py = y + dy;
+            if (px < -reach || py < -reach || px > size + reach || py > size + reach)
+                continue;
+            draw(px, py);
+        }
+    }
+}
+/** An irregular closed blob path (a wash's outline). */
+function blob(g, x, y, r, rnd, lumps = 9) {
+    const k = Array.from({ length: lumps }, () => 0.7 + rnd() * 0.6);
+    g.beginPath();
+    for (let i = 0; i <= 48; i++) {
+        const a = (i / 48) * Math.PI * 2;
+        const f = a / (Math.PI * 2) * lumps;
+        const i0 = Math.floor(f) % lumps;
+        const i1 = (i0 + 1) % lumps;
+        const t = f - Math.floor(f);
+        const s = t * t * (3 - 2 * t);
+        const rr = r * ((k[i0] ?? 1) * (1 - s) + (k[i1] ?? 1) * s);
+        const px = x + Math.cos(a) * rr;
+        const py = y + Math.sin(a) * rr * 0.8;
+        if (i === 0)
+            g.moveTo(px, py);
+        else
+            g.lineTo(px, py);
+    }
+    g.closePath();
+}
+/** A watercolour wash: a pale fill and a darker tide line where the water dried. */
+function wash(g, x, y, r, color, alpha, rnd) {
+    blob(g, x, y, r, rnd);
+    g.fillStyle = css(color, alpha);
+    g.fill();
+    g.strokeStyle = css(color, Math.min(1, alpha * 1.6));
+    g.lineWidth = 1.5 + rnd() * 1.5;
+    g.stroke();
+}
+/** A wobbly pen line from (x0, y0) to (x1, y1). */
+function penLine(g, x0, y0, x1, y1, rnd, wobble = 1.2) {
+    const n = Math.max(2, Math.ceil(Math.hypot(x1 - x0, y1 - y0) / 14));
+    g.beginPath();
+    g.moveTo(x0 + (rnd() - 0.5) * wobble, y0 + (rnd() - 0.5) * wobble);
+    for (let i = 1; i <= n; i++) {
+        const t = i / n;
+        g.lineTo(x0 + (x1 - x0) * t + (rnd() - 0.5) * wobble, y0 + (y1 - y0) * t + (rnd() - 0.5) * wobble);
+    }
+    g.stroke();
+}
+function texture(c) {
+    const t = new CanvasTexture(c);
+    t.wrapS = t.wrapT = RepeatWrapping;
+    t.colorSpace = SRGBColorSpace;
+    t.anisotropy = 4;
+    t.needsUpdate = true;
+    return t;
+}
+/** A meadow at the scale of one tile: washes, pen grass, pebbles and flowers. */
+export function paintField(seed = 3, size = 1024) {
+    const cv = canvas(size);
+    if (!cv)
+        return null;
+    const { c, g } = cv;
+    const rnd = seeded(seed);
+    // One pale base wash over the whole sheet, so the field reads as one place.
+    g.fillStyle = css(0xdcd8b0);
+    g.fillRect(0, 0, size, size);
+    // Wet-in-wet: many soft spots of green and ochre glazed over each other, no edges.
+    g.globalCompositeOperation = "multiply";
+    const soft = [PIGMENTS.leaf, PIGMENTS.sap, PIGMENTS.leaf, PIGMENTS.olive, PIGMENTS.naples, PIGMENTS.ochre];
+    for (let i = 0; i < 220; i++) {
+        const x = rnd() * size;
+        const y = rnd() * size;
+        const r = 40 + rnd() * 110;
+        const col = soft[i % soft.length] ?? PIGMENTS.leaf;
+        const a = 0.05 + rnd() * 0.06;
+        tiled(size, x, y, r, (px, py) => {
+            const grad = g.createRadialGradient(px, py, 0, px, py, r);
+            grad.addColorStop(0, css(col, a));
+            grad.addColorStop(0.6, css(col, a * 0.7));
+            grad.addColorStop(1, css(col, 0));
+            g.fillStyle = grad;
+            g.fillRect(px - r, py - r, r * 2, r * 2);
+        });
+    }
+    // A few washes that dried with a tide line: the hand of the painter.
+    const hard = [PIGMENTS.sap, PIGMENTS.olive, PIGMENTS.ochre, PIGMENTS.leaf];
+    for (let i = 0; i < 9; i++) {
+        const x = rnd() * size;
+        const y = rnd() * size;
+        const r = 40 + rnd() * 90;
+        const col = hard[i % hard.length] ?? PIGMENTS.sap;
+        tiled(size, x, y, r * 1.4, (px, py) => wash(g, px, py, r, col, 0.06 + rnd() * 0.04, seeded(seed * 100 + i)));
+    }
+    g.globalCompositeOperation = "source-over";
+    // Pen grass: little fans of strokes, in clumps.
+    g.lineCap = "round";
+    for (let k = 0; k < 70; k++) {
+        const cx = rnd() * size;
+        const cy = rnd() * size;
+        const n = 4 + Math.floor(rnd() * 8);
+        for (let i = 0; i < n; i++) {
+            const x = cx + (rnd() - 0.5) * 70;
+            const y = cy + (rnd() - 0.5) * 50;
+            const blades = 3 + Math.floor(rnd() * 3);
+            const h = 7 + rnd() * 9;
+            const tone = rnd() < 0.5 ? PIGMENTS.sepia : PIGMENTS.viridian;
+            tiled(size, x, y, 20, (px, py) => {
+                g.strokeStyle = css(tone, 0.55 + rnd() * 0.25);
+                g.lineWidth = 1 + rnd() * 0.7;
+                for (let b = 0; b < blades; b++) {
+                    const a = -Math.PI / 2 + (b / (blades - 1) - 0.5) * 1.1 + (rnd() - 0.5) * 0.3;
+                    g.beginPath();
+                    g.moveTo(px + (b - blades / 2) * 1.6, py);
+                    g.quadraticCurveTo(px + Math.cos(a) * h * 0.5, py + Math.sin(a) * h * 0.6, px + Math.cos(a) * h, py + Math.sin(a) * h);
+                    g.stroke();
+                }
+            });
+        }
+    }
+    // Pebbles: a pale fill and an inked outline, a shadow stroke underneath.
+    for (let i = 0; i < 70; i++) {
+        const x = rnd() * size;
+        const y = rnd() * size;
+        const rx = 3 + rnd() * 7;
+        const ry = rx * (0.55 + rnd() * 0.3);
+        const rot = rnd() * Math.PI;
+        tiled(size, x, y, 16, (px, py) => {
+            g.fillStyle = css(PIGMENTS.stone, 0.9);
+            g.strokeStyle = css(PIGMENTS.ink, 0.8);
+            g.lineWidth = 1.2;
+            g.beginPath();
+            g.ellipse(px, py, rx, ry, rot, 0, Math.PI * 2);
+            g.fill();
+            g.stroke();
+            g.strokeStyle = css(PIGMENTS.umber, 0.5);
+            g.beginPath();
+            g.ellipse(px + 0.8, py + 1.2, rx, ry, rot, 0.2, Math.PI - 0.2);
+            g.stroke();
+        });
+    }
+    // Flowers: dots of colour with an inked ring, here and there.
+    const petals = [PIGMENTS.vermilion, PIGMENTS.ochre, PIGMENTS.rose, PIGMENTS.white];
+    for (let i = 0; i < 46; i++) {
+        const x = rnd() * size;
+        const y = rnd() * size;
+        const col = petals[i % petals.length] ?? PIGMENTS.ochre;
+        tiled(size, x, y, 10, (px, py) => {
+            g.fillStyle = css(col, 0.85);
+            g.beginPath();
+            g.arc(px, py, 2.4, 0, Math.PI * 2);
+            g.fill();
+            g.strokeStyle = css(PIGMENTS.ink, 0.6);
+            g.lineWidth = 0.9;
+            g.stroke();
+        });
+    }
+    return texture(c);
+}
+/**
+ * A pool of light as a painter leaves it: a soft wash with a ragged edge
+ * and a faint tide line, white with alpha (the template tints it). Not
+ * tiled: one pool per texture.
+ */
+export function paintGlow(seed = 13, size = 256) {
+    const cv = canvas(size);
+    if (!cv)
+        return null;
+    const { c, g } = cv;
+    const rnd = seeded(seed);
+    const m = size / 2;
+    for (let k = 0; k < 5; k++) {
+        const r = m * (0.5 + k * 0.1);
+        blob(g, m + (rnd() - 0.5) * 6, m + (rnd() - 0.5) * 6, r, rnd, 11);
+        g.fillStyle = `rgba(255,255,255,${0.14 - k * 0.018})`;
+        g.fill();
+    }
+    blob(g, m, m, m * 0.86, rnd, 13);
+    g.strokeStyle = "rgba(255,255,255,0.32)";
+    g.lineWidth = 2.5;
+    g.stroke();
+    const t = new CanvasTexture(c);
+    t.colorSpace = SRGBColorSpace;
+    t.needsUpdate = true;
+    return t;
+}
+/** A paved yard tile: four slabs ruled in pencil, with stains and cracks. */
+export function paintPaving(seed = 7, size = 1024) {
+    const cv = canvas(size);
+    if (!cv)
+        return null;
+    const { c, g } = cv;
+    const rnd = seeded(seed);
+    g.fillStyle = css(0xe6dfcf);
+    g.fillRect(0, 0, size, size);
+    const slabs = 4;
+    const s = size / slabs;
+    const tones = [PIGMENTS.slate, PIGMENTS.stone, PIGMENTS.cerulean, PIGMENTS.stone];
+    for (let i = 0; i < slabs; i++) {
+        for (let j = 0; j < slabs; j++) {
+            const col = tones[Math.floor(rnd() * tones.length)] ?? PIGMENTS.stone;
+            g.fillStyle = css(col, 0.14 + rnd() * 0.12);
+            g.fillRect(i * s + 3, j * s + 3, s - 6, s - 6);
+        }
+    }
+    for (let i = 0; i < 14; i++) {
+        const x = rnd() * size;
+        const y = rnd() * size;
+        const r = 20 + rnd() * 60;
+        tiled(size, x, y, r * 1.4, (px, py) => wash(g, px, py, r, i % 2 ? PIGMENTS.umber : PIGMENTS.paynes, 0.08 + rnd() * 0.06, seeded(seed * 50 + i)));
+    }
+    // Seams: two pencil passes each, slightly off one another.
+    g.strokeStyle = css(PIGMENTS.paynes, 0.55);
+    g.lineCap = "round";
+    for (let pass = 0; pass < 2; pass++) {
+        g.lineWidth = pass === 0 ? 2.2 : 1.1;
+        for (let i = 0; i <= slabs; i++) {
+            const p = i * s + (pass ? 1.5 : 0);
+            penLine(g, p, 0, p, size, rnd, 1.6);
+            penLine(g, 0, p, size, p, rnd, 1.6);
+        }
+    }
+    // Cracks: short zig-zags in ink.
+    g.strokeStyle = css(PIGMENTS.ink, 0.6);
+    g.lineWidth = 1;
+    for (let i = 0; i < 18; i++) {
+        let x = rnd() * size;
+        let y = rnd() * size;
+        g.beginPath();
+        g.moveTo(x, y);
+        const n = 3 + Math.floor(rnd() * 4);
+        let a = rnd() * Math.PI * 2;
+        for (let k = 0; k < n; k++) {
+            a += (rnd() - 0.5) * 1.4;
+            x += Math.cos(a) * (6 + rnd() * 12);
+            y += Math.sin(a) * (6 + rnd() * 12);
+            g.lineTo(x, y);
+        }
+        g.stroke();
+    }
+    // Hatched corners where the slabs meet, a draughtsman's habit.
+    g.strokeStyle = css(PIGMENTS.paynes, 0.35);
+    g.lineWidth = 1;
+    for (let i = 0; i < slabs; i++) {
+        for (let j = 0; j < slabs; j++) {
+            if (rnd() < 0.5)
+                continue;
+            const x = i * s + 6;
+            const y = j * s + 6;
+            for (let k = 0; k < 5; k++)
+                penLine(g, x + k * 5, y, x, y + k * 5, rnd, 0.6);
+        }
+    }
+    return texture(c);
+}

package/dist/runtime/styles/handdrawn/index.d.ts

@@ -0,0 +1,4 @@
+import type { StyleKit } from "../kit.js";
+/** Lines, hatching and wash borders are redrawn this many times a second (the boil). */
+export declare const BOIL_FPS = 8;
+export declare const handdrawnKit: StyleKit;