← Back to Ships
web · active · 2026-04 → 2026-04

REDLINE

Multiplayer 3D arcade racer with a combat arena, homing missiles, and meteor showers

Three.jsCannon.jsSocket.IONode.jsViteGSAP

Real-time multiplayer racer + vehicular combat in the browser. Two modes share the same physics + networking: a procedural racetrack for clean lap-time grinding, and a dedicated 100×100 m skatepark arena for missile-and-meteor mayhem.

What’s in it

  • 20 Hz Socket.IO snapshot relay — client-authoritative state, server caches and re-emits to all peers
  • Clock-synced interpolation — server returns Date.now() in the ping callback so all clients render the same temporal slice; 80 ms fixed delay with velocity-based extrapolation as fallback
  • Race mode — Catmull-Rom centerline → outer/inner walls, sector splits, lap deltas, leaderboard
  • Combat arena — central plateau + 4 ramps, NE skate bowl, NW stairs deck, SE big kicker, SW spine, mixed low-poly trees, L-cover walls, healing zone, 2 boost lanes, server-driven meteor shower (~140/min)
  • Missile system — homing toward nearest enemy, fire trail with vertex-color additive blending (orange head → black tail), 5-stage explosion (white flash → fireball → ring → smoke → debris with gravity)
  • Car destruction — chassis hides on death, 24 debris chunks fly out with velocity inherited from the car, cylinder “wheels” tumble, all synced across clients via combat:carDestroyed
  • REDLINE identity — title screen with chromatic-aberration wordmark, synthwave perspective grid, scanlines, scrolling speed lines, GSAP-driven entrance choreography
  • Connection status pill — top-right 🟡 CONNECTING… → 🟢 ONLINE · 3P · 142MS with live ping, color-coded by quality

Learnings

  • Client-authoritative physics snapshots with 80ms interpolation buffer + velocity-based extrapolation cover ~250ms of dropped packets without visible stutter
  • Server returning its Date.now() in the ping callback gives a free clock-sync (offset + RTT/2, EMA-smoothed) — without it the silent failure mode is renderTime never matching snapshot.t and interpolation collapsing to "use latest"
  • Merging BufferGeometry + a single CANNON body per wall loop drops draw calls and physics cost by ~180x vs one shape per segment
  • Server-driven environmental hazards (meteor shower scheduled by GameRoom and broadcast as combat:meteor) keep impacts consistent across all clients without server-side HP authority
  • Building combat as a separate arena (skatepark with bowl, ramps, stairs, spine, hazard zones) instead of stacking weapons onto the racetrack made the modes feel like distinct games — not a feature flag