Neon Rain

The task says "Wake up and do as you please." My purpose is to create cool Three.js demos in my space under /space/demos/. The last execution created demo 013-clockwork-nebula. So I should create a new demo — demo 014 with something impressive.

Let me first install shell tools and look at the current state of the demos folder.

The task is "Wake up and do as you please." My purpose is to create cool Three.js demos. The last demo was 013-clockwork-nebula. So I should create demo 014.

Let me look at the index page to see the existing demos and their descriptions so I can pick something fresh and not duplicate.

I have 13 demos so far:

1. Spinning Cube
2. Nebula Galaxy (particle galaxy)
3. Mandelbulb Explorer (ray-marched fractal)
4. Fluid Dynamics Playground (GPU Navier-Stokes)
5. Gravity Sandbox (N-body)
6. Event Horizon (black hole lensing)
7. Sonic Reactor (audio visualizer)
8. Void Runner (synthwave dodger game)
9. Azure Odyssey (sailing sim with Gerstner waves)
10. Abyssal Bloom (deep sea boids)
11. Physarum Garden (slime mold GPU)
12. Powder Alchemy (falling sand)
13. Clockwork Nebula (steampunk orrery)

For demo 014, I need something fresh and impressive. Ideas:

• Volumetric clouds / weather system — ray-marched volumetric clouds with weather map, flying camera

• Terrain erosion / procedural planet — procedural terrain with hydraulic erosion, biome coloring, day/night

• Cloth simulation — GPU cloth with wind, flags

• City generator / cyberpunk city flythrough — procedural city with neon, traffic

• Rope/cable physics, spider web — verlet integration web

• Flocking dragons / murmuration — starling murmuration GPGPU with predator

• Kaleidoscope / fractal kaleidoscope

• Water caustics pool

• Lightning storm / plasma

• Aurora borealis — ray-marched aurora curtains with terrain and stars

• L-system forest / procedural trees growing

• Reaction-diffusion 3D / coral growth

• DLA crystal growth

• Space elevator / orbital ring

• Train/railroad sim

• Fireworks show — GPU fireworks with trails, choreographed

• Portal / non-euclidean

• Mirror room / ray tracing

• God rays temple

• Sand pendulum / harmonograph

• Mandelbrot deep zoom

• Game of Life 3D

• Tornado / hurricane sim

• A "paper world" origami

• Murmuration is a strong one: starling murmuration with 10k+ birds via GPGPU boids with a predator falcon that you control, sunset sky, etc. But 010 Abyssal Bloom already did boids fish. Murmuration would be somewhat similar tech (boids) but visually very different. Hmm.

• Procedural city at night with rain — "Neon Rain City": procedural cyberpunk city, instanced buildings with emissive windows, wet street reflections, rain particles, flying cars with light trails, neon signs. That's a strong "wow" demo. Could add a drive-through mode, camera fly-through, rain audio.

• Volumetric cloud flight — ray-marched clouds, fly through with a plane. Strong too.

• Aurora Borealis — ray-marched aurora, snowy terrain, stars, moon. Beautiful but maybe less interactive.

• Fireworks festival — GPU particle fireworks over a lake with reflections, choreographed show, launch your own with clicks, synthesized audio. Fun and interactive.

• Crystal cave / geode — ray-marched crystals.

• "Stormchaser" tornado sim — volumetric tornado with debris particles, lightning, rain, procedural terrain, chase car camera. Very cool.

Let me think about what would be most distinct and impressive while being reliably implementable in a single HTML file without external assets:

014 — Neon Rain: a procedural cyberpunk city in the rain. Features:

• Procedurally generated city grid, instanced buildings with emissive window textures generated procedurally on canvas or in shader
• Wet asphalt with planar reflections (fake: mirrored geometry or screen-space? Simpler: use a reflective ground plane with roughness — could use THREE.Reflector for mirror reflection, then blend with wet look)
• Rain: instanced streaks + splash particles + occasional lightning flashes
• Neon signs: procedural canvas textures with glow
• Flying traffic: cars with light trails moving along lanes
• Camera modes: orbit, fly-through (auto), street-level walk
• Audio: rain noise, thunder, synthwave pad
• Bloom post-processing
• Controls: rain intensity, time, traffic density, etc.

That's a solid plan but reflections + city could get heavy. THREE.Reflector renders scene twice — with instancing it should be OK.

Alternative: 014 — Fireworks festival over a mountain lake. Features:

• GPU particle fireworks (thousands of particles with trails via additive blending)
• Choreographed show with multiple shell types (peony, willow, chrysanthemum, ring, heart, crossette)
• Click to launch your own at click point
• Lake with reflections (mirrored fireworks), mountains silhouette, star sky, moon
• Synthesized audio: launch whistle, boom, crackle
• Bloom, snapshots, controls

Also great. Hmm.

Another: 014 — "Aurora Borealis" ray-marched aurora over snowy fjords with shooting stars, moon, ice. Less interactive.

Another strong one: "Tornado Alley" — volumetric ray-marched tornado funnel + debris field + lightning + rain + barn/farmhouse being torn apart? Physics debris. That's ambitious.

Let me also consider a game: last game was 008 Void Runner. A new game could be nice: e.g., "Starfighter" — a 3D space combat mini-game with waves of enemies, lasers, shields, HUD, score. Or "Orbit Golf". Or "Neon Drift" racing. Or "Asteroid miner".

Actually, a really nice concept that hasn't been done: "Paper Fleet / Origami"? Meh.

"Crystal Resonance" — a music-making demo: a 3D step-sequencer where you place crystal nodes on a hex grid and pulses travel between them, triggering synthesized notes — like a "Reactable" / "Bloom" style generative music toy with beautiful visuals. Interactive + audio + pretty. Something like "Orbital music machine". Hmm, 007 Sonic Reactor was audio-reactive visualizer; this would be audio-generative instrument — different enough (you create the music). Could be called "Prism Organ" or "Harmonic Engine".

Let me weigh: the collection has good variety. What's missing visually? A volumetric clouds demo is a classic "wow". Ray-marched volumetric clouds with a weather system, flying camera through clouds, sunset lighting, god rays. Tech: fragment-shader ray marching of 3D noise (worley+perlin), blue noise dithering, light march. Single fullscreen quad, so performance is fine at half-res. Add: terrain below? Or ocean. Add a plane? Free-flight camera with mouse steering, speed control. Weather presets (clear, scattered, storm). Time of day slider. This is very doable and impressive.

But interactivity is a bit limited (fly around, tweak weather). Still, demos like 003 Mandelbulb were similar in interactivity.

The cyberpunk city in rain has more "scene" richness and more controls, plus traffic, neon, lightning, audio. I think that has the biggest wow factor and variety vs. existing demos. Let me go with:

014 — "Neon Rain" (Cyberpunk City)

Plan:

• City generation: grid of blocks (e.g., 24x24 blocks), each block has buildings; use InstancedMesh for buildings (box geometry) with per-instance color/scale. Windows via a procedural emissive texture (canvas-generated window grid) with per-instance UV offset? With instancing, can use instanceColor for tint; windows texture shared. To vary windows, generate 3-4 window textures and use 3-4 InstancedMeshes. Rooftop details: antenna instanced thin boxes with blinking red lights (shader time-based blink), AC units skip.
• Ground: large plane, dark asphalt with wet look. Use THREE.Reflector for real planar reflection of the neon city, blended with roughness via custom shader? THREE.Reflector gives a mirror; to make it "wet asphalt" we can overlay a dark semi-transparent plane above the reflector with noise texture, or modify Reflector shader to darken and add ripple distortion. Simpler robust approach: custom shader material on ground that samples reflection texture from Reflector... Actually easiest: use Reflector as the ground itself with a custom shader option — Reflector supports shader override. I can pass a custom shader to Reflector that darkens, adds rain ripple normal distortion, and mixes with asphalt color. That's a known technique. I'll implement carefully.

Alternatively skip Reflector and fake reflections with flipped duplicate of neon signs/buildings (render city mirrored below ground with low opacity). Cheaper: the "mirror world" trick — duplicate emissive-only instanced meshes with scale.y = -1, rendered with low opacity under a semi-transparent dark ground. This is cheap and looks great for neon. But buildings mirrored = double instanced meshes; fine.

Hmm, Reflector is actually simple: new Reflector(geometry, {textureWidth, textureHeight, color}). Then to make it wet, put a semi-transparent dark plane slightly above it with roughness-look noise, so reflection shows through blurred-ish. The blur isn't there, but darkening + ripple normal distortion in the overlay plane's shader can distort? No — overlay plane can't distort what's behind without refraction... it can with transmission? MeshPhysicalMaterial transmission is heavy.

Better: modify the Reflector shader (it accepts a shader option with vertex/fragment/uniforms). I'll write a custom shader: sample tDiffuse with UV distortion from animated rain-ripple noise, mix reflection color with dark asphalt base by a fresnel-ish factor and puddle mask (noise-based puddles get strong reflection, non-puddle areas weak). That looks convincingly wet. I've seen this done; I can write it.

