Devpost Submission

Inspiration

Català:

La captura de moviment professional és extremadament cara i inaccessible per a la majoria de creadors, artistes i investigadors. Volíem democratitzar aquesta tecnologia creant un sistema que qualsevol persona amb dues càmeres IP pogués utilitzar. Ens va inspirar la idea de portar els moviments del món real al metavers de forma senzilla, convertint qualsevol espai en un estudi de captura de moviment. A més, volíem explorar com la intel·ligència artificial pot transformar píxels en experiències 3D immersives.

English:

Professional motion capture is extremely expensive and inaccessible for most creators, artists, and researchers. We wanted to democratize this technology by creating a system that anyone with two IP cameras could use. We were inspired by the idea of bringing real-world movements into the metaverse in a simple way, turning any space into a motion capture studio. Additionally, we wanted to explore how artificial intelligence can transform pixels into immersive 3D experiences.


What it does

Català:

El nostre sistema utilitza dues càmeres IP posicionades a 90 graus per crear un tracking 3D complet de persones en temps real. Detecta i segueix múltiples persones simultàniament, reconstrueix les seves posicions en 3D i les representa amb avatars virtuals animats (Goku, Luigi, Spiderman, etc.) que repliquen exactament els seus moviments.

Funcionalitats principals:

  • Captura sincronitzada des de dues perspectives perpendiculars
  • Detecció de 17 punts clau del cos amb YOLOv8-Pose
  • Reconstrucció 3D mitjançant triangulació estereoscòpica
  • Tracking multi-persona amb IDs persistents
  • Avatars VRM animats en temps real amb els moviments detectats
  • Mapa top-down 2D amb trajectòries de moviment
  • Interfície web interactiva amb tres vistes simultànies

English:

Our system uses two IP cameras positioned at 90 degrees to create complete 3D tracking of people in real-time. It detects and tracks multiple people simultaneously, reconstructs their positions in 3D, and represents them with animated virtual avatars (Goku, Luigi, Spiderman, etc.) that precisely replicate their movements.

Main features:

  • Synchronized capture from two perpendicular perspectives
  • Detection of 17 body keypoints with YOLOv8-Pose
  • 3D reconstruction through stereoscopic triangulation
  • Multi-person tracking with persistent IDs
  • VRM avatars animated in real-time with detected movements
  • 2D top-down map with movement trajectories
  • Interactive web interface with three simultaneous views

How we built it

Català:

Arquitectura del sistema:

  1. Captura de vídeo: Dues càmeres connectades amb IP Webcam a 1080p@30fps posicionades perpendiculars entre si. Una càmera captura el moviment en l'eix X i l'altra en l'eix Y, proporcionant dues perspectives complementàries de l'escena.

  2. Backend (Python + Flask): YOLOv8-Pose processa cada frame de les dues càmeres per detectar els keypoints 2D del cos humà. L'algoritme de triangulació estereoscòpica fusiona aquests keypoints per calcular les coordenades 3D reals de cada persona. Els filtres de Kalman suavitzen les trajectòries eliminant el soroll de les deteccions. El sistema de tracking assigna identificadors únics a cada persona detectada i manté la seva identitat al llarg del temps. WebSockets envien aquestes dades processades al frontend amb latència mínima.

  3. Frontend (Three.js + VRM): Three.js renderitza l'escena 3D amb il·luminació realista i textures. La llibreria VRM carrega els models d'avatars i els anima aplicant les transformacions calculades des dels moviments capturats. Un canvas 2D dibuixa el mapa top-down mostrant la posició i trajectòria de cada persona. Socket.IO rep les actualitzacions constantment per mantenir la sincronització.

  4. Calibració: Procés que mapeja les coordenades de cada càmera a un espai 3D global compartit, utilitzant punts de referència coneguts per establir la relació geomètrica entre ambdues perspectives.

Stack tecnològic:

  • Backend: Python, Flask, OpenCV, NumPy, Ultralytics YOLOv8, MediaPipe
  • Frontend: JavaScript, Three.js, VRM, WebGL, Socket.IO
  • IA/ML: YOLO Pose Estimation, Kalman Filters
  • Hardware: 2x Mòbils amb IP Webcam

