Rocket Rush

A browser-based 3D hyper-casual arcade tunnel runner built with React, Three.js, React Three Fiber, and a real-time bun WebSocket backend.

Comment

There was an unforgettable magic in the golden age of arcade gaming, games like F-Zero, Star Fox, WipEout, and Polybius gave players pure adrenaline, razor-sharp reflexes, and the hypnotic trance of speed. We wanted to recapture that high-octane thrill and bring it to modern web browsers with zero install barrier, instant 60+ FPS 3D rendering, beat-synced synthwave aesthetics, and competitive multiplayer dynamics.

Most web games suffer from clunky controls, heavy load times, or trivial client-side score spoofing. We asked ourselves:

Can we build a console-grade 3D arcade experience directly in WebGL? Can we create an autonomous "ghost ship" replay system—like Mario Kart time trials—that consumes minimal bandwidth? Can we integrate seamless Web3 & guest authentication with bulletproof, real-time server-side anti-cheat mathematical validation? That vision gave birth to Rocket Rush 🚀.

⚡ What It Does Rocket Rush is a 3D hyper-casual arcade tunnel runner where players pilot a high-speed spacecraft through procedurally evolving neon synthwave landscapes and hyperspace warps.

High-Speed Reflex Gameplay: Navigate tight tunnels and dodge dynamically spawning obstacle monoliths at ever-increasing velocities. Ghost Ship Time-Trial System: Race against an autonomous, translucent "ghost" of your personal best run. The ghost path is recorded at high precision and replayed with linear interpolation. Real-Time Global & Weekly Leaderboards: Compete against global pilots. Rank updates stream live over binary WebSockets with dynamic climbing animations. Frictionless Onboarding & Identity: Jump in instantly as an anonymous guest (rush_*) with zero friction, or connect via Solana wallet / Email OTP. When guests sign in, their personal bests, ghost runs, and custom callsigns are atomically merged. Synchronized Multiplayer Rooms: Create or join multiplayer lobby rooms sharing a deterministic pseudorandom seed ($RNG_{\text{seed}}$) to race the exact same obstacle patterns simultaneously. Audio-Visual Immersion: Dynamic camera jitter, banking physics, reactive lighting, triple-layered lathe geometry jet exhausts, and hyperspace warp transitions. 🛠️ How We Built It Rocket Rush is engineered as a distributed, high-performance web application consisting of a React Three Fiber frontend and a Bun + Redis backend communicating via binary protocol buffers.

  1. 3D Engine & Procedural Rendering (Frontend) React Three Fiber (@react-three/fiber) & Drei: Powers the 3D scene graph, camera frustum, and reactive lighting. Instanced Mesh Optimization: Rendered 60+ dynamic obstacle cubes with a single draw call (THREE.InstancedMesh) by calculating transforms on a reusable Object3D dummy matrix, avoiding garbage collection spikes. Multi-Layered Exhaust & Shaders: Crafted triple-layered LatheGeometry engine cones with mirrored texture wrapping, emissive glow, and procedural sinusoidal oscillation. Draco Mesh Compression: 3D spaceship models compressed to under 100KB with WebAssembly Draco decoding.
  2. Low-Latency Binary Protocol & Ghost Quantization Instead of bloated JSON payloads, we implemented a custom, zero-dependency Binary Protocol Buffers Codec (BinaryWriter / BinaryReader) executing bitwise varint encoding directly on typed ArrayBuffers and DataViews.

Ghost Replay Quantization To store high-precision 3D trajectory points without exhausting storage, we compressed coordinate vectors into a custom 10-byte binary struct per sample:

$z$-coordinate: Float32 (4 bytes) $x$-coordinate: Quantized Int16 (2 bytes, scaled by factor $109.2266$) $y$-coordinate: Float32 (4 bytes) $$\text{Ghost Size} = 4\text{ bytes (header)} + N_{\text{samples}} \times 10\text{ bytes}$$

A complete 5-minute personal best run requires only $\approx 12\text{ KB}$, allowing a database of 1,000,000 players' ghost trajectories to fit into just $12\text{ GB}$.

📐 Physics, Mathematics & Anti-Cheat Formulations

  1. Ship Kinematics & Banking Mechanics Forward and lateral displacement are calculated per frame with delta-time normalization:

$$z(t + \Delta t) = z(t) - v_{\text{game}}(t) \cdot \Delta t \cdot 165$$

$$x(t + \Delta t) = x(t) + v_h(t) \cdot \Delta t \cdot 165$$

Where $v_h$ is the smoothed horizontal steering velocity clamped by max sensitivity $\sigma$:

$$v_h \in [-0.7\sigma, 0.7\sigma]$$

Ship banking angles (roll $\theta_{\text{roll}}$, yaw $\theta_{\text{yaw}}$, pitch $\theta_{\text{pitch}}$) dynamically react to lateral momentum:

$$\theta_{\text{roll}} = v_h \cdot \left( \frac{1.5}{\max(1, 0.8\sigma)} \right), \quad \theta_{\text{yaw}} = \pi - 0.4 v_h, \quad \theta_{\text{pitch}} = -\frac{|v_h|}{10} + \frac{\sin(5t)}{100}$$

  1. Ghost Trajectory Linear Interpolation ($\text{LERP}$) For any elapsed time $t_{\text{elapsed}}$ and sample interval $\Delta t_{\text{sample}} = 250\text{ms}$:

$$i = \left\lfloor \frac{t_{\text{elapsed}}}{\Delta t_{\text{sample}}} \right\rfloor, \quad \tau = \frac{t_{\text{elapsed}}}{\Delta t_{\text{sample}}} - i$$

$$\mathbf{P}_{\text{ghost}}(t) = (1 - \tau) \mathbf{P}i + \tau \mathbf{P}{i+1} \quad \text{where } \mathbf{P} = (x, y, z)^T$$

  1. Server-Side Anti-Cheat Plausibility Envelope To prevent memory hacking or artificial score injection, the backend runs an active mathematical validation pipeline on every 250ms tick:

Velocity Boundary: For level $L$, current speed $v$ cannot exceed: $$v \le v_{\text{base}} + L \cdot v_{\text{step}} + v_{\text{grace}}$$

Acceleration Cap: $$\frac{v(t) - v(t - \Delta t)}{\Delta t} \le a_{\max}$$

Maximum Plausible Score Delta: $$\Delta S \le v_{\max}(L) \cdot k_{\text{score}} \cdot \max(\Delta t, 0.5) \cdot \alpha_{\text{tolerance}}$$

Level Consistency: $$L_{\text{expected}} = \left\lfloor \frac{S}{S_{\text{level_size}}} \right\rfloor, \quad |L - L_{\text{expected}}| \le 1$$

🚧 Challenges We Faced Draw Call & Garbage Collection Bottlenecks:

Problem: Initial prototypes instantiated individual Three.js meshes for each obstacle cube, causing frame drops during garbage collection cycles. Solution: Re-architected the obstacle system using THREE.InstancedMesh with pre-allocated matrices and a procedural recycling algorithm that teleports cubes ahead of the ship once passed. Decoupled Ghost Playback & Clock Drift:

Problem: Ghost ships desynchronized over time due to variable frame rates on different monitor refresh rates (60Hz vs 144Hz vs 240Hz). Solution: Built an absolute timestamp-indexed LERP sampler based on performance.now(), ensuring consistent replay speed independent of client FPS. High-Throughput Binary Serialization:

Problem: Standard JSON serialization over WebSockets added significant payload overhead and CPU serialization latency. Solution: Wrote a custom Protobuf wire-format encoder/decoder from scratch in TypeScript/JavaScript, reducing bandwidth by over $78%$ and eliminating JSON parsing pauses. Frictionless Identity Merging:

Problem: Players starting anonymously as guests would lose their progress and leaderboard position upon connecting a Solana wallet. Solution: Designed an atomic migration protocol using Redis Lua scripts that reassigns existing ghost blobs, high scores, and custom callsigns from the guest UUID to the verified wallet address in a single atomic transaction. 🏆 Accomplishments That We're Proud Of Solid 60+ FPS WebGL Performance: Silky smooth gameplay across desktop and mobile browsers. Ultra-Compact Ghost Storage: 10-byte binary quantization enabling full trajectory replays with negligible storage and network overhead. Zero-Lag Real-Time Leaderboard: Live broadcast of ranking shifts to all connected players using Redis Sorted Sets and WebSockets. Hand-Crafted Synthwave Atmosphere: Custom procedural warp tunnels, dynamic particle trails, and reactive lighting that pulses with gameplay speed. 🧠 What We Learned Advanced 3D Optimization: Mastering instanced matrices, texture wrapping offsets, and GPU memory lifecycle management in React Three Fiber. Low-Level Bitwise Protocol Design: Deep appreciation for binary wire protocols, varint serialization, and typed buffer manipulation in JavaScript. Kinematics & Real-Time Anti-Cheat Design: Formulating robust mathematical invariants that can detect anomalous speed or score hacking without generating false positives.

Built With

Share this project:

Updates