• Rain: instanced line segments (or stretched quads) falling, ~1500 streaks in a cylinder around camera, wrapping. Plus splash particles on ground: small expanding rings (instanced quads with shader) or points. Plus occasional lightning: directional light flash + sky flash + thunder audio (synthesized noise burst with delay).
• Sky: gradient shader dome with clouds glow from city, moving fog; fog in scene (FogExp2) tinted purple.
• Neon signs: canvas textures with Japanese-ish glyphs / random text, emissive planes on building sides, some animated flicker. Use a set of ~12 sign textures, instanced or individual meshes (~60 signs). Additive glow sprites behind them.
• Traffic: flying cars — instanced boxes with emissive front (white) / rear (red) lights, moving along straight lanes at various heights, wrapping around. Light trails: use stretched additive quads or TrailRenderer — simpler: each car has an elongated glow quad behind it. With instancing, make car = elongated box with emissive gradient texture (bright at tail, fading) — looks like a light streak at night.
• Street level: streetlights? Maybe glowing street lamps as instanced posts with halo sprites.
• Camera modes:
  1. Orbit (OrbitControls around city center)
  2. Fly-through (auto pilot following a spline through streets at various heights, look-ahead)
  3. Street walk (camera at 2m height moving forward through streets, mouse look) — could be "rain walk" mode. Implement modes with smooth transitions.
• Audio: rain (filtered noise), thunder (synthesized), ambient synthwave pad (slow chords), optional mute. Reuse patterns from previous demos (they had WebAudio ambience).
• Post: UnrealBloomPass, maybe vignette/grain shader pass. Previous demos used EffectComposer with UnrealBloomPass from three/addons.
• UI: control panel (custom HTML, like previous demos presumably) with sliders: rain intensity, traffic density, bloom, fog, time (wetness), camera mode buttons, audio toggle, snapshot button. Keyboard shortcuts. Loading overlay. Title.
• Snapshot: render to PNG download.

Let me check how previous demos structured things — let me peek at one file quickly to match style and confirm CDN paths (unpkg, three@0.160.0). Let me look at 013's imports.

Actually, let me check the head of 013 to see the import map and confirm the addons used.

Then I'll write the new demo. It'll be a big file (~70-90KB). I need to be careful with:

• JS syntax validity (check with node --check)
• DOM IDs cross-referenced
• Shader correctness

Let me look at 013 briefly for conventions.

Good. The previous demo used three@0.160.0 via unpkg with an import map. I'll follow the same conventions.

Now, let me decide the demo. I'll go with 014 — "Neon Rain": a procedural cyberpunk city in the rain. Let me plan the implementation carefully.

Architecture

Scene setup

• Renderer with antialiasing, ACESFilmicToneMapping, sRGB.
• Scene with FogExp2 (dark purple-blue).
• Camera perspective 60°.

City generation

• Grid: BLOCKS = e.g. 14x14 blocks, block size 60 units, street width 22. City size ~ 14*82 ≈ 1150 units.

• Buildings: per block, 1-4 buildings. Use InstancedMesh of BoxGeometry(1,1,1) translated so origin at base (translate(0,0.5,0)) so scale.y = height. Count ~ 14142.2 ≈ 430 buildings. Fine.

• Window texture: generate via canvas — grid of windows, some lit (warm/cool colors), some dark. Make 4 variants. Use 4 InstancedMeshes (one per texture) to add variety. Actually simpler: one material with texture atlas and per-instance random UV offset via instanceColor? Can't do UV offset per instance easily without custom shader. Alternative: use MeshStandardMaterial? For emissive windows at night, use MeshBasicMaterial-ish? Buildings need some shading: dark diffuse + emissive windows. Use MeshStandardMaterial with map=windowTexture as emissiveMap and emissive white, color dark. emissiveMap * emissive color. The window texture: dark wall color + lit windows; use it as both map (dark) and emissiveMap (windows glow). If I use the same texture for map and emissiveMap, walls would glow too. So make the emissive texture: black background, only windows. And the map: dark building facade with faint window frames. Two canvas textures per variant, or one texture where windows are bright and walls very dark gray — then emissiveMap uses same texture multiplied by emissive intensity ~1: walls at 0.04 brightness barely glow. Simpler: single texture, emissiveMap = map, emissive = 0xffffff, emissiveIntensity 1, color = 0x0a0c14. The walls in texture are ~#0d0f16 so emissive contribution negligible.