English:

System architecture:

  1. Video capture: Two cameras connected via IP Webcam at 1080p@30fps positioned perpendicular to each other. One camera captures movement on the X-axis and the other on the Y-axis, providing two complementary perspectives of the scene.

  2. Backend (Python + Flask): YOLOv8-Pose processes each frame from both cameras to detect 2D body keypoints. The stereoscopic triangulation algorithm fuses these keypoints to calculate the real 3D coordinates of each person. Kalman filters smooth the trajectories by removing detection noise. The tracking system assigns unique identifiers to each detected person and maintains their identity over time. WebSockets send this processed data to the frontend with minimal latency.

  3. Frontend (Three.js + VRM): Three.js renders the 3D scene with realistic lighting and textures. The VRM library loads avatar models and animates them by applying transformations calculated from captured movements. A 2D canvas draws the top-down map showing each person's position and trajectory. Socket.IO receives updates constantly to maintain synchronization.

  4. Calibration: Process that maps each camera's coordinates to a shared global 3D space, using known reference points to establish the geometric relationship between both perspectives.

Tech stack:

  • Backend: Python, Flask, OpenCV, NumPy, Ultralytics YOLOv8, MediaPipe
  • Frontend: JavaScript, Three.js, VRM, WebGL, Socket.IO
  • AI/ML: YOLO Pose Estimation, Kalman Filters
  • Hardware: 2x Mobile phones with IP Webcam

Challenges we ran into

Català:

  • Sincronització temporal: Les càmeres IP tenen latències variables. Vam haver d'implementar un sistema de buffering i timestamps per assegurar que els frames corresponents es processin junts.

  • Calibració espacial: Mapejar correctament les coordenades de dues càmeres amb perspectives diferents va ser complex. Vam desenvolupar un procés de calibració semiautomàtic utilitzant punts de referència físics.

  • Rendiment en temps real: Processar YOLOv8 (model pesat) en dos streams simultanis mentre es fa triangulació i animació era computacionalment exigent. Vam optimitzar utilitzant processament asíncron i reducció de resolució estratègica.

  • Mapping de keypoints a esquelet VRM: Els 17 keypoints de YOLO no mapegen directament als ossos VRM. Vam haver de crear un sistema d'interpolació i inverse kinematics per generar moviments naturals.

  • Oclusió i ambigüitat: Quan una persona està visible només en una càmera o els keypoints són ambigus, el sistema pot perdre el tracking. Vam implementar predicció basada en Kalman per mantenir la continuïtat.

  • Jitter en els avatars: Els keypoints detectats tenen soroll que fa que els avatars tremolin. Els filtres de Kalman van ajudar però van introduir una petita latència que vam haver de balancejar.

English:

  • Temporal synchronization: IP cameras have variable latencies. We had to implement a buffering and timestamp system to ensure corresponding frames are processed together.

  • Spatial calibration: Correctly mapping coordinates from two cameras with different perspectives was complex. We developed a semi-automatic calibration process using physical reference points.

  • Real-time performance: Processing YOLOv8 (heavy model) on two simultaneous streams while doing triangulation and animation was computationally demanding. We optimized using asynchronous processing and strategic resolution reduction.

  • Keypoint to VRM skeleton mapping: YOLO's 17 keypoints don't directly map to VRM bones. We had to create an interpolation system and inverse kinematics to generate natural movements.

  • Occlusion and ambiguity: When a person is visible only in one camera or keypoints are ambiguous, the system can lose tracking. We implemented Kalman-based prediction to maintain continuity.

  • Avatar jitter: Detected keypoints have noise that makes avatars shake. Kalman filters helped but introduced a small latency that we had to balance.


What we learned

