Endurance Racing: a free GT3 racing game in the browser

· 4 min read · three.js, webgpu, tsl, game-dev, racing, announcement

A dark blue GT3 race car with yellow headlight accents on a wet circuit in the evening rain, in front of a grandstand

Endurance Racing, which I also call Project Endurance, is a free racing game that runs in a browser tab. You drive a GT3 car around the Nürburgring Grand Prix circuit in the rain, with no install and no account.

It grew out of the code of Threejs-Punk. The rain, the wet road, the car physics and the multiplayer came with it. The cyberpunk city did not: the world is now one circuit, and most of the work went into making that one place deep.

A GT3 race car on the starting grid, under a checkered banner and a row of red start lights, with the low sun flaring over the pit straight

One circuit, from a real layout #

The track is the 2022 Grand Prix layout of the Nürburgring, a 3D model by Dave Love (Sketchfab, CC BY 4.0). I measured the lap on the model at 5,124 m. The real one is 5,148 m, so I did not scale anything.

A model of a track is not a game level. It has no racing line, no pit lane entry, and no walls that stop a car. The build script takes the centerline from the model's own edge lines, opens the pit entry where the pit wall's rails already end, and builds the collision from the geometry. Making sure a car can never leave is its own problem, and it has its own post.

Ways to drive it #

  • Free Drive. The circuit, its pit lane and what stands inside the barriers.
  • Rescue (desktop). A storm, a pile-up at the last corner and a grounded medical helicopter. Dr. Okafor sits next to you and you have one lap, 5.1 km, against a four-minute clock. A helicopter pilot called Kestrel lights each hazard and calls it out, about 14 per lap. The world never slows down: you answer by driving, and a steering assist helps. Getting past a hazard without touching it is the success.
  • Challenges. 18 goals in four tiers: reach a place in a time, hold a long slide, pass a speed trap, do a clean lap, find 12 beacons. Clearing them unlocks cars.
  • Garage. The cars stand on a turntable pad in the paddock, with a paint picker and a finish.
  • Photo Run (desktop). One lap with eight photographers along the track, then a broadcast-style replay and photos you can save. How it works.
  • Echo (desktop). Every lap you finish comes back as a hologram of your own car, and you have to pass it without touching. How it works.
  • Online. Five public rooms named for composers (Bach, Mozart, Beethoven, Chopin and Vivaldi), up to four drivers each. Every driver is a cyan hologram of their real car, with wheels turning, lamps lit and the nitro burning. Cars pass through each other, so nobody can ruin anybody's lap.

The room server is a Cloudflare Worker with one Durable Object per room, the same idea as in the Threejs-Punk multiplayer. Here the rooms are fixed and the server counts its own daily budget. When the budget is nearly gone, the game does not show an error: it says the rooms are being prepared and to come back in a few hours.

Rain and light #

A "look" in this game is one record of data: the sun, the sky, the fog, the exposure, the rain, the wet ground, the lamps. A continuous day clock walks through eight of them, dawn, midday, overcast, storm, golden drizzle, sunset rain, dusk and night, 80 seconds each, so a full day is about 10.7 minutes.

Because a look is only uniforms, blending two of them is a linear mix, and switching never builds a shader. That matters on a phone, where building shaders at the wrong moment can end the page.

A white sports car approaching on a wet circuit, with the low sun reflected in the water on the asphalt

The wet asphalt, the ripples and the drops on the car are the systems I built for Threejs-Punk, described in wet ground without screen-space reflections.

The car #

The car is a Rapier raycast vehicle with a tire and drivetrain model, driving assists and a headless bench that measures it. The longer story is in A realistic car, then an arcade car on top of it. The engine is a granular sample built from a recorded pull, and each car has its own turbo, with a spool whistle and a blow-off valve when you lift.

The radio plays synthwave and classical recordings in the public domain, and the launch film is cut to Vivaldi's Summer, taken from that radio.

Phones #

Free Drive runs on phones, and that is where the hardest problems were. iOS ends the GPU process of a page when it passes about 300 MB, and the page only sees GPUDevice lost (destroyed). What I found, and what fixed it on an iPhone 13, is in The 300 MB limit that kills WebGPU pages on iPhone. Rescue, Photo Run and Echo are desktop only.

The trailer #

The 47 second launch film is not a screen recording. It is the real game, rendered frame by frame at 4K, and that post explains how.

Credits #

The circuit is the Nürburgring GP 2022 layout by Dave Love, licensed CC BY 4.0. The radio uses tracks from Pixabay under its content license and public domain recordings from Wikimedia Commons. Credits for the car models and the rest of the assets are in the project's README.

Play it #

Endurance Racing is free at endurance-racing.vercel.app, and the project page here has the video: Endurance Racing.

Related projects