AR Color Shooter
Immersive WebGL Gaming with Hand Gestures
01_The Vision
AR Color Shooter bridges the gap between casual browser games and immersive augmented reality. It answers the question: "Can we create a console-like motion gaming experience without any controllers?"
By turning the user's hand into a weapon and their webcam into a sensor, it creates a "magic window" effect where digital enemies interact with physical movements.
02_Technicals
A high-performance blend of Computer Vision and 3D Graphics.
Three.js Physics
The 3D world is rendered using Three.js with a custom physics engine for projectile collisions. Enemies spawn in 3D space and move towards the "screen" plane, creating depth and urgency.
Gesture Firing Mechanism
Unlike simple click games, this uses a "Pinch-to-Shoot" mechanic powered by MediaPipe. The system calculates the distance between the index finger and thumb tip in real-time to trigger events.
60 FPS Optimization
Running CV and 3D rendering simultaneously is heavy. We utilize WebWorkers to offload tracking calculations from the main render thread, ensuring buttery smooth gameplay even on mid-range laptops.
03_Future Scope
This project lays the groundwork for more complex webAR experiences. Future iterations could include multi-hand tracking for dual-wielding mechanics or WebRTC for multiplayer co-op sessions.