Real-Time 3D Avatar Motion Capture Web App | MediaPipe + Three.js + VRM

Описание: Real-Time 3D Avatar Motion Capture in Your Browser!

In this project, I built a web-based motion capture system that tracks your face, hands, and body in real-time and animates a 3D VRM avatar - all running locally in your browser with no server required!

🔗 Live Demo: https://mallikarjunreddy.com/edge_ai

🛠️ Tech Stack & Tools Used:
Frontend & 3D Graphics:

Three.js (r128) - 3D rendering engine
@pixiv/three-vrm - VRM avatar loading and rigging
OrbitControls - Camera controls for 3D scene navigation
AI & Motion Tracking:

MediaPipe Holistic - Google's ML solution for face, hand & pose detection
Kalidokit - Converts MediaPipe landmarks to VRM bone rotations
3D Assets & Optimization:

VRM Avatar (AliciaSolid) - Anime-style 3D character
GLB Environment - Autumn forest wooden house scene
gltf-transform - Model optimization (66MB → 9.7MB with WebP textures)
Build & Deployment:

Vite - Fast build tool with Terser minification
GitHub Pages - Static hosting
gh-pages - Automated deployment
Additional Features:

🌧️ Dynamic weather system (rain, thunder, lightning)
🐰 Animated rabbit that follows the avatar
🦜 Flying parrots with procedural animation
🎵 Ambient audio (rain sounds, thunder effects)
🐦 Bird's eye view mode
⚡ Performance Optimizations:
Reduced 3D model size from 66MB to 9.7MB (85% reduction)
WebP texture compression for faster loading
Code bundled & minified for production
Edge AI - all processing runs on-device (no cloud required!)