← Back to Ships
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