Ruview/examples/three.js
Claude 3161af52da
feat(offaxis): clean-room Kooima off-axis projection in Rust/WASM (ADR-324)
New leaf crate v2/crates/ruview-offaxis implementing ADR-324's projection
core from the published math only (Kooima 2008 generalized perspective
projection; Casiez 2012 one-euro filter) — no code from the unlicensed
prior-art repo. Dependency-free native core; wasm-bindgen surface gated to
wasm32 (cdylib+rlib, ~54 KB wasm after bindgen).

- projection: Screen (3 corners, any orientation) + off_axis() -> typed
  errors, never NaN matrices; column-major f64 (three.js Matrix4 layout).
  Tests pin the defining invariants: screen corners -> NDC corners for a
  grid of eye positions and tilted screens; screen-plane points are
  eye-invariant; centered eye reduces to the symmetric frustum; near/far
  map to NDC -1/+1.
- filter: one-euro with injected timestamps (no clock in crate);
  monotonicity/convergence/NaN-rejection tests.
- rf: field-peak extraction mirroring field_localize.rs constants
  (X_SCALE 0.6, Z_SCALE 0.5, PEAK_THRESHOLD 0.35) and the Tier B
  coarse-parallax stage (deadband, gain, hard clamp) so over-claiming is
  impossible at the API level. No accuracy numbers asserted.
- wasm: OffAxisCamera + RfParallax bindgen classes; per-frame updates hold
  last good state instead of throwing.
- benches (criterion): full Tier B frame ~598 ns; argmax scan optimized
  -18%/-33% (20x20/100x100). MEASURED table + reproducer in README.
- examples/three.js/demos/07-off-axis-window.html: demo with SYNTHETIC
  mouse simulator and labeled RF Tier B mode ('coarse body parallax - not
  head tracking'), physical calibration panel, /ws/sensing input, and a
  build-instructions overlay when the local pkg/ output is missing
  (generated artifacts stay uncommitted; .gitignore entry added).
- Validated 23 unit tests + doctest, clippy clean, wasm32 release build,
  Node smoke test of the bindgen output, and a headless-Chromium run of
  the demo (engine load, eye response, mode labels, ws failure path).
- ADR-324: header + section 2.5 amendment recording the Rust/WASM core.

Co-Authored-By: claude-flow <ruv@ruv.net>
Claude-Session: https://claude.ai/code/session_01BU3NcEgTpAVvu5QGtw4czT
2026-08-16 23:52:43 +00:00
..
demos feat(offaxis): clean-room Kooima off-axis projection in Rust/WASM (ADR-324) 2026-08-16 23:52:43 +00:00
screenshots feat(examples/three.js): cinematic skinned realtime pose demo + folder reorg (#584) 2026-05-17 17:01:02 -04:00
server feat(examples/three.js): cinematic skinned realtime pose demo + folder reorg (#584) 2026-05-17 17:01:02 -04:00
.gitignore feat(examples/three.js): cinematic skinned realtime pose demo + folder reorg (#584) 2026-05-17 17:01:02 -04:00
index.html feat(pages): deploy three.js demos to gh-pages/three.js/ (#649) 2026-05-19 18:17:43 -04:00
README.md feat(examples/three.js): cinematic skinned realtime pose demo + folder reorg (#584) 2026-05-17 17:01:02 -04:00

three.js demos

Five progressively richer browser demos of the ADR-097 sensing-helpers scene, ending with a live MediaPipe-Pose → Mixamo X Bot retargeting pipeline driven by a real ESP32 CSI feed.

Run them

python examples/three.js/server/serve-demo.py
# then open one of the URLs the script prints

server/serve-demo.py is a tiny ThreadingHTTPServer with aggressive no-cache headers — the stdlib http.server is single-threaded and times out on the parallel script + FBX fetches the demos make.

Demos

# File What it shows
01 demos/01-helpers.html Plain ADR-097 helpers in the point-cloud viewer
02 demos/02-cinematic.html Cinematic camera + pseudo-CSI visualization on top of #01
03 demos/03-skinned.html GLTF skinned mesh + additive animation blending
04 demos/04-skinned-fbx.html Mixamo X Bot loaded from FBX in the ADR-097 scene
05 demos/05-skinned-realtime.html Webcam → MediaPipe Pose Heavy → Mixamo IK retarget, live ESP32 CSI overlay
Screenshot
01 02
03 04
05

Layout

examples/three.js/
├── README.md
├── .gitignore
├── demos/                       # 5 self-contained HTML demos
│   ├── 01-helpers.html
│   ├── 02-cinematic.html
│   ├── 03-skinned.html
│   ├── 04-skinned-fbx.html
│   └── 05-skinned-realtime.html
├── screenshots/                 # one PNG per demo
│   └── 0N-*.png
├── server/
│   ├── serve-demo.py            # local HTTP server with no-cache headers
│   └── ruvultra-csi-bridge.py   # ESP32 CSI WebSocket bridge (ruvultra:8766)
└── assets/
    └── X Bot.fbx                # gitignored — get your own from mixamo.com
                                 #   (FBX Binary, T-Pose, Without Skin)
                                 # used by demos 04 and 05

Mixamo X Bot

Demos 04 and 05 expect assets/X Bot.fbx. It's gitignored (size + license boundary). Download yours from mixamo.com: pick the "X Bot" character, export as FBX Binary, T-Pose, Without Skin, and drop it into assets/.

Live ESP32 CSI overlay (demo 05 only)

server/ruvultra-csi-bridge.py is the systemd-deployable bridge that runs on the ruvultra host (over Tailscale). It listens for ESP32-S3 CSI on UDP and re-broadcasts it as WebSocket frames at ws://ruvultra:8766/csi. Demo 05 auto-connects; if the socket is down, it falls back to the bundled idle clip plus a synthetic CSI driver.

Open issues

  • #583 — head/face tracking fidelity in 05-skinned-realtime.html. Recommended fix: swap MediaPipe Pose Heavy for MediaPipe Holistic (same API, adds 468-point face mesh + hand landmarks for proper PnP head pose and finger curl tracking).