src/video/Debug.tsx

import { useEffect, useRef } from 'react'
import { Engine } from './engine'
import { baseState, orbit } from './state'
import { POSE } from './model'
import type { V3 } from './math'

/** Debug still renderer: ?debug=<json> */
export default function Debug() {
  const ref = useRef<HTMLCanvasElement>(null)
  useEffect(() => {
    const q = JSON.parse(decodeURIComponent(new URLSearchParams(location.search).get('debug') || '{}'))
    const eng = new Engine(); eng.setSize(540, 960)
    const c = ref.current!; c.width = 540; c.height = 960
    const target: V3 = q.target ?? [0, 0.2, 0]
    const s = baseState({
      cam: { pos: orbit(target, q.dist ?? 5, q.yaw ?? 0, q.pitch ?? 0.1), target, fov: 35 },
      arm: { pos: [0, 0, 0], rot: q.rot ?? [0, 0.6, 0] },
      pose: q.poseArr ?? [...(POSE as Record<string, number[]>)[q.pose ?? 'rest']],
      xray: q.xray ?? 0, bone: q.bone ?? 1, tendon: q.tendon ?? 1, sheath: q.sheath ?? 1, thick: q.thick ?? 0, pain: q.pain ?? 0, friction: q.friction ?? 0,
      props: Object.fromEntries((q.props ?? []).map((p: string) => [p, { vis: 1, depth: 0.3 }])),
      time: 1,
    })
    eng.render({ views: [{ rect: [0, 0, 1, 1], state: s }] }, c.getContext('2d')!, 1, { w: 540, h: 960 })
    const m = eng.model, cam = eng.cams[0]
    const pr = (o: import('three').Object3D, y: number) => { const v = o.localToWorld(new (m.anchors.pain.constructor as any)(0, y, 0)); const q = m.project(v, cam); return [Math.round(q.x * 540), Math.round(q.y * 960), +v.x.toFixed(2), +v.y.toFixed(2), +v.z.toFixed(2)] }
    const info: Record<string, unknown> = {
      thumbTip: pr(m.thumbJoints[2], 0.27), idxTip: pr(m.fingerJoints[0][2], 0.2), midTip: pr(m.fingerJoints[1][2], 0.21), litTip: pr(m.fingerJoints[3][2], 0.18),
      wrist: pr(m.wrist, 0), elbow: pr(m.forearm, -2.6), pain: (() => { const q = m.project(m.anchors.pain, cam); return [Math.round(q.x * 540), Math.round(q.y * 960)] })(),
    }
    for (const [k, o] of Object.entries(m.props)) if (o.visible) { const v = o.getWorldPosition(new (m.anchors.pain.constructor as any)()); const q = m.project(v, cam); info['prop_' + k] = [Math.round(q.x * 540), Math.round(q.y * 960), +v.x.toFixed(2), +v.y.toFixed(2), +v.z.toFixed(2)] }
    console.log('INFO ' + JSON.stringify(info))
    ;(window as unknown as { __done: boolean }).__done = true
  }, [])
  return <canvas ref={ref} style={{ width: 540, height: 960 }} />
}