iGun is an advanced, fully browser-based First Person Shooter (FPS) built entirely with Web Technologies. It features a unique cross-device control scheme: your smartphone acts as the physical gun controller using native HTML5 sensor APIs synced in real-time over WebSockets to your desktop screen.
- 📱 Phone-as-a-Controller (Zero App Install): Simply scan a QR code or visit a link on your phone. The game hooks directly into your phone's native hardware (Gyroscope & Accelerometer) via Web APIs.
- ⚡ Zero-Latency Sync: Device orientation and motion data are streamed in real-time to the desktop client via WebSockets, allowing you to aim by physically moving your phone and shoot by jerking it forward.
- 🎨 AAA "Bodycam" Aesthetics: Features a heavily stylized, gritty atmosphere with procedural heavy rain, additive blending, dynamic lighting, and a glassmorphism UI.
- 💥 WebAssembly Physics Engine: Powered by Rapier Physics, the game features precise raycast shooting and highly realistic procedural "ragdoll" animations when enemies are eliminated.
- 🏙️ Procedural Generation: The entire 3D environment (Indian street-style buildings, puddles, streetlamps, and weather) is procedurally generated using math and primitive geometry, ensuring blazing-fast load times without relying on heavy external 3D models.
iGun pushes the limits of what is possible in a web browser. Here is exactly what powers it:
- React & Vite: The core UI framework and hyper-fast build tool.
- Three.js & React Three Fiber: The backbone of the graphics engine. R3F allows us to write complex 3D math and WebGL rendering using standard declarative React components.
- Zustand: A tiny, blazing-fast state manager. It acts as the central brain for game state (health, score, ammo) outside the React render cycle, ensuring the 3D graphics never lag when the UI updates.
- Tailwind CSS: Used for styling the highly modern, glowing 2D HUD overlays.
- Rapier (@react-three/rapier): A high-performance physics engine written in Rust and compiled to WebAssembly (Wasm). It handles rigid body collisions, gravity, bullet raycasting, and complex ragdoll torque calculations.
- WebSockets & HTML5 Device APIs: Utilizing the W3C
DeviceOrientationEventandDeviceMotionEventto capture 3D spatial data, and standard TCP WebSockets to blast that data to the desktop instantly.
Clone the repository and install the dependencies:
git clone https://github.com/yourusername/igun.git
cd igun
npm installStart the Vite development server (which also automatically spins up the WebSocket server on the same port):
npm run dev- Open the provided
localhostor Local IP link on your desktop browser. - Grab your smartphone and navigate to the exact same Local Network IP (e.g.,
http://192.168.x.x:5173). - Tap "CONNECT" on your phone.
- Hold your phone flat like a gun (pointing the top edge forward toward your monitor) and tap "CALIBRATE".
- Physically move your phone around to aim on the desktop screen. Jerk the phone forward forcefully to shoot!
src/
├── components/
│ ├── Environment.tsx # Procedural 3D city, rain, and lighting
│ ├── MobileController.tsx # HTML5 sensor logic & WebSocket broadcaster
│ ├── PlayerRig.tsx # First-person camera, WebSocket receiver & physics
│ ├── Enemy.tsx # Rapier rigidbodies and ragdoll collapse math
│ ├── EnemyManager.tsx # Wave spawning system
│ ├── Weapon.tsx # 3D gun model rendering and recoil logic
│ └── HUD.tsx # Tailwind-powered glassmorphism UI overlays
├── store/
│ ├── useGameStore.ts # Zustand global state (Health, Ammo, Score)
│ └── ControllerState.ts # Singleton for tracking raw WebSocket input
└── utils/
└── AudioEngine.ts # Native Web Audio API for spatial sound
This repository contains no hardcoded IP addresses or external API keys. The local IP address resolution for the mobile pairing is handled dynamically at runtime using Node's os.networkInterfaces() within vite.config.ts.
Built with ❤️ pushing the boundaries of WebGL.