WebXR Hand Tracking Playground

A collection of interactive WebXR demos that explore hand tracking, VR interactions, physics, water/visual effects, and VRM character animation using Three.js.

Browse demos 🌊 Ocean Fun Department 💃 Animation Department 🧱 Physics Department View on GitHub
About this project

Built with Three.js, WebXR, TypeScript, and Webpack. Best experienced on a headset with hand tracking (e.g., Meta Quest), but most scenes also open on desktop/mobile browsers.

Hand tracking VRM animation Physics Post‑processing Water & ocean

Departments

Ocean Fun Department

All water and ocean related demos: FFT ocean simulations, shorebreak surf, caustics, sea fog, ships, sharks, and natural disasters — 14 scenes in one place.

Animation Department

All character animation demos: VRM avatars, BVH motion capture playback, salsa bars, lessons and parties, and gesture-controlled animation — 12 scenes in one place.

Physics Department

All physics related demos: Ammo.js rigid bodies, hand-tracked ball grabbing and throwing, and convex object breaking — 4 scenes in one place.

Visual effects & rendering

Post-processing and render-pass experiments on the custom WebXR two-pass loop.

WebXR postprocessing

Three triangles with Bloom effect (ported from Cody Bennet’s PR).

Unreal Bloom (WebXR)

Ported from Three.js.

Depth Visualization

Real-time linear depth visualization across 3D geometry in WebXR (stereo VR) and desktop mode.

Tracking & input

Hand and face tracking: WebXR native hand input and MediaPipe webcam fallback.

Hand input profiles

Ported from Three.js examples.

Mediapipe Face Raccoon

Face tracking fun.

Mediapipe Face VRM

Drive a VRM with Mediapipe face tracking.

Worlds & science

Explorable scenes and visualizations.

Moon walk

Apollo 11 moon landing scene.

Elements

Atom Visualizer.

Built with

Three.js WebXR Mediapipe TypeScript Webpack

Tested with

Meta Quest Chrome

Source code

GitHub Repository