WEB / 2026
ハンドトラッキング・パーティクルシステム
A WebGL interaction that tracks both hands and maps gestures to particle explosion, reconstruction, orbital rotation, and model switching.
- 01Real-time two-hand tracking
- 02Low-latency 1-Euro Filter
- 03Privacy-preserving sensor view
Problem & goal
This experiment connects body movement directly to 3D visuals. Although gestures are intuitive, camera noise and recognition errors can immediately create unstable motion and false input.
Technical challenge
The challenge was assigning distinct roles to both hands, detecting open/closed states and wrist tilt with low latency, and stabilizing input while rendering particles, GLB models, and bloom post-processing.
Solution
MediaPipe landmarks determine handedness, openness, and tilt, while a 1-Euro Filter adapts smoothing to movement speed. Left and right hands have separate responsibilities, and only the skeleton—not raw video—is shown.
Result & learning
The finished demo controls particle explosion, reconstruction, orbit, and model changes through a small gesture vocabulary. It runs as a no-build vanilla project on GitHub Pages.