@moood/render 0.1.2 → 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.js

@@ -352,8 +352,9 @@ const Moood = (() => {
   const STATE = { values: {}, ver: 0, was: key => STATE.values[key], sample: null };
   // what the shown scene's code shares (kit.js): the world's modules it lists and the scene's lib
   let SHARED = { kit: {}, lib: {} };
-  // Where an element is now, as its painting code says (e.at): fractions of the stage as seen
-  // from the start — speech bubbles and widgets follow it (stage.screenOf).
+  // Where an element is now, as its painting code says (e.at): the point it marks, in metres from
+  // its anchor as painted — speech bubbles and widgets follow it (stage.screenOf) wherever the
+  // element is put (its `place`)
   const FOCUS = new Map();
   // A platformer's hero as it moves now (camera.mode platform): its painting code reads e.hero —
   // { vx, vy (m/s), ground } — to move its legs; the engine moves and turns the painting itself.
@@ -376,22 +377,19 @@ const Moood = (() => {
       compiled.set(code, fn);
     }
     if (!fn) return;
-    // sky and ground elements are painted in stage heights from the stage's top-left corner, as
-    // seen from the start (x 0…W/H, y 0…1, with margins); others in metres from their anchor
-    const flat = o.sky || o.ground;
-    const ppm = flat ? H : o.size * H / (o.height || 2), x = flat ? 0 : o.x * W, y = flat ? 0 : o.y * H;
+    const [x, y, ppm] = anchorOf(o, W, H);
     ctx.save();
     ctx.translate(x, y);
     ctx.scale(ppm, ppm);
     ctx.fillStyle = ctx.strokeStyle = o.color || '#000000';
     ctx.lineCap = ctx.lineJoin = 'round';
     const period = o.period || 2;
-    // a point the code names, as painted — through whatever it did to the canvas since (translate,
-    // scale, rotate): [x, y, how much it is scaled]
+    // a point the code names, in its units from the anchor as painted — through whatever it did to
+    // the canvas since (translate, scale, rotate): [x, y, how much it is scaled]
     const base = ctx.getTransform(), unbase = base.inverse();
     const painted = (lx, ly) => {
       const now = ctx.getTransform(), q = unbase.transformPoint(now.transformPoint({ x: lx, y: ly }));
-      return [x + q.x * ppm, y + q.y * ppm, Math.hypot(now.a, now.b) / Math.hypot(base.a, base.b)];
+      return [q.x, q.y, Math.hypot(now.a, now.b) / Math.hypot(base.a, base.b)];
     };
     const read = { time: false, state: false };
     READS.set(o, read);
@@ -404,11 +402,11 @@ const Moood = (() => {
       light(lx, ly, r, color = '#ffd08a', strength = 0.6) {
         try {
           const [px, py, k] = painted(lx, ly);
-          lightsOut.push({ x: px, y: py, r: r * k * ppm, col: rgb(color), a: strength, flicker: o.flicker ?? 0.3 });
+          lightsOut.push({ x: x + px * ppm, y: y + py * ppm, r: r * k * ppm, col: rgb(color), a: strength, flicker: o.flicker ?? 0.3 });
         } catch (err) { reportError(o, err); }
       },
       // where this element is now (its head, say): what speaks or hovers over it follows this point
-      at(lx, ly) { if (o.id) { const [px, py] = painted(lx, ly); FOCUS.set(o.id, { x: px / W, y: py / H }); } },
+      at(lx, ly) { if (o.id) { const [px, py] = painted(lx, ly); FOCUS.set(o.id, { x: px, y: py }); } },
       anim: MooodKit.anim, kit: SHARED.kit, lib: SHARED.lib,
       was: (key, ago = 0) => { read.state = true; return STATE.was(key, ago); },
       speed: key => { read.state = true; const a = STATE.was(key, 0), b = STATE.was(key, 0.05); return typeof a === 'number' && typeof b === 'number' ? (a - b) / 0.05 : 0; },
@@ -417,6 +415,12 @@ const Moood = (() => {
     try { fn(ctx, e); } catch (err) { reportError(o, err); }
     ctx.restore();
   }
+  // Where a custom element's painting has its origin on the W × H stage, and its scale: [x, y, px a
+  // unit]. Sky and ground elements are painted in stage heights from the stage's top-left corner, as
+  // seen from the start (x 0…W/H, y 0…1, with margins); others in metres from their anchor.
+  function anchorOf(o, W, H) {
+    return o.sky || o.ground ? [0, 0, H] : [o.x * W, o.y * H, o.size * H / (o.height || 2)];
+  }
   // The box an object's painting fits in (pixels of the W × H stage): built-in kinds a fixed frame
   // around the base, custom ones their `box` in metres (default: a little wider than tall).
   function objectBox(o, W, H) {
@@ -545,6 +549,15 @@ const Moood = (() => {
     const land = (spec.layers || []).filter(L => LAND.has(L.kind));
     return land.length ? Math.min(...land.map(L => L.y)) : 0.6;
   }
+  // An element that moves through the world has `place`: its across, distance, elevation or x are the
+  // names of numbers in the state (metres) — it is where they say now, the rest as the spec has it.
+  const PLACE = ['across', 'distance', 'elevation', 'x'];
+  function placed(o) {
+    if (!o.place) return o;
+    const n = { ...o };
+    for (const f of PLACE) { const k = o.place[f]; if (typeof k === 'string' && typeof STATE.values[k] === 'number') n[f] = STATE.values[k]; }
+    return n;
+  }
   function depths(spec) {
     const layers = spec.layers || [];
     // An object stands where its base is — unless it is attached to a bigger one (a window on
@@ -589,21 +602,27 @@ const Moood = (() => {
     const paintZ = o => (o.plane ? planeZ(o) : custom(o) ? sightZ(o) : own(host(o) || o));
     const objectX = o => (bearing(o) ? 0.5 : typeof o.across === 'number' && !o.sky ? 0.5 + o.across / EYE / STAGE / paintZ(o) : o.x ?? 0.5);
     const objectY = o => (o.sky || o.ground ? 0 : custom(o) ? yh + (1 - (o.elevation || 0) / EYE) / sightZ(o) : o.kind === 'bird' ? o.y : o.y + shift(o));
+    const objectSize = o => (o.sky || o.ground ? 1 : custom(o) ? (o.height || 2) / EYE / sightZ(o) : o.size);
+    // where it stands in the world (eye heights: X to the right, Z ahead, Y its anchor's height) and
+    // the distance Zp it is painted for
+    const objectAt = o => {
+      const Zp = paintZ(o), Y = 1 - (objectY(o) - yh) * Zp;
+      if (!bearing(o)) return { X: (objectX(o) - 0.5) * STAGE * Zp, Y, Z: Zp, Zp };
+      const b = o.bearing * Math.PI / 180, d = o.distance / EYE;
+      return { X: d * Math.sin(b), Y, Z: d * Math.cos(b), Zp };
+    };
+    // ground planes are drawn right after the sky, under everything standing on them
+    // a horizontal plane (gl.js) is ordered by its far edge, before what stands on it
+    const objectZ = o => (o.sky ? Infinity : o.ground ? Z_FAR * 4 : o.plane ? clamp(planeZ(o) + (o.depth || 4) / 2 / EYE, Z_NEAR, Z_FAR) : custom(o) ? customZ(o) : o.kind === 'bird' ? 30 : own(host(o) || o));
     return {
-      yh, Z, objectX,
-      // where it stands in the world (eye heights: X to the right, Z ahead, Y its anchor's
-      // height) and the distance Zp it is painted for
-      objectAt: o => {
-        const Zp = paintZ(o), Y = 1 - (objectY(o) - yh) * Zp;
-        if (!bearing(o)) return { X: (objectX(o) - 0.5) * STAGE * Zp, Y, Z: Zp, Zp };
-        const b = o.bearing * Math.PI / 180, d = o.distance / EYE;
-        return { X: d * Math.sin(b), Y, Z: d * Math.cos(b), Zp };
+      yh, Z, objectX, objectAt, objectZ,
+      // an element where it is now (its `place`), the one truth the renderers, the picking and
+      // whatever follows it go by: { o: as painted on the stage (x, y, size: fractions of it),
+      // Z: the depth it is drawn at, at: where it stands in the world }
+      now: o => {
+        const n = placed(o);
+        return { o: { ...o, x: objectX(n), y: objectY(n), size: objectSize(n), _yh: yh }, Z: objectZ(n), at: objectAt(n) };
       },
-      // ground planes are drawn right after the sky, under everything standing on them
-      // a horizontal plane (gl.js) is ordered by its far edge, before what stands on it
-      objectZ: o => (o.sky ? Infinity : o.ground ? Z_FAR * 4 : o.plane ? clamp(planeZ(o) + (o.depth || 4) / 2 / EYE, Z_NEAR, Z_FAR) : custom(o) ? customZ(o) : o.kind === 'bird' ? 30 : own(host(o) || o)),
-      objectY,
-      objectSize: o => (o.sky || o.ground ? 1 : custom(o) ? (o.height || 2) / EYE / sightZ(o) : o.size),
     };
   }
   // Screen transform [a b c d e f] for a plane at distance Z (Infinity = the sky): maps the
@@ -635,10 +654,11 @@ const Moood = (() => {
     return { m: [s, 0, 0, s, q[0] - s * ax, q[1] - s * ay], D: q[2] };
   }
   // Where an element's painting (as depths() places it on the SW-wide stage) goes on the frame from
-  // camera cam: { m: the transform, D: its distance along the gaze }, or null behind the eye
+  // camera cam, where it is now: { m: the transform, D: its distance along the gaze }, or null behind the eye
   function placeOf(o, cam, W, H, dz, round) {
-    if (!round) { const Z = dz.objectZ(o); return { m: view(cam, Z, W, H, dz.yh), D: Z - cam.z }; }
-    return billboard(cam, dz.objectAt(o), dz.objectX(o) * STAGE * H, dz.objectY(o) * H, W, H, dz.yh);
+    const n = dz.now(o);
+    if (!round) return { m: view(cam, n.Z, W, H, dz.yh), D: n.Z - cam.z };
+    return billboard(cam, n.at, n.o.x * STAGE * H, n.o.y * H, W, H, dz.yh);
   }
   // The hero of a platformer h = { dx, dy (metres from where it is painted), flip } as a transform
   // of its painting: its anchor painted at x = ax, `ppm` painted px per metre
@@ -779,9 +799,12 @@ const Moood = (() => {
       if (L.kind === 'water') return { L, Z };
       return { L, Z, ...staticLayer(L, SW, H, seed + i * 101) };
     }).sort((a, b) => b.Z - a.Z);
-    // looking around, each also stands somewhere in the world (p, depths().objectAt)
-    const round = camSetup(spec).round;
-    const objects = (spec.objects || []).map(o => ({ o: { ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: dz.yh }, Z: dz.objectZ(o), p: round && !o.sky && !o.ground ? dz.objectAt(o) : null })).sort((a, b) => (b.Z - a.Z) || 0);
+    // looking around, each also stands somewhere in the world (p, depths().objectAt); what moves
+    // through the world (`place`) is put where the state has it as each frame starts (move)
+    const round = camSetup(spec).round, farFirst = (a, b) => (b.Z - a.Z) || 0;
+    const at = o => { const n = dz.now(o); return { o: n.o, Z: n.Z, p: round && !o.sky && !o.ground ? n.at : null }; };
+    const objects = (spec.objects || []).map(o => ({ from: o, ...at(o) })).sort(farFirst), moving = objects.filter(ob => ob.from.place);
+    const move = () => { if (!moving.length) return; for (const ob of moving) Object.assign(ob, at(ob.from)); objects.sort(farFirst); };
     const sky = !spec.sky ? '#000000' : (() => {
       const c = document.createElement('canvas').getContext('2d');
       const g = c.createLinearGradient(0, 0, 0, H);
@@ -795,7 +818,7 @@ const Moood = (() => {
     v.addColorStop(0, 'rgba(0,0,0,0)');
     v.addColorStop(1, `rgba(0,0,0,${0.75 * clamp(spec.light?.vignette ?? 0.5, 0, 1)})`);
     vg.fillStyle = v; vg.fillRect(0, 0, W, H);
-    return { W, H, SW, u, x0, span, yh: dz.yh, round, lim: limits(spec, W, H), sky, stars, layers, particles, objects, vignette, scratch: layer(W, H) };
+    return { W, H, SW, u, x0, span, yh: dz.yh, round, lim: limits(spec, W, H), sky, stars, layers, particles, objects, move, vignette, scratch: layer(W, H) };
   }
 
   // Looking around, with Canvas 2D (the fallback): the sky turned as a flat band (not bent into a
@@ -852,6 +875,7 @@ const Moood = (() => {
   // S.out: where the frame lies in the canvas (pixels); the scene goes on around it as painted
   function frame(ctx, S, spec, cam, t, dt) {
     const { W, H, SW, u } = S, out = S.out;
+    S.move();
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.fillStyle = '#000000';
     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@@ -1048,7 +1072,7 @@ const Moood = (() => {
     const pick = (clientX, clientY) => {
       const [cx, cy] = local(clientX, clientY), Hc = box.h, Wc = box.w, yh = S?.yh ?? 0.6, dz = spec ? depths(spec) : null;
       const at = D => ({ Z: target.z + D, x: target.x + (cx - Wc / 2) / Hc * D });
-      const near = (spec?.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => ({ o: { ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: yh }, Z: dz.objectZ(o) }))
+      const near = (spec?.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => dz.now(o))
         .filter(({ Z }) => fadeNear(Z, target) > 0).sort((a, b) => a.Z - b.Z);
       for (const { o, Z } of near) {
         const m = view(target, Z, Wc, Hc, yh), b = objectBox(o, STAGE * Hc, Hc);
@@ -1114,32 +1138,31 @@ const Moood = (() => {
       glide.vy += ((target.y - y0) / dt - glide.vy) * k;
       lastMove = now;
     };
-    // where in the canvas (CSS px) an element is from camera c — the point its code marks (e.at),
-    // else its anchor (its top, with over) — lifted by `lift` metres: [x, y, its distance]; null
-    // when out of sight
+    // where in the canvas (CSS px) an element is from camera c — where its `place` has it now: the
+    // point its code marks (e.at), else its anchor (its top, with over) — lifted by `lift` metres:
+    // [x, y, its distance]; null when out of sight
     function seenFrom(c, id, lift = 0, over = false) {
       const o = (spec?.objects || []).find(o => o.id === id);
       if (!o || o.sky) return null;
       const W = box.w, H = box.h, dz = depths(spec), yh = dz.yh;
-      if (round()) {
-        // looking around: its anchor (or the point its code marks) seen from where you stand
-        const p = dz.objectAt(o);
-        if (o.plane || !FOCUS.has(id)) {
-          const q = project(c, p.X, p.Y + (lift + (over && !o.plane ? o.height ?? EYE : 0)) / EYE, p.Z, W, H, yh);
+      if (o.plane) {
+        const p = dz.objectAt(o), Z = p.Zp, up = lift / EYE;
+        if (round()) {
+          const q = project(c, p.X, p.Y + up, p.Z, W, H, yh);
           return q && q[2] > 0.3 ? [box.x + q[0], box.y + q[1], q[2]] : null;
         }
-        const b = billboard(c, p, dz.objectX(o) * STAGE * H, dz.objectY(o) * H, W, H, yh), f = FOCUS.get(id);
-        if (!b || b.D < 0.3) return null;
-        return [box.x + b.m[0] * f.x * STAGE * H + b.m[4], box.y + b.m[3] * (f.y * H - (lift / EYE) * H / p.Zp) + b.m[5], b.D];
+        if (fadeNear(Z, c) < 0.3) return null;
+        const m = view(c, Z, W, H, yh), px = dz.objectX(o) * STAGE * H, py = (yh + (1 - (o.elevation || 0) / EYE) / Z - up / Z) * H;
+        return [box.x + m[0] * px + m[4], box.y + m[3] * py + m[5], Z - c.z];
       }
-      const Z = o.plane ? (o.distance > 0 ? o.distance : 10) / EYE : dz.objectZ(o);
-      if (Z - c.z < 0.3 || fadeNear(Z, c) < 0.3) return null;
-      const f = FOCUS.get(id) || { x: dz.objectX(o), y: o.plane ? yh + (1 - (o.elevation || 0) / EYE) / Z : dz.objectY(o) };
+      const at = placeOf(o, c, W, H, dz, round());
+      // behind the eye, or faded out as it is passed (fadeNear)
+      if (!at || at.D < 0.48) return null;
+      const n = dz.now(o), [ax, ay, ppm] = anchorOf(n.o, STAGE * H, H), f = FOCUS.get(id) || { x: 0, y: 0 };
       if (over && !FOCUS.has(id)) lift += o.height ?? EYE;
-      const m = view(c, Z, W, H, yh);
-      let px = f.x * STAGE * H, py = f.y * H - (lift / EYE) * H / Z;
-      if (c.hero && id === c.hero.id) { const hm = heroMatrix(c.hero, dz.objectX(o) * STAGE * H, dz.objectSize(o) * H / (o.height || 2)); px = hm[0] * px + hm[4]; py += hm[5]; }
-      return [box.x + m[0] * px + m[4], box.y + m[3] * py + m[5], Z - c.z];
+      let px = ax + f.x * ppm, py = ay + f.y * ppm - lift / EYE * H / n.at.Zp;
+      if (c.hero && id === c.hero.id) { const hm = heroMatrix(c.hero, ax, ppm); px = hm[0] * px + hm[4]; py += hm[5]; }
+      return [box.x + at.m[0] * px + at.m[4], box.y + at.m[3] * py + at.m[5], at.D];
     }
     // the camera keeps the elements it follows in the visible part of the screen: together when
     // they fit, else the first of them

package/engine/engine.json

@@ -1 +1 @@
-{"engine":"717ecc3e74f1"}
+{"engine":"ff145eec9cf9"}

package/engine/gl.js

@@ -453,7 +453,7 @@ const MooodGL = (() => {
       const objects = (spec.objects || []).map(o0 => {
         if (o0.plane) return planeOf(o0, dz, tex);
         // looking around, the sky is the full circle, 2π stage heights wide (engine.js)
-        const o = { ...o0, x: dz.objectX(o0), y: dz.objectY(o0), size: dz.objectSize(o0), _yh: dz.yh, _sw: ROUND && o0.sky ? I.TAU * H : SW }, Z = dz.objectZ(o0);
+        const n = dz.now(o0), o = { ...n.o, _sw: ROUND && o0.sky ? I.TAU * H : SW }, Z = n.Z;
         const x = o.x * SW, y = o.y * H, s = Math.max(2, o.size * H);
         if (o.kind === 'bird') {
           const canvas = paint(s * 1.2 * SS, s * 0.6 * SS, (g) => {
@@ -472,7 +472,7 @@ const MooodGL = (() => {
         const live = (o.kind === 'custom' || !o.kind) ? liveOf(o, o.frames, tex) : null;
         return {
           o, Z, x, y, s, bx, by, bw, bh, tex: frames[0], frames, period: o.period || 2, detail: null,
-          p: ROUND && !o.sky ? dz.objectAt(o0) : null,
+          p: ROUND && !o.sky ? n.at : null,
           live, ground: !!o.ground, from: o0.place ? o0 : null,
           reflect: o.reflect ?? (o.kind === 'boat' || o.kind === 'bridge'),
           lights: lights.map(l => ({ x: l.x, y: l.y, r: l.r, c: col(l.col), a: l.a, dot: l.dot, fire: o.kind === 'campfire', flicker: l.flicker })),
@@ -873,22 +873,18 @@ const MooodGL = (() => {
       }
     }
 
-    // An element that moves through the world (its `place`: {across, distance, elevation, x} — the
-    // names of numbers in the state, metres): put where the state says now — its size, its depth,
-    // its haze and what it is drawn in front of or behind follow.
+    // An element that moves through the world (its `place`): put where the state has it now
+    // (depths().now) — its size, its depth, its haze and what it is drawn in front of or behind follow.
     function placeMoving(S) {
-      const v = I.STATE.values;
       let moved = false;
       for (const ob of S.objects) {
         if (!ob.from) continue;
-        const o1 = { ...ob.from };
-        for (const [f, k] of Object.entries(ob.from.place)) if (typeof k === 'string' && typeof v[k] === 'number') o1[f] = v[k];
-        const key = `${o1.x}|${o1.across}|${o1.distance}|${o1.elevation}`;
+        const n = S.dz.now(ob.from), key = `${n.o.x}|${n.o.y}|${n.o.size}`;
         if (key === ob.placed) continue;
         ob.placed = key; moved = true;
-        const o = { ...ob.o, x: S.dz.objectX(o1), y: S.dz.objectY(o1), size: S.dz.objectSize(o1) };
-        Object.assign(ob, { o, Z: S.dz.objectZ(o1), x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H) }, I.objectBox(o, SW, H));
-        if (ROUND && !o.sky) ob.p = S.dz.objectAt(o1);
+        const o = { ...n.o, _sw: ob.o._sw };
+        Object.assign(ob, { o, Z: n.Z, x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H) }, I.objectBox(o, SW, H));
+        if (ROUND && !o.sky) ob.p = n.at;
       }
       if (!moved) return;
       for (const item of S.order) if (item.ob) item.Z = item.ob.Z;

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/scenestate.js

@@ -7,10 +7,11 @@
 //   widgets — MooodState is global: get / set / on.
 // The painting code reads the current values as e.state and is repainted when they change. A
 // number may be set to move there over some seconds, along an easing curve (kit.js: smooth by
-// default — it starts and stops gently; linear, in, out, back, spring, anticipate…). What a value
-// was a moment ago stays known for a while (was): what lags behind — a coat's tail, hair, a
-// head that follows — reads it. A script may tell that something happened (scene.tell): the
-// game decides what it means.
+// default — it starts and stops gently; linear, in, out, back, spring, anticipate…). A value set
+// is heard once, where it is set to (on('change')); a value moving there is heard each frame as it
+// moves (on('move')). What a value was a moment ago stays known for a while (was): what lags
+// behind — a coat's tail, hair, a head that follows — reads it. A script may tell that something
+// happened (scene.tell): the game decides what it means.
 const MooodState = (() => {
   let stage = null, tell = null, save = null, t0 = performance.now();
   let values = {}, cur = {}, tweens = new Map(), listeners = [], timers = [], raf = 0, pending = {}, flushTimer = 0;
@@ -44,12 +45,14 @@ const MooodState = (() => {
   }
 
   function publish() { cur = { ...values }; for (const [k, tw] of tweens) cur[k] = along(tw, performance.now()); stage?.setState(cur, was, sample); }
-  // the moving values, where they are now (the stage asks as it paints a frame)
+  // the moving values, where they are now (the stage asks as it paints a frame): each heard moving
+  // from where it was last seen
   function sample() {
     if (!tweens.size) return;
-    const now = performance.now();
+    const now = performance.now(), before = cur, moving = [...tweens.keys()];
     for (const [k, tw] of tweens) if (now >= tw.end) tweens.delete(k);
     publish();
+    for (const k of moving) if (cur[k] !== before[k]) emit('move', k, cur[k], before[k], k);
   }
   function tick() {
     raf = 0;
@@ -167,7 +170,9 @@ const MooodState = (() => {
         }
         return end;
       },
-      // on('change', fn(value, old, key)) · on('change', key, fn) · on('load', fn(state))
+      // on('change', fn(value, old, key)) · on('change', key, fn) — a value set (with `over`: where it
+      // goes, once); on('move', [key,] fn(value, last, key)) — a value moving, each frame (set with
+      // `over`, path), till it stops; on('load', fn(state))
       on(ev, a, b) {
         const fn = typeof a === 'function' ? a : b, key = typeof a === 'function' ? null : String(a);
         listeners.push({ ev, key, fn, who });

package/engine/select.js

@@ -51,12 +51,12 @@ const MooodSelect = (() => {
     // so a plane's view() maps painted coordinates straight to where they are in the frame;
     // the frame lies at (x, y) in the canvas.
     const size = () => { const f = stage.frame(); return { W: f.w, H: f.h, SW: I.STAGE * f.h, x: f.x, y: f.y }; };
-    // objects stand where the engine puts them (it may move them to their real distance)
-    const placed = (dz, o) => ({ ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: dz.yh });
+    // objects stand where the engine puts them now (its depths().now: their real distance, their `place`)
+    const placed = (dz, o) => dz.now(o).o;
     // a platformer's hero is drawn moved and turned (engine.js heroMatrix): so is its outline
     function heroed(m, o, cam, SW, H) {
       if (!o || !cam.hero || o.id !== cam.hero.id) return m;
-      const dz = I.depths(spec), h = I.heroMatrix(cam.hero, dz.objectX(o) * SW, dz.objectSize(o) * H / (o.height || 2));
+      const p = placed(I.depths(spec), o), h = I.heroMatrix(cam.hero, p.x * SW, p.size * H / (o.height || 2));
       return [m[0] * h[0], 0, 0, m[3], m[0] * h[4] + m[4], m[3] * h[5] + m[5]];
     }
     const layerSeed = i => I.hash(JSON.stringify(spec.layers || []) + (spec.title || '')) + i * 101;
@@ -125,7 +125,7 @@ const MooodSelect = (() => {
         const c = I.layer(b.bw * k, b.bh * k), g = c.getContext('2d');
         g.setTransform(k, 0, 0, k, -b.bx * k, -b.by * k);
         I.drawObject(g, o, SW, H, 0, []);
-        return { c, x: b.bx, y: b.by, k, Z: dz.objectZ(it), obj: it };
+        return { c, x: b.bx, y: b.by, k, Z: dz.now(it).Z, obj: it };
       }
       if (sel.startsWith('layers') && LAND.has(it.kind)) {
         if (it.kind === 'water') {
@@ -239,7 +239,7 @@ const MooodSelect = (() => {
       if (!coverage.has(path)) {
         const { W, H, SW } = size(), dz = I.depths(spec), it = item(spec, path), n = 64, c = I.layer(n, n * H / W), g = c.getContext('2d');
         // from the start — looking around, turned toward it
-        const round = I.camSetup(spec).round, p = round && !it.sky ? dz.objectAt(it) : null;
+        const round = I.camSetup(spec).round, p = round && !it.sky ? dz.now(it).at : null;
         const at = I.placeOf(it, { x: 0, y: 0, z: 0, h: 1, yaw: p ? Math.atan2(p.X, p.Z) : 0 }, W, H, dz, round && !it.sky), k = n / W;
         const m = at ? at.m : [0, 0, 0, 0, 0, 0];
         g.setTransform(m[0] * k, 0, 0, m[3] * k, m[4] * k, m[5] * k);

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.2",
-  "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",