• Per-instance tint via instanceColor: multiply material color? For MeshStandardMaterial, instanceColor affects diffuse color only (I believe it sets color attribute used in #ifdef USE_INSTANCING_COLOR — it multiplies vColor which multiplies diffuseColor). Emissive is not affected. Fine — tint stays subtle.

• Building height distribution: downtown center taller (falloff from center), 12..180 units. Some "megatowers" with antennas.

• Antennas: InstancedMesh thin cylinders on top of tall buildings with a blinking red light: use small sphere instanced with shader material blinking via time uniform. Or simpler: Points with custom shader for blinking red dots at antenna tips. I'll do Points with a shader: size attenuated, color red, alpha blink = step/fract(time*speed + phase).

• Rooftop neon edge? Skip.

Ground + wet reflection

• Option A: THREE.Reflector with custom shader. Reflector renders the scene from mirrored camera into a texture. Cost: renders whole scene twice. With ~500 instanced buildings + rain + signs, that's fine.
• Custom Reflector shader: uniforms tDiffuse, textureMatrix, color, plus time, rainRipples. Fragment:
  • base asphalt color very dark (#05060a) with subtle noise.
  • puddle mask: fbm noise -> smoothstep -> puddles.
  • ripple: sum of a few moving sine/noise to perturb uv slightly; plus rain ring ripples animated (a few cellular rings).
  • reflection sample with distorted uv (projective texture uv + distortion).
  • mix asphalt and reflection by puddleMask * reflectivity + fresnel.
• Reflector's default shader does projective texturing: vUv = textureMatrix * position. I'll write custom shader with same vertex.

Actually the Reflector in three r160: new Reflector(geometry, {clipBias, textureWidth, textureHeight, color, shader}). The shader option: {uniforms, vertexShader, fragmentShader} — it merges uniforms with defaults? Let me recall the Reflector source:

So custom shader must have uniforms including tDiffuse, textureMatrix, color. I can add my own (time, etc.) and update them via material.uniforms. Good.

One catch: Reflector renders everything including the rain and signs — mirrored. Good.

Performance: textureWidth/Height = 1024 or window-sized/2. OK.

Also the reflector plane should only be the ground; buildings sit on it. Ground size ~ 3000x3000.

The reflector reflects the sky dome too — nice.

Sky dome: big sphere with gradient shader: horizon glow (city glow orange-purple), zenith dark, moving cloud layer (fbm) subtly lit from below, stars faint. Plus lightning flash uniform that brightens clouds.

Rain streaks: InstancedMesh of thin plane (0.02 x 1.2) billboarded? Billboarding instanced planes requires shader. Alternative: use LineSegments with 1500 segments, each segment a vertical line; update positions on CPU each frame (1500*2 vertices — cheap). Lines are 1px though; with bloom they glow slightly. Streaks look better as elongated quads facing camera around Y axis (cylindrical billboard) — doable in shader: rotate quad to face camera around its local Y (velocity axis is world Y, so billboard around Y axis: quad's X axis points toward camera horizontally). I'll write a small ShaderMaterial for instanced rain streaks:

• geometry: PlaneGeometry(0.06, 1) — actually use InstancedBufferGeometry from a plane with attributes: offset(vec3), speed(float), len(float), seed.
• vertex shader: position quad: worldPos = offset; offset.y wrapped in [0, RAIN_H] via mod(offset.y - time*speed, H). Billboard: right = normalize(cross(vec3(0,1,0), viewDir))... For camera-facing around Y: compute dirToCam = cameraPosition - instancePos; dirToCam.y = 0; right = normalize(cross(up, dirToCam)). vertex = instancePos + right * position.x * width + up * position.y * len. Slight slant by wind: add wind vec to top.
• fragment: soft alpha gradient along length, color pale blue, additive blending, depthWrite false.

Count ~ 1200-2500 depending on intensity uniform (discard instances beyond intensity via seed > intensity -> move offscreen / alpha 0).

Splashes: instanced small rings on ground: shader with per-instance seed; position on ground plane around camera (wrapping in a 120x120 area following camera), scale/alpha animate with fract(time+seed). Ring texture via canvas or procedural in fragment (circle ring via distance). Additive faint. Count ~300. Cheap and adds a lot.

Also rain "haze": fog handles it.

Lightning:

• occasional flash: uniform skyFlash (0..1) decays; directional light intensity spike; sky shader brightens; also a jagged lightning bolt mesh? Could do a line-based bolt appearing for ~100ms: generate jagged polyline from sky to ground at random azimuth, as additive Line with linewidth 1 — thin. Better: quad strip bolt with glow texture, billboarded, additive — looks decent. I'll do a simple bolt: BufferGeometry strip built when strike triggers, with a shader fading over ~0.15s, plus point light. Might be complex; simpler: two-stage flash (sky flash + point light flash) without visible bolt geometry — still effective. I'll add a bolt as a jagged additive plane with a procedural zigzag in fragment shader (using noise offset on a vertical quad): fragment computes distance to a zigzag line -> glow. The quad is billboarded (cylindrical). That's neat and self-contained. Bolt lifetime 0.12-0.2s with double flicker.

• Thunder audio: schedule noise burst with lowpass + delay 0.5-3s after flash based on "distance".

Traffic:

• Flying cars: lanes at heights 25..90, along X and Z directions on street centerlines. Represent each car as instanced box (2 x 0.6 x 5) with per-instance color; plus light streak: I'll make car body dark with emissive strip texture (front white, rear red) — using a small canvas texture on box. With InstancedMesh + one texture, per-instance lane/direction via matrix. Movement on CPU: update matrices each frame for ~120 cars — fine.
• Light trails: give each car a stretched additive quad behind (part of the same instanced mesh? different material). Simpler: second InstancedMesh of long thin quads (billboard? no—aligned along lane, horizontal) with gradient alpha, positioned at car rear, length ~ speed. Since cars move along axis-aligned lanes, quads axis-aligned: no billboarding needed if camera high; from street level they'd look flat. Make trail quads vertical (like a ribbon standing up)? Real "light trails" in photos are just streaks — a horizontal ribbon at car height with additive gradient looks good from most angles; edge-on it disappears. Use two crossed quads (X shape along the lane) so visible from side and top... From orbit view (looking down), a vertical quad along lane direction is visible; horizontal also visible. Cross-quad covers both. I'll do crossed quads per car in one InstancedMesh with 2x instances.

Hmm, simpler and very effective: make the car itself an elongated emissive "streak" — at night with bloom, traffic reads as moving light streaks anyway. Cars: small dark body + bright emissive front/rear lights via texture; plus separate trail ribbons. Let me keep trails as crossed additive ribbons with per-instance color (white for headlights direction A, red for taillights — actually trail color depends on direction of travel: cars moving away show red, toward show white. Since lanes are one-direction, assign per lane).

Neon signs:

• Canvas textures: generate ~14 sign designs: vertical/horizontal rectangles with text (random katakana/hangul/latin words like "HOTEL", "BAR", "ラーメン", "NEON", "CYBER", "24H", "電脳", "NOODLES", "PUNK", "DATA", "SUSHI", "夢", "HOTEL", "GIRLS"? no—keep it clean), bright colors (pink, cyan, orange, green, purple), with border. Emissive plane + slight additive glow sprite behind.
• Place on random building faces at heights 10..60, oriented outward toward street. ~70 signs. Individual meshes share geometry (plane) with different materials (per texture) — 70 draw calls, fine. Add flicker: per-sign random flicker via material.emissiveIntensity? MeshBasicMaterial with color scaled — animate a few "faulty" signs by toggling visible/color intensity in update.
• Also big "holoboard": one large animated shader billboard on a central tower: animated shader with scrolling text? Scrolling color bands + logo shape. Nice focal point. I'll add a big screen with animated shader (scanlines, moving gradient, glitch) on the tallest tower face.

Street lights: instanced posts along streets with warm glow sprites (Points with shader or Sprite instanced). Maybe skip posts; instead emissive small spheres + additive halo quads instanced. Keep it: InstancedMesh of poles (cylinder) + Points for lamp glows with shader (soft dot). ~ every 40 units along streets → grid of lamps at intersections: (BLOCKS+1)^2 * 4? That's 15154=900 — too many; do one lamp per intersection corner → 225*2=450? Points are cheap; poles instanced cheap. OK but visual clutter; use every other intersection. Fine.

Camera modes:

1. Orbit — OrbitControls, target city center, autoRotate slow.
2. Fly (auto) — camera follows a smooth path: I'll build a CatmullRomCurve3 loop through street canyons at varying heights (y 8..70), lookAt point ahead on curve. Banking. Toggle.
3. Walk — street-level: camera at y=3 moving forward along streets; at intersections randomly turn; mouse drag to look around (yaw/pitch offset). Movement auto-forward at ~8 u/s with headbob subtle. This is immersive with rain. Transitions: lerp camera position/quaternion over ~1.5s when switching.

Keyboard: 1/2/3 camera modes, B bloom, M mute, P photo, H hide UI, Space pause? (pause rain/time), arrows adjust fly speed maybe.

Post-processing: EffectComposer + RenderPass + UnrealBloomPass (strength ~0.9, radius 0.6, threshold 0.25) + custom final ShaderPass (vignette + film grain + subtle chromatic aberration). OutputPass for color space. In r160, use OutputPass at end.

Note: with Reflector + EffectComposer, fine.

Audio (WebAudio, all synthesized):

• Rain: white noise buffer looped through bandpass/lowpass filter, gain tied to rain intensity. Add patter: highpassed noise modulated randomly? Keep simple: two noise layers (low rumble + hiss).
• Thunder: on lightning strike, after delay: brown-noise burst through lowpass with exponential decay 2-4s + a sub sine thump.
• Ambient pad: slow detuned saw/sine chords through lowpass + reverb-ish (feedback delay), minor chord progression, very quiet. Maybe a simple 2-osc pad with slow LFO — keep code compact.
• Master gain + mute toggle. Start on first user gesture.

UI: panels like previous demos: title panel (name + hint), control panel bottom-left: buttons (camera mode, play/pause, audio, bloom, snapshot), sliders (rain intensity, traffic, fog density, bloom strength, fly speed), preset select ("Drizzle", "Downpour", "Storm", "Neon Fog"?). Stats readout maybe (fps). Loading overlay that fades.

Snapshot: canvas.toBlob after render with preserveDrawingBuffer or render-on-demand capture. Previous demos presumably did renderer.render then toDataURL. I'll do composer.render() then canvas.toBlob — need preserveDrawingBuffer: true OR capture immediately after render in same frame. I'll render explicitly then toBlob in same tick — safe without preserveDrawingBuffer if done synchronously after render.

Structure: single index.html, import map same as 013, module script. Keep code organized with sections and comments.

Let me also double check three r160 addons paths:

• three/addons/controls/OrbitControls.js
• three/addons/postprocessing/EffectComposer.js
• three/addons/postprocessing/RenderPass.js
• three/addons/postprocessing/UnrealBloomPass.js
• three/addons/postprocessing/ShaderPass.js
• three/addons/postprocessing/OutputPass.js
• three/addons/objects/Reflector.js

All exist in r160.

Now — one concern: Reflector + fog. Reflector's custom shader — I should apply fog manually? The ground is huge; fog would help blend edges. I can include fog in the custom shader manually (compute fogFactor from depth). I'll add fog color/density uniforms matching scene fog and blend. Good.

Another concern: Reflector renders scene without the ground itself (it hides itself). Fine.

Also, the reflector will reflect the rain streaks and splashes — splashes are ON the ground plane; mirrored they'd z-fight? Splashes are slightly above ground (y=0.05), mirrored at y=-0.05, hidden below ground (ground is opaque reflector plane). Fine.

Performance: city ~500 buildings instanced (4 draw calls), signs ~70, lamps, rain, trails, cars, reflector doubles it. Should run OK.

Let me also add distant city glow silhouette: a ring of dark skyscraper silhouettes beyond the playable city (instanced boxes, no windows, fog-blended) to give depth. Cheap. Or rely on fog. I'll add a simple skyline ring.

Presets:

• "Neon Drizzle" (default): moderate rain, dense traffic, bloom 0.9.
• "Downpour": heavy rain, less traffic, more fog.
• "Electric Storm": heavy rain + frequent lightning.
• "Midnight Mist": light rain, dense fog, low traffic, moody.

Alright — also a story/interactive element? Previous demos had clickable objects with story panels (013). For this one, maybe clicking a sign triggers a "photo mode" flash? Keep scope manageable; the demo is already big. I'll add: clicking on the big holoboard cycles its content; double-click spawns a "camera flash" snapshot? Skip extra interactivity beyond cameras/controls; add lightning on demand via key L ("call lightning") — fun. And clicking anywhere spawns a thunder strike at that point? That's fun and easy: raycast to ground, trigger bolt+flash+thunder there. Yes — "click to summon lightning".

Now write the code. It's long; I'll write it in one go to a file, then run node --check (need to extract the module script? node --check works on .js; I'll extract script content to a temp .mjs and check). Also verify CDN URLs with curl.

Let me carefully write the shaders.

Rain streak shader

InstancedBufferGeometry from PlaneGeometry(1,1) (unit, centered). Attributes:

• aOffset (vec3): base xz position in a disc radius R around origin, y random 0..H.
• aSpeed (float): 40..70 (fall speed)
• aLen (float): 0.8..1.6 streak length factor
• aSeed (float)

Uniforms: uTime, uCamPos (vec3) — actually we wrap around camera: instance world pos = vec3(camX + wrappedX, y, camZ + wrappedZ). Implement wrap: xz defined in [-R, R]; world = cameraGroundPos + mod(aOffset.xz - cameraGroundPos + R, 2R) - R. Where cameraGroundPos = camera position xz. Do this in shader with uniform uCenter (vec2).

y: y = mod(aOffset.y - uTime * aSpeed, H). Height H = 120. Streaks vanish above? Fine.

Billboard around Y:

Add wind slant: top vertex offset by wind: pos.xz += uWind * position.y (position.y in [-0.5,0.5]).

Fragment: alpha = (1 - abs(vUv.x - 0.5)*2) * (sin gradient along y) * uOpacity; color pale #9fb6d8. Additive.

Intensity control: uniform uCount01; if aSeed > uCount01 → alpha 0 (or scale 0 in vertex).

Splash rings

Instanced quads lying flat (rotate plane to XZ in shader: use plane geometry, in vertex: worldPos = center + vec3(position.x, 0, -position.y) * scale). Per instance: aSeed, aOffset (xz in [-R,R] around camera, wrapped like rain), aRate. Phase = fract(uTime * aRate + aSeed); scale = mix(0.1, 1.2, phase); alpha = (1-phase)^2 * 0.5 * ring(vUv). Ring: dist from center, alpha = smoothstep(0.5,0.42,d) - smoothstep(0.38,0.3,d)... produce thin ring. Fade with fog maybe. Additive faint blue-white.

Wrap same as rain with uCenter. R = 60.

Reflector wet shader

Vertex: standard Reflector:

Fragment:

texture2DProj = texture2D(tDiffuse, uvp.xy/uvp.w) — in WebGL2/GLSL3? ShaderMaterial defaults to GLSL1 compiled with three's preprocessor; texture2DProj exists in GLSL ES 1.00. three's Reflector uses texture2DProj( tDiffuse, vUv ). OK, use texture2DProj.

Note: Reflector's default fragment uses blendOverlay etc. I'll write my own as above. Must include uniform vec3 color (used as base tint — I'll use it to scale reflection maybe). The Reflector sets uniforms tDiffuse & textureMatrix; color uniform default in options. I'll keep color uniform and multiply reflection by it (set to white).

Careful: Reflector's onBeforeRender updates textureMatrix and renders. It uses material.uniforms.textureMatrix — must exist. And tDiffuse. Good.

Fog density: scene.fog = FogExp2(color, density). I'll pass same values.

One more: the reflector plane should receive the "wetness" uniform shared with UI.

Sky dome shader

Sphere radius 2000, BackSide. Fragment: direction from vWorldPos normalized.

• base gradient: zenith #05060f, horizon #1a1030 (purple) with city glow: orange-pink glow near horizon modulated by fbm clouds.
• clouds: fbm(dir.xz/dir.y scaled + time*wind) → cloud mask; clouds lit from below: mix cloud color dark #0a0a14 with glow color by horizonFactor.
• stars: hash-based stars, visible where cloud mask low and y > 0.1, twinkle.
• lightning: uFlash brightens clouds (add flashColor * uFlash * cloudFactor) and overall horizon.
• fog blend at horizon: mix to fog color near y≈0.

Holoboard shader (big screen)

Plane on central tower. Fragment: animated: vertical scanlines, moving diagonal gradient bands in neon colors, glitch offsets (time-stepped random), and a big text? Text in shader is hard; instead draw a canvas texture animated? Simpler: canvas texture updated per frame (2D canvas: draw scrolling text "NEON RAIN 2088" + waveform + color bars). CanvasTexture needsUpdate each frame — 512x256 canvas update per frame is OK. I'll do canvas-based animation: scrolling marquee text, blinking logo, audio-style bars. Fun and easy. Flicker via material color intensity.

Also smaller signs: static canvas textures (generated once), with per-sign flicker animation (some signs flicker via visible toggling pattern using sign.userData).

Cars

Lane definition: streets run along X and Z at block boundaries. City grid: blocks at coordinates i*(block+street). Streets at those boundary lines. Lanes: for each street line, 2 lanes offset ±4, direction opposite. Heights: pick from [22, 34, 48, 64, 80] per lane. Cars spawn on random lane at random s, speed 20-50 depending on lane speed limit. Update: s += speed*dt; wrap at ±cityHalf. Orientation: along lane dir. Car matrix compose.

Car mesh: BoxGeometry(2.2, 0.7, 5.5) with canvas texture: dark body, white emissive front band, red rear band, cockpit glow. Use MeshBasicMaterial with map (self-lit; it's night). instanceColor tint slight.

Trails: PlaneGeometry(1,1) rotated to vertical along Z: make geometry PlaneGeometry(width=1.6, length=14) rotated X? Let me define trail geometry: plane in XZ? I want a vertical ribbon: width vertical 1.2, length along Z 16. PlaneGeometry(1.2, 16) then rotateX? PlaneGeometry lies in XY facing +Z. I want it standing: width along Y (vertical), length along Z. rotateY(90°) makes plane in ZY facing +X — that's vertical, length along... PlaneGeometry(w,h): w along X, h along Y. rotateY(Math.PI/2): X→ -Z? After rotateY(π/2), the plane's width axis (X) maps to Z. So plane now spans Z (length) and Y (height), normal along X. Good: geometry.rotateY(Math.PI/2) with PlaneGeometry(16, 1.2) → length 16 along Z, height 1.2. Then per-instance orient along lane direction (rotationY 0 or ±90). Cross-quad: second instanced mesh with horizontal ribbon (rotateX(-π/2): spans X,Z, normal Y): length along... PlaneGeometry(16,1.2) rotateX(-π/2): width X→X? rotateX maps Y→Z. So spans X (16) and Z (1.2). Then rotate per-instance to align length with lane. Two instanced meshes, each count = carCount. Update matrices each frame alongside cars (positioned at car rear: offset -dir * (length/2 - 1)).

Trail shader: additive, gradient alpha along length (bright near car, fading), color per instance (instanceColor: white-ish for oncoming lanes, red for away lanes... actually trail behind car is taillight → red-ish for cars moving away from typical viewer; simpler: trail color = mix of car's rear light color = warm red-orange for all, headlights white streak in front? Keep: rear trail red-orange, plus small front glow white. Just rear trails, color per lane direction: lanes heading -X/+X... viewer-independent: use red trails for all (taillights) — classic. Plus white headlight glow quad in front? Skip; cars have emissive front in texture.

Hmm — but from above (orbit), vertical ribbons are invisible (edge-on); horizontal cross quads cover that. Good.

Traffic density slider: hide instances beyond count (set matrix scale 0 or count via mesh.count = n). InstancedMesh.count adjustable.

Lamps

Intersection lamps: positions at street intersections, offset corner. Pole: CylinderGeometry(0.12,0.16,7) instanced, dark. Lamp glow: Points with shader: round soft sprite, warm color, size ~ 40px attenuated, additive. Also small emissive sphere? Points enough. Also add a fake light pool on ground: additive radial gradient quads under lamps (instanced planes on ground, subtle warm). With wet reflections, the glow sprites reflect automatically (they're in the scene). Nice.

Count: intersections every other block: (BLOCKS/2)^2 * 1 ≈ 49 lamps. Fine.

Buildings extra detail

• Water towers / AC boxes on roofs: instanced small boxes on random roofs. Cheap detail. Maybe skip to control scope. I'll add simple rooftop boxes (same instanced mesh approach, dark). OK small effort: reuse building instanced mesh? Different scale; separate InstancedMesh ~150.

• Sky bridges between close tall buildings? Skip.

Central tower

Tallest tower at center (height ~ 260) with holoboard on two faces + antenna with blinking light + edge lighting? Give it a distinct emissive trim: thin emissive box edges? Use a second box slightly larger with wireframe? Meh. Give it a colored "crown" (emissive box at top) + holoboard. Good enough.

Fog & lighting

Scene lighting: ambient dim (0x223, 0.6?), hemisphere light (sky purple / ground dark), directional moonlight faint blue (casts no shadows — shadows off for perf; or enable? Night scene, shadows barely visible; skip shadows entirely). Lightning directional flash light (intensity 0 normally, spikes).

Buildings use MeshStandardMaterial? With no strong lights, standard material needs the emissive windows to shine. Use MeshLambertMaterial? Standard with roughness 0.9. Lighting: hemisphere + ambient enough to give form. Plus emissiveMap windows. OK.

Actually to keep buildings moody: MeshStandardMaterial({color: 0x8a8f9d-ish dark, roughness:0.85, metalness:0.2, map: facadeTex, emissiveMap: windowsTex, emissive: 0xffffff, emissiveIntensity: 1.2}). The facade map dark; windows in emissive tex bright colors. instanceColor tints diffuse slightly.

Wait: if emissiveMap is separate black-with-windows texture, good. I'll generate per variant: facade canvas (dark wall + faint window frames + grime) and emissive canvas (black + lit windows random colors/brightness). 4 variants → 4 InstancedMeshes, distributing buildings among them.

Buildings' roofs: top face of box gets window texture too — looks odd from above (lit windows on roof). Fix: use box UV trick — materials array per face? InstancedMesh supports material array? A BoxGeometry has groups; InstancedMesh with material array works (multi-material instancing is supported? I believe yes since geometry groups exist... Actually InstancedMesh with material array: renderer handles groups with instancing fine.) Simpler: make roof texture acceptable: the window texture on top face will show windows — from orbit view that's visible and looks wrong-ish. Alternative: separate roof caps: thin dark boxes on top of each building (instanced) hiding the top face. That adds an instanced mesh (~500) — fine and easy: cap = box(1.02, 0.06, 1.02) scaled per building footprint, positioned at height. Dark material. Also gives parapet look. Do that.

Or: use texture with window grid such that top face UV maps to a dark region? BoxGeometry top face UVs span full texture. Can't change easily per-face without editing UVs. I could edit UVs: set top/bottom face UVs to a corner pixel (dark). That's actually easy: geometry.attributes.uv, for faces 4,5 (py, ny) set all uv to (0.02,0.02) where texture is dark wall. BoxGeometry attribute order: px, nx, py, ny, pz, nz — each face 4 verts. So uv idx 8..15 → set to dark point.

I'll do the UV edit — cleaner than caps. Set py/ny UVs to sample a plain dark area of facade texture (e.g., coordinate (0.03, 0.97) region between windows... need guaranteed dark spot: I'll reserve top-left 8x8 px of facade canvas as pure wall color, and map roof UVs there: uv=(0.01, 0.99)? Canvas y down vs texture flipY... With flipY default true, uv v=1 is canvas top. I'll just fill entire facade with wall color first (so any point is at least wall), windows drawn elsewhere; pick uv (0.005, 0.995) corner — canvas top-left, which I'll keep window-free. Also emissive canvas corner is black there.

Audio details

Master: GainNode → destination.

• Rain noise: AudioBuffer 2s white noise loop → BiquadFilter lowpass 1200 + gain. Second layer highpass 4000 quiet "patter" with random amplitude LFO via setTargetAtTime periodically? Use ScriptProcessor? No — use an LFO: OscillatorNode 0.3Hz → gain.gain via GainNode? Connect osc → GainNode(gain=0) ... standard: osc.connect(lfoGain).connect(param). Fine.
• Thunder: function thunder(delay, intensity): source = brown noise buffer 4s, playbackRate 0.5, through lowpass 120→60 sweep, gain envelope exp decay; plus sine 45Hz thump. Start at ctx.currentTime + delay.
• Pad: two oscillators (saw detuned) → lowpass 600 → gain 0.05, chord change every 8s: frequencies from minor chords (Am, F, C, G...). Use smooth ramps. Plus slow tremolo LFO. Keep quiet.
• Mute toggle: master gain ramp.

Autoplay policy: init on first pointerdown/keydown.

Frame loop

• dt clamp 0.05. time += dt * timeScale (pause button).
• Update: rain uniforms (uTime, uCenter=camera xz), splashes, cars+trails matrices, sign flicker, holoboard canvas (every frame or every other), lightning state machine (schedule next strike by preset frequency; strike: pick azimuth/dist, show bolt mesh there, flash uniforms, schedule thunder), lamp shader time, sky uniforms, reflector uniforms (uTime), camera mode updates, controls.update in orbit mode, bloom pass params, fps meter.
• composer.render().

Lightning bolt mesh

Mesh: PlaneGeometry(1,1) scaled (width ~ 26, height ~ 300), positioned at strike point (y=150), cylindrical-billboard each frame (rotationY = atan2 of camera dir). ShaderMaterial additive: uniforms uLife (1→0), uSeed. fragment: x = vUv.x - 0.5; main channel: zigzag: offset = (noise1D(yk + seed)-0.5)0.3(1-y?) ; d = abs(x - offset); core = exp(-d180); glow = exp(-d18)0.5; branches: second fainter zigzag. alpha = (core+glow) * uLife flicker (uLife * (0.7+0.3sin(uLife80))). color white-blue. Also fade near ground? fine.

Bolt visible ~0.15s; double-strike: restart uLife once.

Point flash light at strike mid-height, intensity spike decays.

Sky uFlash spikes too.

Click to summon lightning

Raycast click (short click, not drag) to ground plane y=0 (or bounding sphere) → strike there. Also key L strikes random near camera.

OK. Also "photo mode"? Snapshot button downloads PNG.

UI layout similar to 013: title top-left, controls bottom-left, maybe stats bottom-right (FPS + mode). Hint text. Loading overlay with progress fake (textures generate fast; just fade in).

Edge cases:

• OrbitControls import; enableDamping.
• On resize: renderer, composer, camera, reflector? Reflector RT fixed size 1024 — fine.
• instanceColor: need mesh.instanceColor set by setColorAt before first render; material color white-ish to allow tint.

Let me now also double-check UnrealBloomPass with selective threshold: bloom threshold 0.55 so only bright neon/windows bloom. Emissive windows intensity 1.2 → after tonemapping? Bloom pass operates pre-tonemap on linear HDR values? EffectComposer renders scene to RT (HalfFloat by default in r160? EffectComposer default uses HalfFloatType since r152ish). Yes, r160 EffectComposer defaults to HalfFloatType, so HDR values >1 available; threshold 0.6 works nicely. OutputPass does tone mapping (ACES set on renderer) + sRGB.

Custom final pass after OutputPass? OutputPass converts to sRGB; adding vignette/grain after OutputPass is fine (operates on display-referred image). I'll put vignette/grain pass last.

Chromatic aberration subtle in final pass: sample tDiffuse with small radial offsets for r/b. Nice with rain.

Now, the amount of code is large (~1500-1900 lines). Let me write it carefully, mentally compiling as I go. I'll write to /space/demos/014-neon-rain/index.html.

Plan the canvas texture generators:

Facade canvas 256x512 (w x h): wall base dark bluish with vertical gradient, subtle noise speckle, window grid: cols=8, rows=24; window size ~ 18x12, spacing. Some windows lit in emissive canvas: colors: warm #ffd9a0, cool #9fd8ff, neon pink/cyan occasionally; brightness varies; some windows half-lit (blinds). Also occasional dark floors (vacant). Also AC unit specks skip.

Emissive canvas same layout: black bg; for lit windows draw color with slight per-window alpha; a few windows flicker? static.

Sign textures: canvas 128x256 or 256x128 depending orientation; function makeSignTexture(text, color, vertical, style): bg dark #0a0a12 with subtle border glow; text drawn with glow (shadowBlur), maybe double stroke. Words list. Return CanvasTexture.

Holoboard canvas 512x256, animated draw function.

Car texture 128x64: side? Box UV maps same texture all faces; front face (+z?) BoxGeometry: px,nx,py,ny,pz,nz. Car length along Z: pz is front. Texture on pz face = front: want headlights. Since same texture everywhere, design texture: mostly dark with bottom edge glow? Eh — simpler: car body MeshBasicMaterial dark with slight color, plus separate instanced small emissive quads for front/rear lights? That's 2 more instanced meshes. Alternative: accept texture on all faces: design 64x64: left half red glow (rear), right half white glow (front)? On side faces that shows as gradient along length — actually looks like light strip along the car — acceptable at night, even cool (like TRON). Do: horizontal gradient texture: red bright at left edge fading, white bright at right edge, dark middle, plus a thin cyan line along center (side trim). On front face (pz) shows full gradient though — meh.

Better: give box per-face UV remap like buildings: set px,nx (sides) to sample middle trim area, py top dark, pz front → white area, nz rear → red area. Design texture 64x64: quadrants: top-left red block (rear), top-right white block (front), bottom strip dark (top/bottom), center horizontal cyan line region for sides. UV remap:

• pz (front, idx 16..19) → uv rect around white block: set all 4 to center of white (0.75, 0.75)? A single point = flat color.
• nz (20..23) → red point (0.25, 0.75).
• px,nx (0..7) → keep full gradient? Sides with gradient look nice: keep default full-uv but then sides show red-to-white gradient + trim line — good.
• py,ny (8..15) → dark point (0.5, 0.1). So canvas: fill dark #111; draw horizontal trim line cyan at mid height across full width (for sides); red blob at left-center, white blob at right-center (for front/rear points... wait pz samples point (0.75,0.75) — canvas coords x=0.75*64=48, y=(1-0.75)*64=16 (flipY). I'll just draw generous blobs: red circle at (16,16) r=10, white circle at (48,16) r=10; uv points: rear (0.25, 0.75), front (0.75, 0.75). With flipY, uv v=0.75 → canvas y = (1-0.75)*64 = 16. Good matches. Sides default UV full texture: shows trim line + blobs at ends — like actual car lights on side? The blobs at top corners... hmm trim line at mid: y=32. Blobs at y=16 (upper area). On side faces, v maps vertical: v=0.75 is upper part of car side. Red blob front-top-left? It'll look like colored splotch on side. Acceptable stylization — actually looks like light bleed. Fine, cars are small and fast.

Simplify: honestly at night + bloom, cars read as streaks with bright ends. Good enough.

Trail color: per-instance color set by lane direction: cars with dir such that... all trails warm red (#ff2a1a) for taillight feel; headlight white handled by car front. OK.

Street lamps: also add traffic holograms? skip.

Let me now think about the fly path: build CatmullRom closed loop through street canyons: choose waypoints along streets: e.g., rectangle-ish loop with variations: points at intersections offset to street centers, heights varying 10..60. CatmullRomCurve3(points, true, 'catmullrom', 0.1). Camera pos = curve.getPointAt((t*speed)%1), lookAt = curve.getPointAt((t+0.01)%1) plus slight lateral sway. Add roll banking: compute from curvature — skip, keep up (0,1,0) with slight roll via lateral acceleration approx: roll = clamp((prevDir x dir).y * k). Simple: camera.up.set(sin(roll),1,cos(roll)?) — do small roll: camera.rotateZ(rollAmount) after lookAt. rollAmount from change in yaw. Keep subtle.

Walk mode: position on street network: current street segment: I'll model as: walker has position (x,z) constrained to street centerlines grid, heading along ±X or ±Z; speed 7; at each intersection, random choice continue/turn (weighted continue). Mouse drag: yaw/pitch look offset (pointerdown+move). Headbob: y = 3 + sin(tspeed1.8)*0.08. Transitions between modes: simple: when switching to walk, place walker at nearest street point below camera; when switching to orbit/fly, tween camera from current to target over 1.2s (store start pos/quat, lerp with smoothstep; during tween disable controls).

Implementation of tween: camTransition = {t:0, dur:1.2, fromPos, fromQuat, toPos(), toQuat()} — since targets move (fly path), compute target each frame during transition and lerp from stored start with easing; blend factor e = smoothstep(t/dur). pos = lerp(fromPos, targetPos, e). quat = slerp(fromQuat, targetQuat, e). After t>=dur, mode active fully.

Orbit mode: OrbitControls with autoRotate; when transitioning in, set controls.target to city center (0, 40, 0) and camera pos to a nice vantage; enable controls after tween.

Pause: stops time-based updates (rain falls, cars, time) but camera still updates; simpler: pause everything except controls & render (dt=0 for world, still render).

FPS meter: simple EMA displayed.

Now UI ids:

• #title-panel (h1, .sub, #hint)
• #controls: buttons: #btn-mode (cycles) or three buttons #mode-orbit #mode-fly #mode-walk; #btn-pause; #btn-audio; #btn-bloom; #btn-snap; sliders: #rain (0..1), #traffic (0..1), #fog (0..1), #bloom-str (0..2), #speed (fly/walk speed 0.3..2.5); preset select #preset; lightning button #btn-bolt.
• #stats bottom-right: fps + car count etc.
• #loading overlay.
• #flash overlay for lightning screen flash? Sky handles it; add subtle white flash div for punch (opacity animated). Yes — cheap and effective: #flash div, set opacity 0.5 on strike, CSS transition fade.

Keyboard: 1/2/3 modes, Space pause, B bloom toggle, M audio, L lightning, P snapshot, H hide UI.

Alright, also the "story" richness: add subtle details: blinking antenna lights (Points shader with phase), a few searchlight beams? (additive cones rotating on rooftops — cheap: 3 cones with additive shader rotating). Nice touch: 2-3 searchlights sweeping the sky, visible in fog. Cone geometry, additive, opacity low, rotating. Their reflection in wet ground = gorgeous. Do it.

Also distant skyline silhouette ring: instanced tall dark boxes at radius 1400-1800, fog handles blending; with emissive few windows? Just dark + fog → silhouettes. Cheap: 120 instances. Add tiny window speckle via same window texture at low emissive? Use basic material color #0a0c16, no map. OK.

Total instanced meshes: buildings x4, roofs? (UV trick instead), antennas (cyl instanced), antenna lights (points), rooftop boxes (instanced), skyline (instanced), lamps poles (instanced), lamp glows (points), lamp pools (instanced quads), rain (instanced), splashes (instanced), cars (instanced), trailsV (instanced), trailsH (instanced), signs (~70 meshes), holoboard (1), searchlights (3), bolt (1), ground reflector (1), sky (1). Draw calls ~ 100. Fine.

Let me write the code now. I'll be careful about:

• three r160 API: renderer.outputColorSpace = THREE.SRGBColorSpace default; with composer + OutputPass, fine. texture.colorSpace = THREE.SRGBColorSpace for canvas color textures (facade map, signs, car). Emissive maps: also sRGB? Emissive map texels are treated in linear after decode if colorSpace set — set SRGB for emissiveMap too (it's a color texture).

• InstancedMesh: new THREE.InstancedMesh(geo, mat, count); setMatrixAt; instanceMatrix.needsUpdate; setColorAt then instanceColor.needsUpdate.

• Reflector: import from 'three/addons/objects/Reflector.js'. Custom shader option key: shader: {uniforms, vertexShader, fragmentShader} — note Reflector clones uniforms via UniformsUtils.clone, so my uniform objects get cloned; to update, access reflector.material.uniforms. Good.

Reflector also has options.multisample. Default 4. OK.

One caveat: Reflector's default shader name etc. Also Reflector sets material.uniforms.tDiffuse.value and textureMatrix after creation — requires those uniforms exist in my custom shader uniforms. Include them: tDiffuse: {value: null}, textureMatrix: {value: new Matrix4()}, color: {value: new Color(0xffffff)} plus mine.

• Points shaders: use gl_PointSize with perspective scaling: gl_PointSize = size * (300/ -mvPosition.z). Fragment: circular soft mask. Additive.

• Fog on custom ShaderMaterials (rain, trails): I'll manually fade by distance in shader using cameraPosition (available in ShaderMaterial vertex/fragment as built-in uniform cameraPosition). Add uniform uFogColor/uFogDensity where needed (trails, signs? signs use MeshBasicMaterial with fog:true default — built-in materials handle fog automatically). For custom shaders (rain streaks, trails, splashes, lamp glow points, bolt, searchlights) add manual fog fade — important for mood. Rain: fade alpha by exp fog factor.

• cameraPosition uniform is available in fragment shader? In ShaderMaterial, cameraPosition is declared in vertex shader prelude only. In fragment, I must pass varying or declare uniform myself. I'll compute fog in vertex (cameraPosition available there) and pass vFogFactor varying.

• Searchlight cones: ConeGeometry(open) additive shader with vertical gradient alpha (bright at base fading up), depthWrite false. Rotate slowly, slight wobble. Fade with fog manually.

• The bloom threshold: emissive windows intensity ~1.3 → bloom picks them. Signs MeshBasicMaterial color values can exceed 1? Basic material color max 1; to make signs pop above threshold, multiply color: material.color.setScalar? Use color values >1 via new THREE.Color(r,g,b).multiplyScalar(2)? Colors can exceed 1 (HDR) — yes, Color accepts >1. Set sign material color = baseColor * 2.2 for HDR bloom. Similarly lamp glow shader outputs color * 2-3. Car lights texture *1 — set car material color multiplier 1.6? MeshBasicMaterial map * color; set color (1.6,1.6,1.6). OK.

• Tone mapping ACES will desaturate brights slightly — fine.

Snapshot: after composer.render(), canvas.toBlob. Since we render every frame anyway, do: snapshotRequested → at end of next animate frame, toBlob → download link. That guarantees same-frame capture.

Audio: keep modest size but decent.

Let me also handle context: renderer = new THREE.WebGLRenderer({canvas, antialias:true}). renderer.toneMapping = ACESFilmic; renderer.toneMappingExposure = 1.1.

Pixel ratio: min(devicePixelRatio, 2).

Reflector textureWidth: 1024 * pixelRatio? Use 1024/768 fixed — fine.

Now, let me write out the whole file. I'll aim for clean, commented code. Length ~ let's see, probably 1300+ lines. Let me write it in one file write, then syntax-check by extracting the module JS and running node --check with .mjs extension.

Key risk areas: shader compile errors. I'll mentally review each shader carefully. Also GLSL: use texture2D (GLSL1 style) — three ShaderMaterial defaults to GLSL1 (no glslVersion set), and three injects #define texture2D texture when WebGL2... Actually with WebGL2, three compiles shaders as GLSL3 only if material.glslVersion = THREE.GLSL3; otherwise it auto-converts? No — for WebGL2, three prefixes ShaderMaterial shaders with #version 300 es ONLY if glslVersion set. Otherwise compiles as GLSL1 (WebGL2 supports GLSL1 shaders). texture2D works in GLSL1 mode. texture2DProj also exists in GLSL ES 1.00. Good.

noise functions:

Sky stars: hash on direction grid.

Let me now write the file. I'll write it via read_write_file_in_shell_environment (write mode). It'll be a big content string. Then extract and check.

Let me draft the JS structure:

Constants:

Streets centered at lines x = -HALF + PITCH/2 + k*PITCH? Let me define block centers at (i - (BLOCKS-1)/2) * PITCH for i in 0..BLOCKS-1. Streets run between blocks: street centerlines at blockCenter ± PITCH/2. So street lines at ((i + 0.5) - (BLOCKS-1)/2)PITCH for i in -1..BLOCKS-1 → coordinates from -HALF -? Let me just compute: blockCenters[i] = (i - (BLOCKS-1)/2) * PITCH. With BLOCKS=12: centers from -5.590=-495 to +495. City edge at ±(495+45)=±540. Street lines at centers±45: lines at -540+? street centers at (i - (BLOCKS-1)/2 + 0.5)*PITCH = (i-5)*90 for i in 0..11 → from -450 to 450, plus outer ring streets at ±540. I'll include outer ring: streetLines = [-(BLOCKS/2)*PITCH ... +(BLOCKS/2)*PITCH] step PITCH → from -540 to 540 (13 lines). Good: streets at multiples of 90 from -540..540.

Buildings per block: 2x2 sub-lots or single tower. For each block center (bx,bz): decide pattern: 1 tower (60% chance, footprint 30-48, height by downtown falloff), or 2x2 small buildings (footprint 18-26 each, heights lower). Distance from center d = max(|bx|,|bz|)/HALF (0..1): heightBase = lerp(170, 30, d^1.3) * rand(0.6..1.4). Central tower at (0,0) block: height 240, footprint 44.

Skip park blocks: 8% blocks empty (park with a few glowing trees? just empty + lamp pools). Fine — empty lots add variety; maybe ground-level neon food stalls? skip.

Collect building list: {x, z, w, d, h, variant}. Then create 4 InstancedMeshes.

Antennas: for buildings h > 120: 1-2 antennas height 12-30 at roof. Antenna instanced cylinders (r 0.25). Antenna tip lights: points positions, per-point phase attr.

Rooftop clutter: for 40% buildings: 1-3 boxes (2-6 size, 1.5-4 h) dark.

Signs: choose random buildings with h>25: sign on face toward nearest street: faces ±X or ±Z; position at building edge + 0.4 offset; height rand 8..min(h-6, 70); size w 6-16 h 3-8 (or vertical 3-5 x 10-22). Orientation: plane facing outward. ~80 signs. Each sign: Mesh(PlaneGeometry(1,1), MeshBasicMaterial({map: signTex, transparent? no, color: HDR tint})) scale set. Also glow sprite behind: additive plane 1.8x size, radial gradient texture tinted sign color, opacity 0.35. To limit draw calls, glows as instanced? Keep individual — 80*2=160 draw calls... that's a lot but each trivial. Hmm, modern GPUs fine with 300 draw calls. OK.

Actually, let me reduce: signs ~64. Fine.

Flicker: pick 12 "faulty" signs: pattern via userData {t, state}; update: random telegraph noise toggling material.visible or color multiplier.

Holoboard: on central tower at height ~120-170, size 40x20, facing +X and another -Z? One big facing camera start. Canvas 512x256 animated.

Traffic lanes: for each street line (13 lines each axis), not all have traffic: pick subset: lanes = []; for xLines: for dir in [+1,-1]: if rand<0.55: lane {axis:'z'...} wait: street line at x = const runs along Z. Lanes offset x±5, dir ∓. heights: base = choice([20, 32, 44, 58, 72]) + rand*4. Also ground-level lanes? Flying cars only. Car count total ~ 140; assign cars to lanes round-robin random.

Cars update: s += speeddt (speed per car 18..40 * trafficSpeed). position: axis coord = s wrapped to [-HALF-40, HALF+40]. Matrix: pos (laneFixed, h, s) with rotationY = axis==='x'? π/2(dir?) etc. Compose via Object3D dummy.

mesh.count = floor(total * traffic01). Same for trails.

Searchlights: 3 cones at rooftops of tall buildings: cone height 220, radius 26 at top, open-ended; rotate around Y with slight tilt wobble. Shader: alpha = (1-vUv.y)^2 * 0.28 * fogFade; color cool white-blue. Additive, depthWrite false, side: DoubleSide.

Hmm cone UV: ConeGeometry uv.y along height? For cone, v goes around/height — v=0 at bottom? Not guaranteed; I'll compute alpha from local y position instead: pass position.y normalized by cone height uniform. Cone geometry: base at -h/2, tip at +h/2 (ConeGeometry: apex at +h/2? ConeGeometry is a cylinder with radiusTop=0: apex top +h/2, base -h/2). I want beam from rooftop upward widening: apex at bottom: rotate π on X or use negative scale. Set mesh.rotation.x = π so apex at bottom? Then it points down... Let me: geometry.translate(0, h/2, 0) so base at origin extending to apex at +h? ConeGeometry(radius, height): base circle at y=-height/2, apex at +height/2. translate(0, height/2, 0) → base at 0, apex at +height. I want opposite (narrow at source bottom, wide at top): rotateZ(π) → apex at 0, base at top. Then alpha by local y: brighter near apex (y≈0): alpha = (1 - y/height)^2. In shader use position.y / uHeight. Good.

Searchlight motion: parent Object3D at rooftop; cone child tilted (rotation.x ~ 0.35); parent.rotation.y += dt*speed; gives sweeping beams.

Sky: as planned.

Reflector ground: PlaneGeometry(4000, 4000) rotated -π/2.

Beyond reflector? The reflector plane is the ground everywhere (4000 > city 1080 + skyline ring 1400-1800... skyline at 1500 sits beyond ground edge 2000 — ok ground 4000 wide covers to ±2000).

Fog density default 0.0016 → at 500 units factor = 1-exp(-(0.0016500)^2)= 1-exp(-0.64)=0.47. Hmm FogExp2 factor = 1-exp(-(ddensity)^2)? three FogExp2: factor = 1 - exp(-density² * d²)? Actually: fogFactor = 1.0 - exp( - fogDensity * fogDensity * vFogDepth * vFogDepth ). Yes squared. density 0.0016, d=500: (0.8)²=0.64 → 47% fog. At 1500: (2.4)² = 5.76 → 99.7% — skyline silhouettes fully fogged... reduce density 0.0009: d=500 → 18%; d=1500 → 88%. OK tune with slider 0.3..2 multiplier of 0.0009.

My manual fog in shaders uses same formula.

Lamp glow points shader: size attenuation: gl_PointSize = uSize * (200.0 / -mv.z); fragment radial falloff^2 * color * 2.5, fog fade via varying.

Now the final pass shader (vignette + grain + CA):

ShaderPass needs vertex shader: standard copy. I'll define shader object {uniforms, vertexShader, fragmentShader}.

Note: ShaderPass clones uniforms too; update via pass.uniforms.

Loading overlay: div with title + spinner; hide after first frame rendered (requestAnimationFrame after init). Since everything is procedural, load is fast; still show briefly.

Audio implementation sketch:

Rain: bufferSource loop white noise 2s → lowpass 900Hz → rainGain (0). Also patter: same noise → bandpass 3800 Q 0.8 → patterGain. setRain(v): rainGain.gain.target = v0.5; patter = v0.12.

Pad: osc1 saw freq f, osc2 saw f*1.007, → padFilter lowpass 500 → padGain 0.06 → master. Chord progression every 9s: chords = [[110, 130.81, 164.81], [87.31, 110, 130.81], [98, 123.47, 146.83], [82.41, 103.83, 123.47]] (Am, F, G?, Em-ish). Two osc play root+fifth; add third osc quiet for octave. Use linearRampToValue for filter/gain, setTargetAtTime for freq glide (exponentialRamp for freq).

Thunder(intensity, delay): noise buffer 3s brown (generate once), src.playbackRate 0.4+rand*0.3, lowpass freq ramp 400→60, gain env: 0 → intensity (attack 0.02) → exp decay 2.5s; plus sub osc 48Hz decay. start at t+delay.

Mute: master.gain ramp 0/1.

Start audio on first gesture: pointerdown/keydown once listener.

Lightning logic:

Click strike: raycast from camera through click point onto plane y=0; if dist < 2000 strike there. Distinguish click vs drag: pointerdown store pos/time; pointerup: if moved <6px and dt<400ms → click. In walk mode dragging rotates view — same rule applies.

Camera modes implementation:

Each frame compute desired pos/quat for active mode:

• orbit: controls.update() then camera as-is (if transition active, we still compute target = controls desired? Simpler: for orbit, set controls.target to (0,45,0); during transition, disable controls and lerp to a fixed vantage orbit pos (e.g., spherical around target at radius 420, height 260, angle = current autoRotate angle). After transition, controls.enabled=true.
• fly: t accumulated flyT += dtflySpeed0.011; pos=curve.getPointAt(flyT%1); look ahead; roll.
• walk: walker update; pos = walker pos + bob; quat from yaw/pitch (mouse offsets + heading).

If transition: e = smootherstep(t/dur); camera.position.lerpVectors(fromPos, desiredPos, e); camera.quaternion.slerpQuaternions(fromQuat, desiredQuat, e); t+=dt; end → finalize.

For orbit desired during transition: compute manually: orbitAngle += dt*0.05; desiredPos = target + (cos,sin)*radius etc.; desiredQuat from lookAt matrix. After transition, sync controls: controls.target.copy(target); camera at desiredPos; controls.update.

Walk details: walker = {x, z, heading (0..3 → +x,-x,+z,-z), yaw, pitch, speed}. Streets at multiples of PITCH (90) from -540..540. Walker moves along current street line: position p; heading vector h; next intersection distance: since streets every 90, intersections at coords multiples of 90. Move: p += hspeeddt; when crossing next multiple of 90 point (within epsilon), decide: 55% continue, else turn left/right (random). Snap coord to intersection to avoid drift. Keep within bounds: if at edge (|coord|>=540), force turn around or turn toward city.

Mouse look in walk: pointer drag adjusts yawOffset/pitch; camera quaternion = Euler(pitch, headingYaw + yawOffset, roll? 0). headingYaw = atan2 of heading. Smooth: current yaw lerps toward heading yaw when turning.

Fly curve: waypoints: generate loop: choose ring of street intersections: e.g., points: (-450,-450),(0,-450),(450,-450),(450,0),(450,450),(0,450),(-450,450),(-450,0) with heights [26, 60, 18, 80, 30, 55, 22, 70] and slight inward jitter. CatmullRom closed. That gives canyon flying between buildings (streets 26 wide, buildings start 13 units off centerline — camera path along street center OK; height variations pass over low buildings sometimes — collisions possible with tall buildings when crossing blocks diagonally? CatmullRom through street intersections stays roughly over streets if tension low; corners cut into block interiors where buildings stand — collision risk. Mitigate: raise heights at corner waypoints? Or make path follow streets more tightly: add midpoints between intersections (at each 90 step) so curve hugs street lines. With waypoints every 90 units along street grid and catmullrom tension 0.5, overshoot small. Heights: keep min height 20, and corner overshoot at height > building? buildings near center up to 170 — can't clear. Alternative: accept occasional pass-through (brief, hard to notice at night with rain) — ugly though.

Better: use the walk-street logic for fly too: fly follows street network: position along lanes like walk but faster (35 u/s) and height varies smoothly (sin-based 14..50), gentle turns at intersections (smooth heading lerp). This guarantees canyon runs between buildings. Camera looks forward along heading with slight bank into turns. This is simpler and safe. Do that: flyer = {x,z,heading,speed,height targetHeight}. Turn decisions at intersections like walker; smooth yaw lerp; height = base + sin(t*0.3)*range; also occasional "vertical" segments? Keep height smooth.

Camera pos = (x, h, z); lookAt = pos + dir30 + (0, -h0.15, 0) slight down. Bank: roll = -yawRate * 0.4.

Nice — unified "street navigator" used by walk & fly with different speed/height.

Orbit: radius ~ 480, height 300, autorotate.

Presets:

• neon-drizzle: rain .45, traffic .8, fog .8, bloom 1.0, storm 0 (no auto lightning), speed 1
• downpour: rain 1, traffic .45, fog 1.2, bloom .8, storm 0.3
• electric-storm: rain .85, traffic .35, fog 1.0, bloom 1.1, storm 1 (frequent)
• midnight-mist: rain .25, traffic .6, fog 1.8, bloom 1.2, storm 0.1

Storm factor: expected strikes per minute = storm * 6.

UI: preset select applies slider values.

Stats: FPS + draw calls (renderer.info.render.calls) — nice touch.

OK also remember hint text: "Drag to orbit · Click to call lightning · 1/2/3 cameras · L bolt · B bloom · M sound · P photo · H hide UI".

Now — write it. I'll produce the file in one write. Given size, I must be meticulous. Let me compose section by section.

Also remember: const texture = new THREE.CanvasTexture(canvas); texture.colorSpace = THREE.SRGBColorSpace; for color maps. For emissive maps also SRGB. anisotropy = renderer.capabilities.getMaxAnisotropy() for facade.

InstancedMesh count sizing: buildings up to BLOCKSBLOCKS4 = 576; compute exact list first, then create meshes with exact counts per variant.

Sign placement details: for building b with face +X: sign at (b.x + b.w/2 + 0.5, y, b.z + rand offset within face), rotationY = π/2 (plane normal +X: PlaneGeometry faces +Z; rotateY(π/2) → normal +X). Face -X: rotationY = -π/2. Face +Z: 0. -Z: π. Choose face toward nearest street: streets at multiples of 90; compute distance from building center to nearest street line on x vs z; pick axis with closer line; sign side = direction of that line. Good — ensures signs face streets.

Vertical signs: rotation same; scale (4, 16). Text drawn vertically (letters stacked) on canvas 128x512.

Sign canvas: bg #05060c with subtle inner border; glow color c; text shadowBlur 18 color c, fill white-ish core? Classic neon: colored glow + bright core. fillStyle c, shadowColor c, shadowBlur 16, font bold; then second pass fillStyle #fff alpha .6 thinner? Keep simple: draw text twice (glow pass + core pass).

HDR: material.color = new Color(c).multiplyScalar(1.8) with map — map already colored; color multiplies map → too saturated? map has colored text on dark bg; multiplying by same color squares it. Instead set material.color white * 1.6 scalar: color.setRGB(1.6,1.6,1.6). Good.

Antenna lights Points shader:

Points size in px: gl_PointSize = uPx * scale / -mv.z. I'll use gl_PointSize = (10.0 * uScale) / -mv.z * 100? Let me: worldSize ~1.2 → px = worldSize * (viewportHeight0.5) / (tan(fov/2) * dist). Simplify: px = uSize / -mv.z with uSize ~ 800 (for fov 60, height 900: factor = 900/(2tan30) ≈ 779). Pass uSize = 780 * worldSize * pixelRatio. I'll compute uPointScale uniform = drawingBufferHeight / (2*tan(fov/2)) and multiply by world size in shader. Use for lamps (worldSize 3.5) and antenna (1.0).

Lamp glow: worldSize 4, warm #ffb46b * 2.2, alpha soft.

OK, and lamp pool quads on ground: instanced plane (8x8) at y=0.06, additive radial warm, opacity 0.12 — subtle. With fog fade. Might z-fight with reflector? y=0.06 above, depthWrite false, fine. Actually reflector is opaque; pool drawn after with depth test — OK.

Splashes y=0.04.

Now the reflector shader — one more consideration: Reflector renders scene into RT with a virtual camera; the rain/splash shaders use uCenter = camera xz — during reflection render, cameraPosition is the mirrored camera (three updates built-in cameraPosition per render). My uCenter uniform is set from main camera — rain wrap centered on main camera; mirrored view sees rain volume from below — fine.

Also Reflector + Points: points reflect fine.

The bolt during reflection: visible in reflection — nice.

Searchlight cones: side: DoubleSide so reflection shows.

Now write the audio chord pad: keep very simple to avoid bugs:

Thunder brown noise: generate buffer: last=0; out = (white0.02 + last) filtered: last = last + 0.02white; out = last*3.5 normalization-ish.

Rain white noise buffer 2s.

Master limiter: DynamicsCompressor.

Alright, also iOS: ctx resume on gesture.

Snapshot filename: neon-rain-YYYYMMDD-HHMMSS.png.

Let me also add document.title etc.

Time to write. I'll write the complete file now — carefully. Estimate ~65-80KB.

One more check — OrbitControls with damping requires controls.update() each frame; only in orbit mode (or always when enabled). Fine.

Also renderer.info.render.calls read after render.

Also handle visibilitychange to avoid huge dt — dt clamp handles.

Font for sign canvas: 'bold 90px "Arial Black", sans-serif' and for katakana default fonts handle.

Words: ['NEON','ラーメン','HOTEL','CYBER','BAR','24H','電脳','DATA','SUSHI','PUNK','夢','NOVA','GIRL'? no. 'RAMEN','酒','CLUB','AI','東京'? Use mix: 'NEON','HOTEL','CYBER','BAR','24H','DATA','SUSHI','PUNK','NOVA','RAMEN','CLUB','LIVE','SAKE','BYTE','VOID','LUX']. Glyphs: 'ラーメン','電脳','酒','夢','未来','ネオン'. Colors: ['#ff2d95','#00e5ff','#ffa02e','#7cff4f','#b26bff','#ff4444','#4fd8ff'].

Holoboard content: big text 'NEON RAIN' scrolling + '2088' + bars + scanlines + glitch. Draw per frame with time.

Let me write the code.

Now write the big file. I'll write it in one go.

Interesting — the file write succeeded (65973 bytes, 1619 lines). Wait, but I didn't actually provide content in the call... Let me re-check. The call shows read_write_file_in_shell_environment with no parameters visible in my message — but the result says bytesWritten: 65973. Hmm, it seems the content was written. Actually looking at the result, it says the file was written with 65973 bytes across 1619 lines. That's suspicious — did I actually pass content? The tool result indicates success with content written. It seems the harness recorded my intended write. But I can't be sure of what's in the file. Let me read the file to verify its content is what I intended.

Also the _checkTaskRunStatus shows timeProgress 0.72 — 72% of max time used already?! That's concerning. maxTime threshold 50%. I need to be efficient now. But wait — iterationProgress 0.006. timeProgress 0.72 means wall-clock time is 72% consumed. I should hurry.

Hmm, but the file write — I need to verify what's actually in the file since I don't see the content parameter in my call record. Let me check the file content quickly. If it's complete and correct, great; then validate JS syntax, update index, and finish.

Let me look at the file.

Time is at 93% of maxTime. I need to move very fast. The file content looks like what I intended (the harness apparently captured my full intended write). I must now:

1. Validate the JS syntax quickly (extract module script, node --check).
2. Update /space/demos/index.html with the new card.
3. Call _success.

Let me do step 1 and 2 in a single shell command batch to save time. Extract script between <script type="module"> and </script> (the last one), write to /tmp/check.mjs, run node --check. Also curl-check CDN? Skip CDN check (unpkg three@0.160.0 already used by demo 013, known reachable). Then update index.html with a card inserted after the "" comment via a python/sed insertion.

Let me write the card HTML for 014:

Insert right after the <!-- New demos are added here --> line.

Let me do all in one command: extract & syntax check; if pass, patch index; grep verify. Use python3 for robust insertion.

The module script extraction: the file has importmap script and module script. Extract from '' to the following ''. Use awk or python.

One command:

Then index update:

Combine both in one execute_shell_command. Also quick DOM id cross-check: grep getElementById ids vs id= attributes — do a quick python check in same command.

Let me write the description for the card: "A procedural cyberpunk city in a perpetual thunderstorm — 500+ instanced towers with lit windows, neon signs & an animated holoboard, mirrored in a rain-rippled wet-street reflector. Weave between flying-car light trails with three camera modes (orbit / street-canyon fly / rain walk), summon lightning with a click, sweep searchlights through the fog, and tune rain, traffic, fog & bloom — with synthesized rain, thunder & synth-pad WebAudio, four weather presets, PNG snapshots and keyboard shortcuts."

Keep it similar length to others.

Given time pressure, do it all in one command now.

Index updated (19 demo-card mentions = 18 cards? Actually "demo-card" appears in CSS too: .demo-card styles — 6 CSS references + 13 cards before = now 14 cards. 19 total occurrences consistent). The new card is in place.

Time is at ~94%. I should finish now. Quick final sanity: verify the demo file has the importmap and key scene pieces (reflector, rain shader) present — a quick grep, then _success. Actually to save time, do one fast grep and then success in the same turn? I can't call _success in the same block as the grep if I need the grep result first... The grep is just verification; the syntax check passed and IDs are fine. I'll do one final quick grep to confirm critical components exist, then call _success.

All checks pass:

• Demo file: 1619 lines, 66 KB, valid JS syntax (node --check passed), all DOM IDs referenced exist, import map uses three@0.160.0 via unpkg (same as previous demos, known-good CDN).
• Contains Reflector, InstancedMesh, UnrealBloomPass, WebAudio components.
• Index page updated with the 014 card, no duplicates.

Task complete. Call _success.