@woosh/meep-engine 3.21.0 → 3.22.0

package/src/engine/physics/cloth/playground/rig_main.js

@@ -0,0 +1,955 @@
+import {
+    TRANSFORM64_ROTATION_OFFSET,
+    TRANSFORM64_TRANSLATION_OFFSET,
+    Transform64
+} from "../../../ecs/transform/Transform64.js";
+import { v3_quaternion_apply } from "../../../../core/geom/vec3/v3_quaternion_apply.js";
+import { ClothFlags } from "../ecs/ClothFlags.js";
+import { Cloth } from "../ecs/Cloth.js";
+import { CLOTH_DYNAMICS_BY_NAME } from "../ecs/cloth_dynamics_library.js";
+import { find_non_finite_cloth_state } from "../solver/find_non_finite_cloth_state.js";
+import { PlaygroundCamera, project } from "./cloth_playground_draw.js";
+import { build_cloth_rig, CLOTH_RIGS } from "./rig_build.js";
+
+/**
+ * # Cloth rigs — the M1 playground
+ *
+ * `npm run dev --workspace @woosh/meep-engine`, then
+ * <http://localhost:5173/src/engine/physics/cloth/playground/rig.html>.
+ *
+ * The sibling of `index.html`, one layer up. That page is the solver with a
+ * canvas attached and no ECS at all, because at M0 there was none; this one is
+ * the **entity-subtree path** — a real `EntityManager`, real entities with real
+ * `TransformAttachment`s, a `Cloth` component on top, and `ClothSystem` walking
+ * the subtree and writing `Transform64` back. Every point on screen is an
+ * entity's world transform, read out of the component the system wrote it into.
+ *
+ * The rigs are the ones §17 asks M1 to show — a rope, a chain, and a
+ * multi-strand rig under one `Cloth` — plus two that make the walk's two rules
+ * visible: a hanging sign whose sign is a `ClothExclude`, and a rope with a
+ * second `Cloth` partway down. The **cloths / particles** readout is the whole
+ * of §3.1's coupled-solve claim: five strands, one cloth, one state, one
+ * colouring.
+ *
+ * `globalThis.cloth_rig_playground` exposes `{ control, camera, ready, rebuild,
+ * step_once, render, scene }` for a driver script. `requestAnimationFrame` does
+ * not fire while a browser pane is hidden, and everything on this page hangs
+ * off it — so a driver drives `step_once` and `render` itself and waits for no
+ * frames at all. `ready` is the first `rebuild`, and `rebuild` returns a
+ * promise because `EntityManager#startup` does.
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+
+/** The rate `ClothSystem` is stepped at. */
+const FIXED_STEP = 1 / 60;
+
+/** §17's target, for the budget bar. */
+const BUDGET_MS = 2;
+
+/** How many recent step timings the readout keeps. */
+const TIMING_WINDOW = 120;
+
+const element = (id) => document.getElementById(id);
+
+const canvas = element('view');
+const context = canvas.getContext('2d');
+
+const camera = new PlaygroundCamera();
+
+const control = {
+    rig: 'rope',
+    dynamics: 'ROPE',
+    links: 24,
+    spacing: 0.05,
+
+    stretch: 0.98,
+    bend: 0.06,
+    damping: 0.1,
+    slack: 1,
+    inertia: 1,
+    blend: 1,
+    substeps: 2,
+    iterations: 4,
+
+    motion: 'still',
+    keep: false,
+    never_sleep: false,
+
+    view: 'links',
+    running: true
+};
+
+/** @type {import('./rig_build.js').ClothRigScene} */
+let scene = null;
+
+const timing = [];
+
+let last_ms = 0;
+let elapsed = 0;
+
+const SCREEN = new Float64Array(2);
+const POINT = new Float64Array(3);
+
+// ---------------------------------------------------------------- the rig
+
+async function rebuild() {
+    scene = null;
+
+    scene = await build_cloth_rig({
+        rig: control.rig,
+        dynamics: control.dynamics,
+        links: control.links,
+        spacing: control.spacing
+    });
+
+    apply_dynamics();
+
+    timing.length = 0;
+    elapsed = 0;
+
+    element('tripwire').textContent = 'ok';
+    element('tripwire').className = 'good';
+
+    // One step so the subtree is walked and the readout has something to say.
+    step_once();
+
+    frame_camera();
+}
+
+/**
+ * Write the sliders into every `Cloth` in the rig. The library entries are
+ * frozen and shared, so each cloth owns a clone — which is exactly the
+ * `.clone()` step §3.3 describes, done by a page rather than by an author.
+ */
+function apply_dynamics() {
+    if (scene === null) {
+        return;
+    }
+
+    for (const anchor of scene.anchor) {
+        const cloth = scene.ecd.getComponent(anchor, Cloth);
+
+        if (cloth === undefined) {
+            continue;
+        }
+
+        if (cloth.dynamics.isClothDynamics !== true || Object.isFrozen(cloth.dynamics)) {
+            cloth.dynamics = cloth.dynamics.clone();
+        }
+
+        cloth.dynamics.stretch = control.stretch;
+        cloth.dynamics.bend = control.bend;
+        cloth.dynamics.damping = control.damping;
+        cloth.dynamics.slack = control.slack;
+        cloth.dynamics.inertia = control.inertia;
+        cloth.dynamics.substeps = control.substeps;
+        cloth.dynamics.iterations = control.iterations;
+
+        cloth.blend = control.blend;
+
+        cloth.flags = (control.keep ? ClothFlags.TeleportKeep : 0)
+            | (control.never_sleep ? ClothFlags.NeverSleep : 0);
+    }
+}
+
+/**
+ * Pull the sliders from a library entry, so picking one shows what it is made
+ * of rather than silently overriding it.
+ */
+function adopt_library(name) {
+    const entry = CLOTH_DYNAMICS_BY_NAME[name];
+
+    if (entry === undefined) {
+        return;
+    }
+
+    control.dynamics = name;
+    control.stretch = entry.stretch;
+    control.bend = entry.bend;
+    control.damping = entry.damping;
+    control.slack = entry.slack;
+    control.inertia = entry.inertia;
+    control.substeps = entry.substeps;
+    control.iterations = entry.iterations;
+}
+
+function frame_camera() {
+    let min_x = Infinity, min_y = Infinity, min_z = Infinity;
+    let max_x = -Infinity, max_y = -Infinity, max_z = -Infinity;
+
+    for (const chain of scene.strand) {
+        for (const entity of chain) {
+            const t = scene.ecd.getComponent(entity, Transform64);
+
+            if (t === undefined) {
+                continue;
+            }
+
+            min_x = Math.min(min_x, t[TRANSFORM64_TRANSLATION_OFFSET]);
+            max_x = Math.max(max_x, t[TRANSFORM64_TRANSLATION_OFFSET]);
+            min_y = Math.min(min_y, t[TRANSFORM64_TRANSLATION_OFFSET + 1]);
+            max_y = Math.max(max_y, t[TRANSFORM64_TRANSLATION_OFFSET + 1]);
+            min_z = Math.min(min_z, t[TRANSFORM64_TRANSLATION_OFFSET + 2]);
+            max_z = Math.max(max_z, t[TRANSFORM64_TRANSLATION_OFFSET + 2]);
+        }
+    }
+
+    if (!Number.isFinite(min_x)) {
+        return;
+    }
+
+    camera.target[0] = (min_x + max_x) * 0.5;
+    camera.target[1] = (min_y + max_y) * 0.5;
+    camera.target[2] = (min_z + max_z) * 0.5;
+
+    camera.distance = Math.max(max_x - min_x, max_y - min_y, max_z - min_z, 0.05) * 2.2;
+}
+
+// ---------------------------------------------------------------- the loop
+
+/**
+ * Drive the anchor. This is the only thing on the page that writes a transform
+ * the cloth does not own, and it stands in for whatever poses an anchor in a
+ * real scene — an animation, a path follower, a vehicle.
+ */
+function drive_anchor() {
+    if (scene === null || scene.anchor.length === 0) {
+        return;
+    }
+
+    const transform = scene.ecd.getComponent(scene.anchor[0], Transform64);
+
+    if (transform === undefined) {
+        return;
+    }
+
+    const reach = control.links * control.spacing;
+
+    switch (control.motion) {
+        case 'sway':
+            transform.setTranslation(Math.sin(elapsed * 2.2) * reach * 0.7, 0, 0);
+            break;
+
+        case 'sprint': {
+            // A square wave in velocity, which is §7 P7's own profile: the
+            // worst thing locomotion does to a hanging thing.
+            const phase = Math.floor(elapsed) % 4;
+
+            const speed = phase === 0 ? 6 : (phase === 2 ? -6 : 0);
+
+            transform[TRANSFORM64_TRANSLATION_OFFSET] += speed * FIXED_STEP;
+            break;
+        }
+
+        case 'spin':
+            transform.setRotation(0, Math.sin(elapsed * 1.6), 0, Math.cos(elapsed * 1.6));
+            break;
+
+        case 'orbit':
+            transform.setTranslation(
+                Math.cos(elapsed * 1.8) * reach * 0.6,
+                Math.sin(elapsed * 2.6) * reach * 0.25,
+                Math.sin(elapsed * 1.8) * reach * 0.6
+            );
+            break;
+
+        default:
+            break;
+    }
+
+    transform.updateMatrix();
+}
+
+function step_once() {
+    if (scene === null) {
+        return;
+    }
+
+    elapsed += FIXED_STEP;
+
+    drive_anchor();
+
+    const started = performance.now();
+
+    try {
+        scene.cloth.fixedUpdate(FIXED_STEP);
+    } catch (error) {
+        control.running = false;
+
+        element('tripwire').textContent = String(error.message).slice(0, 90);
+        element('tripwire').className = 'bad';
+        element('pause').textContent = 'run';
+
+        return;
+    }
+
+    last_ms = performance.now() - started;
+
+    timing.push(last_ms);
+
+    if (timing.length > TIMING_WINDOW) {
+        timing.shift();
+    }
+}
+
+/**
+ * Paint one frame from the state as it stands, stepping nothing. Separate from
+ * {@link frame} so a driver can ask for a picture without also asking for a
+ * simulation step, and so it can get one at all — see the module docblock on
+ * `requestAnimationFrame`.
+ */
+function render() {
+    if (scene === null) {
+        return;
+    }
+
+    draw();
+    refresh_readout();
+}
+
+function frame() {
+    if (control.running) {
+        step_once();
+    }
+
+    render();
+
+    requestAnimationFrame(frame);
+}
+
+// ---------------------------------------------------------------- drawing
+
+function draw() {
+    const width = canvas.width = canvas.clientWidth;
+    const height = canvas.height = canvas.clientHeight;
+
+    context.clearRect(0, 0, width, height);
+    context.fillStyle = '#0d0f12';
+    context.fillRect(0, 0, width, height);
+
+    draw_ground(width, height);
+
+    if (control.view === 'animated') {
+        draw_animated(width, height);
+    }
+
+    for (const chain of scene.strand) {
+        draw_chain(chain, width, height);
+    }
+
+    if (control.view === 'frames') {
+        for (const chain of scene.strand) {
+            for (const entity of chain) {
+                draw_frame(entity, width, height);
+            }
+        }
+    }
+
+    for (const entity of scene.excluded) {
+        draw_marker(entity, width, height, '#e5b54a', 6);
+    }
+
+    for (const anchor of scene.anchor) {
+        draw_marker(anchor, width, height, '#e5533d', 5);
+    }
+}
+
+/**
+ * @param {number[]} chain
+ * @param {number} width
+ * @param {number} height
+ */
+function draw_chain(chain, width, height) {
+    context.strokeStyle = '#7f8b9c';
+    context.lineWidth = 2;
+    context.beginPath();
+
+    let started = false;
+
+    for (const entity of chain) {
+        const t = scene.ecd.getComponent(entity, Transform64);
+
+        if (t === undefined) {
+            continue;
+        }
+
+        const depth = project(
+            SCREEN, camera,
+            t[TRANSFORM64_TRANSLATION_OFFSET],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 1],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 2],
+            width, height
+        );
+
+        if (depth <= 0.01) {
+            started = false;
+
+            continue;
+        }
+
+        if (started) {
+            context.lineTo(SCREEN[0], SCREEN[1]);
+        } else {
+            context.moveTo(SCREEN[0], SCREEN[1]);
+
+            started = true;
+        }
+    }
+
+    context.stroke();
+
+    context.fillStyle = '#c9d2de';
+
+    for (const entity of chain) {
+        const t = scene.ecd.getComponent(entity, Transform64);
+
+        if (t === undefined) {
+            continue;
+        }
+
+        const depth = project(
+            SCREEN, camera,
+            t[TRANSFORM64_TRANSLATION_OFFSET],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 1],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 2],
+            width, height
+        );
+
+        if (depth <= 0.01) {
+            continue;
+        }
+
+        context.beginPath();
+        context.arc(SCREEN[0], SCREEN[1], 2.5, 0, Math.PI * 2);
+        context.fill();
+    }
+}
+
+/**
+ * The pose the cloth is leashed to — `blend = 0`'s answer, drawn faintly beside
+ * the simulated one. The gap between the two lines is what `slack` bounds.
+ */
+function draw_animated(width, height) {
+    for (const anchor of scene.anchor) {
+        const instance = scene.cloth.instanceOf(anchor);
+
+        if (instance === undefined || !instance.seeded) {
+            continue;
+        }
+
+        const transform = instance.node_transform[0];
+
+        context.strokeStyle = 'rgba(111, 168, 220, 0.45)';
+        context.lineWidth = 1;
+
+        for (let node = 1; node < instance.node_count; node++) {
+            const parent = instance.node_parent[node];
+
+            context.beginPath();
+
+            let ok = true;
+
+            for (const which of [parent, node]) {
+                v3_quaternion_apply(
+                    POINT, 0,
+                    instance.animated_position[which * 3],
+                    instance.animated_position[which * 3 + 1],
+                    instance.animated_position[which * 3 + 2],
+                    transform[TRANSFORM64_ROTATION_OFFSET],
+                    transform[TRANSFORM64_ROTATION_OFFSET + 1],
+                    transform[TRANSFORM64_ROTATION_OFFSET + 2],
+                    transform[TRANSFORM64_ROTATION_OFFSET + 3]
+                );
+
+                const depth = project(
+                    SCREEN, camera,
+                    POINT[0] + transform[TRANSFORM64_TRANSLATION_OFFSET],
+                    POINT[1] + transform[TRANSFORM64_TRANSLATION_OFFSET + 1],
+                    POINT[2] + transform[TRANSFORM64_TRANSLATION_OFFSET + 2],
+                    width, height
+                );
+
+                if (depth <= 0.01) {
+                    ok = false;
+
+                    break;
+                }
+
+                if (which === parent) {
+                    context.moveTo(SCREEN[0], SCREEN[1]);
+                } else {
+                    context.lineTo(SCREEN[0], SCREEN[1]);
+                }
+            }
+
+            if (ok) {
+                context.stroke();
+            }
+        }
+    }
+}
+
+/**
+ * The orientation the write-back reconstructed, as a short axis triple. §11.1's
+ * "rotation derived from the direction to the child" is only visible here.
+ */
+function draw_frame(entity, width, height) {
+    const t = scene.ecd.getComponent(entity, Transform64);
+
+    if (t === undefined) {
+        return;
+    }
+
+    const length = control.spacing * 0.6;
+
+    const axes = [
+        [length, 0, 0, '#e5533d'],
+        [0, length, 0, '#5ad19a'],
+        [0, 0, length, '#6fa8dc']
+    ];
+
+    const origin_depth = project(
+        SCREEN, camera,
+        t[TRANSFORM64_TRANSLATION_OFFSET],
+        t[TRANSFORM64_TRANSLATION_OFFSET + 1],
+        t[TRANSFORM64_TRANSLATION_OFFSET + 2],
+        width, height
+    );
+
+    if (origin_depth <= 0.01) {
+        return;
+    }
+
+    const ox = SCREEN[0];
+    const oy = SCREEN[1];
+
+    for (const [ax, ay, az, colour] of axes) {
+        v3_quaternion_apply(
+            POINT, 0, ax, ay, az,
+            t[TRANSFORM64_ROTATION_OFFSET],
+            t[TRANSFORM64_ROTATION_OFFSET + 1],
+            t[TRANSFORM64_ROTATION_OFFSET + 2],
+            t[TRANSFORM64_ROTATION_OFFSET + 3]
+        );
+
+        const depth = project(
+            SCREEN, camera,
+            t[TRANSFORM64_TRANSLATION_OFFSET] + POINT[0],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 1] + POINT[1],
+            t[TRANSFORM64_TRANSLATION_OFFSET + 2] + POINT[2],
+            width, height
+        );
+
+        if (depth <= 0.01) {
+            continue;
+        }
+
+        context.strokeStyle = colour;
+        context.lineWidth = 1;
+        context.beginPath();
+        context.moveTo(ox, oy);
+        context.lineTo(SCREEN[0], SCREEN[1]);
+        context.stroke();
+    }
+}
+
+function draw_marker(entity, width, height, colour, radius) {
+    const t = scene.ecd.getComponent(entity, Transform64);
+
+    if (t === undefined) {
+        return;
+    }
+
+    const depth = project(
+        SCREEN, camera,
+        t[TRANSFORM64_TRANSLATION_OFFSET],
+        t[TRANSFORM64_TRANSLATION_OFFSET + 1],
+        t[TRANSFORM64_TRANSLATION_OFFSET + 2],
+        width, height
+    );
+
+    if (depth <= 0.01) {
+        return;
+    }
+
+    context.fillStyle = colour;
+    context.beginPath();
+    context.arc(SCREEN[0], SCREEN[1], radius, 0, Math.PI * 2);
+    context.fill();
+}
+
+function draw_ground(width, height) {
+    const step = Math.max(control.spacing * 4, 0.1);
+
+    context.strokeStyle = 'rgba(139, 147, 159, 0.16)';
+    context.lineWidth = 1;
+
+    const extent = 8;
+
+    for (let i = -extent; i <= extent; i++) {
+        for (const [ax, az, bx, bz] of [
+            [i * step, -extent * step, i * step, extent * step],
+            [-extent * step, i * step, extent * step, i * step]
+        ]) {
+            const a = project(SCREEN, camera, ax, -control.links * control.spacing * 1.15, az, width, height);
+
+            const x0 = SCREEN[0];
+            const y0 = SCREEN[1];
+
+            const b = project(SCREEN, camera, bx, -control.links * control.spacing * 1.15, bz, width, height);
+
+            if (a <= 0.01 || b <= 0.01) {
+                continue;
+            }
+
+            context.beginPath();
+            context.moveTo(x0, y0);
+            context.lineTo(SCREEN[0], SCREEN[1]);
+            context.stroke();
+        }
+    }
+}
+
+// ---------------------------------------------------------------- readout
+
+function refresh_readout() {
+    element('ms').textContent = last_ms.toFixed(3);
+
+    if (timing.length > 0) {
+        const sorted = timing.slice().sort((a, b) => a - b);
+
+        element('ms_min').textContent = `(min ${sorted[0].toFixed(3)})`;
+
+        const bar = element('budget');
+
+        bar.classList.toggle('over', sorted[0] > BUDGET_MS);
+        bar.firstElementChild.style.width = `${Math.min(100, sorted[0] / BUDGET_MS * 100)}%`;
+    }
+
+    let particles = 0;
+    let stretch = 0;
+    let bend = 0;
+    let leash = 0;
+    let colours = 0;
+    let tether = 0;
+    let speed = 0;
+    let teleports = 0;
+    let asleep = 0;
+    let seeded = 0;
+    let trouble = "";
+
+    for (const anchor of scene.anchor) {
+        const instance = scene.cloth.instanceOf(anchor);
+
+        if (instance === undefined || !instance.seeded) {
+            continue;
+        }
+
+        seeded++;
+
+        const state = instance.state;
+
+        particles += state.particle_count;
+        stretch += state.stretch_count;
+        bend += state.bend_count;
+        leash += state.leash_count;
+        colours = Math.max(colours, state.colour_count);
+        teleports += instance.teleport_count;
+
+        if (instance.asleep) {
+            asleep++;
+        }
+
+        if (trouble === "") {
+            trouble = find_non_finite_cloth_state(state);
+        }
+
+        const origin = instance.particle_of_node[0] * 3;
+
+        for (let node = 1; node < instance.node_count; node++) {
+            const p = instance.particle_of_node[node] * 3;
+
+            const distance = Math.hypot(
+                state.position[p] - state.position[origin],
+                state.position[p + 1] - state.position[origin + 1],
+                state.position[p + 2] - state.position[origin + 2]
+            );
+
+            tether = Math.max(tether, distance / instance.geodesic[node]);
+        }
+
+        for (let i = 0; i < state.particle_count; i++) {
+            const p = i * 3;
+
+            speed = Math.max(speed, Math.hypot(state.velocity[p], state.velocity[p + 1], state.velocity[p + 2]));
+        }
+    }
+
+    element('counts').textContent = `${seeded} / ${particles}`;
+    element('rows').textContent = `${stretch} / ${bend} / ${leash}`;
+    element('colours').textContent = String(colours);
+    element('tether').textContent = tether.toFixed(4);
+    element('speed').textContent = `${speed.toFixed(2)} m/s`;
+    element('teleports').textContent = String(teleports);
+
+    const sleep_cell = element('asleep');
+
+    sleep_cell.textContent = asleep === 0 ? 'no' : `${asleep} of ${seeded}`;
+    sleep_cell.className = asleep > 0 ? 'yes' : '';
+
+    if (trouble !== "" && element('tripwire').className !== 'bad') {
+        element('tripwire').textContent = trouble.slice(0, 90);
+        element('tripwire').className = 'bad';
+    }
+}
+
+// ---------------------------------------------------------------- controls
+
+function build_rig_buttons() {
+    const host = element('rigs');
+
+    for (const rig of CLOTH_RIGS) {
+        const button = document.createElement('button');
+
+        button.innerHTML = `${rig.label}<small>${rig.blurb}</small>`;
+
+        button.addEventListener('click', () => {
+            control.rig = rig.id;
+
+            adopt_library(rig.dynamics);
+
+            sync_inputs();
+            rebuild();
+        });
+
+        host.appendChild(button);
+    }
+}
+
+function build_library_options() {
+    const select = element('dynamics');
+
+    for (const name of Object.keys(CLOTH_DYNAMICS_BY_NAME)) {
+        const option = document.createElement('option');
+
+        option.value = name;
+        option.textContent = name.toLowerCase();
+
+        select.appendChild(option);
+    }
+}
+
+/**
+ * @param {string} id
+ * @param {string} key
+ * @param {function(number): string} format
+ * @param {boolean} rebuilds
+ */
+function bind_range(id, key, format, rebuilds) {
+    const input = element(id);
+    const output = element(`${id}_out`);
+
+    const refresh = () => {
+        input.value = String(control[key]);
+        output.textContent = format(control[key]);
+    };
+
+    input.addEventListener('input', () => {
+        control[key] = Number(input.value);
+
+        output.textContent = format(control[key]);
+
+        if (rebuilds) {
+            rebuild();
+        } else {
+            apply_dynamics();
+        }
+    });
+
+    refresh();
+
+    return refresh;
+}
+
+const refreshers = [];
+
+function sync_inputs() {
+    for (const refresh of refreshers) {
+        refresh();
+    }
+
+    element('dynamics').value = control.dynamics;
+    element('motion').value = control.motion;
+}
+
+function bind_controls() {
+    refreshers.push(bind_range('links', 'links', v => String(v), true));
+    refreshers.push(bind_range('spacing', 'spacing', v => `${(v * 100).toFixed(1)} cm`, true));
+
+    refreshers.push(bind_range('stretch', 'stretch', v => v.toFixed(2), false));
+    refreshers.push(bind_range('bend', 'bend', v => v.toFixed(2), false));
+    refreshers.push(bind_range('damping', 'damping', v => v.toFixed(2), false));
+    refreshers.push(bind_range('slack', 'slack', v => v.toFixed(2), false));
+    refreshers.push(bind_range('inertia', 'inertia', v => v.toFixed(2), false));
+    refreshers.push(bind_range('blend', 'blend', v => v.toFixed(2), false));
+    refreshers.push(bind_range('substeps', 'substeps', v => String(v), false));
+    refreshers.push(bind_range('iterations', 'iterations', v => String(v), false));
+
+    element('dynamics').addEventListener('change', (event) => {
+        adopt_library(event.target.value);
+
+        sync_inputs();
+        apply_dynamics();
+    });
+
+    element('motion').addEventListener('change', (event) => {
+        control.motion = event.target.value;
+    });
+
+    element('teleport').addEventListener('click', () => {
+        if (scene === null) {
+            return;
+        }
+
+        const transform = scene.ecd.getComponent(scene.anchor[0], Transform64);
+
+        transform[TRANSFORM64_TRANSLATION_OFFSET] += 1000;
+        transform.updateMatrix();
+
+        // Chase it, or there is nothing to look at.
+        camera.target[0] += 1000;
+    });
+
+    for (const [id, key] of [['keep', 'keep'], ['never_sleep', 'never_sleep']]) {
+        element(id).addEventListener('click', () => {
+            control[key] = !control[key];
+
+            element(id).classList.toggle('on', control[key]);
+
+            apply_dynamics();
+        });
+    }
+
+    for (const [id, view] of [['view_links', 'links'], ['view_animated', 'animated'], ['view_frames', 'frames']]) {
+        element(id).addEventListener('click', () => {
+            control.view = view;
+
+            for (const other of ['view_links', 'view_animated', 'view_frames']) {
+                element(other).classList.toggle('on', other === id);
+            }
+        });
+    }
+
+    element('pause').addEventListener('click', () => {
+        control.running = !control.running;
+
+        element('pause').textContent = control.running ? 'pause' : 'run';
+    });
+
+    element('single').addEventListener('click', () => step_once());
+
+    element('reset').addEventListener('click', () => rebuild());
+
+    element('poke').addEventListener('click', () => {
+        if (scene === null) {
+            return;
+        }
+
+        for (const anchor of scene.anchor) {
+            const instance = scene.cloth.instanceOf(anchor);
+
+            if (instance === undefined || !instance.seeded) {
+                continue;
+            }
+
+            scene.cloth.wake(anchor);
+
+            for (let i = 0; i < instance.state.particle_count; i++) {
+                instance.state.velocity[i * 3] += (Math.random() - 0.5) * 6;
+                instance.state.velocity[i * 3 + 2] += (Math.random() - 0.5) * 6;
+            }
+        }
+    });
+}
+
+// ---------------------------------------------------------------- camera
+
+let dragging = false;
+let panning = false;
+let last_x = 0;
+let last_y = 0;
+
+canvas.addEventListener('pointerdown', (event) => {
+    dragging = true;
+    panning = event.shiftKey || event.button === 2;
+
+    last_x = event.clientX;
+    last_y = event.clientY;
+
+    canvas.classList.add('grabbing');
+    canvas.setPointerCapture(event.pointerId);
+});
+
+canvas.addEventListener('pointermove', (event) => {
+    if (!dragging) {
+        return;
+    }
+
+    const dx = event.clientX - last_x;
+    const dy = event.clientY - last_y;
+
+    last_x = event.clientX;
+    last_y = event.clientY;
+
+    if (panning) {
+        const scale = camera.distance * 0.0016;
+
+        camera.target[0] -= (dx * Math.cos(camera.yaw)) * scale;
+        camera.target[2] += (dx * Math.sin(camera.yaw)) * scale;
+        camera.target[1] += dy * scale;
+    } else {
+        camera.yaw -= dx * 0.006;
+        camera.pitch = Math.max(-1.4, Math.min(1.4, camera.pitch + dy * 0.006));
+    }
+});
+
+canvas.addEventListener('pointerup', (event) => {
+    dragging = false;
+
+    canvas.classList.remove('grabbing');
+    canvas.releasePointerCapture(event.pointerId);
+});
+
+canvas.addEventListener('wheel', (event) => {
+    event.preventDefault();
+
+    camera.distance = Math.max(0.05, camera.distance * Math.exp(event.deltaY * 0.001));
+}, { passive: false });
+
+canvas.addEventListener('contextmenu', (event) => event.preventDefault());
+
+// ---------------------------------------------------------------- start
+
+build_rig_buttons();
+build_library_options();
+adopt_library('ROPE');
+bind_controls();
+sync_inputs();
+
+const ready = rebuild();
+
+globalThis.cloth_rig_playground = {
+    control,
+    camera,
+    rebuild,
+    step_once,
+    render,
+    ready,
+    get scene() {
+        return scene;
+    }
+};
+
+requestAnimationFrame(frame);