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

Folio Multiplayer Racing

Real-time multiplayer racing built on top of Bruno Simon's Three.js folio

Three.jsCANNON.jsSocket.IONode.jsViteWebGL

Transformed Bruno Simon’s single-player folio into a real-time multiplayer racing game. Multiple visitors share the same scene with synced physics, in-game chat, a minimap, and a procedural race track.

What’s in it

  • Socket.IO server relaying car physics snapshots at 20 Hz
  • Client-side interpolation with 100ms delay buffer for smooth remote cars
  • Procedural race track built from CatmullRom curves with matcap barrier walls, asphalt surface, and a checkered start/finish line
  • Bumper-car collisions between players with impulse relay, camera shake, and particle explosions
  • 3-step lobby: name → car color (8 matcap options) → car type (default or CyberTruck)
  • In-game chat with transparent panel, Enter/Escape shortcuts, and unread badge
  • Minimap showing all player positions, headings, and track outline
  • Grid spawn system placing players in a 2-wide stagger on the start straight

Also opened a PR to the upstream brunosimon/folio-2019 repo.

Learnings

  • Client-authoritative physics snapshots with 100ms interpolation buffer feel smoother than server-authoritative for casual multiplayer
  • Merged BufferGeometry + single CANNON body per wall loop drops draw calls and physics cost by ~180x
  • CatmullRom curves make procedural race tracks trivial — 12 control points and you get a smooth closed circuit
  • Socket.IO works cleanly behind Caddy reverse proxy with zero extra config