Neon District Demo Creation

Let me look at the task details. The task says "Wake up and do as you please." The last execution was about the Voxelia demo which was fully implemented and deployed to /space/demos/050-voxelia/index.html, and the summary says "The next step is to update the main demos index page to include this new entry."

So a good course of action:

1. Check the state of /space/demos/ folder.
2. Verify the Voxelia demo exists.
3. Update the main index page /space/demos/index.html to include the Voxelia entry (if not already done).
4. Possibly check other demos exist and the index is consistent.

Let me install shell tools first and inspect the space.

The task is "Wake up and do as you please." The last execution created the Voxelia demo but the summary says "The next step is to update the main demos index page to include this new entry." So I should:

1. Check the state of /space/demos/
2. Verify /space/demos/050-voxelia/index.html exists
3. Check whether /space/demos/index.html includes the Voxelia entry
4. Update the index page if needed

Let me start by inspecting the demos folder.

*****************************************************************************************************************ry.

As expected from the previous run's summary, the index page hasn't been updated with the Voxelia entry yet. The demo file itself exists at /space/demos/050-voxelia/index.html (87KB). Let me look at the index page structure to understand how entries are formatted, then:

1. First verify the Voxelia demo file is valid/complete.
2. Update the index page with the 050-voxelia entry.

Let me look at the index page structure around the 049 entry.

The index page exists. Demo 050 (Voxelia) exists in the folder but is not in the index. The last run's summary said "The next step is to update the main demos index page to include this new entry."

Let me first verify the 050-voxelia demo is complete/valid, then add it to the index page.

Let me check the demo file's end to make sure it's complete, and quickly validate it.

The demo file is complete (ends with </html> and starts with <!DOCTYPE html>). It's a valid self-contained file. Now let me quickly sanity check the demo for common issues — e.g., verify the JS syntax is valid. Since it's a module script, I can try extracting the script and checking with node.

Actually, since the previous run already tested it extensively via Node unit tests, the file should be fine. But a quick syntax check is cheap and worthwhile since the previous run ended right at deployment. Let me extract the module script and do a syntax check with node.

The demo file is syntactically valid. Now I need to add the 050-voxelia entry to the index page. New demos are added at the marker <!-- New demos are added here -->. I'll insert the Voxelia card right after that marker, following the existing card format.

The description from the task: "Voxelia — a pocket voxel wilderness. Explore, mine and build on a procedurally grown island with caves, crystal veins, torch light, a day/night cycle and generative ambience."

Based on the last execution summary, the demo includes: procedural 144x144x64 voxel island with biomes (meadow, forest, dunes, snowcaps, ocean, shore), caves with glowstone veins, trees, flowers, Minecraft-style flood-fill lighting (sky + torch) with per-vertex ambient occlusion, first-person physics with walking/sprinting/swimming/flying, mining and placing blocks, day/night cycle, UnrealBloom, instanced clouds and particles, generative audio (wind, birds, crickets), adaptive quality tiers, touch controls.

Let me write a rich description card consistent with the style of other entries.

The search still failed. Let me look at the exact bytes. The cat -A output showed:

So the marker line has 16 spaces of indentation: <!-- New demos are added here --> and the next line has 12 spaces: <a class="demo-card" href="./049-sakura-grove/index.html">.

Wait, my first attempt used exactly that. Let me count again from the cat -A output:

Line 1: <div class="demo-list">$ — 6 spaces Line 2: <!-- New demos are added here -->$ — 16 spaces Line 3: <a class="demo-card" href="./049-sakura-grove/index.html">$ — 12 spaces

My first attempt searched for:

That should match... unless there's a subtle difference. Hmm, wait — maybe the issue is the line endings or the file has \r\n? cat -A would show ^M for carriage returns, and I only see $ at end of lines. So no CRLF.

Wait, let me re-check. Actually the first attempt output said "replacements: 0". Let me be careful about the exact whitespace. Let me use sed to print with explicit character counting.

Actually, maybe there are trailing spaces on lines. cat -A shows $ at end of line — trailing spaces would show as $. The output shows -->$ so no trailing space on the marker line.

Hmm, let me try a different approach — maybe the tool has an issue with the multiline match. Let me just use a simpler unique anchor and do the insertion with python or sed instead, which gives me full control.

Actually, let me just do it with a Python script — more reliable.

The insertion is in place. There's a small artifact: line after </a> has trailing spaces (" \n" — the leftover from my card string's trailing spaces). That's cosmetically imperfect but harmless. Let me clean it up for tidiness.

The card was inserted correctly. There's a small cosmetic artifact — a trailing whitespace line after the new card's closing </a>. Let me clean that up for tidiness.

The cleanup didn't match (probably different whitespace). Let me look at the actual bytes of that blank line. It shows — 14 spaces. Let me just normalize it with sed. Actually, it's a trivial cosmetic issue — a line with trailing whitespace between cards. It's harmless in HTML. But let me try once more with the exact pattern.

