Viewer: wall-clock playback that holds while waiting for frames

viewer.py

@@ -122,7 +122,8 @@ CSS = """
 JS = """
 const view = element.querySelector('.f3a-view');
 const labelEl = element.querySelector('.f3a-label');
-const st = { ready: false, run: null, frames: [], labels: [], cursor: 0, done: false, lastT: 0, bodyGroups: {}, meshCache: {}, meshUrl: null };
+const st = { ready: false, run: null, frames: [], labels: [], shown: -1, playT0: 0, done: false, msgs: 0, bodyGroups: {}, meshCache: {}, meshUrl: null };
+element.f3aState = st;
 let THREE = null;
 let renderer, scene, camera, controls, root, dynamicRoot;
 
@@ -186,25 +187,38 @@ async function buildScene(msg) {
 function handle(msg) {
   if (!msg || !st.ready) return;
   if (msg.kind === 'reset') {
-    st.run = msg.run; st.frames = []; st.labels = []; st.cursor = 0; st.done = false;
+    st.run = msg.run; st.frames = []; st.labels = []; st.shown = -1; st.playT0 = performance.now(); st.done = false;
     st.building = true;
     buildScene(msg).then(() => { st.building = false; labelEl.textContent = msg.label || 'ready'; });
     return;
   }
+  st.msgs += 1;
   if (msg.kind === 'frames' && msg.run === st.run) {
     msg.poses.forEach((p, i) => { st.frames[msg.start + i] = p; st.labels[msg.start + i] = msg.labels[i]; });
     if (msg.done) st.done = true;
   }
 }
 
-function tick(t) {
+function available() {
+  let n = st.shown;
+  while (st.frames[n + 1]) n += 1;
+  return n;
+}
+
+function tick() {
   requestAnimationFrame(tick);
   if (!renderer) return;
-  if (!st.building && t - st.lastT >= 1000 / 30 - 1 && st.cursor < st.frames.length && st.frames[st.cursor]) {
-    applyPose(st.frames[st.cursor]);
-    labelEl.textContent = st.labels[st.cursor] || '';
-    st.cursor += 1;
-    st.lastT = t;
+  const now = performance.now();
+  if (!st.building) {
+    const avail = available();
+    const due = Math.floor((now - st.playT0) * 0.03);
+    if (due > avail) st.playT0 = now - (avail + 1) / 0.03;
+    const target = Math.min(due, avail);
+    if (target > st.shown) {
+      applyPose(st.frames[target]);
+      labelEl.textContent = st.labels[target] || '';
+      st.shown = target;
+    }
   }
   controls.update();
   renderer.render(scene, camera);
@@ -218,7 +232,7 @@ function resize() {
   camera.updateProjectionMatrix();
 }
 
-element.querySelector('.f3a-replay').addEventListener('click', () => { st.cursor = 0; });
+element.querySelector('.f3a-replay').addEventListener('click', () => { st.shown = -1; st.playT0 = performance.now(); });
 
 (async () => {
   THREE = await import('https://esm.sh/three@0.160.0');