FreeMoCap Studio Web

用浏览器实时捕捉你每一个动作细节 — A real-time markerless motion capture analysis dashboard, powered by MediaPipe & Three.js.

FreeMoCap Studio，用你的摄像头，AI 实时捕捉你每一个动作细节。 打开即用，33 个人体关键点瞬间贴合你的身体。左侧 2D 骨骼叠加、中间 3D 骨骼视口、右侧实时关节角度与运动轨迹图表——全部无延迟，全部跑在浏览器里。

---

✨ Features

Feature	Detail
Real-time Pose Tracking	MediaPipe PoseLandmarker, 33-point full-body, GPU-accelerated
2D Skeleton Overlay	Color-coded joints on live camera feed (left=cyan · right=blue · center=orange)
Joint Angle Visualization	Arc + degree label drawn directly on body for 8 key joints (knee · elbow · shoulder · hip)
3D Skeleton Viewer	Three.js real-time 3D skeleton with smooth EMA + lerp filtering
Motion Analysis Charts	Joint angle · angular velocity · displacement · XYZ trajectory (Chart.js)
Motion Trail	Wrist movement trails in 3D space
Recording	Frame-by-frame data capture during live tracking
Data Export	CSV (scientific analysis) · JSON (full frame data) · PNG (3D screenshot)
Video File Analysis	Load local video files for post-hoc tracking
Smoothing Filter	EMA (α=0.35) + 3D lerp to eliminate jitter

---

🚀 Quick Start

git clone https://github.com/MindDock/freemocap-web.git
cd freemocap-web
npm install
npm run dev
# Open http://localhost:5174

First launch: Click ▶ 开始追踪 — MediaPipe model (~4MB) downloads automatically on first use.

---

🖥️ Interface Layout

┌─────────────────────────────────────────────────────┐
│  Header: Mode tabs · Status · Export · Settings      │
├──────────────────┬──────────────────┬────────────────┤
│  📷 Camera/Video │  💀 3D Skeleton  │  📊 Analysis   │
│                  │                  │                 │
│  Live webcam     │  Three.js 3D     │  Angle chart   │
│  2D skeleton     │  OrbitControls   │  Velocity      │
│  Angle arcs +°   │  Motion trails   │  Displacement  │
│                  │  View presets    │  XYZ trajectory│
├──────────────────┴──────────────────┴────────────────┤
│  Body stats: COM height · Shoulder width · FPS        │
└─────────────────────────────────────────────────────┘

---

📐 Joint Angle Overlays

FreeMoCap Studio draws real-time angle arcs at 8 key joints:

Joint	Points Used
左/右膝 (Knee)	Hip → Knee → Ankle
左/右肘 (Elbow)	Shoulder → Elbow → Wrist
左/右肩 (Shoulder)	Elbow → Shoulder → Hip
左/右髋 (Hip)	Shoulder → Hip → Knee

---

📁 Project Structure

freemocap-web/
├── src/
│   ├── engine/
│   │   ├── SkeletonRenderer.js   # Three.js 3D skeleton (33 joints + bone lines)
│   │   └── MotionAnalyzer.js     # Biomechanics: angles, velocity, displacement, CSV/JSON export
│   ├── main.js                   # App entry: MediaPipe init, tracking loop, UI, charts
│   └── style.css                 # Biotech dark theme (cyan/green)
├── index.html                    # 3-panel layout
├── vite.config.js                # Port 5174
└── package.json

---

🔬 Inspired By

This project is a browser-based demonstration of concepts from FreeMoCap v1.8:

FreeMoCap (Python Desktop)	FreeMoCap Studio Web (Browser)
Multi-camera 3D triangulation	Single-camera MediaPipe estimation
ChArUco board calibration	No calibration needed
FBX/BVH/Blender output	CSV/JSON/PNG export
Reprojection outlier rejection (v1.8)	EMA smoothing filter
Research-grade offline processing	Real-time interactive analysis

---

🛠️ Tech Stack

• Three.js ^0.170 — 3D skeleton rendering
• MediaPipe Tasks Vision — Pose landmark detection (CDN, GPU delegate)
• Chart.js ^4.4 — Real-time motion analysis charts
• Vite ^6 — Build tool & dev server

---

📄 License

MIT — Free to use, modify, and distribute.

---

🔗 Related

• Action Director Web — Browser-based 3D animation director & ControlNet renderer
• freemocap/freemocap — Open-source multi-camera markerless MoCap system