Real-Time 3D Avatar Motion Capture Web App | MediaPipe + Three.js + VRM скачать в хорошем качестве

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!)