Vibe GP
A small F1-style racing game built with three.js using WebGPURenderer and node-based (TSL) materials. All track and car geometry is built by hand in code, and all surface detail is procedural (no textures or models).
Play it at vibe-gp.ben3d.ca.
Running
pnpm install
pnpm dev
Then open http://localhost:5173 and pick a circuit: the Test Oval, every circuit on the 2026 Formula 1 calendar, and Imola. A browser with WebGPU support is recommended; three.js falls back to WebGL2 otherwise.
Circuits
Every real circuit is built from OpenStreetMap's centreline and pit lane, with its real height profile:
| |
|---|
| 2026 calendar | Albert Park, Shanghai, Suzuka, Bahrain*, Jeddah*, Miami, Montreal, Monaco, Barcelona-Catalunya, Red Bull Ring, Silverstone, Spa-Francorchamps, Hungaroring, Zandvoort, Monza, Madring, Baku, Marina Bay, Circuit of the Americas, Hermanos Rodriguez, Interlagos, Las Vegas, Lusail, Yas Marina |
| Also | Imola (last raced in 2025) |
* On the published 2026 calendar, but cancelled in March 2026.
Suzuka's figure of eight crosses over itself: the back straight runs over the section after Degner on a bridge. Sections more than 4 m apart in height don't squeeze each other's walls or collide with each other's barriers, and a concrete deck carries the upper road.
Controls
| Key | Action |
|---|
| W / ↑ | Throttle |
| S / ↓ | Brake / reverse |
| A D / ← → | Steer |
| C | Cycle camera (chase, far, T-cam, driver, TV); the side mirrors work in every view |
| F | Change the front wing at the next pit stop (on / off; also on the HUD) |
| R | Reset to the grid |
| Esc | Back to the track selector |
On a phone or tablet the game shows touch controls (steering pad, gas, brake, menu, camera, reset); phones play in landscape. Tyre and front wing choices are keyboard or desktop HUD only.
Touch devices also get a lighter scene (src/quality.js): no crowd, half the trees and no mirror views. Add ?quality=full or ?quality=mobile to the URL to force either one.
The gear in the top-right corner opens Settings: traction control (traction, stability & steering assists), ABS, damage on / off (off also repairs the car), music and sound effects. Settings are saved between sessions.
Project layout
src/geometry.js: hand-built geometry helpers (rings, walls, boxes, lofts, tubes, wheels)src/materials.js: TSL node materials and the skysrc/tracks/*.js: track definitions (centreline control points in metres, start line first, in racing direction); most are generated by scripts/import-track.mjsscripts/circuits.mjs: the real circuits' import settings (OSM relation, official length, direction, kerb colours, scenery, elevation source and calibration)src/trackPath.js: centreline sampling, kerbs, wall clearance and nearest-point queriessrc/track.js: builds the road, kerbs, walls, gantry and grid for any track definitionsrc/barriers.js: concrete walls with sponsor boards, tyre barriers (conveyor-belt facing) on the outside of corners, and leaning catch fencessrc/grandstands.js: picks grandstand sites (opposite the pits and around the tightest corners, clear of the circuit) and builds stepped, roofed stands with an instanced, animated crowdsrc/night.js: night races (night in a track definition): floodlight towers with lamp halos, a floodlit-area mask that leaves the land beyond the circuit dark, and a pool of point lights that follows the camera between the nearest towerssrc/ads.js: the canvas atlas of made-up trackside sponsor boardssrc/car.js: the car model (current-era F1 shape: multi-element wings, downwash sidepods, sculpted floor, working mirrors)src/carGeometry.js: car-specific geometry builders (ring lofts, airfoils, extruded plates, slick tyres)src/teams.js: the full 2026 grid (11 teams, ordered by the 2025 constructors' standings, which is also the garage order): liveries in procedural TSL paint, race numbers and sponsor layoutssrc/logos.js: hand-drawn vector stand-ins for the team and sponsor logos (brand colours or single-colour ink)src/decals.js: packs each body part's logos into one canvas atlas and projects them onto the bodywork (side, rear and top-down)src/physics.js: four-wheel vehicle model (aero, load transfer, wheel spin, assists) and tuning parameterssrc/tyres.js: tyre model and surface table (asphalt, kerb, grass)src/damage.js: collision damage to every part of the car (wings, floor, sidepods, mirrors, suspension, tyres, engine)src/camera.js, src/race.js, src/hud.js, : cameras, lap timing, HUD, keyboard input
Adding a track
After adding or changing a track, run pnpm cards to regenerate its menu card (src/tracks/cards.js).
Real circuits: add an entry to scripts/circuits.mjs, register the id in src/tracks/index.js, then
node scripts/import-track.mjs <id> # centreline, pit lane, start line and corner names from OpenStreetMap
node scripts/fetch-elevation.mjs <id> # real height profile (DEM or LiDAR), calibrated to published figures
The importer joins the circuit's raceway ways (and, for street circuits, its OSM relation's roads) into a graph and takes the lap as the cycle closest to the official length; via / avoid points pick between layouts of similar length. Direction comes from the raceway ways' oneway tags, the start line from the raceway=finish node where mapped. A track's scenery sets tree cover, conifers, palms, desert or dune ground, and city blocks around street circuits.
Made-up tracks: create src/tracks/<id>.js (see oval.js for the format) and register it in src/tracks/index.js.
Then check it:
node scripts/track-check.mjs <id>
This is the beginning of the README. Read the rest at the original. Read the full README ↗
