霓虹天頂 · Neon Zenith

A rain-soaked vertical city you can fly through, in your browser.

Drive the Temple Street night market, lift off into the sky lanes, punch through the storm deckand land on a spire 1,418 metres up. Real-time, open source, built on three.js WebGPU.

▶ Play it now  ·  How it works  ·  Run it locally  ·  Credits

The city

Neon Zenith is a single, continuous city of 9,373 buildings on a 3.2 km grid, ringed by a harbour and a far shore. Every building, sign, awning, lamp post and rooftop water tank is solid. You can land on any roof, slide under the signs that hang over the street, or thread the canyon between two towers at full boost. Nothing is a skybox.

• Temple Street, built by hand. The street you start on is built in Blender lot by lot: modelled tenements in Poly Haven materials, shopfront modules, aircon units, cables, vending machines and bin bags. Its light is baked in Cycles from its own neon, shop windows and street lamps.
• Buildings with a grammar. Office towers come in setback, cantilevered-stack, twin-with-sky-bridge, finned-slab and core-and-wings forms. Each gets one of four crowns: an open frame with LED ring beams, a lit drum, a stepped top, or plant rooms under a cornice. Housing estates are cruciform, H-plan or slab. A dozen blocks fuse into arcologies. A street of towers is a street of different buildings.
• Advertising that belongs to the city. About 390 giant LED screens sit on podiums, run up tower shafts and stand on rooftop steel frames. They show sixteen fictional campaigns (cyberware clinics, energy drinks, a bank, a noodle bar) drawn to a canvas at load, so there are no image files and no real brands. They wipe between campaigns, glitch, and show their LED pitch when you fly close.
• Weather with weight. Rain falls as streaks tinted by the neon beneath them and stops under awnings. Lightning lights the underside of the cloud deck, which has a sea of moonlit cloud above it.
• A flight model with two regimes. On the street the KITE hovers a hand's width off the tarmac and drifts like a car. In the air it holds altitude like a VTOL. Taxis, minibuses and KMB buses keep left and stop at signals below you, and sky traffic streams along lanes at 72, 118, 168, 236 and 330 m.
• Things to do. Four time trials with medals (MARKET DASH, SKY LANE, ASCENT, THE DIVE), 31 hidden data shards, a city map with waypoints, and a radio.
• Plays anywhere. Keyboard, gamepad and touch. Phones get their own HUD and lighter textures. The audio is synthesised at runtime: rain, turbines, thunder and a score that thickens with speed and height. There are no audio files.

Gallery

Controls

How it works

Everything renders through three.js's WebGPURenderer, and every material is written in TSL (three.js's node shading language). TSL compiles to WGSL on WebGPU and to GLSL on the WebGL2 fallback, so there is one source for both. The repository has no .glsl file.

A seeded city that never changes

src/city/layout.js lays out streets, districts (market, mixed, centre, estates, docks, the outer ring), blocks, lots, alleys, shops and signs from one seed. It does this in a single pass, and the hand-built district is keyed to the building ids that pass produces. src/city/massing.js then shapes every building from its own random stream, rngFor(seed, salt). That way new architecture never shifts a lot, a sign or the baked street.

Determinism matters more than it looks. The usual shortcut, array.sort(() => rng() - 0.5), is not deterministic in V8: the engine calls the comparator a different number of times depending on JIT state. We measured 4 calls in 98% of runs and 5 in the rest. Each extra call consumes a random number, so the city changed from load to load. Shuffles here use a seeded Fisher-Yates (src/core/rng.js).

Three levels of facade

Temple Street: composed, baked, packed

assets-src/district/compose.py builds the street in Blender. export.py unwraps and bakes each object's diffuse light in Cycles, then shelf-packs the results into one 4096² lightmap at roughly 10–14 px/m. It also bakes the light at street level top-down for the ground and for anything that moves. pack.mjs writes meshopt-compressed glTF and KTX2 textures: ETC1S for colour, UASTC for normals and data, and UASTC HDR for the lightmap. Props get distance LODs, and phones load 1K texture variants.

Light without a thousand lights

Thousands of neon signs, shop windows and street lamps can't each be a real light, so their spill is rendered once into a top-down 2048² street-light map covering 3.5 km (lightmap.js). Roads, facades, rain, the fog and the underside of the cloud deck all sample it. Colour from every emitter costs one texture read. Walls also take a city-glow ambient term, warm and neon-tinted near the street and fading to the clouds' violet above. Dark glass picks up a matching reflection.

Atmosphere

• Fog (atmos/fog.js) is analytic. Exponential height haze plus a cloud slab are integrated along each view ray, coloured by the street-light map below and moonlit from above.
• Rain (atmos/rain.js) is stateless. Each drop is a pure function of its index and time, drawn as a streak along its velocity relative to the camera, with splashes near the ground.
• Post (core/post.js) is scene, then bloom, grade, ACES, chromatic fringe and vignette, FXAA, and grain.

Performance

A frame-time governor (core/governor.js) scales the scene pass when frames are missed and probes back up after a run of clean ones. Measured on an Apple M4 Max at 1920×1080 and device-pixel-ratio 2 (3840×2160 internal), headed Chrome:

That is a locked 60 fps (vsync) with the resolution scale at 1.00 throughout. Most geometry is instanced in