Cyber Web City in 200k
A relaxing night flight through several enormous, rain-soaked, procedurally
generated cyberpunk megacities inspired by Blade Runner, Dredd, The Fifth
Element and Cyberpunk 2077, and by the gaudy lighting of Chongqing, Shenzhen
and Shanghai. Everything is rendered with raw WebGPU and uses no runtime
libraries. The city, the signage, the ads, the holograms, the traffic and the
NURBS based flying car are all generated procedurally.
Live
Running
npm ci
npm run dev # builds in watch mode and serves http://localhost:8080/
npm run build # development build into dist/ (prints gzipped sizes)
npm run build:prod # minified production build (what GitHub Pages deploys)
npm test # build, unit tests, puppeteer smoke test (fails on any WebGPU error)
npm run shots # deterministic screenshot set into out/shots/
node test/car-shots.mjs spinner # car preview renders into out/car/
node test/validate-shaders.mjs # compile every WGSL entry file, list all errors
node test/route-check.mjs [seed] # fly the whole route, fail on any building collision
node test/smoothness.mjs [seed] # peak yaw rate/accel, lateral g and bank rate along the route
node test/flicker.mjs # count sharply blinking pixels (camera frozen)
node test/music.mjs [secs] [seed] # render the score offline, check levels, write out/music-sample.wav
The site deploys to GitHub Pages on every push to main
(.github/workflows/pages.yml).
Controls
Clicking the camera icon (top left) cycles chase → cockpit → skyline (the top-down map is ?cam=map only);
the gear icon
(top right) opens settings (pause, sound, stats, flight speed, rain, haze,
brightness, reflections, light shafts, anti-aliasing). Settings are saved
in the browser. Page zoom and text selection are disabled. Keyboard shortcuts:
| Key | Action |
|---|
| C | Cycle camera: chase, cockpit, skyline |
| WASD / arrows (or F, or the steering wheel button) | Fly the car yourself (any flying key takes the controls). It keeps cruising forward: A / D or ← / → steer, W / S or ↑ / ↓ climb and descend, E / Q faster and slower (touch: on-screen stick to steer and climb, + / − for speed). Buildings push you away softly. F again, or 30 s without input, hands back: the car flies itself to a new tour starting just ahead |
| T (or the globe button) | Next city theme (reloads into a new city of that theme) |
| Drag / pinch / wheel | Orbit and zoom around the car (from inside the car, dragging looks around instead); the auto camera takes over 6 s after the last input |
| 1–5 | Pick a chase framing (classic, low, high wide, side, front three-quarter) |
| 0 | Cycle framings automatically |
| Space | Pause |
| M | Sound on/off (sound starts on the first click or key press) |
| H | Stats HUD (GPU time per pass, visible segments) |
URL parameters
| Param | Meaning |
|---|
seed=N | World seed (default: a new random city every load; Settings → This city has a link to the current one) |
theme=NAME | City theme: kowloon, sodium, ash, chongqing, arcology, dust, drowned (default: picked from the seed) |
size=WxH | Fixed canvas size in CSS pixels, centred in the page (for capturing video at an exact size) |
t=S | Start time on the flight path |
cam=chase|pov|skyline|map|screen|holo|cable|roof | Camera. map is a top-down view. The inspection cameras screen, holo, cable and roof frame ad screen, hologram, street cable or exposed roof n=K. |
anim=S | Animation time S with the camera held at t (used by test/flicker.mjs) |
shot=N | Fixed chase framing |
paused=1 | Freeze time (deterministic screenshots; also hides the help text) |
hud=1 | Show stats |
debug=1..6 | Debug views: albedo, normals, emissive, lights, ambient, light count per cluster |
quality=low | Turns SSR off, thins the rain and halves the facade-detail range |
details=0, ao=0 | Turn off GPU facade kitbash or SSAO |
taa=0, occlusion=0, ssr=0, rain=0, mute=1 | Turn individual features off |
ui=0 | Hide the on-screen controls (also hidden with paused=1) |
tune=1 | Sliders for the flying feel (steering, climb, lean); remembered in this browser, Copy puts the values on the clipboard |
The car preview page is
car-preview.html?view=three-quarter|side|front|rear|rear-three-quarter|top|low|under|interior|pov&env=studio|city.
How it works
Each frame runs the passes below, all GPU-driven. The CPU issues a fixed
number of draws no matter how large the city is.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