Català:

  • Geometria epipolar i triangulació: Vam aprendre com funciona la reconstrucció 3D des de múltiples vistes 2D i la importància de la calibració precisa.

  • Pipeline de visió per computador: La qualitat del resultat final depèn més de la sincronització i calibració que de la precisió individual de cada component.

  • Optimització de rendiment: Processar IA en temps real requereix decisions estratègiques sobre on utilitzar GPU, com fer buffering i quan sacrificar qualitat per velocitat.

  • Arquitectura VRM: Vam descobrir com funcionen els esquelests humanoides, les rotacions quaternion i la inverse kinematics per animació realista.

  • Filtres de Kalman: Aprendre a utilitzar-los per suavitzar dades sorolloses sense introduir massa latència va ser clau per l'experiència d'usuari.

  • WebSockets i streaming: Gestionar dades en temps real entre backend i frontend amb baixa latència va ser un repte interessant.

  • Treball en equip: Coordinar desenvolupament de hardware, backend IA, i frontend 3D en paral·lel durant una hackathon va requerir comunicació constant i divisió clara de tasques.

English:

  • Epipolar geometry and triangulation: We learned how 3D reconstruction works from multiple 2D views and the importance of precise calibration.

  • Computer vision pipeline: The quality of the final result depends more on synchronization and calibration than on the individual accuracy of each component.

  • Performance optimization: Processing AI in real-time requires strategic decisions about where to use GPU, how to buffer, and when to sacrifice quality for speed.

  • VRM architecture: We discovered how humanoid skeletons work, quaternion rotations, and inverse kinematics for realistic animation.

  • Kalman Filters: Learning to use them to smooth noisy data without introducing too much latency was key for the user experience.

  • WebSockets and streaming: Managing real-time data between backend and frontend with low latency was an interesting challenge.

  • Teamwork: Coordinating hardware, AI backend, and 3D frontend development in parallel during a hackathon required constant communication and clear task division.


What's next for [Nom del vostre projecte]

Català:

Millores tècniques:

  • Afegir suport per més de 2 càmeres per cobertura 360°
  • Implementar pose estimation 3D directa amb models com MediaPipe Holistic
  • Optimitzar per córrer en dispositius edge com Jetson Nano o Raspberry Pi
  • Afegir tracking de mans i dits per interaccions més detallades

Reconeixement facial i assignació d'avatars:

  • Implementar reconeixement facial per identificar cada persona i assignar-li automàticament un avatar personalitzat. Això permetria que cada usuari tingui el seu propi avatar distintiu que apareix automàticament quan entra a l'escena.

Noves funcionalitats:

  • Mode de gravació per exportar animacions en format FBX/BVH
  • Integració amb motors de joc com Unity i Unreal Engine
  • Suport per streaming en directe a plataformes com Twitch amb avatars
  • Sistema de captura de moviment per múltiples persones interactuant

Aplicacions reals:

  • Col·laborar amb clubs esportius per anàlisi biomecànic
  • Crear instal·lacions artístiques interactives en museus
  • Desenvolupar una versió comercial low-cost per creadors de contingut
  • Explorar aplicacions en rehabilitació física i teràpia

Visió a llarg termini: Volem que aquest projecte esdevingui una eina open-source que empoderi creadors, artistes i investigadors a experimentar amb captura de moviment sense barreres econòmiques. El nostre somni és veure-ho utilitzat en estudis independents, escoles d'art, i fins i tot en producció audiovisual professional.

English:

Technical improvements:

  • Add support for more than 2 cameras for 360° coverage
  • Implement direct 3D pose estimation with models like MediaPipe Holistic
  • Optimize to run on edge devices like Jetson Nano or Raspberry Pi
  • Add hand and finger tracking for more detailed interactions

Facial recognition and avatar assignment:

  • Implement facial recognition to identify each person and automatically assign them a personalized avatar. This would allow each user to have their own distinctive avatar that appears automatically when they enter the scene.

New features:

  • Recording mode to export animations in FBX/BVH format
  • Integration with game engines like Unity and Unreal Engine
  • Support for live streaming to platforms like Twitch with avatars
  • Motion capture system for multiple interacting people

Real applications:

  • Collaborate with sports clubs for biomechanical analysis
  • Create interactive art installations in museums
  • Develop a low-cost commercial version for content creators
  • Explore applications in physical rehabilitation and therapy

Long-term vision: We want this project to become an open-source tool that empowers creators, artists, and researchers to experiment with motion capture without economic barriers. Our dream is to see it used in independent studios, art schools, and even in professional audiovisual production.

Share this project:

Updates