Looking at the output, the line between </a> and the 049 card contains 14 spaces (matching the card's trailing indentation of 14 spaces from my inserted card, since I used 14-space indent in the card string but the file now shows... let me just use sed to collapse it).

Actually, let me just use a more robust python regex to remove whitespace-only lines in that region. Or leave it — it's purely cosmetic and invisible in rendered HTML. The existing file already has inconsistent indentation throughout (as seen in the original). I'll do one quick sed pass to strip trailing whitespace-only lines, being careful not to break anything.The blank line has different whitespace than expected. It's purely cosmetic, but let me clean it with sed for tidiness.

The index page is now fully consistent:

• 50 card links, all unique, all pointing to existing files
• All 50 demo folders are listed, none unlisted
• The Voxelia entry (Demo 050) is at the top of the list

The leftover task from the previous run is complete. The task said "Wake up and do as you please" — the main outstanding item was updating the index page, which is now done.

Since the task says "do as you please," I could also consider creating a new demo. The purpose statement says my purpose is to create cool Three.js demos. The wake-up task gives me latitude. The previous run created demo 050 yesterday (Oct 6), and today is Oct 7. The pattern from the folder timestamps shows roughly one new demo per day. So "doing as I please" could reasonably include creating a new demo 051.

Given the batch mode and that I have time, let me create a new impressive demo: 051. Let me think about what to build — something advanced per the style guidelines.

Looking at what's been done recently:

• 049: Sakura Grove (procedural island, blossom trees)
• 050: Voxelia (voxel world)
• 048: Coasterworks (roller coaster sim)
• 047: Primordial (Lenia CA)
• 046: Bridge Works (physics)
• 045: Critical Point (Ising model)
• 044: Photon Garden (path tracer)
• 043: Hyperfold
• 042: Neon Tilt
• 041: Squish Lab (soft body)
• 040: Lumen Lab (optics)

Ideas for 051 that haven't been done:

1. Ocean/Water simulation — Gerstner waves + FFT ocean with foam, underwater caustics, floating buoyancy objects. (009-azure-odyssey might be ocean-ish though — "Azure Odyssey"... not sure. 022-cloudsea is clouds.)
2. Black hole / wormhole raymarching — 006-event-horizon already exists.
3. Cloth simulation — flag/sail tearing? Not obviously done.
4. L-system fractal forest with ecosystem — 030-morphogenesis might cover this.
5. City generator / cyberpunk city flythrough — procedural city with buildings, traffic, neon. Not obviously done!
6. Terrain erosion simulator — hydraulic erosion on heightmap, watch rivers carve. 021-terraforge might be terrain-related though.
7. Ant colony / swarm — 020-murmuration is flocking.
8. Rube Goldberg / marble machine — physics contraption.
9. Procedural planet with atmosphere — LOD planet, atmosphere scattering.
10. Worms/slime mold on GPU — 011-physarum garden already.
11. Raymarched fractal cave explorer — 003-mandelbulb is fractal.
12. Fireworks show — 029-pyrosymphony might be this.
13. Train/railway sim
14. Submarine/ocean depths explorer — 010-abyssal-bloom sounds abyssal.
15. Volumetric clouds flight sim — 022-cloudsea is clouds.
16. Solar system / orbital mechanics sandbox — 005-gravity-sandbox is gravity.
17. Crystal growth / snowflake simulator (DLA) — diffusion-limited aggregation! 023-frostline might be frost-related though. Hmm.
18. Marble racing / pachinko — 031-galton-cascade is galton board.
19. Wormhole / portal rendering — portals with stencil... 018-threshold might be portal-ish.
20. Interactive music sequencer 3D — 026-synchrony, 027-cymatics are audio-ish.

A procedural cyberpunk city flythrough would be impressive: instanced buildings with emissive windows, elevated highways with moving traffic (light trails), neon signs, fog, rain, bloom, day/night. Controls: fly camera, drive mode, time-of-day, regenerate city seed. Generative audio (synthwave pad, rain, traffic hum). That has a strong "wow" factor and doesn't obviously overlap with existing demos.

Let me check 043-hyperfold and 042-neon-tilt quickly to avoid overlap, and also 008-void-runner (sounds like an endless runner game, possibly neon). Let me peek at their titles in the index.

Actually the index has titles and descriptions. Let me grep a few to make sure "city" isn't covered.

Plan:

1. Check existing demo themes quickly (grep h2 titles from index).
2. Build demo 051 — "Neon District" procedural cyberpunk city night flythrough (or something else if overlap).
3. Write the demo file, syntax-check with node, add to index.

Let me check the titles first.

No city-themed demo exists. "Neon Rain" is rain-themed, "Neon Tilt" is likely a pinball/tilt game, "Void Runner" an endless runner. A procedural cyberpunk city would be fresh.

Let me design demo 051: "Neon District — Procedural Cyberpunk City"

Concept: A procedurally generated nighttime city district:

• Grid-based city blocks with procedural buildings (instanced boxes with emissive window textures generated on canvas)
• Varied building heights using noise; some towers with rooftop antennas/beacons
• Neon signs: instanced glowing billboards with generated glyph textures in kanji-ish/alien glyphs
• Streets with moving traffic: cars as instanced glowing boxes moving along street lanes, with headlights/taillights (light trails)
• Elevated maglev train looping around the city
• Flying vehicles (hover cars) with blinking lights moving in 3D lanes
• Rain with splash particles + wet street reflections (approx via planar reflection or just emissive + roughness)... Planar reflection might be heavy; instead do reflective wet ground using a cube-ish fake: streets use a dark material with high metalness and an environment map. Or screen-space-ish streaks: draw stretched billboard reflections of neon below signs — classic trick: mirrored neon quads with gradient fade on the ground plane. That's cheap and looks great.
• Fog, UnrealBloom, ACES, vignette/grain
• Sky: gradient night sky with stars and a big low-poly moon or hazy clouds; maybe distant skyline silhouette
• Controls: orbit camera + cinematic auto-fly mode weaving between buildings; WASD fly mode
• UI: seed regenerate, time (rain intensity), traffic density, camera modes
• Audio: generative synthwave pad (minor chord pads + slow arpeggio), rain noise, occasional distant siren/horn, wind. Keep subtle.

Implementation plan (single file, importmap with three@0.160+, UnrealBloomPass, EffectComposer):

1. Seeded RNG (mulberry32) for city generation.

2. City layout: grid N x N blocks (say 12x12 blocks of size 24, streets width 10). Each block gets 1-4 buildings depending on district type. Height via value noise + distance falloff (taller downtown center).

3. Buildings: use InstancedMesh with a BoxGeometry, per-instance color for slight tint variety, and a shader material for windows: generate a canvas texture atlas of window grids (a few variants) — but instanced meshes share one texture... I can generate one texture with a window grid and use per-instance UV offset via instanced attribute + custom shader (onBeforeCompile or ShaderMaterial). Simpler: create 4-5 building materials with different window textures, and 4-5 InstancedMeshes, one per texture. Each building uses texture repeat based on its size — but instancing shares geometry... Trick: scale instance matrix and use triplanar-ish shader that computes window grid from world position and face normal, with per-instance random lit-window pattern via hash. That's a known approach and looks great.

   Simpler robust approach: a custom ShaderMaterial for buildings:

   • Pass instance scale via instance matrix (built-in).
   • In fragment shader, compute local position from world pos and instance matrix... complicated. Alternative: use vUv-free procedural windows: windows = grid function of world-space position (for vertical faces) with floor height and window width constants; per-instance randomness from hashing instance id → need attribute. I can add an InstancedBufferAttribute aSeed. The window pattern: floor(worldPos.y / floorH), floor(worldPos.x / winW) etc. depending on dominant face normal axis; lit = hash(winId, seed) < litRatio; window color warm/cool variation. Emissive only at night.

   This is doable with a custom ShaderMaterial with fog support. I'll write a ShaderMaterial with fog uniforms manually (THREE.UniformsLib.fog + fog fragment chunks).

4. Rooftop details: antennas — instanced thin cylinders on tall buildings with red blinking beacon (instanced small spheres with emissive pulsing via time uniform). AC units boxes maybe skip.

5. Neon signs: billboards placed on random building faces. Generate canvas textures with random glyph strings (katakana/hangul-like shapes drawn as random stroke glyphs — can draw random geometric glyphs). Each sign: PlaneGeometry with MeshBasicMaterial (emissive-looking via additive + bloom). Also vertical signs. Add mirrored reflection quad on ground below (gradient alpha) for wet-street vibe. Keep count ~100-200.

6. Streets: one big ground plane with procedural street shader: asphalt dark, street center dashes emissive-ish, crosswalks at intersections, sidewalk edges. Compute from world pos in shader: street lines via fract. Wet look: add subtle noise sheen + reflect neon color? Simpler: dark asphalt with faint blue ambient and the fake reflection quads from neon + car light streaks.

7. Traffic: streets at x = block boundaries and z = boundaries. Cars move along lanes: each car = instance of small box (body) + we can fake lights with additive sprite at front/back. Instanced approach: two InstancedMeshes — car bodies (box, dark with slight color variety) and car lights (stretched additive quads: white front, red rear). Update per-frame on CPU: positions along lanes, wrap around. ~300 cars is fine CPU-wise. Lane logic: streets are axis-aligned lines; car picks a street, direction, lane offset; at intersections just continue straight (simplest, avoids collision logic). Constant speed + slight variation. Also light trails: stretch the light quads by speed.

8. Maglev: an elevated ring track (rounded rectangle) with a train of 6 cars gliding along, emissive strip windows. Track: tube or box segments instanced along path + support pillars. Train follows parametric path with banking. Nice motion element.

9. Hover vehicles: ~60 small glowing shapes moving in 3D along random aerial lanes (straight lines at various heights, wrapping in a bounding box), with blinking nav lights. Additive sprites + small box. Cheap, adds life.

10. Rain: instanced streaks (thin elongated quads facing camera via shader billboarding with velocity stretch) falling in a cylinder around camera, wrap. Plus occasional splash ring sprites on ground? Keep streaks + ripple rings via shader on ground? Simpler: streaks only, plus fog boost. Rain intensity slider.

11. Sky: big inverted sphere with gradient + stars (hash-based) + a moon disc with glow, plus drifting smog layer (scrolling fbm noise). ShaderMaterial, no fog.

12. Distant skyline: ring of far building silhouettes (instanced boxes, flat dark color, fog-affected) to extend the horizon.

13. Post: EffectComposer + RenderPass + UnrealBloomPass + custom grade shader pass (ACES-ish tonemap handled by renderer? With bloom pass the renderer tonemapping applies at final output... In postprocessing chain, renderer.toneMapping applies in the OutputPass. Use OutputPass for correct color space; add a final custom ShaderPass with vignette + grain + slight chromatic aberration before OutputPass? Chromatic aberration after bloom but before output is fine. Actually simpler: renderer.toneMapping = ACESFilmic, use OutputPass at end, and custom pass for vignette/grain/CA before it.

14. Cameras:

    • ORBIT: standard OrbitControls targeting city center.
    • CRUISE: cinematic auto flight: smooth spline weaving through streets at low altitude then rising — implement as parametric path with lookahead, gentle banking.
    • FLY: WASD + mouse pointer-lock free fly. Keys 1/2/3 to switch. Touch: drag to orbit in ORBIT mode; in CRUISE just watch; provide buttons.

15. HUD: title, seed display, buttons: NEW CITY (regenerate seed), RAIN toggle/slider, TRAFFIC density, camera mode, HELP overlay with keys, audio toggle. Stats: fps counter maybe.

16. Audio: WebAudio generative:

    • Pad: detuned saw oscillators through lowpass, slow chord progression (Am – F – C – G or minor 9 chords), gain LFO.
    • Arp: soft sine plucks on pentatonic/minor scale, random-walk, echo (delay).
    • Rain: filtered white noise, intensity tied to rain slider.
    • City hum: low brown noise + occasional distant horn (filtered saw blip with reverb-ish delay) or siren sweep. Keep tasteful.
    • Whoosh when camera moving fast (tie gain to speed).

17. Quality tiers: measure fps; reduce pixelRatio, bloom resolution, rain count, traffic count if slow. PNG snapshot button (preserveDrawingBuffer or render-then-capture).

That's a big build but achievable. I need to be careful with shader fog integration for custom ShaderMaterials. To reduce risk, I can use material.onBeforeCompile on standard materials where possible:

• Buildings: MeshStandardMaterial with onBeforeCompile injecting procedural windows into emissive. Gets fog + tonemapping free.
• Ground: MeshStandardMaterial with onBeforeCompile for street markings into emissive/albedo.
• Sky: ShaderMaterial without fog (fine).
• Neon signs: MeshBasicMaterial with map + additive blending, toneMapped default fine.
• Rain: ShaderMaterial simple additive, no fog needed (short range anyway).
• Car lights: sprites/basic additive materials.

Using onBeforeCompile with MeshStandardMaterial is the safest path for buildings/ground.

Building windows via onBeforeCompile details:

• Add instanced attribute? InstancedMesh supports instanceMatrix; for per-instance seed I can use instanceColor! Set instanceColor to random tint — it multiplies diffuse color. But I need a per-instance random for window pattern: I can derive randomness from world position of the instance (instance translation) via hash — since each building occupies a unique position, hashing floor(worldPos.x/z / blockSize) gives stable per-building randomness. Good enough, no extra attribute needed.
• In vertex: pass vWorldPosition and world normal to fragment.
• In fragment: determine face type from normal: if |ny| > 0.9 → roof (dark, no windows). Else windows on vertical faces: use world coords: u = (nx dominant) ? worldPos.z : worldPos.x; v = worldPos.y. Window grid: winW = 2.2, floorH = 3.0, margins. inWin = step functions on fract. Window id = vec2(floor(u/winW), floor(v/floorH)); buildingSeed = hash(floor(worldPos.xz / blockPitch)); litRand = hash3(winId, buildingSeed); lit if < litRatio (~0.35). Window emissive color mix warm (1.0,0.75,0.45) vs cool (0.6,0.8,1.0) by another hash, brightness variation. Also whole-face dark bands? Keep simple.
• Edge darkening: skip AO, cheap.

Emissive intensity ~1.2 to make bloom pick up lit windows slightly at night? Bloom threshold ~0.85; window emissive 1.0 with color ~1.2*color gives subtle glow. Neon signs much brighter (2-6) for strong bloom.

Ground shader: albedo asphalt #0a0d12 with noise; street markings: streets run along grid lines at pitch P=blockSize+streetW, street width W. Compute d = min distance to street center line in x and z directions. Lane dashes: emissive faint yellow at center line: |fract(pos.y/6)-0.5| etc. Crosswalk stripes near intersections. Sidewalk: region where minDist > W/2 (i.e., inside blocks near edges) slightly lighter. Also puddle sheen: increase roughness low → reflection of env? Without envmap, fake: add slight emissive blue noise. OK.

Also place street lamps? Instanced pole + emissive head with fake light cone (additive cone mesh)? Adds niceness; cones with additive gradient shader — moderate effort. Let me include simple lamp posts at intersections (instanced) with a warm glow sprite. Cheap: pole instanced cylinder + head sprite. Skip cones.

Maglev track: rounded-rect path at height 18, radius of corners 30, spanning beyond city center. Track mesh: sample path → build extruded box segments (instanced boxes oriented along path, 200 segments) + glow strip line (emissive thin boxes) + pillars every 4th segment down to ground. Train: group of 7 car boxes with emissive window strip texture (canvas), moves along path with position param; head/tail lights additive sprites. Path param: rounded rect — implement as function of t: perimeter param of stadium shape. Fine.

Hover cars: instanced box + sprite; lanes: random axis direction (8 directions), random height 25-70, random offset; constant speed; wrap in bounding square. Blink: shader with time & per-instance phase via instanceColor? Sprites with per-instance blink need shader; simpler: use Points with custom shader for nav lights, positions updated on CPU. Or small InstancedMesh spheres with basic material and CPU-updated visibility via scale pulse. I'll fold nav lights into the same instanced box approach: body box dark + two additive planes. Blink via CPU scale of light instances (cheap enough for 60 vehicles).

Rain: InstancedMesh of thin boxes (0.02 x 1.2 x 0.02) with MeshBasicMaterial additive faint blue, CPU update: y -= speed; wrap in 60-radius cylinder around camera. 1200 instances fine. Slight wind slant via rotation z fixed. Streak look via scale y by speed. Cheap and effective.

Splashes: skip; ground has sheen.

Fog: THREE.FogExp2 dark blue-purple, density ~0.008. All standard materials get it automatically.

Sky shader: gradient horizon glow (city glow: orange-magenta near horizon), stars via hash grid twinkle, moon: disc with limb + glow, smog: fbm scrolling band near horizon. No fog on sky.

Post: RenderPass, UnrealBloomPass(strength 0.85, radius 0.6, threshold 0.8), custom grade pass (vignette, grain, subtle CA), OutputPass.

Cameras & controls: implement custom simple orbit (drag rotate, wheel zoom) + pointer-lock fly + cruise path. To reduce code risk, use OrbitControls from addons for orbit mode; fly mode custom pointer lock; cruise mode parametric with lookAt.

Cruise path: closed curve through streets: sample waypoints along random street lines at height ~8-15 between buildings... collision-free pathing is tricky procedurally; simpler: cruise along a big smooth 3D Lissajous-ish curve around/above city with dips to 12 height at radius beyond downtown, looking toward center + slight offset. Safe (above street level and outside core), still cinematic. Actually flying THROUGH streets is the wow... but buildings occupy block interiors; streets are corridors along grid lines. I can define cruise path strictly along street center lines: pick sequence of intersections, straight line segments between them at height ~7, with smooth turns via Catmull-Rom through the intersection points. Streets are clear of buildings (buildings inside blocks), cars are thin — fine. Height 7 is above cars (car height ~1.5) and below sky bridges (none). CatmullRomCurve3 through waypoints at street centers, closed loop. lookAt = point ahead + slight sway.

UI: top-left panel: title "NEON DISTRICT", seed, buttons [New City] [Camera: Cruise/Orbit/Fly] [Rain: slider] [Traffic: slider] [Sound: on/off] [Help]. Bottom hint bar. Help overlay listing keys. Style consistent with other demos (dark glass panels, neon accent). FPS meter small.

Adaptive quality: track avg fps over 3s; tiers: high (pixelRatio min(dpr,2), bloom on, rain 1200, traffic full), medium (pixelRatio 1.25, bloom lower res/strength, rain 700), low (pixelRatio 1, bloom off?, rain 350, traffic half). Auto-switch down/up with hysteresis. Manual override? keep auto + button to lock? Keep auto only, mention in help.

Snapshot: 'P' key & button: composer.render(); toBlob → download. Need preserveDrawingBuffer? With composer.render() immediately before toBlob in same task, usually fine without preserveDrawingBuffer... The demo 050 used renderer.domElement.toBlob after composer.render() — same pattern, presumably worked. Follow same pattern.

Audio: as planned. Start on first user gesture (click/tap/key) — required by autoplay policies. Sound toggle button.

Structure the single HTML file:

• importmap: three from unpkg (match 050's CDN — let me check which CDN 050 used to be consistent). Check the importmap of 050 first.

Also the index description: after building, add card for 051.

Testing: extract module script → node --check. Additionally, I can write a small node smoke test for pure functions (city gen, rng, path math) if I structure them to be importable... The script uses import ... from 'three' at top; node can't resolve. I can still syntax-check. For logic test, I could copy pure functions into a test file. Given time constraints, do a syntax check + careful review. Maybe also a minimal three.js stub run? Previous run did extensive node tests by structuring code in parts. For this single pass, I'll be careful and do a syntax check plus a "dry-run" of pure math portions by extracting them.

Actually, I can do better: create a node test that stubs 'three' minimally? That's heavy. Alternative: structure the demo script so that pure-logic functions (RNG, noise, city layout generation, path functions, window hash functions in JS-side for layout) are defined without THREE dependencies where possible, then in node test, extract the script, strip the import lines and any THREE-referencing top-level statements? Too fragile.

Pragmatic approach: keep pure helpers (mulberry32, hash, valueNoise2, city layout gen returning arrays of {x,z,w,d,h,seed}, maglev path point function, cruise waypoint gen) in a clearly delimited section that only uses plain JS (no THREE). In node test, extract that section by markers and eval it, run assertions (building counts, no NaN, path continuity, buildings inside blocks not overlapping streets, etc.). That's what I'll do: // === PURE LOGIC START === ... // === PURE LOGIC END ===.

Let me check what CDN/importmap 050 uses for consistency.

Good — three@0.160.0 via unpkg with importmap. I'll use the same.

Now let me build demo 051: Neon District — Procedural Cyberpunk City.

I'll write the file in parts to manage size, then assemble. Actually since I write files via read_write_file_in_shell_environment write mode (full rewrite), I can write it in a few appends using shell heredocs, or write one big content in the write call. The file will be large (~70-90KB). Writing in one go may hit limits; I'll write in 5-6 sequential parts using shell cat >> heredocs, which is reliable.

Let me design the code carefully.

Architecture

Module script structure

1. Imports: three, OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, ShaderPass, OutputPass.

2. PURE LOGIC START..END section (no THREE):

   • mulberry32, hash2i, valueNoise2, fbm2
   • CITY = {blocks: 11, blockW: 26, streetW: 12} → pitch = 38. citySize = blockspitch + streetW? Let me define: grid lines at ipitch for i in 0..blocks. Streets centered on grid lines with width streetW. Blocks interiors between. Layout: for block indices (i,j) in [0..blocks-1]²: block center = (i+0.5)pitch, same z. Building placement: per block choose 1, 2, or 4 sub-lots. Downtown factor: dist from center → maxHeight = lerp(28, 120, falloffnoise). Buildings must stay inside block interior (inset by sidewalk 3 from street edge). Return array {x, z, w, d, h, seed}.
   • makeCityLayout(seed) → {buildings, signs meta? signs better placed with building info; I'll generate sign descriptors too: {x,y,z, ry (facing), w,h, paletteIndex, glyphSeed, vertical}} — signs on building faces: pick random buildings with h>20, place on one of 4 faces at random height, size random. Also generate lamp positions (at intersections corners), distant skyline ring params, maglev path params (fixed stadium around center), cruise waypoints (street line walk), traffic lane definitions (street center lines: for each grid line i (0..blocks): two lanes each direction? Cars: lanes = for vertical streets (along z): x = i*pitch ± laneOff, dir ±z; same for horizontal). Cars assigned {street axis, line index, lane dir, offset along, speed}.
   • Path functions: maglevPoint(t, out) stadium; cruiseCurvePoints(seed) → array of [x,y,z] waypoints along streets at h=7.
   • Audio scale tables (pure arrays). Markers let node test extract & eval.

3. THREE-dependent:

   • init renderer, scene, fog, cameras
   • buildSky(), buildGround(), buildBuildings(layout), buildNeonSigns(signs), buildLamps(), buildMaglev(), buildTraffic(), buildHover(), buildRain(), distant skyline
   • post chain
   • cameras modes & input
   • audio engine
   • HUD wiring
   • quality manager
   • main loop
   • regenerate(seed)

Careful details:

Building material (MeshStandardMaterial + onBeforeCompile):

• vertex: add varying vec3 vWPos; varying vec3 vWNormal; set after #include <worldpos_vertex>? worldpos computed only when needed... Standard material defines worldPosition in vertex when certain features on. Safer: compute myself: in vertex after #include <begin_vertex> and #include <defaultnormal_vertex>... I need world pos of the vertex with instancing: vec4 wp = modelMatrix * instanceMatrix * vec4(transformed,1.0); — but modelMatrix * instanceMatrix: in three shaders with USE_INSTANCING, the chain is applied in project_vertex etc. I'll inject after #include <worldpos_vertex>: actually #include <worldpos_vertex> computes worldPosition if USE_ENVMAP or DISTANCE or shadows... It's guarded: #if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP ) || defined ( USE_TRANSMISSION ) || NUM_SPOT_LIGHT_COORDS > 0. Not guaranteed. I'll compute my own in vertex:

Similarly normal: vWNormal = normalize(mat3(modelMatrix) * (mat3(instanceMatrix) * objectNormal)); — non-uniform scale makes mat3 wrong-ish; normalize in frag, acceptable.

But wait — non-uniform scaled instances: normals need inverse-transpose. For axis-aligned boxes, using mat3 of the rotation part is okay if I extract rotation... instanceMatrix includes scale; mat3(instanceMatrix) * objectNormal with axis-aligned scale gives normal scaled per-axis; for a box the normal is axis-aligned so scaling (sx,sy,sz)*n then normalizing in fragment gives correct direction anyway for axis-aligned normals (since scaling an axis unit vector by positive scales keeps its axis). Rotation only 0/90/180/270 deg (I might rotate buildings 0 only). Buildings axis-aligned → fine.

• fragment: inject at top varyings + hash functions; modify emissive: replace #include <emissivemap_fragment> with custom code computing window emission added to totalEmissiveRadiance. Code:

Also darken facades between windows: modify diffuseColor earlier via map? Add in same injection: diffuseColor.rgb *= 0.55 + 0.45*...? Facade pattern: vertical stripes by hash of column: subtle. I'll add slight albedo variation: after #include <color_fragment>: diffuseColor.rgb *= facadeTint from bSeed. Simplest: inject there too. Or set per-instance color via setColorAt → instanceColor multiplies diffuse automatically. I'll use setColorAt for tint variety.

Roof: nW.y > 0.5 → keep dark (diffuse dark, no emissive).

Uniforms: uLitRatio (controllable? tie to time of day? City is always night; keep constant 0.42), uWinGlow = 2.2.

Instanced count ~ maybe 400-900 buildings → one InstancedMesh box. Per-instance matrix: position (x, h/2, z), scale (w, h, d). UV mapping per world pos handles windows regardless of scale — good.

Also rooftops: AC boxes: second InstancedMesh small dark boxes on roofs of subset (2 per building max) — cheap detail. Antennas: instanced cylinders on tallest (h > 70), with beacon light: Points with custom shader pulsing red, positions at antenna tips. Points size attenuation. Beacon pulse: sin(time*2 + phase) via uniform; phase from position hash.

Neon signs:

• Descriptor from layout: {x, y, z, faceDir (0=+x,1=-x,2=+z,3=-z), w, h, colorIdx, glyphSeed, vertical}
• Sign planes: generate ~10 canvas textures (256x128 horizontal, 128x256 vertical) with random glyph art: dark translucent panel + bright strokes: draw 3-6 "glyphs" as random polyline strokes with glow (shadowBlur), palette colors (pink #ff2d95, cyan #00e5ff, orange #ff9f1c, green #39ff88, purple #b26bff, yellow #ffe14d). Random per sign pick texture & color tint (material.color multiply) — texture already colored; use per-sign MeshBasicMaterial? That'd be many materials/draw calls (~150 signs → 150 draw calls, acceptable but heavy). Alternative: merge geometries with groups per texture (10 draws). Simpler: create per-texture InstancedMesh of plane with per-instance matrix; 10 instanced meshes → 10 draw calls. Per-instance tint via setColorAt.
• Frame: add backing box (instanced, dark) slightly bigger behind panel.
• Reflection: for each sign, a ground quad at same x,z stretched toward street with gradient alpha of sign color: instanced planes laying on ground (rotation -90° x), additive, with a generated gradient texture (white→transparent), tinted per instance via instanceColor. Rotation trick: quad under sign on ground regardless of street position (fake but looks fine at night with fog).
• Vertical signs: plane tall, glyphs stacked.

Ground: big plane (citySize + margin). MeshStandardMaterial + onBeforeCompile:

• albedo: asphalt dark with noise speckle: diffuseColor.rgb = mix(diffuseColor.rgb, speckle, ...).
• Compute street distance: streets centered at x = i*pitch (i=0..blocks). Local coord within cell: vec2 cell = abs(fract(vWPos.xz / pitch) - 0.5) * pitch; Hmm need distance to nearest grid line: line positions at multiples of pitch: d = abs(fract(x/pitch + 0.5) - 0.5) * pitch → distance to nearest multiple of pitch. Street half width SW=6. If d < SW → roadway; SW..SW+3 → sidewalk curb; else block interior (under buildings, hidden mostly).
• Roadway: dark asphalt + center dashes: for x-streets (line along x? define: vertical grid lines x = i*pitch run along z): center line dash along z: fract(z / 8.0) < 0.5 and |d| < 0.4 → emissive faint yellow. Similarly for horizontal lines. Edge lines at |d| ~ SW-0.5 white faint.
• Sidewalk: slightly lighter + grid seams.
• Puddle sheen: noise-based patches: float p = smoothstep(0.6, 0.9, noise) → reduce roughness & add slight blue emissive shimmer. With standard material, setting roughnessFactor: inject into roughnessmap_fragment: roughnessFactor = mix(roughnessFactor, 0.15, puddle). Without envmap, smooth areas look darker/glossier via lights? We have almost no dynamic lights (maybe a few). Envmap: give scene.environment a small generated PMREM from a gradient? That's extra work; skip env, fake sheen with emissive faint reflection of sky gradient color. OK.
• Crosswalks: near intersections (both d_x and d_z within SW): zebra stripes along crossing direction, white faint emissive-ish albedo.

Traffic: lanes: for each grid line index i in 0..blocks (12 lines each axis), lanes at offset ±3.2 (right-hand traffic): for vertical street: cars going +z at x = ipitch + 3.2; going -z at x = ipitch - 3.2. Similarly horizontal. Number of cars per lane depends on traffic density slider: base 12 per lane × 48 lanes = 576 max... too many maybe; lanes subset: use every grid line → 12 lines/axis × 2 axes × 2 dirs = 48 lanes; cars per lane ~ 8 → 384. Fine as instanced.

• Car body: InstancedMesh box (1.9 x 1.0 x 4.2) dark colors via setColorAt, slight metallic.
• Lights: InstancedMesh of small plane? For headlights: two white dots front, red strip rear. Simplify: one additive plane per car at front (white, stretched) and one at rear (red). 2 extra instanced meshes (front lights white, rear red) with matrix updated per frame. Use additive MeshBasicMaterial with radial gradient texture; plane always horizontal? Better: small sphere squashed? Use PlaneGeometry oriented along car direction facing sideways... simplest that looks good from above/street: use small billboarded sprites — but sprites can't be instanced orientation... Use Points with big size? Points with per-point color: one THREE.Points for all car lights: positions updated per frame (2 points per car: front white-ish, rear red), size ~ 6px attenuated, additive, round gradient texture. Points size in pixels with attenuation can look blobby but with fog + bloom it reads as car lights. From street level it works. I'll do Points (vertexColors, sizeAttenuation, map gradient, additive, depthWrite false).
• Update: offset += speed*dt; wrap at city extent + margin; compute x,z from lane; orientation for body matrix (rotation y). Cars all drive straight; no collision (spaced initially random; same speed per lane → no overtaking; assign per-lane speed).
• Also brake glow variation? skip.

Maglev: stadium path center (0,0), half-extents ax=190, az=140, corner radius r=60, height y=20. Param: total length L; function maglevPoint(s) → pos + tangent. Track: 260 instanced box segments (len ~ pathLen/260) oriented via lookAt matrix; glow strip: another instanced thin box emissive cyan under track; pillars every ~10 segments instanced cylinders to ground. Train: 8 cars: each car a box 2.6x2.6x9 with window strip texture emissive (canvas: dark with bright strip), head car with white light point, tail red. Cars positioned at s - k*gap along path, oriented by tangent. Slight bob. Speed ~ 22 units/s, slows near corners? keep constant.

• Path implementation (stadium): perimeter param: straights along x at z=±az from -ax..ax, semicircles at x=±ax radius... Actually stadium: two straights (along x) length 2ax each, two semicircle caps radius az. Let me define ax=170 (half straight length), radius R=120. Total L = 2(2ax) + 2π*R. Point(s): s mod L; piecewise.

• Must ensure maglev doesn't clip buildings: height 20, buildings up to 120 tall will intersect the ring visually — that's FINE and actually cool (train weaving between towers) as long as it doesn't pass through building geometry on its path. Path ring radius ~120-170 in a city of size 1138=418 → half-size 209. The ring passes through blocks → buildings there → collisions visible. To avoid: make ring hug street lines: choose ring as rounded rectangle whose straights run above street lines at x=±kpitch and z=±mpitch. Streets are clear corridors! Straights at z = ±(5pitch) (z street lines, i in 0..10 → positions 0..380, center 209... hmm city spans 0..11*38=418? Let me set coordinates centered: grid lines at (i - blocks/2)*pitch for i in 0..blocks, blocks=11 → lines at -209, -171, ..., 209. City center 0. Blocks interiors between lines.

• Maglev straights along lines z=±152? Not a street line... street lines at multiples of 38: ±190, ±152, ±114... Choose straights along x at z = ±114 (street lines, clear corridor), corners beyond x=±190: corner circle centered at (±190, 0) radius 114 → passes over blocks near (190±.., 0..114)... corner arc spans from z=-114 to z=+114 around x=190+... The arc sweeps over block interiors at the city edge — collisions with buildings there. Options: lower buildings near maglev corners (mask building heights near ring path during layout: reduce h if dist to ring < 20 → set h = min(h, 12)). That's easy: layout gen checks distance from building center to ring curve (sample ring coarsely, or analytic distance to stadium). Analytic stadium distance: distance to segment pair + caps — standard: dist to capsule... I'll compute approximate: sample 200 ring points, min dist — fine at gen time. If minDist < building half-diagonal + 4 → clamp height to 10 (podium). Also skip signs on those.

• Cruise waypoints: pick a loop: start at line intersection (i0,j0), random walk along grid lines: at each intersection choose to continue or turn (not reverse), 10-16 waypoints, at height 7.5, closed by returning to start (walk on grid graph). CatmullRom closed curve; but CRS curve overshoots corners into buildings! Corner cutting danger: CatmullRom through 90° intersections cuts across the block corner. With enough tension (use 'centripetal' and sample densely) it still cuts. Alternative: build path as rounded corners explicitly: for each turn, insert arc points (quarter circle radius 8 centered at intersection inner corner... street half width 6 → radius ≤ 6 to stay in corridor? corridor width 12, car path at center; turning radius up to ~6 keeps within street). Use arc radius 5.5 around corner point inset... Actually the turn happens at intersection of two street centerlines; a quarter circle of radius r tangent to both centerlines: centered at (corner + offset along both incoming dirs). Points: tangent points at distance r before/after the intersection. r = 5.5 fits within 12-wide corridors (centerline ±6). So cruise path = polyline with rounded corners sampled densely → custom curve: generate array of Vector3 then CatmullRom through densely sampled points (tension irrelevant when points dense — curve nearly passes through). Or use THREE.CatmullRomCurve3 with points from the dense sampling and 'catmullrom' tension 0.5? Dense sampling → fine. Or simpler: use my own sampler: I have dense points; interpolate linearly with cumulative arc length; smooth camera orientation via lookAt ahead distance. Camera pos from dense polyline is smooth enough with arc corners. I'll generate dense points (~2000) and lerp.

• Fly mode: pointer lock, WASD + QE/Space/Shift up/down, speed shift. Collision with buildings? Keep none (ghost mode) — fine for demo, mention "noclip fly".

Hover vehicles: 64 vehicles: each: pos in box [-260,260]², y in [30, 95], velocity direction random from 8 compass dirs (axis/diagonal), speed 15-35. Wrap at bounds. Body: instanced box (2.2,0.7,3.4) dark; lights: Points per vehicle (front cyan, rear red, plus belly amber?) 3 pts each → 192 points, updated per frame; blink top beacon: another Points white with per-frame opacity blink — use per-vehicle phase: update only scale? Points can't per-point alpha without shader... Use custom Points shader? Keep simple: 2 points/vehicle constant on; plus vehicle body slight bobbing. Good enough with trails? Add short trail: stretch rear red point... skip trails.

Rain: instanced thin boxes count by quality (350/700/1200), in cylinder r=70 around camera, y 0..80. Velocity (windX, -55, windZ), slant via rotation aligning to velocity dir — precompute quaternion once (constant wind), update positions: p += v*dt; if y<0: respawn top at random x,z around camera. Per-frame matrix update of 1200 instances OK. Additive faint (opacity 0.25, color #9db8d8), depthWrite false. Also fade rain when camera high? whatever.

Ground ripples: skip.

Sky: sphere r=900, ShaderMaterial side=BackSide, fog:false. Fragment: direction dir = normalize(vWorld - camPos)? use vWorldDirection like three's sky: pass world pos, compute h = normalize(pos).y. Colors: horizon glow: mix of deep indigo zenith #05060e → #1a1030 mid → warm city glow #ff5a2a * horizonBand * cityGlowDir? Make horizon glow stronger toward city center — sky sphere centered on camera, so direction-based: use world dir xz → all around city; glow all around (city surrounds). Stars: hash grid on dir: project dir to cube-ish: use vec2 sp = dir.xz / (dir.y + 1.2) stereographic; grid cells, star if hash < 0.02, twinkle sin(time*3+h). Moon: dir·moonDir > cos(ang): disc with crater noise + halo exp falloff. Smog: fbm(dir.xz/(y+0.3)2 + time0.01) band near horizon adding brown-ish haze. Also faint aurora? no — cyberpunk, skip.

Distant skyline: ring of ~140 instanced boxes at radius 500-800, heights 40-160, widths 20-40, flat dark #0b0d18 with faint window speckle? Use same building shader (they're far, fog covers). Just reuse building InstancedMesh? Different seed ring — separate simple MeshStandard flat + fog; add tiny emissive dots via same onBeforeCompile? Simpler: use the SAME building material with window shader — free. I'll create second InstancedMesh with same material.

Lights: ambient low (#223, 0.5), hemisphere (sky #2a2a4a, ground #0a0a12, 0.6), moon directional faint blue (#8899ff, 0.25) with no shadows (perf) — or shadows off entirely. Add 2-3 PointLights near center? Not needed with emissive+bloom.

Post: bloom threshold 0.75, strength 0.9, radius 0.55. Grade pass: vignette 0.35, grain 0.035 animated, CA 0.0015 radial, slight teal-shadow/warm-highlight duotone? subtle saturation boost 1.08. Then OutputPass (ACES via renderer.toneMapping = ACESFilmicToneMapping, toneMappingExposure 1.1).

Note three 0.160: OutputPass handles tone mapping + sRGB. Custom grade pass should operate in linear before OutputPass — grain/CA fine.

HUD: consistent style: glassmorphism dark panels, accent #ff2d95 / #00e5ff. Title "NEON DISTRICT // 051". Buttons. Range inputs styled. Help overlay with key table. Loader overlay while generating (regen quick anyway). FPS counter. Seed display.

Audio engine:

• master gain, compressor.
• pad: 2 osc saw detuned ±6 cents → lowpass 600Hz → gain LFO; chord progression: Am9 (A2,C3,E3,B3), Fmaj7, Cmaj7, G6... use frequencies from note numbers. Voice allocation: per chord change, ramp gains. Change chord every 8 bars ~ 7s. Implement PadVoice: osc pair per note — that's 8-10 oscs, fine.
• arp: sine/triangle pluck: short env, random note from minor pentatonic (A minor pent + 9), every 0.25-0.5s random skip, through feedback delay (0.375s, fb 0.35, wet 0.3).
• rain: white noise buffer loop → bandpass 1800 Q0.5 + lowpass 4000 → gain by rainAmount*0.15.
• hum: brown noise → lowpass 220 → gain 0.05; occasional foghorn: saw 55Hz gliss down, LP 300, every 20-45s.
• whoosh: wind noise bandpass 400-900 gain tied to camera speed (fly/cruise), Q 1.
• neon buzz? skip.
• UI click blips.

Quality tiers: fps EMA; check every 2.5s: if < 45 → tier down; if > 58 for 10s → tier up (max). Tiers: 0 high: pixelRatio min(dpr,2), rain 1200, bloomStrength .9, traffic 1.0; 1 med: pr 1.25, rain 700, bloom .7, traffic .7; 2 low: pr 1, rain 350, bloom .45 or off at tier 3? 3 tiers enough. Traffic density multiplies slider. Changing rain count: rebuild rain instanced mesh with new count (keep buffer max size, set .count). Cars: set .count on instanced meshes & points draw range.

Regenerate: new seed → rebuild layout-dependent meshes (buildings, signs, lamps, skyline same?, cruise path, maglev keep same ring, traffic lanes same structure but re-seed positions). Dispose old geometries/materials properly-ish (demo robustness: just dispose geometry; materials shared).

OK. Also keep the pure-logic markers for node testing:

maglevPoint and cruise path don't need THREE (return arrays) — good, testable.

Node test: extract between markers, eval in a sandbox with module shim? Just eval(code + tests) in node script. Assert:

• rng deterministic
• layout: buildings count > 200; all within city bounds; no building intersects street corridors (check: building AABB inset into block interior: for each building, (x - w/2) mod pitch within [SW+sidewalk, pitch - SW - sidewalk]... compute properly: block interior between lines: lines at k*pitch (centered coords offset). I'll define layout in centered coords: lines at (k - blocks/2)*pitch for k in 0..blocks. Block (i,j) interior x ∈ [line_i + SW, line_{i+1} - SW] (SW = streetW/2 + sidewalk). Buildings must satisfy x-w/2 ≥ line_i+SW+0.5 etc. Assert with epsilon.
• maglev ring: buildings near path clamped: for each building, min dist to ring samples; if < (diag/2 + 3) assert h ≤ 12.
• cruise dense points: no NaN, consecutive dist < 5, all y=7.5, points stay in corridors: for each point, min(dist to nearest grid line in x or z) < SW (corridor check: either x or z near a line).
• cars lanes count, speeds > 0.

Great. Now write the code. It's long; I'll write to /tmp/neon_parts/ in ~6 files then concatenate into /space/demos/051-neon-district/index.html.

Let me carefully draft the entire HTML.

Key parameters:

• BLOCKS = 11, PITCH = 38, STREET_W = 12, SIDEWALK = 3 → SW (street half) = 6, interior margin = 6+3 = 9 from line → block interior half-size = 38/2 - 9 = 10 → interior 20x20 per block. Buildings within 20x20: 1 tower (16x16) or 2 (9x18) or 4 (8x8 each). Hmm 4 buildings of 8x8 with 1.5 gaps: 2x2 grid within 20: each cell 10 → building 7-9 size with gaps ≥1. OK.
• City extent: lines from -209 to 209 (blocks=11 → 12 lines k=0..11, (k-5.5)*38 → -209..209). Ground plane 700x700, skyline ring 550-850 → ground 1800 to catch fog horizon? Fog exp2 0.0075 → at 900 almost fully fogged; plane 1600 fine.

Heights: downtown falloff: d = dist to center / 209; maxH = lerp(115, 22, smoothstep(0.0, 0.9, d)) * (0.55 + 0.9*noise) + maybe supertall lottery: 3% chance ×1.5 up to 150.

Signs placement: choose buildings with h ≥ 24, probability 0.7, up to 2 per building: face random; sign center height y ∈ [8, h-6]; horizontal sign w 6-14 h 2-4.5; vertical w 2-3.5 h 8-18; position on face offset 0.3 out. Cap ~140 signs. Palette idx random; glyphSeed random.

Lamps: at each intersection (12x12=144) place 2 (diagonal corners) → 288 lamps? draw: instanced pole (0.18 r, 7 h) + head glow: Points warm. 288 poles fine. Only on intersections not in maglev corner zones (skip check — poles are short, fine anywhere). Actually corners of intersections are on sidewalk areas (offset SW+1 both axes). OK.

Traffic: lines k=0..11 both axes → 24 streets × 2 dirs = 48 lanes. carsPerLane base = 9 → 432 cars max. Lane offset ±3.0. Car z-order: direction +axis at +offset (right-hand traffic for vertical streets: going +z on east side (+x offset) ✓; for horizontal going +x at -z offset ✓ (right side when facing +x is -z? facing +x, right hand is -z? In three.js y-up right-handed: facing +x means looking toward +x, up +y, right = ... cross(dir, up)?? right = dir × up? Let's not overthink; visual only.)

Car body geometry: BoxGeometry(1.8, 0.9, 4.0) with origin center; per-frame compose matrix from pos + yaw + scale 1. Cars same per-lane speed (7-13). Spacing random initial; since same speed, no collisions ever.

Car lights points: front 2 points (white #cfe8ff, at ±0.6 lateral, y 0.55, front +2.05 along dir), rear 1 wide red point (#ff2a1a, rear). So 3 points/car → 1296 points max. Positions per frame: compute per car. Fine.

Hover: 64 vehicles → body instanced; 3 points each.

Maglev: straights at z=±114 from x=-190..190; caps circle center (±190,0) r=114 → total length = 2380 + 2π114 = 760 + 716.3 = 1476.3. Height 20. Segments every 5.7 units → 260 boxes (10 long? segment length 1476/260 ≈ 5.68 → box len 5.8). Track box: 4.2 wide, 1.0 tall. Glow strip: 3.0 wide 0.15 tall emissive cyan at bottom y -0.6. Pillars every 30 units (49 pillars) from ground to 19.5. Train: 8 cars gap 10.5 → occupies 84. Speed 26. Cars y = 21.6 (on top of track). Car mesh: box 3.2w 2.4h 9.5l with canvas texture window strip (emissive map? use MeshBasicMaterial with map → always bright + bloom). Body material standard dark + separate emissive strip plane? Simplest: MeshBasicMaterial with a canvas texture: dark sides with bright cyan window band → since Basic material renders texture colors raw, dark parts stay dark. One material all faces — windows on top/bottom too, whatever, invisible mostly. Or multi-material box [side,side,top,bottom,front,back]: side texture with windows, top/bottom dark, front dark with white headlight dot on first car... keep single texture; fine.

Train orientation: quaternion from tangent (yaw only: atan2(tx, tz)... forward +z convention: mesh length along z, so yaw = atan2(tangent.x, tangent.z)). Slight roll banking on curves: roll = clamp(speed²/r * k) around local z? Add small roll via rotationZ after rotationY — skip, keep upright (maglev is smooth).

Cruise path: random walk on grid intersections: grid indices (i,j) i,j ∈ [1..10] (avoid outermost ring to stay inside city; also avoid maglev corner clamps? height 7.5 vs clamped buildings 12 — a clamped 12-tall podium could sit at street edge... maglev corners are outside index range? maglev caps at x≥190-114=76... corners sweep blocks near (±190, ±..): those blocks are within index i where line_i ≈ 152..209 → i near 10-11. Restrict cruise walk to indices 2..9 → x ∈ [-133+.., ..] wait line positions (k-5.5)*38: k=2 → -133, k=9 → 133. Buildings between lines -133..133 with heights up to ~115 — cruise at 7.5 through streets is fine as long as it stays in corridors: streets are clear of buildings by layout guarantee (inset 9 from lines). Rounded corner radius 5.5 ≤ 6 ✓ stays in corridor. Waypoints: start (2..9 random), walk: directions unit grid; each leg length 1-3 blocks; 12-18 legs; must return to start for closed loop: simplest — generate a rectangle-ish loop? Random loop: do a random walk then close: force return by walking back along y then x (Manhattan close): keep list; closing legs may overlap existing path — fine visually. Corner rounding only at interior waypoints where direction changes; at collinear continue straight. Dense sample: walk segment by segment: straight parts: push points every 2 units; corners: quarter circle sampled 8 pts. Closed loop: after last waypoint, add path back to start: add waypoints (start.x, last.y) then start — with corners. Let me implement generically: given ordered waypoint list (closed), build dense points with rounded corners at each waypoint (r=5.5) where direction changes; where straight (or segment shorter than 2r... ensure legs ≥ 2 blocks? legs ≥ 1 block = 38 > 11 ok), skip rounding.

Camera on path: pos = dense[i], lookAt dense[i+lookahead] + small vertical sway. Speed ~ 16 units/s (arc-length via index stepping: points every ~2 units → step = speed*dt/2). Banking: roll from heading change rate: roll = clamp((yawNow - yawPrev)/dt * 0.06, ±0.35). Apply via camera.up = (sin(roll)... ) or rotateZ after lookAt.

Waypoint gen must avoid maglev corner clamp zones? Cruise at 7.5 in corridors between blocks: clamped podiums (h≤12) still occupy block interiors only → corridors clear ✓. Also lamp poles at intersection corners — at corner sidewalk (offset 7 from center) — camera path corner radius 5.5 centered 5.5 from intersection center → path points max 5.5+ small from centerline... lamps at (±7,±7) from intersection center; path quarter circle passes through points like (5.5 cosθ...) offset by tangent geometry — distance from lamp ≥ ~1.5? corner circle: tangent points at (±5.5, 0) and (0, ±5.5) relative to intersection (in corridor dirs), arc bulges toward the corner quadrant: closest approach to corner point (7,7)-ish region: arc points at (−5.5+5.5cos… hmm: turn from +x to +z: tangent points (−5.5,0) and (0,5.5) [approaching from −x]. Arc center at (−5.5, 5.5)? No: quarter circle tangent to both lines y=0 (at x=−5.5) and x=0 (at z=5.5): center at (−5.5, 5.5), radius 5.5. Arc spans angles from pointing −y to +x... points: center + 5.5*(cos t, sin t) for t ∈ [−90°..0°]: from (−5.5,0) to (0,5.5) — bulge toward (−5.5−?..) arc midpoint at t=−45°: (−5.5+3.89, 5.5−3.89) = (−1.6, 1.6). Lamp at corner of intersection: say (7,7) or (−7,7) etc. Distance from (−1.6,1.6) to (−7,7) = √(5.4²+5.4²)=7.6 ✓ clear. To (−7,−7)? farther ✓. OK lamps never within 3 units of path. Good — camera won't clip poles (camera near-plane ~0.1, fine even if close).

Fog density: exp2 0.0075 → at cruise distances 100-300, buildings fade nicely. Sky unaffected (fog:false). Bloom + fog: fog applied per material before bloom ✓.

Snapshot: key P / button.

Let me also handle WebGL context creation failure gracefully? skip (consistent with others presumably).

Touch controls: orbit mode: 1-finger rotate, 2-finger pinch zoom (OrbitControls handles). Fly mode touch: left half joystick move (forward/strafe), right half drag look — implement minimal joystick. Buttons for up/down. That's some code but worth it. Cruise: nothing needed. I'll implement a simple nipple-like joystick div.

Alright — also HELP overlay content: keys list.

Let me now also design the glyph texture generator for signs:

For each texture: canvas w×h (256×128 or 128×320), transparent bg; draw panel: rounded rect fill rgba(8,10,16,0.85) inset 4px, border stroke palette color low alpha; glyphs: n = vertical ? h/56 : w/56; for each glyph cell 48px: draw 2-5 strokes: random segments within cell grid (like alien katakana): pick points on 3x3 lattice, connect 2-4 random segments, lineWidth 5-7, strokeStyle = color, shadowColor same, shadowBlur 18. Sometimes fill circle/square. Also add small english-ish label? Draw random letters from set "NEON遥夜都市"... using real kanji chars with font 'bold 40px sans-serif' also works and looks cool: chars = "夜宵霓虹都市光雨夢電脳粋幻舞" random pick. Mix: 60% lattice glyph, 40% real char. Border neon frame double stroke. Return canvas → THREE.CanvasTexture with anisotropy.

Reflection gradient texture: canvas 64×256 vertical gradient white→transparent; reflection quad: PlaneGeometry(w, h2.2) rotated flat, positioned under sign at ground y=0.06, additive, opacity 0.35, map gradient (rotated so gradient fades away from wall), color tinted to sign color via instanceColor. InstancedMesh per... shared single geometry 1×1 scaled per instance. Gradient direction: plane local +y maps to world away-from-wall dir. Compose matrix: position at (signX + outX(w?..)…) Actually reflection should start at wall base and extend outward onto street: length L=h1.6+4. center = wallBase + out(L/2). Plane rotated x -90°, then rotated around y to align local +y with out. Matrix compose with quaternion from euler(-PI/2, yaw, 0) order... Let me use Object3D dummy: dummy.position.set(...); dummy.rotation.set(-Math.PI/2, 0, yaw) with rotation order 'ZYX'? Simpler: build quaternion: q = qY(yaw) * qX(-90°). local +y after qX(-90): +y → -z... I'll compute: plane lies in XY, normal +z. rotate X by -90°: plane lies in XZ, local +y now points toward -z? R_x(-90): y→ -z? y axis rotates to... R_x(θ): y' = (cosθ)y − (sinθ)z... point (0,1,0) → (0, cos, sin)... for θ=−90°: (0,0,−1). So local +y → world −z. Then yaw around y aligns −z to out: need yaw such that R_y(yaw)*(0,0,-1) = out. (0,0,-1) rotated: (−sin yaw, 0, −cos yaw) = out → yaw = atan2(−out.x, −out.z). Fine — compute per sign. Gradient: canvas top opaque → bottom transparent maps to uv v=1 top... plane geometry uv: (0,0) bottom-left, v=1 top = local +y. Local +y is outward → want alpha strongest at wall (v=0) fading outward (v=1): gradient: bottom (v=0) white → top transparent. Canvas y down: texture v=0 at canvas bottom. So gradient: canvas bottom opaque → top transparent: createLinearGradient(0,H,0,0) white→transparent.

Sign emissive planes: MeshBasicMaterial map=atlas, transparent, side=DoubleSide? front only + backing. toneMapped: false? For bloom to catch bright colors: bloom threshold works on luminance of final color; Basic material colors ≤1 → with threshold 0.75, bright cyan (0,0.9,1) lum ~0.8 ✓ blooms mildly. Boost: material.color.multiplyScalar(2.2) with toneMapped=false... if toneMapped false and color >1 → HDR pre-tonemap? In composer chain, RenderPass renders in linear HDR to float? Render targets are UnsignedByteType by default in older three → clamps. In r160, EffectComposer default uses HalfFloatType frame buffers (since r152ish default HalfFloat). Yes, r152+ composer defaults to HalfFloat → HDR values survive → bloom threshold on HDR. So set sign material color scale ~2.0 for nice bloom, toneMapped=false irrelevant pre-OutputPass... Actually toneMapped flag affects material shader tonemapping only when renderer.toneMapping set AND rendering to screen; in composer render targets tone mapping is skipped (applied in OutputPass). Hmm — materials with toneMapped=true still skip tonemap when rendering to render target? Three applies tonemapping in the material shader based on renderer.toneMapping only when renderTarget is null? No — tone mapping chunk is compiled per material based on renderer state at compile; when using composer, renderer.toneMapping is set, but render pass targets... In modern three, tone mapping is ONLY applied by OutputPass when using EffectComposer correctly? Not exactly: if renderer.toneMapping is set, materials render WITH tonemapping into composer's buffer too (double tonemap issue) — that's why the recommended setup: renderer.toneMapping = NoToneMapping? Actually standard: when using EffectComposer + OutputPass, you set renderer.toneMapping = ACESFilmic; WebGLPrograms decides tone mapping per material with toneMapping: material.toneMapped ? renderer.toneMapping : NoToneMapping... and OutputPass does its own. To avoid double: RenderPass renders to float target — three checks renderer.getRenderTarget() === null? I recall: tone mapping applied only when rendering to canvas (null target) — yes! WebGLRenderer sets _currentRenderTarget; programs use toneMapping if renderTarget === null. Correct: in WebGLPrograms.getParameters: toneMapping: material.toneMapped && renderer.toneMapping !== NoToneMapping ... hmm I don't remember exactly. The well-known modern pattern (r155+): set renderer.toneMapping = ACESFilmicToneMapping; use EffectComposer with RenderPass + OutputPass; OutputPass reads renderer.toneMapping and applies it in its shader, and three does NOT double-apply because when rendering into a render target, tone mapping chunk is disabled (getParameters includes toneMapping: material.toneMapped ? _this.toneMapping : NoToneMapping but ALSO the renderer sets toneMapping to NoToneMapping internally when target active?...).

To be safe, follow the pattern used in demo 050 (which presumably worked with bloom + composer): let me check 050's post setup quickly to mirror it. It used UnrealBloomPass per summary. I'll grep its composer setup.

Also decide emissive intensities based on what 050 did. Let me grep.

The pattern in 050: renderer.toneMapping = THREE.ACESFilmicToneMapping, composer with RenderPass, UnrealBloomPass, OutputPass. I'll mirror that, plus a custom grade ShaderPass before OutputPass.

Now let me write the new demo. I'll create it in parts under /tmp/neon_build/ then assemble into /space/demos/051-neon-district/index.html.

Let me carefully write the code. I'll number parts:

• part1: HTML head + CSS + HUD DOM
• part2: importmap + script start: imports, config, PURE LOGIC BEGIN (rng, hash, noise, layout gen)
• part3: PURE LOGIC cont (signs, maglev path, cruise path, lanes, audio tables), PURE LOGIC END
• part4: THREE setup: renderer/scene/camera/sky/ground/buildings
• part5: signs/lamps/maglev/traffic/hover/rain/skyline
• part6: post, cameras/controls, audio, HUD, quality, loop, boot

Let me write each part meticulously. I'll be careful with:

• onBeforeCompile injection strings (must match r160 chunk names): begin_vertex, color_fragment, emissivemap_fragment, roughnessmap_fragment all exist in r160 standard material shaders. varyings declared at top of both shaders — I can prepend to shader.vertexShader / fragmentShader.
• USE_INSTANCING defined for InstancedMesh ✓.
• In vertex I need instanceMatrix — declared via #include <batching_pars_vertex>? It's in common? Actually instancing pars are in #include <instanced_pars_vertex>? Hmm: three r160 uses #include <batching_pars_vertex> and instancing handled in project_vertex via #ifdef USE_INSTANCING mvPosition = instanceMatrix * mvPosition. The declaration of attribute mat4 instanceMatrix; is in... WebGLProgram adds it automatically when USE_INSTANCING defined? Yes — WebGLProgram prepends #ifdef USE_INSTANCING attribute mat4 instanceMatrix; #endif in the prefix. So instanceMatrix is available in any injected vertex code ✓.
• For fragment hash functions prepend before main.

Ground plane geometry: PlaneGeometry(1700, 1700) rotated -90°, MeshStandardMaterial with onBeforeCompile. vWPos needed — same vertex injection works (no instancing: modelMatrix * vec4(transformed,1); modelMatrix for ground: rotation applied via geometry.rotateX so modelMatrix identity ✓).

Ground fragment: street pattern. pitch 38, street half 6, sidewalk to 9.

Wait fract gives [0,1); fract(gp/P + 0.5) - 0.5 → distance in cells; × P → distance to nearest multiple of P ✓ (lines at multiples of P... but my lines are at (k - 5.5)38 which are NOT multiples of 38 — they're offset by 5.538 = 209 = 5.5*38. Hmm (k-5.5)*38: for k=5 → -19, k=6 → +19. So lines at ±19, ±57, ±95... offset half-pitch from 0. So street centerlines at x = 19 + 38m. Distance func: dx = abs(fract((gp.x - 19.0)/38.0 + 0.5) - 0.5) * 38.0. Let me define STREET_OFF = 19.0.

Roadway mask: dx < 6 → x-street roadway (street running along z). dz similarly. roadway = (dx<6)||(dz<6). Intersection: both. Sidewalk: !roadway && (dx<9 || dz<9). Else interior ground (mostly under buildings).

Lane dash: on x-street (dx<6): dashes near dx≈0: dash = step(dx,0.35) * step(fract(gp.z/8.0),0.55) → emissive amber faint *0.35. Both streets → at intersection both dash → fine (looks like grid dots; acceptable) — or suppress when dz<6: dash *= step(6.0, dz).

Crosswalk: at intersections, on each street approach: region: dx<5.4 && dz in [7.5, 10.5]: stripes: step(fract(gp.x/1.2), 0.5) → white 0.25 emissive-ish albedo boost. Similarly for other orientation.

Puddles: n = fbm-ish via noise texture? Implement small hash-based value noise in shader (2-3 octaves) — fine. puddle = smoothstep(0.62,0.75,n) * roadway? puddles on roadway & sidewalk. Effect: roughnessFactor → 0.12, and emissive += cityGlowColor * puddle * 0.06 (fake reflection shimmer) + make albedo darker.

Also wet asphalt overall: roughness 0.5→0.35 when raining (uniform uWet). Emissive sheen: reflect sky: emissive += mix(vec3(0.008,0.01,0.02), vec3(0.05,0.03,0.09), pow(1.0-abs(ny)... ground normal is up; fresnel-ish view angle: use viewDir: emissive += skyGlow * pow(1.0 - max(dot(viewDir, n),0.0), 3.0) * uWet * 0.35. viewDir available as vViewPosition varying in standard material (fragment: vViewPosition exists). geoViewDir = normalize(vViewPosition). OK inject after normal computation... normal_fragment gives normal. I'll inject at emissivemap_fragment where normal var exists ✓.

Buildings vertex also need vWPos & vWN. Add prepended varyings + hash12 for fragment.

Watch out: prepending to fragmentShader: custom code must come before everything: hash12 funcs + varyings + uniforms. Uniforms: add to shader.uniforms: uWinGlow, uLitRatio (buildings), uWet, uTime (ground). Store shader ref in material.userData for updates.

InstancedMesh buildings: per-instance tint setColorAt (needs material with vertexColors? No — instanceColor works when mesh.instanceColor set; three handles define USE_INSTANCING_COLOR automatically ✓ multiplies vColor into diffuse).

One InstancedMesh with count = buildings.length (~500-900). MatrixAutoUpdate not needed.

Roof clutter: instanced box 1×1×1 scaled (2-5, 0.8-2, 2-5) dark gray, placed on roofs: for each building with 60% chance 1-2 units. Count ~700. Standard material rough 0.9. Cheap.

Antennas: buildings h > 78: cylinder r0.12 h 8-16 at roof corner-ish. Count small (~40). Beacons: Points at antenna tops, custom PointsMaterial with map gradient, color red, size 40 sizeAttenuation... blink: use onBeforeRender? Use ShaderMaterial small: attribute phase; uniform time; gl_PointSize = size*(300/dist); color alpha = 0.4+0.6pow(0.5+0.5sin(time*2.2+phase), 8.0). Additive. Write small ShaderMaterial — ok.

Skyline ring: 160 buildings ring radius 520..820 random angle, w/d 18-42, h 35-150*(falloff by angle noise). Same building material → windows lit far away through fog ✓. But building shader hash uses vWPos.xz / pitch → block id huge numbers — hash fine. Set fog on material (standard ✓).

Sky shader as planned.

Lamps: pole InstancedMesh (CylinderGeometry(0.09,0.14,7)), head: Points warm #ffb46b size 26 attenuation, positions at (x, 7.1, z), 288 pts static. Also lamp glow halo on ground? skip (ground wet sheen handles).

Rain: as planned.

Now camera modes:

• CRUISE default. Pos from dense path; path arc-length uniform-ish (points every ~1.6-2u). Advance idx += speed*dt/spacing. yaw lookAt ahead point; roll banking.
• ORBIT: OrbitControls, target (0, 30, 0), autoRotate slow? enable damping; min/max distance 40..600, maxPolarAngle 88° (don't go under ground).
• FLY: pointer lock on click canvas; WASD move relative to camera, Q/E down/up, Shift boost ×3.5, mouse look. Release: ESC. On entering fly from cruise: start at current camera pos/quat.

Mode switch: keys 1/2/3 + button cycling. UI badge shows mode.

HUD elements ids: #hud-title, #seed, #fps, buttons: #btn-new, #btn-cam, #btn-sound, #btn-help, #btn-snap; sliders #rain, #traffic; #help overlay; #loader; #toast maybe.

Loader: show "FORGING DISTRICT…" during build (build is fast ~50ms, but texture gen maybe 200ms; show anyway on boot & regen with rAF defer).

Regenerate: seed = (Math.random()*1e9)|0; rebuild: dispose instanced meshes (geometry dispose, instance buffers auto), signs, lamps positions, traffic car placement, cruise path, hover keep, skyline keep (same every city? re-seed too, cheap). Rebuild cruise dense points. Reset camera to cruise start.

Audio: as designed. AudioContext created/resumed on first gesture. Toggle button mutes master.

Adaptive quality: implement QualityManager: tiers array with {pr, rain, bloom, trafficFactor}; check every 2s using EMA fps. Apply: renderer.setPixelRatio, bloomPass.strength, rainMesh.count, traffic counts (carsShown = floor(total*factor) → set instancedMesh.count and points drawRange, also cars beyond count parked? Just hide). Sign count unaffected.

FPS meter: update every 0.5s in HUD.

Snapshot: press P or button: composer.render() then canvas.toBlob → download neon-district-{seed}.png.

Resize handler.

Prevent context menu on canvas (for RMB drag)? fine.

Edge cases in shader injection: must match chunk include strings exactly as in r160: '#include <emissivemap_fragment>' exists in meshphysical fragment? The standard material fragment shader contains #include <emissivemap_fragment> ✓. Vertex contains #include <begin_vertex> ✓. Fragment contains #include <color_fragment> ✓, #include <roughnessmap_fragment> ✓.

For ground: I'll inject after color_fragment the albedo mods; at emissivemap_fragment add emissive & crosswalk dashes need computed values — compute all in color_fragment injection storing into local vars declared there? Variables declared inside main() at color_fragment injection point persist to later includes within main ✓ (same scope). roughnessmap_fragment comes AFTER color_fragment ✓ emissivemap AFTER roughness ✓. Order in meshphysical frag: map_fragment, color_fragment, alphamap, alphatest, roughnessmap, metalnessmap, normal_fragment..., emissivemap... wait roughnessmap_fragment before normal_fragment_begin? Rough order: ... color_fragment, alphamap_fragment, alphatest_fragment, alphahash_fragment, roughnessmap_fragment, metalnessmap_fragment, normal_fragment_begin, normal_fragment_maps, clearcoat, emissivemap_fragment, lights_physical_fragment... Yes emissive after normal → can use normal var ✓. vViewPosition varying exists (standard) ✓ geometryViewDir = normalize(vViewPosition).

Careful: in emissive injection for ground use totalEmissiveRadiance += ....

For buildings: need albedo variation per instance — use instanceColor via setColorAt (easiest).

Also building base podium glow? Shopfronts at street level: first floor (v < 4.5) brighter storefront windows with colored tint by hash — adds street-level neon life:

Include in window injection.

Also dark horizontal band every ~8 floors (mechanical floor): if fract(v/(floorH*8.)) < 0.06 → no windows.

Good. Time to write. Also pure-logic markers: I'll put functions: mulberry32, hashStr, makeRNG, valueNoise gen (with permutation from rng), makeCityLayout(rng, CFG) returns {buildings, signs, lamps, skyline}, buildLanes(), placeCars(rng, lanes, density), maglevPathLength, maglevPoint(s) returning [x,y,z,tx,tz], cruiseDensePath(rng) returns flat Float array & pointCount, glyph string sets, CHORDS/SCALES tables.

All pure ones must not reference THREE. maglevPoint returns plain arrays; THREE code converts.

CFG constants: BLOCKS=11, PITCH=38, STREET_HALF=6, SIDEWALK=3 → INSET=9 (interior offset from line). Lines at (k - BLOCKS/2)*PITCH, k=0..BLOCKS → -209..209 ✓ half offset 19.

makeCityLayout details:

Return also antennaBeacons points list.

Cars: lanes: for k in 0..BLOCKS: for axis in {x-street(along z), z-street(along x)}: lane offset ±3.0, dir ±1. lane = {axis:0/1, line: lineCoord, off: ±3, dir:±1, speed: 8+rng()5}. cars per lane: N=9: offsets spaced: sort? just random positions; same speed per lane → constant gaps ✓. car = {lane idx, s: rng()trackLen} where trackLen = cityExtent+2margin (margin 40): s ∈ [-L/2, L/2] along axis. colorIdx. Update: s += dirspeeddt; wrap into [-L/2, L/2] (L = 2(209+40) = 498): if s > 249 → s -= 498 ✓. pos: axis 0 (along z): x = line + off*? off sign should match right-hand: for dir +z lane, x = line + 3.0; dir -z: x = line - 3.0. Encode: off fixed per lane. pos = axis0 ? (x=laneX, z=s) : (x=s, z=laneZ). yaw = axis0 ? (dir>0? 0 : PI) : (dir>0? PI/2 : -PI/2) with mesh forward +z: moving +z → yaw 0; -z → PI; +x → PI/2; -x → -PI/2 ✓ (R_y(π/2) maps +z→+x ✓).

Car variety scale: len 3.6-4.6, h 0.8-1.1 (some vans 1.4), w 1.7-1.9.

Hover lanes: 8 directions diag step: dir angle = k45°. vehicle: {ang, offset(perp), y, s, speed}: perp offset ∈ [-230,230]; s ∈ [-300,300]; wrap. pos = dirs + perp*offset. y = 28+rng()62. Bob: y += sin(t1.3+ph)*0.8. yaw = atan2(dx, dz) of dir.

Maglev: straights z=±114 x∈[-190,190]; caps center (±190,0) r=114. Wait right cap: center (190,0): arc from (190, 114)? At x=190 straights end; arc around center (190,0) radius 114 from angle 90° (point (190,114)) sweeping through (190+114, 0)=(304,0) to (190,-114): angles 90°→0°→-90°. Direction of travel: loop CCW: along +x on z=-114 straight? Let's define travel direction: start at (-190,-114) heading +x to (190,-114); then right cap: center (190,0), from angle -90° (point (190,-114)) sweeping counterclockwise? point on circle: (190 + 114cos a, 0 + 114 sin a); a=-90° → (190,-114) ✓; increasing a → 0°: (304, 0) ✓ → 90°: (190,114) ✓. Then straight from (190,114) heading -x to (-190,114); then left cap center (-190,0): a=90° → (-190,114); a→180°: (-304,0); a→270°: (-190,-114) ✓ closed. Tangent: derivative. Total L = 2380 + 2π114 ≈ 760 + 716.28 = 1476.28. maglevPoint(s): s mod L; if s < 380: straight1: pos (-190 + s, 20, -114), tangent (1,0). elif s < 380 + π114: arc: a = -90° + (s-380)/114 (radians): pos (190+114cos a, 20, 114 sin a), tangent (-sin a, cos a)... direction of increasing s: d/ds pos = (-sin a, cos a) ✓ at a=-90: (1, 0) ✓ matches straight. elif s < 760+π*114: straight2: s2 = s - (380+πR): pos (190 - s2, 20, 114), tangent (-1,0). else: arc2: a = 90° + (s3)/114: pos (-190+114cos a, 20, 114 sin a), tangent (-sin a, cos a): at a=90: (-1,0) ✓. Heights y=20 const.

Cruise path: waypoints list of [i, j] grid indices (street line indices 2..BLOCKS-2 i.e. 2..9 → coords (k-5.5)38 ∈ {-133..133}). Start random (i0,j0). Walk: dir one of 4; legs 12-18: turn or straight with probs; leg length 1-3 steps (each step 38). Waypoints as world coords at line positions. Then close: append (x0, zLast) then (x0, z0)? Closing legs: from last (xL,zL) → (x0, zL) → (x0, z0) (Manhattan). Might cross maglev? y=7.5 vs maglev y=20 ✓ no conflict. Buildings never in corridors ✓. Dense: for each consecutive pair (A→B) with corner at B between dirs d0 (A→B) and d1 (B→C): if d0 == d1 (collinear): straight points every 1.8 from A to B (excluding B). else: rounded corner: r=5.5: T0 = B - d0r, T1 = B + d1r; straight A→T0 every 1.8; arc: center O = B - d0r + d1r? For turn from d0 to d1 (perpendicular): circle tangent to both rays at T0 & T1: center = B - d0r + d1r? Check d0=(1,0), d1=(0,1): T0 = B-(5.5,0), T1 = B+(0,5.5); center = B - (5.5,0) + (0,5.5) = B + (-5.5, 5.5). dist to T0 = 5.5 ✓ dist to T1 = 5.5 ✓. Arc from angle of (T0-O) to (T1-O), choose sweep direction by sign of cross(d0, d1): cross_y = d0.zd1.x - d0.x*d1.z (y-up). Sample 7 points. Continue. Path closed: treat list as cyclic ✓ (last → first also corner). Return flat array [x, 7.5, z, ...].

Also make sure consecutive waypoints aren't same point (legs ≥ 1 step ensures 38 apart ✓). Also avoid immediate U-turn (dir reverse): disallow d1 = -d0.

Dense count: perimeter ~ (16 legs * 2 blocks * 38) ≈ 1200+ units → ~700 points ✓.

Node test assertions:

• layout within bounds & inside interior, h ≥ 8
• maglev clamp: verify buildings near ring h ≤ 12.5
• cruise: points finite, y=7.5, corridor check: dist to nearest street line (lines at 19+38m) for x OR z < 6.2 ✓ every point. Also min step dist > 0.
• maglevPoint: continuity: sample s 0..L step 0.5: |p(s+0.5)-p(s)| ≈ 0.5 ± eps; y=20; tangent unit.
• lanes/cars: counts, speeds in range.
• noise in [0,1).

Good. Now the glyph textures & palettes (THREE-side). Palette colors: PAL = ['#ff2d95', '#00e5ff', '#ff9f1c', '#39ff88', '#b26bff', '#ffe14d', '#ff4444']

Sign textures: generate per (palette × orientation): 7×2 = 14 canvases... texture memory fine (256×128). Glyph style via rng seeded by... use city seed rng — textures regenerated per city (dispose old). Sign instanced per texture: 14 InstancedMesh (some empty → skip). Each with plane geom 1×1, MeshBasicMaterial({map, transparent: true, side: FrontSide? DoubleSide for vertical blade signs? Horizontal wall signs flush → FrontSide ok. Vertical signs: blade style perpendicular to wall! Vertical blade signs stick OUT from wall: plane rotated so its normal is horizontal along wall — plane normal perpendicular to wall face. So vertical signs: plane at wall offset + w/2 out, rotated 90° from wall → visible from along street ✓ DoubleSide needed. I'll make vertical signs double-sided with same material shared (side per material: make vertical materials DoubleSide, horizontal FrontSide → 7+7 materials, ok).

Instance transform: horizontal: position on wall face, normal facing out: plane default normal +z; yaw = atan2(out.x, out.z). scale (w, h, 1). Vertical blade: center = wallPoint + out*(0.35 + bw/2) where bw = blade width (2-3.5); yaw such that plane normal along wall dir: normal = perpendicular of out: yaw = atan2(out.x, out.z) + PI/2. scale (bw, bh,1).

Reflection quads: shared gradient texture; InstancedMesh count = signCount; per instance tint = palette color (instanceColor), additive blending, depthWrite false, opacity 0.32 (material.opacity; instanceColor multiplies). Also polygonOffset to avoid z-fight with ground: y = 0.05 + index*0.0004? Use renderOrder + depthWrite false, and position y 0.06. Ground at y=0: fine.

Also windows of signs flicker: per-material uniform? MeshBasicMaterial no time uniform; animate flicker via material.color intensity per texture group: pick 1-2 textures to flicker each frame: color.setScalar? color multiplies map ✓ flicker = 0.75+0.25max(0, sin(t13)+sin(t7.3))... apply subtle global flicker to all sign materials with per-material phase stored in userData; some signs (10%) get hard flicker with occasional dropout: f = hash floor(t8)... implement in JS per frame over 14 materials — cheap.

Sign brightness: material.color = palette? No — map already colored; set material.color = white ×2.2 (HDR boost for bloom). With transparent:true and additive? Use normal blending with alpha map content (panel bg semi-dark) → blending normal; glow from bloom. OK. But instanceColor per instance used for reflection only.

Sign backing box: instanced box (w+0.3, h+0.3, 0.25) dark for horizontal; skip for blades. Merge into one instanced mesh with matching transforms.

Count check: signs ~150 → horiz ~82, vert ~68 split across 7 colors → ~12/texture. 14 instanced meshes ✓.

Traffic light points texture: radial gradient canvas 64: white core → transparent. PointsMaterial({size, map, transparent, depthWrite:false, blending:Additive, vertexColors:true, sizeAttenuation:true}). Size in world units? PointsMaterial size is pixels when sizeAttenuation true: gl_PointSize = size * (scale / -mvPosition.z) — size acts like world-ish; size 2.2 → at 100 dist with scale=height/2... fine tune: size 1.6.

Beacons & lamp glows share texture.

Rain streak: PlaneGeometry(0.03, 1) instanced; shader: billboard cylindrical (rotate to face camera around Y only) + stretch by velocity. Use MeshBasicMaterial additive opacity 0.28 color #8fb4d8, and per-instance matrix: position + rotation aligning streak dir to velocity (fixed wind slant) — no billboarding (thin planes visible from side barely; use two crossed planes? Instanced BufferGeometry with 2 crossed quads merged (4 tris) — visible all angles ✓ cheap. Do that: BufferGeometry merge two planes rotated 90°. Rain rotation: align local Y to velocity dir: quaternion setFromUnitVectors(up, velNorm) — constant for all instances (same vel) ✓ precompute in matrix compose per instance with fixed quaternion & position. Update positions CPU.

Also add occasional lightning? skip.

Sky smog band & city glow: horizonGlow color #ff7740 * (1/(1+dir.y8)) * (0.5+0.5noise(dir.atan)) → city glow ring. Stars only where dir.y > 0.15 & glow low. Moon at fixed dir (0.35, 0.42, -0.6) normalized; disc angular radius 0.045; halo exp(-ang*18). Slight cloud drift fbm.

Compose final color: sky = mix(horizon, zenith, pow(saturate(dir.y*1.4),0.6)) + glow + stars + moon + smog.

GLSL noise in sky: hash & value noise funcs.

Bloom threshold 0.8: windows emissive ~1.2 max barely bloom (nice), signs ×2.2 bloom strong, maglev strip 2.5, car lights additive points color ≤1... PointsMaterial color ≤ 1 → luminance < 0.8 → no bloom on car lights; make vertex colors ~1.5 (vertexColors accept >1 floats ✓) → bloom ✓. Lamp glow points color 1.4. Moon color 2.0. Rain no bloom.

Renderer: antialias true (composer ignores MSAA unless samples set: composer.renderTarget samples? In r160 EffectComposer default rendertarget samples=0; can set composer.renderTarget1.samples = 4? There's renderer.getPixelRatio based; simplest: new EffectComposer(renderer, new WebGLRenderTarget(w,h,{samples:4, type:HalfFloatType}))? EffectComposer(renderer) creates HalfFloat RT without MSAA. Set composer.renderTarget1.samples = 4 (WebGL2 MSAA) — supported: renderTarget.samples property works. I'll create composer then set both renderTarget1/2.samples = 4 (or composer.addPass handles?). Setting samples post-hoc works (needsUpdate handled by setSize). Do that at quality high; set 0 at low.

Fog: FogExp2(#0a0c18, 0.0072). Sky material fog:false. Scene.background = null (sky mesh covers). Camera far 2000.

Ambient audio init deferred.

Alright, also HUD styling: neon cyberpunk: font stack monospace-ish ("SF Mono, Consolas"), accent colors, scanline overlay div? A subtle scanline CSS overlay (repeating-linear-gradient) pointer-events none — cheap wow. Add slight CRT curve vignette via CSS radial-gradient overlay too (below bloom grade — fine, CSS overlays on top).

Loader overlay with animated bars.

Toast messages bottom center for mode changes.

Buttons: [⟳ NEW CITY] [📷 CRUISE] [🔊 SOUND] [? HELP] [⤓ PNG]. Camera button cycles CRUISE→ORBIT→FLY.

Sliders: RAIN 0-100, TRAFFIC 0-100.

Help overlay: keys table: 1/2/3 cameras, WASD+QE fly, Shift boost, H help, M mute, P snapshot, N new city, R rain toggle?, G regen? Keep: N new, M mute, P png, H help, Esc close/exit lock.

Touch: joystick in FLY mode: left joystick element appears; right side drag = look. In ORBIT: OrbitControls touch. Buttons big enough.

Joystick implementation: div#joy base + knob; touchstart on #joy-zone (left 40% screen) → track; vector → move dir (forward/strafe); separate touch on rest → look drag. Multi-touch tracking by identifier.

OK writing now. Also add meta description & title: "Neon District — Procedural Cyberpunk City".

One more consideration: cars at intersections cross each other visually (perpendicular traffic passes through) — at night with speed it reads OK; standard in such demos. Accept.

Also traffic headlights should illuminate ground? fake: under each car add additive quad glow (warm front, red rear)? The points + bloom suffice.

Performance estimate: draw calls: buildings 1 + clutter 1 + antennas 1 + beacons 1 + ground 1 + sky 1 + skyline 1 + signs 14 + backing 1 + reflections 1 + lamps 1 + lampglow 1 + maglev track 1 + strip 1 + pillars 1 + train 8 (or 1 merged per car = 8 draws) + car bodies 1 + car lights 1 + hover bodies 1 + hover lights 1 + rain 1 ≈ 40 draw calls ✓ great. Triangles modest. Per-frame CPU: cars 450 matrices + points 1350, hover 64, rain ≤1200, train 8 → fine.

instanceMatrix.setUsage(THREE.DynamicDrawUsage) for dynamic ones.

Points positions: preallocate Float32Array maxCount*3; set drawRange for density.

Now, sign flicker: material.userData.phase; each frame: for signMats: m.color.setScalar(2.2 * flicker(t, phase)). flicker mostly 1 with dips.

Neon palette glow colors also used for: maglev strip cyan, storefront colors mixed.

Let me write part files now. I'll be extra careful with template literals inside injected GLSL (use string concat with ${CFG} constants).

Also: renderer.outputColorSpace default SRGB in r160 ✓. Textures: CanvasTexture colorSpace = SRGBColorSpace for sign/glyph textures (they're color art) ✓; gradient alpha textures linear fine but set SRGB anyway? Alpha gradient used as map with additive: color gradient white→black; set no colorSpace (linear) fine.

Building geometry: BoxGeometry(1,1,1) translated +0.5 y so base at 0 → instance scale h → matrix position y=0. ✓ box.translate(0, 0.5, 0).

Roof clutter geometry same box.

Antenna: CylinderGeometry(0.1, 0.16, 1, 6) translate y 0.5 → scale h.

Maglev track geometry: BoxGeometry(4.4, 1.1, 1) forward +z; per segment yaw from tangent: yaw = atan2(tx, tz); scale z = segLen+0.4 overlap. Position at sample point y=20 (track center), then train rides at y = 20 + 0.55 + carH/2.

Pillars: cylinder r 1.1 h 20 at every 30 units → 49 instances; position y=10 (center), skip pillar if over water? no water. ✓

Train: build cars as individual Meshes in a Group; per frame set pos/quat. 8 draws fine.

Car canvas texture for train: 256x64: dark #0a0c14 fill; window strip: bright cyan rects row; doors. Use on BoxGeometry(3.2, 2.3, 9.4) all faces (top/bottom get stretched strip — barely visible from ground; acceptable).

Hover body: BoxGeometry(2.3, 0.7, 3.6) translate? center fine. Slight banking: roll = sin(t*0.7+ph)*0.05.

Camera: fov 62 (cinematic), near 0.1, far 2200.

Cruise lookahead: 24 units ahead point; add sway: pos.y = 7.5 + sin(t*0.5)*0.6; look slightly down? lookAt point at same height → level. Roll banking by yaw rate.

Speed on cruise 15.

Orbit initial: camera pos set when switching: place at radius 260, height 120 looking at center; OrbitControls target (0,25,0).

Fly start: keep current transform.

Now write everything. I'll aim for clean commented code. Let me produce the parts.

Part sizes ~12-18KB each; 6 parts ≈ 85KB total. OK.

Actually, let me reduce risk in onBeforeCompile injections by writing them carefully:

Building vertex injection:

Careful: in fragment, totalEmissiveRadiance declared by emissivemap_fragment include? It's declared earlier: vec3 totalEmissiveRadiance = emissive; in lights_fragment_begin? No — it's declared in meshphysical_frag main before includes: vec3 totalEmissiveRadiance = emissive * ...? Actually declared as vec3 totalEmissiveRadiance = emissive; appears before #include <emissivemap_fragment>? In r160 meshphysical.glsl.js main(): ... vec3 totalEmissiveRadiance = emissive; then #include <logdepthbuf_fragment> #include <map_fragment> ... then #include <emissivemap_fragment>. ✓ available.

Roof faces: nW.y > 0.5 → skip → roof stays dark ✓.

Ground injections similar with its own uniforms (uWet, uTime). GLSL noise funcs prefixed differently to avoid redefinition (separate materials → separate programs → no clash, but keep distinct names anyway).

Ground fragment inject at color_fragment:

careful gp is vec2(x,z): for x-street (street along z, dx small): dash along z: fract(gp.y/9.0)<0.5.

Declare vec3 gMark; float gPuddle; before use inside same block (locals visible later in main ✓ but declared inside {} block scope — later injection points are OUTSIDE that block → not visible! GLSL block scoping: variables declared inside {} die at }. So declare WITHOUT braces or hoist: I'll not wrap ground injections in braces, declare vec3 gMark = vec3(0.0); float gPuddle = 0.0; float gRoad = 0.0; at color_fragment point, then roughnessmap_fragment injection uses gPuddle/gRoad; emissivemap uses gMark + fresnel. Must avoid name collisions with three internals — prefix nd_. ✓ (Braces in building injection fine since all in one block.)

roughnessmap_fragment inject:

Wait roughnessmap_fragment sets float roughnessFactor = roughness; ✓ then adjust.

emissivemap inject:

vViewPosition: in fragment of standard material it's varying vec3 vViewPosition; = -mvPosition.xyz ✓ normalize gives view dir toward camera ✓ normal is view-space normal ✓ consistent space ✓.

uTime unused on ground then; skip uTime for ground. Markings could pulse? no.

Crosswalk region uses inter var — inline as above ✓.

Ground plane size 1700: far corners fog out ✓.

Now Sky shader (write fully custom ShaderMaterial):

Sphere centered at origin; camera moves ±300 → dir from camera: use world position - cameraPosition: in fragment: vec3 dir = normalize(vWorldPos - cameraPosition); cameraPosition built-in in fragment? cameraPosition is a built-in uniform in vertex; in fragment it's also provided by three? Three provides cameraPosition uniform in BOTH vertex and fragment shaders (common prefix) ✓.

frag:

Disc angular: cos threshold 0.9997 → radius ~1.4°. OK moon slightly big, fine.

Moon partially behind smog ✓.

Note: sky sphere radius 950 vs camera far 2200 ✓; depthWrite false, renderOrder -1? Sky drawn first: mesh.renderOrder = -1; material.depthWrite=false, depthTest true fine (sphere far).

fbm/hash GLSL helpers for sky: define hash12/vnoise/fbm(2-3 octaves) in fragment prefix.

Points round texture: canvas 64: radial gradient (255 white center→0 edge).

Sizes: lamp glow PointsMaterial size 3.0 (world-ish attenuated). Beacons custom shader size ~ 4. Car lights 2.0, hover 2.2.

Beacon shader:

additive, depthWrite false, transparent.

Audio: chord progression: Am9: [A2 110, C3 130.81, E3 164.81, B3 246.94]? B3 is 246.94 yes. Fmaj7: F2 87.31, A2, C3, E3. Cmaj7: C3 130.81, E3, G3 196, B3. G: G2 98, B2 123.47, D3 146.83, A2? G6: G B D E. Use freq tables in pure section: CHORDS = [[110,130.81,164.81,246.94], [87.31,110,130.81,164.81], [130.81,164.81,196,246.94], [98,123.47,146.83,164.81]]. Pad voice: 2 saws detuned per note? 4 notes × 2 osc = 8 oscillators running always, gains ramp per chord. Simpler: for each chord, on change: stop old voices (ramp down 1.5s, stop), start 4 new oscs. Osc count transient 8 ✓. Arp scale: A minor pentatonic across 2 octaves: [220, 261.63, 293.66, 329.63, 392, 440, 523.25, 587.33]. Foghorn: osc saw 58 → 52 gliss 3s, LP 240, gain env 0.0→0.05→0, every 25-50s. Rain noise: buffer 2s white noise loop, bandpass f=1600 Q=0.4 + gain rain*0.14. Wind whoosh: noise → bandpass 500 Q1.2 → gain = clamp(speed/60)*0.12. Master: gain 0.9 → compressor → destination. Mute toggle ramps master to 0.

Also tiny UI click: square osc 1200Hz 30ms decay — on button presses.

Quality tiers: T0: pr = min(dpr, 2), bloom true strength .85, msaa 4, rain 1300, traffic 1.0 T1: pr 1.5 cap, bloom .7, msaa 2, rain 850, traffic .75 T2: pr 1.0, bloom .5, msaa 0, rain 450, traffic .5 Start T0 (or T1 if mobile: matchMedia pointer coarse → T1). Auto: fpsEMA < 42 → down; > 57 for 12s → up. Apply counts: rainMesh.count = tier.rain; cars: visibleCars = floor(cars.length * trafficSlider * tier.traffic); bodyMesh.count = visibleCars; lights points drawRange(0, visibleCars*3).

MSAA change: composer.renderTarget1.samples = v; renderTarget2.samples = v; then composer.setSize triggers realloc? Setting samples then composer.reset()? EffectComposer has setSize which re-creates? RT samples change needs dispose: simplest: only set MSAA at init (4 if dpr high & not mobile), skip dynamic MSAA change. Fine — remove msaa from tiers.

Regen flow: btn-new / key N: seed = random; show loader 1 frame; rebuildCity(seed).

rebuildCity:

• layout = makeCityLayout(seed)
• dispose old: buildingsMesh (geometry shared — don't dispose shared box! create per-mesh instance only; dispose instanceMatrix? setting mesh.instanceMatrix new… simplest: remove mesh from scene; geometry is shared const → keep; material shared const → keep. Set mesh.instanceMatrix.dispose()? InstancedMesh creates its own buffer on construction via count. We'll just create new InstancedMesh and dispose old one's instanceMatrix/instanceColor buffers: old.instanceMatrix?.dispose?.() hmm InstancedMesh.dispose() exists r160: disposes instance attributes ✓ call it.
• signs: dispose sign meshes (shared geometries/materials keep; InstancedMesh.dispose).
• reflections mesh rebuild.
• backing mesh rebuild.
• lamps static across seeds? lamp positions deterministic per layout (grid) — same every time → build once.
• skyline: rebuild (uses rng) → recreate InstancedMesh.
• cars: rebuildCarPlacement(rng) — reseed positions/speeds; recreate body InstancedMesh (count may same) & points arrays.
• cruise: rebuild dense pts.
• hover: keep (independent of city).
• maglev: static — build once.
• beacons/antennas/clutter: rebuild with buildings.

Camera: if cruise mode, reset t.

Loader: overlay with CSS animation; show(); requestAnimationFrame → build → hide.

Alright — also the "PURE LOGIC" section must include makeCityLayout COMPLETE incl. signs/lamps/skyline/antennas/clutter (needs rng & noise only ✓), buildLanes + placeCars(rng, lanes), maglevPoint(s) [pure], cruiseBuild(rng) → dense flat array, hoversSeed(rng) → vehicle params, rainSeed? rain positions random at runtime (Math.random ok or seeded rng passed). CHORDS, ARP_NOTES, PALETTE (hex strings), GLYPH chars string.

Everything pure returns plain objects/arrays ✓ node-testable.

Noise: makeNoise2(rng): permutation 256, value noise with smoothstep; fbm2(x,y,oct) helper.

Also smoothstep js helper, lerp, clamp.

Layout heights: ensure min h 8; downtown boost formula; also ensure tallest cluster near center but noise breaks it.

Sign cap 150.

Antennas: on buildings h>80: 1 antenna at roof (dx,dz random within 0.3w), ah 8+rng10; beacon point at (x+dx, h+ah, z+dz).

Clutter: per building 55% chance 1 + 30% second: {dx,dz, w 1.5-4, h 0.7-1.8, d 1.5-4} positioned within roof margin.

Skyline ring: 150 items: ang = i/1502π + rng0.03; rad = 540 + rng300; w=20+rng26; d same; h = 30+ rng120 * (0.6+0.4noise) ; also few extra tall 200. yaw random 0/90? angle facing center: yaw = ang + π/2 (+jitter). Store {x,z,w,d,h,ry}.

Building instance matrix: compose(pos(x,0,z), quat from yaw ry (0 for city buildings), scale(w,h,d)).

Skyline uses same material & box geo, separate InstancedMesh with ry applied.

OK — CRUISE corridor constraint: grid indices 2..9 → coords -133..133 ✓ within city; buildings never in corridor ✓.

One more check — cruise rounding at waypoints where legs short (1 block=38): r=5.5 < 38/2 ✓ fine even consecutive corners.

Closing legs Manhattan may create 180° reversal at junction (arrive then leave back along same line)? We add (x0, zL) then (x0, z0): direction changes from along-x to along-z at (x0,zL) — 90° ✓; at (x0,z0) loop closes to first leg direction — could be 180 if first leg heads -x... possible but rare; U-turn handling in dense builder: if d1 == -d0 (reversal), just pass through waypoint (sharp flip) — camera flip 180° instantly is jarring; mitigate: when reversal detected at corner, insert small loop? Simplest: choose closing so final corner isn't reversal: ensure last walk leg direction ≠ -(first leg direction)? Can't guarantee. Alternative: dense builder: at reversal, treat as tight U-turn arc radius 5.5: T0 = B - d0r, T1 = B + d1r = B - d0*r = T0!! degenerate. Handle: skip rounding (pass through B directly; keep both zero-length?) — accept one potential snap. Better: avoid reversal in closing: build closing by replaying the outward path in reverse! i.e., waypoints = out + reverse(out[1:-1]) → path retraces → at turnaround point we get reversal (U-turn at far end) — same issue but exactly ONE reversal spot, and camera does 180 at far point — jarring.

Alternative closing: make cruise a RECTANGLE with rounded corners + mid jogs: simplest robust: axis-aligned rectangle loop: corners at (i1,j1),(i2,j1),(i2,j2),(i1,j2) random i1<i2, j1<j2 in 2..9. All turns 90° same orientation ✓ no reversal ever. Add variety: also allow an L-shaped detour on one side: replace top edge with jog: (i1,j1)→(i1+1,j1)→(i1+1,j1-? ... jogs keep turns 90 ✓ as long as no reversals: construct via random walk with "no-reverse & no-repeat-vertex" then Manhattan close, verifying last leg dir vs first leg dir not opposite AND closing corner not reversal; retry up to 40 times, fallback rectangle.

I'll implement: tryLoop(rng): random walk 8-14 legs on grid 2..9, no immediate reversal, keep within bounds; then close Manhattan; collect full dir list; check every consecutive dir pair (cyclic) != reverse; if ok → accept else retry; fallback: rectangle with w=2..4,h=2..3.

Good, testable in node: assert no reversals & corridor check.

Now — WRITE IT. I'll create /tmp/nd/ parts and cat them. Also include meta description. Title: "Neon District — Procedural Cyberpunk City".

Let me now write part files. I'll write carefully with attention to syntax. After assembly: extract script → node --check; extract pure section → run logic tests; fix issues.

One tricky bit: since I'm writing the file in heredocs, avoid $(...) and backticks interpolation issues: use quoted heredoc delimiters ('EOF') so nothing expands ✓. JS template literals contain ${...} — safe inside quoted heredoc.

Let me draft each part now in my head as I write them to files.

PART 1 — HTML + CSS + DOM:

Include CSS for: body, canvas container, .panel glass, title styling with neon glow (text-shadow), buttons, sliders (accent-color), help overlay table, loader bars animation, toast, joystick, scanlines overlay, vignette CSS, media queries for mobile (panels compact).

PART 2 — imports + config + PURE BEGIN: rng/noise/layout.

PART 3 — pure: signs within layout (included), lanes/cars, maglev, cruise, hover params, palette/chords/glyphs + PURE END.

PART 4 — boot: renderer, scene, camera, sky, ground, buildings(+clutter/antennas/beacons), skyline.

PART 5 — signs(+reflections/backing), lamps, maglev(track/pillars/train), traffic(bodies/lights/update), hover, rain.

PART 6 — post/grade, cameras(cruise/orbit/fly/joystick), audio engine, HUD wiring, quality, snapshot, resize, loop, boot call.

Detail: glyph texture gen goes in part 5 (THREE side, uses document).

Write now. Also remember <!DOCTYPE html> etc.

For safety with instanced sign materials count: I'll group sign descriptors by (palette, orientation) key → create per-group InstancedMesh.

Vertical blade signs should also have backing? They'd be visible edge-on from front — plane has no thickness; add thin box per blade in same backing instanced mesh: box scaled (0.22, bh, bw) positioned at blade center → gives body. Backing mesh: dark material (#0a0c12 rough). One InstancedMesh for all backings (horizontal: box (w+0.3,h+0.3,0.3) at wall+0.12; vertical: (0.24, h, w) at center). ✓ single geometry box, per-instance scale.

Blade double-sided: material side: DoubleSide for vertical group ✓.

Reflection quads for blades: position under blade (out * (0.35+bw/2)) — fine, reuse same code with per-sign stored reflection anchor & outward dir. Store in descriptor: {px,py,pz (panel center), outx,outz, w,h, colorIdx, vertical, glyphSeed}.

Reflection anchor ground point = (px + outx0.5, 0.05, pz + outz0.5), extend outward length L = h1.8+5: quad center = anchor + out(L/2), scale (w1.15, L, 1) on rotated plane (plane local X width, local Y length→out). yaw = atan2(-out.x, -out.z)?? Earlier: after qX(-90°), local +y → world -z... let me recompute with dummy Object3D: dummy.rotation.order = 'YXZ'; dummy.rotation.y = yawA; dummy.rotation.x = -Math.PI/2. Local +y maps: first X rotation applied... In three, rotation order 'YXZ' means R = Ry * Rx * Rz. Vector v_world = Ry(yaw) * Rx(-90) * v. v=+y: Rx(-90)(0,1,0) = (0,0,-1)? Rx(-90): y→z? Rx(θ): [1,0,0; 0,c,-s; 0,s,c] times (0,1,0) = (0,c,s) = (0, cos(-90), sin(-90)) = (0,0,-1). Then Ry(yaw)(0,0,-1) = (-sin yaw? ... Ry(θ): [c,0,s;0,1,0;-s,0,c] → (0,0,-1) → (s(-1)?? compute: x' = c0 + s(-1) = -s; z' = -s0 + c(-1) = -c → (-sin yaw, 0, -cos yaw). Want = out (unit): sin yaw = -out.x, cos yaw = -out.z → yaw = atan2(-out.x, -out.z) ✓ as I had.

Plane geometry uv: PlaneGeometry(1,1) has uv (0,1) top-left? v=1 at +y top ✓. Gradient canvas: opaque at wall side. Wall side = local -y (since +y points outward): v=0 at local -y ✓ so alpha(v=0)=opaque → canvas bottom opaque. Canvas row y=H-1 is bottom (v≈0): gradient from bottom (y=H) white alpha .8 → top (y=0) transparent: ctx createLinearGradient(0,0,0,H): stop(0, transparent) stop(1, white). ✓ texture flipY default true → uv v=0 = canvas bottom? With flipY=true, v=0 corresponds to canvas bottom row ✓ good.

Additive blending with vertex/instance color: InstancedMesh + setColorAt ✓ (instanceColor multiplies material.color × map). Material color white, map gradient (white), instanceColor = palette color × intensity.

Also add slight per-sign reflection length random — via scale ✓.

Time to write files. Also include favicons? skip.

For the traffic slider: label "TRAFFIC", value 0..100 default 70. Rain default 60. Recompute visibleCars on input.

Extra micro-interactions: pressing N shows toast "NEW DISTRICT FORGED #seed".

FPS display small.

Also add subtle camera exposure? skip.

Write part 1.

CSS plan (dark + neon):

DOM ids: app, panel-title(h1 NEON DISTRICT, sub), panel-ctrl buttons: btnNew(⟳ New), btnCam(🎥 Cruise), btnSound(🔊), btnHelp(?), btnSnap(⤓), panel-sliders (rain, traffic), fps, help, loader (title + bars + tip), toast, scanlines, vig, joyzone>joy>knob, hud-hint bottom.

Write it.

*************************************************************************************************************************************************r).

The status shows I'm at 67% of max time already?! That seems off — timeProgress 0.67 with iterationProgress 0.02. The maxTime threshold was hit at 50%. This suggests the run has limited time and I've used a good portion. I need to move faster and be efficient.

Let me reconsider: maybe writing a huge 6-part demo is too slow given time constraints. The core task (from previous run) — updating the index with Voxelia — is already DONE. Creating demo 051 is "do as you please" bonus work.

Given time pressure, I should decide: either (a) finish the new demo quickly with high confidence, or (b) wrap up with the index fix only.

The checkpoint says "progress_threshold maxTime 50%" — meaning I've hit 50% of max time. I still have ~33% of time left based on timeProgress 0.67. Let me continue but move much faster — write the remaining parts in bigger chunks, minimize verification cycles.

Actually, let me be decisive: I'll complete the demo but streamline. Parts 3-6 remain. Let me write them now in quick succession, keeping code as tight as possible while still impressive. I must be careful to write correct code the first time to avoid debugging cycles.

Let me continue with part 3 (rest of pure logic: cruise path, hover, palettes/chords).

*****************************************************************************************************************ly.

********************************************************************************************************************************************************************************************************************************************************in.

Part 6: traffic (car bodies + light points + update), hover vehicles, rain, post-processing chain, camera modes + input (keyboard/mouse/touch/joystick), audio engine, HUD wiring, quality manager, snapshot, resize, main loop, boot/regenerate. Then close script + body + html.

Careful items:

• Traffic: cars with lane; positions; lights points arrays.
• visibleCars managed by traffic slider × quality factor.
• Rain instanced crossed quads.
• Post: composer with samples 4 if supported, bloom, grade pass, output pass.
• Grade pass shader: vignette + grain + CA.
• Cameras: cruise (dense path), orbit (OrbitControls), fly (pointer lock).
• Audio: pad, arp, rain, hum, horn, whoosh.
• HUD: buttons, sliders, toast, fps.
• Quality tiers with fps EMA.
• Loop with clock, dt clamp.
• regenerate(seed): dispose tracked meshes (geometry dispose careful: shared geoms (boxGeo, planeGeo in signs — planeGeo created per call; fine to dispose), dispose materials created per call; shared: buildingMat, boxGeo, glowTex keep).

Dispose: for each d in disposables: if d is Group: remove children? Children were also pushed to disposables individually in maglev case (tim/sim/pim pushed). Train group materials persist across regen? buildMaglev is called ONCE (not per regen) since ring is static. But it's inside cityGroup... I'll build maglev once into scene (not cityGroup) to avoid disposal. Let me restructure: maglev builds into scene directly, called once at boot. buildBuildings/buildSkyline/buildSigns/buildLamps track into disposables and cityGroup, rebuilt each regen.

Wait — in part5, buildMaglev adds to cityGroup AND pushes to disposables. On regen I'd dispose the maglev. Fix: make buildMaglev add to scene and NOT track in disposables. I'll patch part5 after assembly (or handle in part6 by filtering). Simplest: in part6's regenerate, only dispose items in disposables; maglev items were pushed → they'd be disposed. I need to fix part5. I'll do a sed fix on the assembled file, or just remember: in buildMaglev replace cityGroup/disposables with scene/no-track. Let me patch part5 now via sed quickly:

• const grp = new THREE.Group(); cityGroup.add(grp); disposables.push(grp); → const grp = new THREE.Group(); scene.add(grp);
• remove disposables.push(tim); / disposables.push(sim); / disposables.push(pim); lines in buildMaglev only.

The lines grp.add(tim); disposables.push(tim); — I'll sed those three exact patterns.

Also track() adds to cityGroup — used by buildBuildings, buildSkyline, buildSigns, buildLamps ✓.

Disposal in regenerate:

Shared: boxGeo, buildingMat, glowTex, backMat? backMat created inside buildSigns each time → dispose. planeGeo/backGeo in buildSigns → dispose. Sign textures: dispose via material.map.

InstancedMesh.dispose() disposes instanceMatrix & instanceColor attributes ✓ (exists in r160).

Traffic rebuild: car bodies instanced mesh + points rebuilt per regen; lanes rebuilt too (buildLanes(rng)). Track in disposables.

Hover: build once (scene), count 64.

Rain: build once (scene), count via quality.

Train update in loop: s += 24dt; per car k: p = maglevPoint(s - k10.6); set pos (y + 1.15 + 0.5*2.3/2? car height 2.3, track top y+0.5 → car center y = MAG.y + 0.5 + 1.15 = 21.85). yaw from tangent. Headlight light position at head car front (y 21.8). PointLight 60/60 might be expensive-ish but one light fine.

Camera modes & input:

Cruise: cruiseData = Float32Array; cruiseT (float index); speed 15; spacing approx — compute step = speeddt / avgSpacing? points aren't exactly uniform (corners 7 pts over arc ~8.6 units → 1.2 spacing; straights 1.8). Close enough: advance in arc length: while distAccum < speeddt: advance idx by 1 accumulating segment lengths. Implement advance(dist). lookAt: point at idx + lookaheadDist 26 advanced similarly. Roll banking: yawNow from look direction; keep prevYaw; roll = clamp((yawDelta)/dt * 0.05, -0.3, 0.3) smoothed; apply camera.up.set(sin(roll), 1, 0)? Actually after lookAt, rotate around forward axis: camera.rotateZ(roll). Sway: pos y = CRUISE_H + sin(t*0.4)*0.5.

Fly: pointer lock on canvas click when mode==='fly'; mousemove → yaw/pitch; keys WASD QE; shift boost. velocity smoothing. Also touch: joystick sets move vector; right-half drag look.

Mode switching: setMode(m): update button label, orbit.enabled = (m==='orbit'); if fly → hint to click; if orbit → set camera to nice orbit pos if coming from cruise? Keep current pos; orbit.target = lookPoint ~ camera pos + forward*80, clamp y≥2.

Input listeners: keydown/keyup tracking keys set; key handling: 1/2/3, N, M, P, H, Esc.

Audio engine object AE with init() on first gesture; toggle.

Grade pass:

CA amount: uCA small; ca offset = d * uCA (in uv) — simpler: vec2 ca = d * uCA; with uCA 0.0016*… fine tune: use uCA directly 0.0022.

Composer:

MSAA: composer.renderTarget1.samples = 4; composer.renderTarget2.samples = 4; guarded by quality tier (desktop only).

Quality:

HUD wiring straightforward.

Snapshot:

Regenerate:

Car meshes: maxCars = cars.length; bodies InstancedMesh box(1,1,1) scaled per car (wid, hei, len), translated? Car body box centered — use unit box (not boxGeo which is base-at-zero; cars need centered but slightly above ground: y = hei/2 + 0.15). Use boxGeo (base at 0): scale y = hei, position y=0.12 ✓ nice. Car color: dark body colors with occasional neon tint: col.setHSL(hue, 0.25, 0.08 + rand0.06); some (8%) bright: setHSL(rand, .8, .5). Car lights points: positions Float32Array(maxCars33), colors Float32Array: front white (1.6,1.5,1.3), rear red (1.8,0.15,0.08); two front pts lateral ±0.55, one rear center. Points geometry dynamic; drawRange to visibleCars3.

Per-frame traffic update:

Forward for yaw: mesh forward +z rotated by yaw around Y: (sin yaw, 0, cos yaw) ✓. Lateral (right): (cos yaw, 0, -sin yaw) ✓.

Note yaw=0 → moving +z ✓ matches axis0 dir=1. But lanes: axis0 c = line+3 with dir +1 → car at x=line+3 moving +z: right-hand traffic ✓ (driver on right side of road heading +z should be at x = line + half? heading +z, right side is +x ✓).

Hover update: pos = dirs + perpoff; wrap s in [-320,320]; body yaw = atan2(dx,dz); bob y. Lights: front cyan (0.4,1.6,1.8), rear red, top white blink — 3 pts each with blink via skipping position (set y=-100 when off)? cheaper: colors static, blink by moving point underground every other phase — do it: if sin(t*3+ph)>0 → show top beacon else hide (y=-50).

Rain update: positions Float32Array(maxRain*3) as instance matrices? I said instanced crossed quads; per-frame compose matrix for 1300 instances: use dummy with fixed quaternion: qRain from setFromUnitVectors(up, vel.normalize()). Matrix compose per instance fine.

Actually cheaper: use InstancedMesh with per-frame position updates; 1300 × compose ~ fine.

Rain respawn area: cylinder radius 75 around camera (x,z), height 0..85.

Rain material: MeshBasicMaterial({color: 0x9db8d8, transparent:true, opacity:0.22, blending:Additive, depthWrite:false}); rain amount slider → visible fraction: rainMesh.count = floor(tierRain * rainSlider). opacity also scale.

Audio implementation — keep compact:

chord scheduling: every 6.4s: ramp old voices out (1.8s), create 4 osc (saw detuned ±5 cents via two osc per note? just 1 osc/note + slow detune LFO on padGain? Use 2 oscs/note at ±4 cents for chorus: 8 oscs). gain per voice 0.25 with 2s attack.

I'll implement voices as array of {osc1, osc2, g}; nextChord: old voices g.gain ramp to 0 over 2s, osc stop(t+2.2); new voices start.

Arp pluck: schedule via setInterval-ish in update: nextArp time; when ctx.currentTime >= nextArp: play note: osc triangle freq, gain env peak 0.5 decay 0.5s; skip 30% randomly; nextArp += 0.22 or 0.44.

Horn: when timer elapses: osc saw 62→48Hz over 2.8s through LP 260, gain env 0→0.06→0 (4s). Reset timer 18-40s.

update(dt, camSpeed, rainAmt): rainGain.gain target rainAmt*0.14; windGain target clamp(camSpeed/70,0,1)*0.12 + (mode!=='cruise'?0:0.03); horn timer; arp scheduler; master mute ramp.

toggle(): muted flip; if !started && !muted → start(); ramp master to muted?0:0.9. Button label update.

All audio nodes simple — fine.

Touch joystick:

OrbitControls and our canvas touch listeners may conflict: in fly mode orbit.enabled=false ✓.

Fly physics: velocity += diracceldt; damping; pos += vel*dt; clamp y [2, 300], clamp |x|,|z| < 600.

Keys: track in keys object.

Pointer lock: canvas click when mode==='fly' && !isTouch → requestPointerLock; mousemove: yaw -= mx*0.0022; pitch clamp.

For orbit mode entering: orbit.target = camera position + forward * 60, y clamp 4..120. orbit.enabled=true.

Mode cycle button: cruise→orbit→fly.

Toast helper with timeout.

FPS: frames counter each 0.5s → text.

Boot: buildMaglev(); buildHover(); buildRain(); buildGround(); regenerate(initialSeed) but inline build() to avoid loader flash? Just call build() directly (loader visible from HTML, hide after).

initialSeed from URL ?seed= or random.

window resize: camera aspect, renderer.setSize, composer.setSize, bloom resolution auto.

Main loop with THREE.Clock, dt = min(clock.getDelta(), 0.05):

• uTime += dt (use clock.elapsedTime)
• skyUniforms.uTime, beaconMat.uTime
• sign flicker: signMats forEach: f = 0.9+0.1sin(t9+ph); hardFlicker: if noise → dropout: f = (hash(floor(t13)+ph) < 0.12 ? 0.25 : 1); mat.color.setScalar(2.15*f)
• traffic update, hover update, rain update, train update
• camera per mode
• audio update
• quality tick
• gradePass uTime
• composer.render()

Ensure no leftover: groundUniforms.uWet.value = rainSlider*... wet = 0.25 + 0.75*rainAmt.

Camera default cruise start: cruiseIdx 0.

Now also verify renderer.domElement click for pointer lock doesn't conflict with orbit drag — orbit uses its own listeners on same element; in fly mode orbit.enabled=false → its listeners ignore events ✓.

One risk: scene.environment not set → MeshStandard with metalness 0.3 looks dark — fine at night with emissive.

Let me write part 6 now. Also remember disposables dispose function. Cars geometry shared boxGeo ✓ don't dispose; carBodies material: MeshStandardMaterial({roughness:.4, metalness:.8, color: white, vertexColors via instanceColor}) created per regen → dispose.

Write part6.

84% of max time used. I need to finish fast. Time to write part 6 quickly and assemble, do the syntax check, and deploy. No more dawdling. If the demo has a bug I can't fully verify, that's acceptable — but I'll do a syntax check and pure-logic test since those are cheap.

Let me write part 6 now — the biggest part — in one go.

*****************************************************************************************************************************************************************************************ps.