@moood/render 0.1.3 → 0.1.4

package/README.md

@@ -15,6 +15,11 @@ network): a PNG and the errors the scene's code threw.
   same every run. The same moment and state give the same picture — pixel-close, not bit-equal (the
   GPU emulation's rounding): compare frames with a small tolerance.
 - **`--state '{"dawn": 1}'`** — values over the scene's starting state.
+- **`--set '[[4, "beat", "cover"], [6, "dawn", 1, 3]]'`** — values set as the scene goes, as a game sets
+  them: `[second, key, value, over?, ease?]` (the clock stops at each one's second). A film's beat at
+  its second; a branch begun mid-beat.
+- **What the scene told** (`scene.tell` — a film's `beat:<name>` as a beat ends) is printed with its
+  second: `told at 4.50s: beat:cover`.
 - **`--device`** — `16:9` (1600×900), `4:3`, `21:9` (the same height), `tile` (640×360), `big` (1920×1080).
 - **`--bare`** — without the title and captions over it.
 - **The browser**: `--chromium <path>`, or `MOOOD_CHROMIUM`, or Playwright's own (`PLAYWRIGHT_BROWSERS_PATH`).
@@ -24,6 +29,19 @@ From code:
     import { render, readScene, readModules } from '@moood/render';
     const spec = readScene('world/scenes/kukhnya');
     const [frame] = await render({ spec, modules: readModules('world', spec), at: [3] });
-    // frame.png (a Buffer), frame.errors
+    // frame.png (a Buffer), frame.errors, frame.tells ([{at, text, about}] so far)
 
 Exits 1 if the scene's code threw.
+
+## A person's motion
+
+A motion made by moood's `make_motion` (NVIDIA Kimodo), as frames on its body — the same picture as the
+MCP's `look_at_motion`. Save `list_motions(key, body=true)` as a file, then:
+
+    moood-render motion walk.json --at 0,1,2,3 --views front,side --out walk.png
+
+- **`--at`** — moments in seconds (by default eight across the motion); **`--views`** — rows: `front`, `side`
+  (from the person's left), `back` — each from where the person faces then; **`--kit`** — over the body, the
+  skeleton a people module gets from it (the file's `clip`).
+
+From code: `renderMotion({motion, at, views, kit})` → `{png, errors}`.

package/cli.js

@@ -1,29 +1,44 @@
 #!/usr/bin/env node
 // moood-render <scene folder | spec.json> [--world <its world's repository>] [--device 16:9] [--at 0,1.5,3]
-//              [--state '{"dawn":1}'] [--bare] [--out frame.png] [--chromium <path>]
+//              [--state '{"dawn":1}'] [--set '[[4,"beat","cover"]]'] [--bare] [--out frame.png] [--chromium <path>]
 // A frame for each moment (--out frame.png → frame.png, or frame-1.5s.png … for several); the
-// errors the scene's code threw, on stderr. The world defaults to the folder two levels up
+// errors the scene's code threw, on stderr; what its scripts told (scene.tell), on stdout. The world defaults to the folder two levels up
 // (<world>/scenes/<folder>): where its modules are.
+// moood-render motion <motion.json> [--at 0,1.5,3] [--views front,side] [--kit] [--out motion.png]
+// A person's motion made by a model (list_motions(key, body=true) saved as a file) as frames on its body.
 import { statSync, writeFileSync, readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { parseArgs } from 'node:util';
-import { ENGINE, readModules, readScene, render } from './index.js';
+import { ENGINE, readModules, readScene, render, renderMotion } from './index.js';
 
-const { values: o, positionals: [what] } = parseArgs({
+const { values: o, positionals: [what, file] } = parseArgs({
   allowPositionals: true,
   options: { world: { type: 'string' }, device: { type: 'string', default: '16:9' }, at: { type: 'string', default: '0' },
-             state: { type: 'string' }, bare: { type: 'boolean' }, out: { type: 'string', default: 'frame.png' },
-             chromium: { type: 'string' }, version: { type: 'boolean' } },
+             state: { type: 'string' }, set: { type: 'string' }, bare: { type: 'boolean' }, out: { type: 'string', default: 'frame.png' },
+             chromium: { type: 'string' }, version: { type: 'boolean' }, views: { type: 'string', default: 'front,side' },
+             kit: { type: 'boolean' } },
 });
 if (o.version) { console.log(`moood engine ${ENGINE}`); process.exit(0); }
-if (!what) { console.error('moood-render <scene folder | spec.json> [--world …] [--device 16:9] [--at 0,1.5] [--state {…}] [--bare] [--out frame.png]'); process.exit(2); }
+if (!what) { console.error('moood-render <scene folder | spec.json> [--world …] [--device 16:9] [--at 0,1.5] [--state {…}] [--set [[s,k,v],…]] [--bare] [--out frame.png]'); process.exit(2); }
+
+if (what === 'motion') {
+  if (!file) { console.error('moood-render motion <motion.json> [--at 0,1.5] [--views front,side] [--kit] [--out motion.png]'); process.exit(2); }
+  const made = JSON.parse(readFileSync(file, 'utf8'));
+  const { png, errors } = await renderMotion({ motion: made.body || made, kit: o.kit ? made.clip : null, chromium: o.chromium,
+                                              at: process.argv.includes('--at') ? o.at.split(',').map(Number) : null, views: o.views.split(',') });
+  const out = o.out === 'frame.png' ? 'motion.png' : o.out;
+  writeFileSync(out, png);
+  console.log(out);
+  for (const e of errors) console.error(e);
+  process.exit(errors.length ? 1 : 0);
+}
 
 const folder = statSync(what).isDirectory();
 const spec = folder ? readScene(what) : JSON.parse(readFileSync(what, 'utf8'));
 const world = o.world || (folder ? resolve(what, '..', '..') : dirname(resolve(what)));
 const at = o.at.split(',').map(Number);
 const frames = await render({ spec, modules: readModules(world, spec), device: o.device, at, state: o.state ? JSON.parse(o.state) : {},
-                              bare: o.bare, chromium: o.chromium });
+                              set: o.set ? JSON.parse(o.set) : [], bare: o.bare, chromium: o.chromium });
 let failed = false;
 for (const f of frames) {
   const out = frames.length > 1 ? o.out.replace(/(\.png)?$/, `-${f.at}s.png`) : o.out;
@@ -31,4 +46,5 @@ for (const f of frames) {
   console.log(out);
   for (const e of f.errors) { console.error(`${f.at}s: ${e}`); failed = true; }
 }
+for (const t of frames.at(-1)?.tells || []) console.log(`told at ${t.at.toFixed(2)}s: ${t.text}${t.about ? ` (${t.about})` : ''}`);
 process.exit(failed ? 1 : 0);

package/engine/engine.json

@@ -1 +1 @@
-{"engine":"8bdd9745d005"}
+{"engine":"ff145eec9cf9"}

package/engine/motion.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <title>moood · motion</title>
+  <style>
+    html, body { margin: 0; height: 100%; overflow: hidden; background: #151a22; font: 13px system-ui, sans-serif; }
+    canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
+    .label { position: fixed; padding: 3px 7px; color: #d6dae1; background: rgba(14, 17, 22, 0.6); border-bottom-right-radius: 6px; }
+    .label b { color: #e8c98a; font-weight: 600; }
+  </style>
+</head>
+<body>
+  <!-- A made motion as frames on its body, for the render (services/render, @moood/render): what an
+       assistant looks at. Handed in: window.__mooodMotion — the motion ({n, fps, names, q, p}: the motion
+       service's body of it); window.__mooodMotionShow — {at: [seconds…], views: ["front" | "side" |
+       "back" | {yaw, pitch, dist}…], kit: its module clip or null (the module's skeleton over the body),
+       cell: [w, h]}: a row per view, a column per moment, each frame labelled. The page is as large as
+       the sheet; the title turns "ready" when it is drawn, errors in window.__mooodRenderErrors. -->
+  <canvas id="sheet"></canvas>
+  <script src="motion.js"></script>
+  <script>
+    window.__mooodRenderErrors = [];
+    (async () => {
+      try {
+        const motion = window.__mooodMotion, show = window.__mooodMotionShow;
+        const [w, h] = show.cell, canvas = document.getElementById('sheet');
+        const v = MooodMotion.view(canvas, await MooodMotion.body(), motion, show.kit);
+        const cells = [];
+        show.views.forEach((view, r) => show.at.forEach((s, c) => {
+          const t = Math.max(0, Math.min(motion.n - 1, s * motion.fps));
+          cells.push([c * w, r * h, w, h, t, typeof view === 'string' ? { facing: view } : view]);
+          const label = document.createElement('div');
+          label.className = 'label';
+          label.style.left = `${c * w}px`; label.style.top = `${r * h}px`;
+          label.innerHTML = `<b>${s.toFixed(2)} s</b> · ${typeof view === 'string' ? view : 'view'}`;
+          document.body.append(label);
+        }));
+        v.draw(0, {}, { kit: !!show.kit, cells });
+      } catch (e) {
+        window.__mooodRenderErrors.push(String(e && e.stack || e));
+      }
+      document.title = 'ready';
+    })();
+  </script>
+</body>
+</html>

package/engine/motion.js

@@ -0,0 +1,258 @@
+// A person's motion made by a model (NVIDIA Kimodo: the motion service), drawn on a body — what the
+// sandbox plays (the site) and what the render shows an assistant (motion.html: frames of it in a
+// sheet). The body is Kimodo's own (soma.bin beside this file — its SOMA skin, Apache-2.0: soma.md):
+// 18k vertices on 77 joints, 8 weights each, moved by every joint's rotation and place as Kimodo made
+// them ({n, fps, names, q, p}: the motion service's /api/motions/<key>/body), skinned here, drawn
+// with WebGL; the floor in metres, the pelvis's path on it. Over it, if asked, the skeleton a people
+// module gets from the same motion (its data entry, {n, fps, v, p, c, r}: bone directions, the pelvis,
+// foot contacts, the path over the floor — rebuilt the way dev/mocap/feat.py's rebuild does, on a body of usual proportions).
+// Kimodo's axes: y up, metres; at frame 0 the pelvis over the origin, the person facing +z, their left +x.
+//   MooodMotion.body() → the body (fetched once)
+//   MooodMotion.view(canvas, body, motion, clip?) → {n, fps, draw(t, camera, {kit, cells})}
+//     t — the frame (fractional: between two, mixed); camera — {yaw, pitch, dist} around the pelvis
+//     at t (yaw 0: from +z), or {facing: 'front' | 'side' | 'back'} — from where the person faces at t;
+//     kit — the module's skeleton over the body; cells — [[x, y, w, h, t, camera]…] for several
+//     frames on one canvas (a sheet), instead of t and camera.
+(function () {
+  const HERE = document.currentScript.src;
+  let soma = null;
+
+  const bytes = b64 => Uint8Array.from(atob(b64), ch => ch.charCodeAt(0));
+
+  // (a request, not fetch: the local render reads the engine from files, and fetch doesn't)
+  const read = url => new Promise((resolve, reject) => {
+    const x = new XMLHttpRequest();
+    x.open('GET', url); x.responseType = 'arraybuffer';
+    x.onload = () => (x.response && (x.status === 200 || x.status === 0) ? resolve(x.response) : reject(new Error(`${url}: ${x.status}`)));
+    x.onerror = () => reject(new Error(`${url}: not read`));
+    x.send();
+  });
+
+  function body() {
+    return (soma ??= read(new URL('soma.bin', HERE)).then(buf => {
+      const [V, F, J] = new Uint32Array(buf, 0, 3);
+      let at = 12;
+      const take = (Kind, n, size) => { const a = new Kind(buf.slice(at, at + n * size)); at += n * size; return a; };
+      return { V, F, J, bind: take(Float32Array, V * 3, 4), faces: take(Uint16Array, F * 3, 2), joint: take(Uint8Array, V * 8, 1),
+        weight: take(Uint8Array, V * 8, 1), inverse: take(Float32Array, J * 12, 4) };
+    }));
+  }
+
+  // ── the module's skeleton (the clip, as feat.py has it) ────────────────
+
+  const VEC = ['pF', 'pU', 'cF', 'cU', 'hF', 'hU', 'spine', 'neck', 'rUp', 'rFo', 'rHa', 'lUp', 'lFo', 'lHa', 'rTh', 'rSh', 'rFt', 'lTh', 'lSh', 'lFt'];
+  const D = { leg: 0.9, thigh: 0.43, shin: 0.43, spine: 0.5, neck: 0.1, head: 0.24, sw: 0.36, hw: 0.18, upper: 0.31, fore: 0.26, foot: 0.15 };
+  const BONES = [['pelvis', 'spine'], ['spine', 'chest'], ['chest', 'neck'], ['neck', 'headtop'], ['rhip', 'lhip'],
+    ...['r', 'l'].flatMap(s => [['chest', `${s}shoulder`], [`${s}shoulder`, `${s}elbow`], [`${s}elbow`, `${s}wrist`], [`${s}wrist`, `${s}hand`],
+      [`${s}hip`, `${s}knee`], [`${s}knee`, `${s}ankle`], [`${s}ankle`, `${s}ball`], [`${s}ball`, `${s}toe`]])];
+  const add = (a, b) => [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
+  const mul = (v, k) => [v[0] * k, v[1] * k, v[2] * k];
+  const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+  const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+  const unit = v => mul(v, 1 / (Math.hypot(...v) || 1));
+  // a frame (its columns: right, up, forward) from forward and up; applied to v; one frame in another
+  const frame = (F, U) => { F = unit(F); U = unit(add(U, mul(F, -dot(U, F)))); return [cross(U, F), U, F]; };
+  const apply = (M, v) => add(add(mul(M[0], v[0]), mul(M[1], v[1])), mul(M[2], v[2]));
+  const within = (A, B) => B.map(c => apply(A, c));
+
+  // the clip's frames as the module's joints, the body going along its path (r) — in Kimodo's axes (the kit's x is
+  // the person's right: mirrored back)
+  function skeleton(clip) {
+    const v = new Int8Array(bytes(clip.v).buffer), p = new Int16Array(bytes(clip.p).buffer), r = clip.r ? new Int16Array(bytes(clip.r).buffer) : null;
+    return Array.from({ length: clip.n }, (_, i) => {
+      const V = Object.fromEntries(VEC.map((k, j) => [k, [v[i * 60 + j * 3] / 127, v[i * 60 + j * 3 + 1] / 127, v[i * 60 + j * 3 + 2] / 127]]));
+      const P = frame(V.pF, V.pU), C = within(P, frame(V.cF, V.cU)), H = within(C, frame(V.hF, V.hU));
+      const hip = [(p[i * 3] / 8000 + (r ? r[i * 2] / 100 : 0)) * D.leg, p[i * 3 + 1] / 8000 * D.leg, (p[i * 3 + 2] / 8000 + (r ? r[i * 2 + 1] / 100 : 0)) * D.leg];
+      const J = { pelvis: hip, rhip: add(hip, apply(P, [D.hw / 2, 0, 0])), lhip: add(hip, apply(P, [-D.hw / 2, 0, 0])) };
+      J.spine = add(hip, mul(apply(P, V.spine), D.spine / 2));
+      J.chest = add(hip, mul(apply(P, V.spine), D.spine));
+      J.neck = add(J.chest, mul(apply(C, V.neck), D.neck));
+      J.headtop = add(J.neck, apply(H, [0, D.head, 0]));
+      for (const [s, sg] of [['r', 1], ['l', -1]]) {
+        J[`${s}shoulder`] = add(J.chest, apply(C, [sg * D.sw / 2, -0.03, 0]));
+        J[`${s}elbow`] = add(J[`${s}shoulder`], mul(apply(C, V[`${s}Up`]), D.upper));
+        J[`${s}wrist`] = add(J[`${s}elbow`], mul(apply(C, V[`${s}Fo`]), D.fore));
+        J[`${s}hand`] = add(J[`${s}wrist`], mul(apply(C, V[`${s}Ha`]), 0.08));
+        J[`${s}knee`] = add(J[`${s}hip`], mul(apply(P, V[`${s}Th`]), D.thigh));
+        J[`${s}ankle`] = add(J[`${s}knee`], mul(apply(P, V[`${s}Sh`]), D.shin));
+        J[`${s}ball`] = add(J[`${s}ankle`], mul(apply(P, V[`${s}Ft`]), D.foot));
+        J[`${s}toe`] = add(J[`${s}ball`], apply(P, [0, 0, 0.05]));
+      }
+      for (const k in J) J[k] = [-J[k][0], J[k][1], J[k][2]];
+      return J;
+    });
+  }
+
+  // ── WebGL ─────────────────────────────────────────────────────────────
+
+  const MESH_VS = `#version 300 es
+in vec3 at; in vec3 normal; uniform mat4 view; out vec3 n;
+void main() { n = normal; gl_Position = view * vec4(at, 1.0); }`;
+  const MESH_FS = `#version 300 es
+precision mediump float; in vec3 n; out vec4 color;
+void main() {
+  vec3 m = normalize(n);
+  float light = 0.32 + 0.55 * max(dot(m, normalize(vec3(0.4, 0.8, 0.6))), 0.0) + 0.18 * max(dot(m, normalize(vec3(-0.6, 0.2, -0.7))), 0.0);
+  color = vec4(vec3(0.84, 0.80, 0.74) * light, 1.0);
+}`;
+  const LINE_VS = `#version 300 es
+in vec3 at; uniform mat4 view; void main() { gl_Position = view * vec4(at, 1.0); }`;
+  const LINE_FS = `#version 300 es
+precision mediump float; uniform vec4 tint; out vec4 color; void main() { color = tint; }`;
+
+  function program(gl, vs, fs) {
+    const p = gl.createProgram();
+    for (const [kind, src] of [[gl.VERTEX_SHADER, vs], [gl.FRAGMENT_SHADER, fs]]) {
+      const s = gl.createShader(kind);
+      gl.shaderSource(s, src); gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
+      gl.attachShader(p, s);
+    }
+    gl.linkProgram(p);
+    return p;
+  }
+
+  // perspective × look-at, column-major
+  function viewOf(eye, target, aspect) {
+    const f = unit([eye[0] - target[0], eye[1] - target[1], eye[2] - target[2]]);
+    const r = unit(cross([0, 1, 0], f)), u = cross(f, r);
+    const V = [r[0], u[0], f[0], 0, r[1], u[1], f[1], 0, r[2], u[2], f[2], 0, -dot(r, eye), -dot(u, eye), -dot(f, eye), 1];
+    const t = 1 / Math.tan(0.4), n = 0.05, far = 100;
+    const P = [t / aspect, 0, 0, 0, 0, t, 0, 0, 0, 0, (far + n) / (n - far), -1, 0, 0, 2 * far * n / (n - far), 0];
+    const M = new Float32Array(16);
+    for (let c = 0; c < 4; c++) for (let r2 = 0; r2 < 4; r2++) {
+      let s = 0;
+      for (let k = 0; k < 4; k++) s += P[k * 4 + r2] * V[c * 4 + k];
+      M[c * 4 + r2] = s;
+    }
+    return M;
+  }
+
+  function view(canvas, B, motion, clip) {
+    const gl = canvas.getContext('webgl2', { antialias: true, preserveDrawingBuffer: true });
+    const q = new Int16Array(bytes(motion.q).buffer), pos = new Int16Array(bytes(motion.p).buffer), J = motion.names.length, n = motion.n;
+    const kit = clip ? skeleton(clip) : null;
+    const mesh = program(gl, MESH_VS, MESH_FS), lines = program(gl, LINE_VS, LINE_FS);
+    const skinned = new Float32Array(B.V * 3), normals = new Float32Array(B.V * 3), M = new Float32Array(J * 12);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const atBuf = gl.createBuffer(), nBuf = gl.createBuffer(), iBuf = gl.createBuffer();
+    for (const [buf, name] of [[atBuf, 'at'], [nBuf, 'normal']]) {
+      gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, skinned.byteLength, gl.DYNAMIC_DRAW);
+      const loc = gl.getAttribLocation(mesh, name); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 3, gl.FLOAT, false, 0, 0);
+    }
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuf); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, B.faces, gl.STATIC_DRAW);
+    gl.bindVertexArray(null);
+    const lineBuf = gl.createBuffer(), lineAt = gl.getAttribLocation(lines, 'at');
+    const drawLines = (points, tint, V, mode = gl.LINES) => {
+      gl.useProgram(lines);
+      gl.uniformMatrix4fv(gl.getUniformLocation(lines, 'view'), false, V);
+      gl.uniform4fv(gl.getUniformLocation(lines, 'tint'), tint);
+      gl.bindBuffer(gl.ARRAY_BUFFER, lineBuf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STREAM_DRAW);
+      gl.enableVertexAttribArray(lineAt); gl.vertexAttribPointer(lineAt, 3, gl.FLOAT, false, 0, 0);
+      gl.drawArrays(mode, 0, points.length / 3);
+    };
+    const joint = (f, j) => [0, 1, 2].map(k => pos[(f * J + j) * 3 + k] / 1000);
+
+    // the joints' matrices at frame t (between two frames: positions mixed, rotations mixed and renormalised),
+    // each times its inverse bind
+    const pose = t => {
+      const a = Math.floor(t) % n, b = Math.min(n - 1, a + 1), u = t - Math.floor(t);
+      for (let j = 0; j < J; j++) {
+        const ia = (a * J + j) * 4, ib = (b * J + j) * 4;
+        const sign = q[ia] * q[ib] + q[ia + 1] * q[ib + 1] + q[ia + 2] * q[ib + 2] + q[ia + 3] * q[ib + 3] < 0 ? -1 : 1;
+        let x = q[ia] * (1 - u) + sign * q[ib] * u, y = q[ia + 1] * (1 - u) + sign * q[ib + 1] * u,
+          z = q[ia + 2] * (1 - u) + sign * q[ib + 2] * u, w = q[ia + 3] * (1 - u) + sign * q[ib + 3] * u;
+        const l = Math.hypot(x, y, z, w); x /= l; y /= l; z /= l; w /= l;
+        const R = [1 - 2 * (y * y + z * z), 2 * (x * y - z * w), 2 * (x * z + y * w),
+          2 * (x * y + z * w), 1 - 2 * (x * x + z * z), 2 * (y * z - x * w),
+          2 * (x * z - y * w), 2 * (y * z + x * w), 1 - 2 * (x * x + y * y)];
+        const pa = (a * J + j) * 3, pb = (b * J + j) * 3;
+        const T = [0, 1, 2].map(k => (pos[pa + k] * (1 - u) + pos[pb + k] * u) / 1000);
+        const I = B.inverse.subarray(j * 12, j * 12 + 12);
+        for (let r = 0; r < 3; r++) {
+          for (let c = 0; c < 4; c++) {
+            M[j * 12 + r * 4 + c] = R[r * 3] * I[c] + R[r * 3 + 1] * I[4 + c] + R[r * 3 + 2] * I[8 + c] + (c === 3 ? T[r] : 0);
+          }
+        }
+      }
+    };
+    const skin = () => {
+      const { bind, joint: jn, weight } = B;
+      for (let i = 0; i < B.V; i++) {
+        const x = bind[i * 3], y = bind[i * 3 + 1], z = bind[i * 3 + 2];
+        let sx = 0, sy = 0, sz = 0;
+        for (let k = 0; k < 8; k++) {
+          const w = weight[i * 8 + k];
+          if (!w) continue;
+          const o = jn[i * 8 + k] * 12, f = w / 255;
+          sx += f * (M[o] * x + M[o + 1] * y + M[o + 2] * z + M[o + 3]);
+          sy += f * (M[o + 4] * x + M[o + 5] * y + M[o + 6] * z + M[o + 7]);
+          sz += f * (M[o + 8] * x + M[o + 9] * y + M[o + 10] * z + M[o + 11]);
+        }
+        skinned[i * 3] = sx; skinned[i * 3 + 1] = sy; skinned[i * 3 + 2] = sz;
+      }
+      normals.fill(0);
+      const fc = B.faces;
+      for (let f = 0; f < B.F * 3; f += 3) {
+        const a = fc[f] * 3, b = fc[f + 1] * 3, c = fc[f + 2] * 3;
+        const ux = skinned[b] - skinned[a], uy = skinned[b + 1] - skinned[a + 1], uz = skinned[b + 2] - skinned[a + 2];
+        const vx = skinned[c] - skinned[a], vy = skinned[c + 1] - skinned[a + 1], vz = skinned[c + 2] - skinned[a + 2];
+        const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;
+        for (const v of [a, b, c]) { normals[v] += nx; normals[v + 1] += ny; normals[v + 2] += nz; }
+      }
+    };
+
+    // the pelvis's path, and the floor around all of it
+    const hips = Array.from({ length: n }, (_, i) => joint(i, 0));
+    const mid = [hips.reduce((s, h) => s + h[0], 0) / n, hips.reduce((s, h) => s + h[2], 0) / n];
+    const reach = Math.max(...hips.map(h => Math.hypot(h[0] - mid[0], h[2] - mid[1])));
+    const R = Math.ceil(reach) + 5, x0 = Math.round(mid[0]), z0 = Math.round(mid[1]), grid = [];
+    for (let d = -R; d <= R; d++) grid.push(x0 + d, 0, z0 - R, x0 + d, 0, z0 + R, x0 - R, 0, z0 + d, x0 + R, 0, z0 + d);
+    const path = hips.flatMap(h => [h[0], 0.002, h[2]]);
+    // which way the person faces at frame f, as the camera's yaw from the front: the line from the right
+    // hip to the left one (+x while facing +z), turned a quarter
+    const L = motion.names.indexOf('LeftLeg'), Rl = motion.names.indexOf('RightLeg');
+    const facing = f => { const l = joint(f, L), r = joint(f, Rl); return Math.atan2(-(l[2] - r[2]), l[0] - r[0]); };
+
+    const cell = (x, y, w, h, t, camera, kitOn) => {
+      gl.viewport(x, y, w, h); gl.scissor(x, y, w, h);
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.enable(gl.DEPTH_TEST);
+      const f = Math.min(n - 1, Math.floor(t)), at = [hips[f][0], 0.85, hips[f][2]];
+      let { yaw = 0.6, pitch = 0.22, dist = 3.6 } = camera;
+      if (camera.facing) yaw = facing(f) + { front: 0, side: Math.PI / 2, back: Math.PI }[camera.facing];
+      const eye = [at[0] + dist * Math.cos(pitch) * Math.sin(yaw), at[1] + dist * Math.sin(pitch), at[2] + dist * Math.cos(pitch) * Math.cos(yaw)];
+      const V = viewOf(eye, at, w / h);
+      drawLines(grid, [0.2, 0.24, 0.3, 1], V);
+      drawLines(path, [0.5, 0.53, 0.58, 1], V, gl.LINE_STRIP);
+      pose(t); skin();
+      gl.useProgram(mesh);
+      gl.uniformMatrix4fv(gl.getUniformLocation(mesh, 'view'), false, V);
+      gl.bindVertexArray(vao);
+      gl.bindBuffer(gl.ARRAY_BUFFER, atBuf); gl.bufferSubData(gl.ARRAY_BUFFER, 0, skinned);
+      gl.bindBuffer(gl.ARRAY_BUFFER, nBuf); gl.bufferSubData(gl.ARRAY_BUFFER, 0, normals);
+      gl.drawElements(gl.TRIANGLES, B.F * 3, gl.UNSIGNED_SHORT, 0);
+      gl.bindVertexArray(null);
+      if (kitOn && kit) {
+        // (its clip may be a frame or two shorter or longer: the same moment)
+        const S = kit[Math.min(kit.length - 1, Math.round(t * kit.length / n))];
+        gl.disable(gl.DEPTH_TEST);
+        drawLines(BONES.flatMap(([a, b]) => [...S[a], ...S[b]]), [0.91, 0.79, 0.54, 1], V);
+      }
+    };
+    return {
+      n, fps: motion.fps,
+      draw(t, camera = {}, { kit: kitOn = false, cells = null } = {}) {
+        const k = devicePixelRatio || 1, w = canvas.clientWidth, h = canvas.clientHeight;
+        if (canvas.width !== Math.round(w * k) || canvas.height !== Math.round(h * k)) { canvas.width = Math.round(w * k); canvas.height = Math.round(h * k); }
+        gl.enable(gl.SCISSOR_TEST);
+        gl.clearColor(0.082, 0.102, 0.133, 1);
+        if (!cells) return cell(0, 0, canvas.width, canvas.height, t, camera, kitOn);
+        // cells in CSS pixels from the top left; WebGL's from the bottom left
+        for (const [x, y, cw, ch, ct, cc] of cells) cell(Math.round(x * k), Math.round(canvas.height - (y + ch) * k), Math.round(cw * k), Math.round(ch * k), ct, cc, kitOn);
+      },
+    };
+  }
+
+  window.MooodMotion = { body, view };
+})();

package/engine/render.html

@@ -12,7 +12,9 @@
        screenshots for the artist's look at its own work, the pictures of scenes and assistants (MCP).
        The service hands the
        spec in as window.__mooodSpec; errors the scene's code threw end up in
-       window.__mooodRenderErrors; the title turns "ready" when it is time to take the picture. -->
+       window.__mooodRenderErrors, what its scripts told (scene.tell) in window.__mooodTells ({at:
+       seconds since it started, text, about}); the title turns "ready" when it is time to take the
+       picture. -->
   <canvas id="scene"></canvas>
   <header class="titles"><h1 id="title"></h1><p id="caption"></p></header>
   <script src="kit.js"></script>
@@ -34,8 +36,10 @@
         }
         const modules = { texts: window.__mooodModules || {} }; // the modules the scene lists, given (kit.js)
         const canvas = document.getElementById('scene'), stage = Moood.mount(canvas);
+        // the starting state, scripts running (their errors are reported) — before the scene is shown, so its first frame is as they set it
+        const t0 = performance.now(), told = window.__mooodTells = [];
+        MooodState.start(spec, {}, { stage, modules, tell: (text, about) => told.push({ at: (performance.now() - t0) / 1000, text, about }) });
         stage.show(spec, modules);
-        MooodState.start(spec, {}, { stage, modules }); // the starting state, scripts running (their errors are reported)
         if (!bare) MooodWidgets.create({ canvas, stage }).show({ ...spec, widgets: (spec.widgets || []).map(w => ({ ...w, at: 0, for: 0 })) });
         // show every caption at once, so the reviewer reads them all
         if (!bare) MooodCaptions.show((spec.captions || []).map(c => ({ ...c, at: 0, for: 0 })));

package/engine/soma.md

@@ -0,0 +1,4 @@
+`soma.bin` — the SOMA body: NVIDIA Kimodo's skin of its 77-joint skeleton
+(https://github.com/nv-tlabs/kimodo, `kimodo/assets/skeletons/somaskel77/skin_standard.npz`; Copyright (c)
+2026 NVIDIA CORPORATION & AFFILIATES, Apache License 2.0). Made by `dev/mocap/soma_body.py`; `motion.js`
+draws the motions Kimodo made on it (the sandbox, the render).

package/index.js

@@ -2,15 +2,23 @@
 // engine/engine.json) in a Chromium already installed (playwright-core: nothing is downloaded) — no
 // network, no site. Time is a virtual clock, stepped from the scene's start: a frame at a moment is
 // the same every time, with the same state.
-//   render({spec, modules, device, at, state, bare, chromium, date}) → [{at, png, errors}]
+//   render({spec, modules, device, at, state, set, bare, chromium, date}) → [{at, png, errors, tells}]
 //     spec — the scene (readScene(folder) from a world's repository, or any spec);
 //     modules — the modules it lists, themselves: {name: {code, data}} (readModules(world, spec));
 //     device — the frame: 16:9 (1600×900), 4:3, 21:9 (the same height), tile (640×360), big (1920×1080);
 //     at — the moments, seconds from the scene's start (default [0]): a frame each;
 //     state — values over the spec's starting state ({"dawn": 1, "girl": "gone"});
+//     set — values set as the scene goes, as a game sets them: [[second, key, value, over?, ease?], …]
+//       (a film's beat at its second: [[4, "beat", "cover"]]);
 //     bare — without the title and the captions over it;
 //     chromium — the browser's executable (else MOOOD_CHROMIUM, else Playwright's own);
 //     date — what the clock says at the start (default 2026-01-01T12:00:00Z).
+//   Each frame: its errors, and what the scene's scripts told so far (scene.tell): [{at, text, about}].
+//   renderMotion({motion, at, views, kit, cell, chromium}) → {png, errors}
+//     a person's motion made by a model (moood's make_motion: list_motions(key, body=true) — its `body` is
+//     the motion, its `clip` the people module's entry) as frames on its body (engine/motion.html): a row
+//     per view (front, side, back, or {yaw, pitch, dist}), a column per moment (at, seconds; default eight
+//     across it); kit — the module's clip, its skeleton drawn over the body; cell — [w, h] of a frame.
 import { readFileSync } from 'node:fs';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { chromium as browserType } from 'playwright-core';
@@ -18,20 +26,21 @@ import { chromium as browserType } from 'playwright-core';
 export { readModules, readScene } from './scene.js';
 
 const PAGE = pathToFileURL(fileURLToPath(new URL('./engine/render.html', import.meta.url))).href;
+const MOTION = pathToFileURL(fileURLToPath(new URL('./engine/motion.html', import.meta.url))).href;
 export const ENGINE = JSON.parse(readFileSync(new URL('./engine/engine.json', import.meta.url), 'utf8')).engine;
 export const DEVICES = { '16:9': [1600, 900], '4:3': [1200, 900], '21:9': [2100, 900], tile: [640, 360], big: [1920, 1080] };
 const STEP = 100;  // ms: timers fire as they come due, not all at the end of one jump
+// WebGL on SwiftShader; 2D canvases on the CPU's Skia (SwiftShader takes minutes for many blended fills)
+const ARGS = ['--use-angle=swiftshader', '--enable-unsafe-swiftshader', '--ignore-gpu-blocklist', '--disable-accelerated-2d-canvas',
+              '--allow-file-access-from-files'];
 
-export async function render({ spec, modules = {}, device = '16:9', at = [0], state = {}, bare = false, chromium, date } = {}) {
+export async function render({ spec, modules = {}, device = '16:9', at = [0], state = {}, set = [], bare = false, chromium, date } = {}) {
   const size = DEVICES[device];
   if (!size) throw new Error(`device: one of ${Object.keys(DEVICES).join(', ')}`);
   if (!spec || typeof spec !== 'object') throw new Error('spec: a scene expected');
   const shown = { ...spec, state: { ...(spec.state && typeof spec.state === 'object' ? spec.state : {}), ...state } };
   const browser = await browserType.launch({
-    executablePath: chromium || process.env.MOOOD_CHROMIUM || undefined,
-    // WebGL on SwiftShader; 2D canvases on the CPU's Skia (SwiftShader takes minutes for many blended fills)
-    args: ['--use-angle=swiftshader', '--enable-unsafe-swiftshader', '--ignore-gpu-blocklist', '--disable-accelerated-2d-canvas',
-           '--allow-file-access-from-files'],
+    executablePath: chromium || process.env.MOOOD_CHROMIUM || undefined, args: ARGS,
   });
   try {
     const page = await (await browser.newContext({ viewport: { width: size[0], height: size[1] } })).newPage();
@@ -51,20 +60,48 @@ export async function render({ spec, modules = {}, device = '16:9', at = [0], st
     // what loads by itself (fonts, the scene's modules) has loaded before the clock moves at all
     await page.evaluate(() => document.fonts.ready);
     await page.waitForTimeout(1000);
-    const frames = [];
+    const frames = [], sets = [...set].map(([s, ...rest]) => [Number(s) * 1000, ...rest]).sort((a, b) => a[0] - b[0]);
     let now = 0;
+    // the values due by now, set (the clock stops at each one's second: it is set on time)
+    const due = async () => {
+      while (sets.length && sets[0][0] <= now) {
+        const [, key, value, over, ease] = sets.shift();
+        await page.evaluate(([k, v, o, e]) => MooodState.set(k, v, o, e), [key, value, over, ease]);
+      }
+    };
+    await due();
     for (const t of [...at].map(Number).sort((a, b) => a - b)) {
       while (now < t * 1000) {
-        const step = Math.min(STEP, t * 1000 - now);
+        const step = Math.min(STEP, t * 1000 - now, sets.length ? sets[0][0] - now : STEP); // (what is due by now is set)
         await page.clock.runFor(step);
         now += step;
+        await due();
       }
       await page.clock.runFor(0);
-      const said = await page.evaluate(() => window.__mooodErrors || []);
-      frames.push({ at: t, png: await page.screenshot({ type: 'png' }), errors: [...new Set([...errors, ...said])].slice(0, 100) });
+      const [said, tells] = await page.evaluate(() => [window.__mooodErrors || [], window.__mooodTells || []]);
+      frames.push({ at: t, png: await page.screenshot({ type: 'png' }), errors: [...new Set([...errors, ...said])].slice(0, 100), tells });
     }
     return frames;
   } finally {
     await browser.close();
   }
 }
+
+export async function renderMotion({ motion, at, views = ['front', 'side'], kit = null, cell = [320, 400], chromium } = {}) {
+  if (!motion || !Array.isArray(motion.names)) throw new Error('motion: the body of a made motion expected (list_motions(key, body=true).body)');
+  const length = (motion.n - 1) / motion.fps;
+  const moments = at && at.length ? at.map(s => Math.min(Math.max(0, Number(s)), length)) : Array.from({ length: 8 }, (_, i) => +(length * i / 7).toFixed(2));
+  const browser = await browserType.launch({ executablePath: chromium || process.env.MOOOD_CHROMIUM || undefined, args: ARGS });
+  try {
+    const page = await (await browser.newContext({ viewport: { width: cell[0] * moments.length, height: cell[1] * views.length } })).newPage();
+    const errors = [];
+    page.on('pageerror', e => errors.push(String(e.message)));
+    await page.addInitScript(([m, s]) => { window.__mooodMotion = m; window.__mooodMotionShow = s; }, [motion, { at: moments, views, kit, cell }]);
+    await page.goto(MOTION);
+    await page.waitForFunction(() => document.title === 'ready', null, { timeout: 120_000 });
+    errors.push(...await page.evaluate(() => window.__mooodRenderErrors || []));
+    return { png: await page.screenshot({ type: 'png' }), errors: [...new Set(errors)] };
+  } finally {
+    await browser.close();
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@moood/render",
-  "version": "0.1.3",
-  "description": "A moood scene rendered locally — the site's own engine, in a browser already installed — at a moment, with a state: a PNG and the errors its code threw.",
+  "version": "0.1.4",
+  "description": "A moood scene rendered locally — the site's own engine, in a browser already installed — at a moment, with a state: a PNG and the errors its code threw; and a person's motion made by a model, as frames on its body.",
   "license": "UNLICENSED",
   "type": "module",
   "main": "index.js",