City Drive gameplay: a car on a city street lined with buildings and trees

Needs a browser with WebGPU: recent Chrome, Edge or Safari, or Firefox on Windows. A laptop with a dedicated or modern integrated GPU is recommended.

Controls

KeyAction
W / ↑Accelerate
S / ↓Brake and reverse
A D / ← →Steer
SpaceHandbrake
CCycle camera: chase, action, hood, heli
Z / XAuto-steer / cruise hold
Q / ETurn left / right at the next junction
BChange biome
TToggle traffic and people
RReset car to the road
F / EscEnter / leave full screen
HHide the HUD
MSound on or off
KCool mode: 30 fps, lighter rendering
V / NStart / stop recording a gameplay clip

On a phone, swipe on the screen to steer and brake.

How it's built

City Drive is plain JavaScript and WGSL with no engine or library underneath. The world is a road graph that grows around the car; a Web Worker builds the buildings, trees and street furniture for each new block so the main thread only has to draw. Shadows come from a sun shadow map, and a post-processing pass finishes each frame.

The articles take each of these systems apart in detail.