@moood/render 0.1.3 → 0.1.5

package/engine/kit.js

@@ -9,7 +9,11 @@
 //     uses (spec.modules) and gets them as kit.<name>, as they are at the commit it is shown at.
 //   the scene's lib — code its own elements and scripts share: spec.lib, the body of
 //     function (anim, kit) that returns what it offers.
-// Painting code sees them as e.anim, e.kit, e.lib; scripts as scene.anim, scene.kit, scene.lib.
+//   the scene's land — spec.relief, the body of function (across, distance, anim, lib) that returns
+//     the ground's height there (metres; across to the right of the start's line of sight, distance
+//     ahead of it): what stands, walks, casts a shadow and looks on it, all on the one ground.
+// Painting code sees them as e.anim, e.kit, e.lib, e.ground; scripts as scene.anim, scene.kit,
+// scene.lib, scene.ground.
 // Where a spec's modules come from (the page says, with the spec):
 //   {world, refs} — the world's id and the modules by their content's sha ({name: {code, data}},
 //     as the scene's payload has them: the commit it shows); a module the refs don't name (a draft
@@ -120,9 +124,29 @@ const MooodKit = (() => {
       return built(refs);
     });
   }
-  // what a spec's code shares, once its modules are here: { kit, lib } — or a promise of it (they
-  // are still on their way); `source`: where its modules come from (above). The same modules are
-  // the same kit, and a lib on them is made once.
+  // the ground's height (metres) at (across, distance) as `relief` says — said once if it throws or
+  // returns no number (it is flat there then); null without a relief
+  const grounds = new Map();
+  function groundOf(relief, lib, key) {
+    if (!relief) return null;
+    if (!grounds.has(key)) {
+      let fn = null, said = false;
+      try { fn = new Function('across', 'distance', 'anim', 'lib', relief); } catch (err) { report('relief', err); }
+      const say = msg => { if (!said) { said = true; report('relief', msg); } };
+      grounds.set(key, fn && ((across, distance) => {
+        try {
+          const h = fn(across, distance, anim, lib);
+          if (Number.isFinite(h)) return h;
+          say(`at across ${across}, distance ${distance} it returned ${h}, not a number of metres`);
+        } catch (err) { say(err.message || err); }
+        return 0;
+      }));
+    }
+    return grounds.get(key);
+  }
+  // what a spec's code shares, once its modules are here: { kit, lib, ground } — or a promise of it
+  // (they are still on their way); `source`: where its modules come from (above). The same modules
+  // are the same kit, and a lib on them is made once.
   const kits = new Map();
   function shared(spec, source) {
     const done = ({ mods, key }) => {
@@ -133,10 +157,30 @@ const MooodKit = (() => {
         try { value = new Function('anim', 'kit', lib)(anim, kit) || {}; } catch (err) { report('lib', err); }
         libs.set(`${key}\n\n${lib}`, value);
       }
-      return { kit, lib: lib ? libs.get(`${key}\n\n${lib}`) : {} };
+      const made = lib ? libs.get(`${key}\n\n${lib}`) : {}, relief = typeof spec?.relief === 'string' && spec.relief.trim() ? spec.relief : null;
+      return { kit, lib: made, ground: groundOf(relief, made, `${key}\n\n${lib}\n\n${relief}`) };
     };
     const m = modulesOf(spec, source);
     return m instanceof Promise ? m.then(done) : done(m);
   }
-  return { anim, shared };
+  // The state keys the engine itself reads for a spec — whatever the scene's own code does: the film's
+  // camera and fade (every scene's), an insert's key, a place's, a redraw's, the light's looks, a
+  // light's `on` and place — each with what it takes, as spec.states describes a key ({range} or
+  // {type}; {} — anything). A key set from outside that neither these nor the scene knows, or one of
+  // these set to what the engine can't take, is said (scenestate.js).
+  const NUM = { type: 'number' }, UNIT = { range: [0, 1] };
+  const CAMERA = { camera_target: {}, camera_shot: {}, camera_frame: {}, camera_glide: NUM, camera_x: NUM, camera_z: NUM, camera_look: NUM, camera_h: NUM, fade: UNIT, fade_color: { type: 'string' } };
+  function keys(spec) {
+    const out = new Map(Object.entries(CAMERA)), obj = v => (v && typeof v === 'object' && !Array.isArray(v) ? v : {});
+    const add = (d, ...ks) => { for (const k of ks) if (typeof k === 'string') out.set(k, d); };
+    for (const o of Array.isArray(spec?.objects) ? spec.objects : []) {
+      if (!o || typeof o !== 'object') continue;
+      add(UNIT, o.insert); add(NUM, ...Object.values(obj(o.place)));
+      add({}, ...(Array.isArray(o.redraw) ? o.redraw : Object.keys(obj(o.redraw))));
+    }
+    for (const l of Array.isArray(spec?.lights) ? spec.lights : []) if (l && typeof l === 'object') { add(UNIT, l.on); add(NUM, ...Object.values(obj(l.place))); }
+    add(UNIT, ...Object.keys(obj(obj(spec?.light).looks)));
+    return out;
+  }
+  return { anim, shared, keys };
 })();

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,12 @@
        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 it does wrong without failing (a name it does not know, a
+       mistyped key) in window.__mooodRenderWarnings, 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. The stage is window.__mooodStage: a render steps the film unseen to the moments it
+       takes (draw(false)) and asks what is where (inspect()); it is checked as it is drawn (a painting cut
+       off by its box is said). ?debug — what is where, over the frame. -->
   <canvas id="scene"></canvas>
   <header class="titles"><h1 id="title"></h1><p id="caption"></p></header>
   <script src="kit.js"></script>
@@ -33,9 +38,11 @@
           document.getElementById('caption').textContent = spec.caption || '';
         }
         const modules = { texts: window.__mooodModules || {} }; // the modules the scene lists, given (kit.js)
-        const canvas = document.getElementById('scene'), stage = Moood.mount(canvas);
+        const canvas = document.getElementById('scene'), stage = window.__mooodStage = Moood.mount(canvas, { check: true });
+        // 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 })));
@@ -43,6 +50,7 @@
       await new Promise(r => setTimeout(r, 1500));
       errors.push(...(window.__mooodErrors || []));
       window.__mooodRenderErrors = errors;
+      window.__mooodRenderWarnings = [...(window.__mooodWarnings || []), ...MooodState.unknown()];
       document.title = 'ready';
     })();
   </script>