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.
- City cull (compute): about 229k building segments are frustum-culled,
rejected when too small to see, and occlusion-culled against last frame's
Hi-Z pyramid. Each survivor gets an LOD and is appended to a per-mesh
bucket, which is drawn with
drawIndexedIndirect.
- Sign and traffic culls (compute): about 140k vehicles moving
analytically along lanes, and the neon signs, are culled into indirect
draws. The nearest vehicles, and every ad screen, write their lights into
dynamic light slots.
- Clustered light culling: a 16×9×24 cluster grid holds the visible
lights out of about 200k static and 2k dynamic ones.
- Depth prepass, then Hi-Z pyramid build.
- Opaque pass (depth-equal):
- Buildings use procedural facade shading:
- interior-mapped rooms behind recessed windows;
- LED facades, with edge strips on a minority of buildings;
- weathering and wet streaks;
- shopfronts and roofs (skylights, helipads).
- Within about 800 m, a compute pass kitbashes the facades and exposed
roofs, after Unity's Megacity: ledges, fins, pipes, AC units, balconies,
awnings, cages, modules, HVAC, tanks and dishes. Instances are culled
against the frustum and Hi-Z, kept clear of ad screens, and extrude out
of the wall as the camera approaches.
- Large rooftop massing (penthouses, tanks, masts, shacks, billboards) is
ordinary city geometry.
- Ambient light uses three bands plus half-resolution SSAO.
- Neon signs use a Canvas2D glyph atlas.
- Ad screens sample a raymarched-SDF ad atlas.
- The NURBS car and the traffic meshes.
- Composite: sky, height fog that matches the horizon, distant rain
sheets, and froxel volumetric in-scattering (160×90×64).
- SSR: half resolution, applied additively.
- Transparent pass:
- Holograms (raymarched SDFs, limited by scene depth).
- Rain particles, lit by the clusters.
- The car's glass, with simulated droplets and condensation in canopy uv
space.
- Additive glow volumes and traffic light streaks.
- Post: TAA (Catmull-Rom history with variance clipping), dual-filter
bloom, anamorphic streaks, then an AgX tonemap blended with a
hue-preserving curve, a split-tone grade, chromatic aberration, vignette
and grain.
Startup. The city is generated in a Web Worker (src/city-worker.ts)
while the main thread compiles every pipeline that doesn't need city data
(post-processing, the city and kit shaders, the glyph atlas, the car). The
worker transfers packed segments, signs and lights back as buffers; then
the scene-dependent setup runs with all remaining compiles in parallel.
The loading screen shows both city-generation percent and compiled-shader
count; __stats.startupMs has the timings (about 3 s total).
All rendering is at CSS resolution, with no devicePixelRatio scaling.
Every WebGPU object is labeled. uncapturederror events and device loss are
printed with a [WebGPU] prefix and shown on screen, and the tests fail on
them.
Code map
| Path | Contents |
|---|
src/gpu/ | Device setup, labeled-resource helpers, layout helper, GPU timer |
src/math/ | Vectors and matrices (reversed-Z infinite projection), seeded random numbers |
src/city/ | Layout and districts, street warp (warp.ts), building archetypes, signs, ads and holograms, traffic lanes |
src/nurbs/ | NURBS curves and surfaces, tessellation, models and materials |
src/car/ | The spinner, written against the NURBS API by the designer agent |
src/camera/ | Autopilot flight path, chase framings |
src/render/ | One class per system (city, signs, lights, SSR, volumetrics, rain, canopy, ads, traffic, post, Hi-Z) |
src/shaders/ | WGSL, assembled with #include |
src/audio/ | Generative Vangelis-inspired score (music.ts: CS-80-style pads, gliding lead, FM bells, hall reverb); no ambient noise |
test/ | Puppeteer harness, smoke test, screenshot tools, shader validator, unit tests |
