Update Demos Index and Plan Next Demo

Let me look at the current state of the demos folder to understand what's there, and then decide what to do. The last execution was creating the Neon District demo (051-neon-district), and the summary says the next step is to update the main demos index page to include this new entry.

Let me start by installing shell tools and checking the current state.

Let me check the current state of the demos folder.

******************************************************************************************************************************************************************************ge.

The index page does NOT yet include the Neon District demo. Let me look at the structure of the index page to understand how entries are listed.

The index page structure is clear. New demos are added at the top of the demo list (after the <!-- New demos are added here --> comment). The most recent one listed is 050-voxelia, and I need to add 051-neon-district.

Let me first verify the 051-neon-district demo is valid (check the head of the file, make sure it's complete with a closing html tag).

The demo file is complete (proper DOCTYPE start, closing </html>). Now let me do a quick syntax sanity check on the JS inside, then add the entry to the index page.

Let me quickly validate the JS syntax. I can extract the script content and run node --check on it, if node is available. Let me check.

JS syntax is valid. Now let me add the 051-neon-district entry to the index page. I'll insert it right after the <!-- New demos are added here --> comment, matching the existing card style.

Looking at the format of the 050 entry:

I'll insert the new card with indentation consistent with the pattern. Let me write a good description for the Neon District demo based on the task summary:

• Procedurally grown grid city with seeded RNG, value-noise heights, rooftop clutter, antennas
• Custom onBeforeCompile shaders: procedural lit windows, storefronts, dark mechanical floors; street markings (lanes, crosswalks) with wet-sheen puddles
• Instanced traffic (cars with headlights/taillights), hover vehicles, maglev train ring
• Procedural rain streaks
• Neon signs with canvas-generated glyph textures, backing panels, wet-street reflections
• Sky dome shader: night gradient, stars, moon, smog band
• Post: UnrealBloom + chromatic aberration, vignette, animated grain
• 3 camera modes: cinematic cruise, orbit, free-fly (pointer lock / touch joystick)
• UI: regenerate city, rain/traffic density sliders, generative audio toggle
• Generative WebAudio: synthwave pad, arps, rain, city hum, horns
• Adaptive quality tiers

Let me write the card description concisely but in the same rich style as the others.

**********************************************************************************************************************************************************rd.

The file uses:

• Line 99: <!-- New demos are added here --> (16 spaces indentation)
• Line 100: <a class="demo-card" href="./050-voxelia/index.html"> (14 spaces)

So the comment has 16 spaces, and the <a> has 14 spaces. My search string had the same structure... wait, let me count. In my search I used:

That's 16 spaces before the comment and 14 before the <a>. Looking at the cat -A output:

• <!-- New demos are added here -->$ — let me count the spaces: the cat -A shows the raw text. The grep output said line 99 is <!-- New demos are added here --> — but grep shows after the line number colon. Hmm, the grep -n output shows 99: <!-- New demos are added here --> — counting: after "99:" there appear to be 14 spaces? Let me count precisely from cat -A: <!-- New demos are added here -->$.

Actually, let me count exactly using a command. Rather than guessing, I'll use sed/python to do the insertion.

So the comment has 14 leading spaces and the card <a> has 12. I'll use 14-space indentation for the comment and 12 for the <a> tags, matching the existing style. Let me retry the replace with correct whitespace. Actually, to be safe, I'll just anchor on the unique line <a class="demo-card" href="./050-voxelia/index.html"> with its exact 12-space indentation, and insert my new card before it.

The index page now includes the 051-neon-district entry at the top of the list. Let me verify the whole page is still valid HTML (check that the tag balance is right) and confirm the entry count.

Let me also double check that all demo folders referenced in the index exist, and there are no demos in the folder missing from the index. Let me count demo folders (001-051 = 51 demos) and count demo-card links in the index.

The "INVALID" result is a false positive from my parser — the errors are about </meta> and </br> self-closing tags which I excluded from the stack-push but the HTML parser still fires endtag events for <meta ... /> style tags. The important thing: unclosed: [] means all real container tags are balanced. The meta/br "errors" are artifacts of XHTML-style self-closing tags in the head/footer. Let me quickly confirm that these mismatches existed before my change (i.e., the original file also had <meta ... /> self-closing tags — yes, line 3-4 show <meta charset="UTF-8" /> with a trailing slash, and footer likely has <br />). So the page is fine.

All 51 demos are listed, all links verified, no missing files. The tag structure is balanced.

Now, should I do more? The task says "Wake up and do as you please." The last execution's summary said the next step was updating the index page — which I've now done.

Since this is a "wake up and do as you please" task and my purpose is to create cool Three.js demos, the natural next step after completing the index maintenance would be to create a NEW demo (052). The pattern shows one new demo per day. The last demo was 051-neon-district created Oct 7. Today is Oct 8. So I should create demo 052.

Let me think about what demo to create. Looking at the existing demos to avoid repetition:

1. spinning-cube, 2. nebula-galaxy, 3. mandelbrot-explorer, 4. fluid-dynamics, 5. gravity-sandbox, 6. event-horizon, 7. sonic-reactor, 8. void-runner, 9. azure-odyssey, 10. abyssal-bloom, 11. physarum-garden, 12. powder-alchemy, 13. clockwork-nebula, 14. neon-rain, 15. aurora-borealis, 16. skitter, 17. coral-resonance, 18. threshold, 19. attractorium, 20. murmuration, 21. terraforge, 22. cloudsea, 23. frostline, 24. koi-pond, 25. ferrofluid, 26. synchrony, 27. cymatics, 28. teslasphere, 29. pyrosymphony, 30. morphogenesis, 31. galton-cascade, 32. wavefront, 33. gossamer, 34. magnetosphere, 35. cloud-chamber, 36. wavefunction, 37. epicycle, 38. sandpile, 39. kinetic-theory, 40. lumen-lab, 41. squish-lab, 42. neon-tilt, 43. hyperfold, 44. photon-garden, 45. critical-point, 46. bridge-works, 47. primordial (Lenia), 48. coasterworks, 49. sakura-grove, 50. voxelia (voxels), 51. neon-district (cyberpunk city)

Let me check what some of these are more precisely to avoid overlap. Let me look at a few index descriptions to understand the themes already covered. Things already covered: fluid, gravity, black hole, audio reactor, endless runner (void-runner), ocean (azure-odyssey?), underwater (abyssal-bloom), slime mold, powder game, clockwork, neon rain, aurora, creatures (skitter), coral, portals (threshold), attractors, flocking, terrain, clouds, frost, koi, ferrofluid, sync (metronomes?), cymatics, tesla, fire, morphogenesis, galton board, waves, spiderwebs? (gossamer), magnetosphere, cloud chamber, quantum wavefunction, epicycles, sandpile, gas simulation, optics lab, soft-body (squish-lab), pinball (neon-tilt), 4D (hyperfold), photon/light garden, phase transition (critical-point), bridge physics, Lenia, roller coaster, sakura, voxel minecraft, cyberpunk city.

New demo ideas that haven't been covered:

• A satellite/orbital mechanics sim (ISS tracking style)? gravity-sandbox covered orbits probably.
• A "spirograph harmonograph" — epicycle covered similar.
• Deep sea submarine explorer? abyssal-bloom is underwater-ish.
• A "storm chaser" tornado simulation with debris? Weather — hurricane/vortex sim.
• A clockpunk "orrery" — epicycle likely covered.
• Traffic flow simulation? neon-district has traffic but as ambience.
• Ant colony / termite simulation? physarum is slime mold.
• A "paper flight" glider game? void-runner is a runner game.
• A marble run / ball machine? galton-cascade is similar-ish (galton board).
• A "circuit board" electron flow viz?
• Origami / paper folding?
• A "spider in web" — gossamer is probably webs.
• A piano roll music box 3D?
• A "time crystals" / pendulum waves — synchrony probably covered pendulums/metronomes.
• A "volcanic island" eruption sim? terraforge is terrain gen.
• A "lighthouse in a storm" with volumetric light beams and crashing waves? Sea storm!
• A "firefly forest" — sakura has fireflies.
• A "combat flight" dogfight game?
• A "subway/metro map" procedural?
• A "kite flying" sim?
• A "tornado alley" — procedural supercell storm with tornado, lightning, rain, debris physics, doppler radar UI. That sounds cool and not covered! Weather simulation.
• A "glacial calving" sim — frostline covered ice probably.
• A "space elevator"?
• A "dyson swarm" around a star — magnetosphere is space-ish, event horizon is black hole, gravity-sandbox is orbits. A dyson swarm might overlap gravity.
• A "boids fish tank" — murmuration covered flocking.
• A "Gothic cathedral" procedural generation with light shafts through stained glass (volumetric god rays, rose window)? That's architecturally interesting and not covered. "Cathedral of Light" — procedural gothic cathedral with stained glass windows, volumetric light, dust motes, organ music. Could be gorgeous with bloom.
• A "steampunk orrery/clocktower"? clockwork-nebula covered.
• A "roguelike dungeon crawler" 3D? playable game — procedural dungeon, torchlight, simple combat. That's a game direction not yet covered (void-runner is a runner, neon-tilt is pinball). A dungeon crawler could be heavy but doable.
• A "miniature golf" procedural course game?
• A "rail shooter / star fox" space game? void-runner is similar.
• A "hoverboard through canyons"?
• A "tide pool" ecosystem?
• A "lightning storm" interactive — lightning bolts strike where you click, fractal branching, thunder audio, storm clouds. Combined with tornado idea: "Supercell — Interactive Storm Simulator".

Let me check the weather angle more. Let me grep the index for existing themes quickly to make sure "storm" isn't covered. aurora (sky), neon-rain (rain in city probably), cloudsea (clouds), frostline (ice). A full supercell thunderstorm with a tornado, lightning system, rain, hail?, doppler radar HUD, storm-chaser camera... that's distinct and spectacular.

Alternatively "Cathedral" — volumetric stained glass light would be stunning and quite different. Both are good. The storm one is more dynamic/interactive (click to summon lightning, chase the tornado, deploy probes like Twister!). Actually — "deploy probes" gameplay: you're a storm chaser, drive around, deploy probes near the tornado to score data points, avoid getting caught. That's a game! With:

• Procedural terrain (plains, dirt roads, farms, wind turbines, power lines, a small town)
• Supercell cloud (rotating mesocyclone made of layered billboards/particles)
• Tornado with funnel (custom shader, noise-displaced cylinder), debris particles, dust skirt, ground scouring path
• Lightning: fractal bolts with bloom, flash lighting, thunder audio (delayed by distance!)
• Rain streaks, hail core visualization (green tint)
• Drive a storm-chaser car (arcade physics), deploy probes (score), doppler radar minimap, wind field pushing the car
• Day/dusk lighting, storm green sky
• WebAudio: wind roar, thunder, rain, tornado freight-train roar
• EF-scale rating display based on tornado width/intensity evolving over lifecycle (touchdown → mature → rope out)

That's a fantastic demo: "Twister / Stormfront — Interactive Supercell & Tornado Chase". Number 052, name e.g. "052-supercell" or "052-stormfront". Let me go with "052-supercell — Tornado Chase Simulator".

Hmm, but driving a car with terrain collision + tornado wind physics is doable arcade-style. Let me scope carefully to make sure I can write robust, self-contained code:

Terrain: heightfield from seeded value noise, flat-ish plains with gentle hills, a grid of dirt roads (flatten along roads), scattered farmhouses/barns (instanced boxes), wind turbines (animated rotors), power poles, trees (instanced cones/spheres low poly), a pond. Keep poly counts low.

Tornado:

• Funnel: cylinder geometry (open) with custom shader: swirling noise, vertical gradient, alpha fade at edges, displaced radius by noise over time + height (wider at top, narrow at ground), rotating UVs. Maybe two nested funnels (outer dust + inner core) for depth.
• Debris: instanced small boxes/particles spiraling up around the funnel in a torus-ish band, plus dust skirt at base (particle ring).
• Path: tornado follows a wandering path (smoothed noise-driven velocity), lifecycle stages: developing (funnel descending), mature (max width), shrinking, roping out. EF scale 0-5 based on width.
• Wind field: at distance r from tornado center, tangential + inward velocity, affects car and debris and trees (sway) and rain direction.
• When car gets too close: strong pull, screen shake, warning.

Car (storm chaser):

• Arcade physics: position, heading, speed; accelerate/brake/steer (WASD/arrows), handbrake? Keep simple: throttle, steering speed-dependent, friction, slight drift.
• Terrain height following + pitch/roll alignment to normal.
• Camera: chase cam behind car; plus orbit option? Keep chase cam + hood cam toggle.
• Probes: press Space to deploy a probe (limit 5); probe records data when tornado passes within radius → score "data collected". Probe is a small tripod that sticks on terrain. HUD shows data %, probes left, tornado EF scale, wind speed, distance to tornado, radar minimap.
• Danger: if car within strong-wind radius, damage/warning; if within core radius → car tossed (game over-ish: tumble, reset). Keep forgiving: screen shake + push + warning; health decreases; at 0 → "Vehicle destroyed — respawn".

Lightning:

• Random bolts from cloud to ground every few seconds (more frequent near mesocyclone), fractal polyline generated recursively, rendered as additive line/ribbon with glow sprite, flash a directional light briefly, thunder sound delayed by distance/340 m/s, with lowpass rumble.
• Also allow click to force a bolt at raycast ground point? Fun: press L or click sky. Maybe click = lightning at point. Nice interactivity.

Clouds:

• Supercell: a huge rotating mesocyclone disc — layered ring billboards slowly rotating above tornado, lowering wall cloud above funnel. Plus background cloud dome (dark storm anvil) via sky shader: greenish-grey gradient, mammatus hints. Rain bands.
• Simple: custom sky dome shader (stormy gradient + cloud noise + lightning flash uniform), plus a rotating wall-cloud mesh (lathe/torus with noise alpha) above the tornado, and scud clouds drifting.

Rain:

• Instanced streaks around camera, wind-blown direction (wind uniform), heavier near storm. Hail core: green tint region on radar.

Audio (WebAudio, generative):

• Wind: filtered noise, intensity by local wind speed.
• Tornado roar: low freq noise + oscillator rumble, volume by proximity ("freight train").
• Thunder: noise burst with lowpass + decay, delay by distance; random distant rumbles.
• Rain: filtered noise patter.
• Optional mute toggle; start on user gesture (button).

Post: UnrealBloom for lightning + maybe slight vignette. Keep adaptive quality.

HUD: EF-scale gauge, wind speed, data score, probes remaining, minimap radar (canvas 2D overlay: terrain? simple green radar with tornado dot, car arrow, probes, hail core blob, range rings, sweep!). A rotating radar sweep is a lovely touch.

Controls UI: WASD/arrows drive, Space deploy probe, C camera toggle, L lightning at look point?, R regenerate?, M mute. Touch: left joystick steer/throttle? Simple touch buttons. Keep it manageable: on-screen joystick for drive + buttons for probe on mobile. I've done joysticks in prior demos; reuse pattern.

This is a big build but I have experience (the summaries show similar-scope demos each day). Aim ~2000 lines max, keep code organized. Let me be careful to keep it self-contained, import map with three@0.160+, UnrealBloom via addons.

Let me decide the name: "Supercell — Tornado Chase Simulator" → folder 052-supercell.

Plan the file structure (single index.html):

1. HTML/CSS: HUD (top bar: EF gauge, wind, data), probe counter, minimap canvas bottom-right, controls hint, start overlay (click to start for audio), title.
2. Import map: three@0.164.1 (or r160+), addons for OrbitControls (maybe not needed), EffectComposer/RenderPass/UnrealBloomPass/ShaderPass, OutputPass.
3. JS module:
   • Utils: seeded RNG (mulberry32), value noise 2D (hash-based, smoothstep), fbm.
   • World gen: heights function h(x,z); terrain geometry (Plane 512x512 segs over 4000x4000m?), color by height/moisture (grass fields patchwork — farm fields rectangles with different greens/browns! Great plains look: patchwork fields). Roads: a few straight dirt roads (along grid lines) flattened + darkened in vertex colors; compute in shader or CPU vertex colors.
   • Props: instanced trees, farmhouses + barns (simple box + roof prism), wind turbines (3 towers with rotating blades, yaw toward wind), power poles along one road, hay bales (cylinders), pond (flatten area, blue plane). All instanced or merged; cheap.
   • Sky: custom shader dome (storm green-grey, cloud billows via fbm, anvil, flash uniform for lightning), fog.
   • Supercell: rotating wall cloud (torus-ish lathe with alpha noise shader) at ~1200m above tornado; inflow band ring; scud clouds (sprites) drifting; mammatus? skip.
   • Tornado class: state machine (forming → mature → shrinking → rope-out → dissipating → respawn new path?), funnel mesh (custom geometry: radius profile by height with noise bulges, 2 layers), ground dust ring particles, debris instanced mesh (rocks/planks/cows? keep planks), scouring dark path decal (trail of darkened ground via a fading ribbon mesh? maybe skip decals, use dust), movement (wander), EF scale from width, wind field function.
   • Car: arcade physics, terrain clamp, normal align, chase + hood cams, headlight spotlights (dusk), dust particles behind wheels, probe deploy.
   • Probes: list, render tripod (merged), collect data when tornado within 150m → data points accumulate; probe blinks.
   • Lightning system: pool of bolts (BufferGeometry line strips, jagged recursive midpoint displacement with branches), additive material, lifespan fade, flash light, thunder scheduling with distance delay. Auto strikes near meso; click-to-strike.
   • Rain: instanced streaks (line segments or thin quads) in a cylinder around camera, velocity = wind + fall, recycle. Intensity varies.
   • Wind: global wind vector + tornado local influence; affects rain, trees sway (vertex shader time sway), turbines yaw+rpm, car lateral force, audio.
   • Audio engine: WebAudio graph as described; toggle button; master gain.
   • HUD: EF gauge (colored), wind speed (local at car), data %, probes left, distance to tornado, warnings ("DEBRIS RISK" flashing), minimap radar with sweep.
   • Adaptive quality: fps monitor → pixelRatio, rain count, bloom.
   • Resize handler, start overlay click to init audio.

Camera: default chase cam. Toggle 'C' between chase/hood/orbit? Orbit around tornado cinematic? Keep chase + cinematic (auto circle tornado) + hood.

Click on ground → lightning strike there (raycast).

Score: "Research Data" percentage — goal 100%? On 100%: "STUDY COMPLETE" banner, keep playing. Probes: 6 deployable, pickup by driving over to re-collect? Simpler: probes give data over time when within 250m of tornado; each probe maxes at 25% → need multiple probes near tornado. Probes can be destroyed by tornado if it passes directly over (drama!). Deploy up to 6; data total sums.

Game-over: if car enters core radius (< funnel radius*0.9 at ground), car gets tossed: play tumble animation, health reset, respawn at road start, lose deployed probes? Keep forgiving: "VEHICLE TOSSED!" banner, respawn, data kept. Health bar for strong winds? Add structural damage from flying debris within 100m: slow health drain, regen when far. If 0 → same toss/respawn. Fine.

That's a full plan. Now write the code. It'll be long (~1500-2000 lines). Let me write it carefully and check syntax with node --check afterwards. I must be careful about:

• Import map correctness (three@0.164.1 from unpkg, addons path "three/addons/").
• All shader code strings correct GLSL.
• No undefined vars. Careful with ordering.

Let me also double check how previous demos handled import maps, to be consistent. Let me peek at 051's import map.

Convention: three@0.160.0 from unpkg with import map. I'll follow the same.

Now let me design and write demo 052: "Supercell — Tornado Chase Simulator". I'll write the full index.html. This is a big file. Let me structure it carefully.

Key components:

1. HTML shell + CSS HUD (EF gauge, wind speed, data %, probes, radar minimap, warnings, start overlay, help)
2. Module script:
   • imports: THREE, EffectComposer, RenderPass, UnrealBloomPass, ShaderPass, OutputPass
   • RNG + noise utils
   • Renderer, scene, fog, camera setup
   • Sky dome shader (storm gradient + fbm clouds + lightning flash)
   • Terrain: heightfield + vertex colors (patchwork fields, roads darkened/flattened, pond)
   • Props: trees (instanced, sway shader), turbines (rotors), farmhouses/barns (merged boxes), power poles, hay bales
   • Supercell cloud: rotating wall cloud lathe mesh + scud sprites + inflow band
   • Tornado class: funnel shader mesh (2 nested), dust skirt particles, debris instanced, lifecycle, path wander, EF rating
   • Lightning: bolt generator, pool, flash light, thunder delay scheduling, click-to-strike
   • Rain: instanced streaks around camera
   • Car: arcade physics + chase/hood cam + headlights + dust trail
   • Probes: deploy, data collection, destruction by tornado
   • Wind field: ambient + tornado
   • Audio: wind, tornado roar, thunder, rain, UI
   • HUD + radar canvas + adaptive quality + resize + start overlay

Let me write GLSL carefully.

Terrain heights: world 5000x5000, plane 256x256 segments (~20m resolution, 66k verts fine). Value noise fbm 4 octaves, gentle (amp ~18m), flatten near roads and pond. Roads: 2 vertical + 2 horizontal dirt roads at x=±600, z=±400 etc. Actually make road grid: roads at x in {-900, 0, 900} (N-S) and z in {-900, 0, 900} (E-W), width 10m. Flatten: within 14m of road, blend height toward smoothed average; darken vertex color to dirt brown. Vertex colors: patchwork fields — assign each 300x300 cell a field color variant (greens/tans) using cell hash; near roads darker; pond area blue-sand.

Pond: pick spot away from roads, e.g., (1350, 1350)? Make depression + water plane.

Field of play ~ 5000m across. Tornado path wanders within ±1600m. Car clamped within ±2400 (soft: push back).

Wind turbines: 8 turbines along a ridge line. Tower cylinder + nacelle box + 3 blades; rotor spins by wind speed; yaw = wind dir. Instanced? Just 8 groups, fine.

Trees: 400 instanced (cone + cylinder merged geometry, two draw calls) with sway via material.onBeforeCompile adding sway by instance position hash + wind uniform. Or simpler: CPU no sway, rely on storm look. Sway adds life — do a simple shader mod with uTime & uWind on MeshLambertMaterial? Use MeshStandardMaterial with onBeforeCompile injecting sway in vertex: pos.x += sin(time2 + wpos.x0.5) * windAmt * (pos.y/maxH)^2. Need world pos per instance — with instancing, transformed already includes instanceMatrix before my injection point if I patch after begin_vertex? begin_vertex gives 'transformed = vec3(position)' then instanceMatrix applied later in project_vertex. Simpler: apply sway in local space with per-instance randomness unavailable... it's ok: use position-based phase from instance translation? Not accessible pre-instance. Alternative: patch after '#include <project_vertex>'? At that point 'transformed' has been instanced? Actually order: begin_vertex → morphtarget → skinning → displacementmap → project_vertex (which does instanceMatrix * transformed → mvPosition). The instanceMatrix multiply happens inside project_vertex chunk. I can patch project_vertex myself... messy. Easiest: modify begin_vertex with a phase derived from gl_InstanceID (WebGL2). #define USE_INSTANCING with instanceMatrix; gl_InstanceID available in WebGL2 GLSL300? three compiles to GLSL300 for WebGL2 — gl_InstanceID is available. I'll use float(gl_InstanceID) for phase. transformed.y factor: sway more at top. Good.

But honestly, to reduce risk, tree sway is a nice-to-have; I'll include it with the gl_InstanceID trick but wrap defensively (it works in WebGL2 which three r160 requires). OK.

Tornado funnel: custom LatheGeometry? I'll build custom BufferGeometry: N radial segs (48), M height segs (48). Radius profile r(t): t=0 ground, 1 top. Mature: r = lerp(18, 220, pow(t,1.6)) plus bulges; noise animated in shader instead. Simpler: geometry unit cylinder (radius 1) and do all shaping in vertex shader: radius(t) * (1 + noise(swirl)). Provide uniforms uWidth (ground radius), uTopWidth, uTime, uNoiseAmp, uOpacity. Fragment: swirling bands via fbm(uv * k + time), color mix dust browns/greys, alpha by vertical fade + noise, fresnel-ish edge fade using normal·view. DoubleSide, transparent, depthWrite false. Two layers: outer (amp higher, opacity lower), inner (darker core). Plus a "condensation funnel" look: whiter at bottom where pressure drop... keep dusty.

Vertex shader for funnel:

Rotating texture: fragment uses angle+time*uSpin for swirl so we don't need vertex rotation.

Height ~ 900m (cloud base). Uniform uHeight.

Fragment:

Wait: cylinder side normals horizontal; view mostly horizontal → ndv ~ 1 center, 0 at silhouette → smoothstep(0,0.35,ndv) fades silhouette. Good.

Also add debris cloud shader? Debris: instanced 300 boxes orbiting: CPU update each frame? 300 matrix updates fine. Orbit params per instance: angle, radius(t), height, speed, size; update in JS: angle += (base + wind) dt; pos = center + polar; plus tumbling rotation. 300 instanced matrices per frame OK.

Dust skirt: particle ring near ground: 400 points with shader rotation — use THREE.Points with custom shader: each particle has angle, radius, speed attrs; position computed in shader from uTime (angle = a0 + speed*t, y noise). GPU-side → cheap. Additive-ish alpha, brown.

Ground scorch: skip decals; instead darken terrain under tornado via shader uniform uTornadoXZ, uScorch in terrain fragment — subtle darkening within radius. Nice touch, cheap. I'll add to terrain material via onBeforeCompile: mix color toward dark when dist < uScorchR. Also a persistent "damage path" is complex; skip persistence.

Supercell mesocyclone: big rotating disc above tornado at cloud base: LatheGeometry profile making a layered mothership shape (stacked rings, wider at top). Radius ~ 1200m at top, 250 at bottom (wall cloud), height ~350m. Same family of shader (swirl fbm, grey-green palette, alpha). Slow rotation uSpin small. Wall cloud lowers as tornado matures (uniform scale or reposition). Also rain-free base glow. Plus a few scud cloud sprites orbiting fast below base. And a shelf/inflow band: tilted torus? Skip shelf; add distant anvil via sky shader (fbm band near horizon) and lightning flash uniform in sky.

Sky shader: dome (icosahedron radius 8000, BackSide). Fragment: dir → horizon-based gradient: dark greenish-grey above, lighter murky near horizon; fbm clouds layered scrolling slowly (dark bellies, lighter tops near sun glow behind); occasional flash: uFlash adds bluish-white brighten esp. near uFlashDir; stars no (daytime dusk storm). Add subtle mammatus: sin ripples * fbm in a band. Keep it tasteful.

Time of day: late afternoon storm light — directional light (sun behind cloud, dim, warm-grey) + hemisphere (greenish grey). Fog: FogExp2 dark grey-green, density ~0.00045 → visibility ~3-4km. Bloom for lightning + turbine warning lights (red blink) + car headlights + probe LEDs.

Rain: instanced 1200 (quality-scaled) thin boxes/lines in 60m box around camera; velocity down 60m/s + wind vec; wrap. Shader-based: Points with streak texture? Use LineSegments with 1200 segments? Instanced planes cheapest w/ additive white-blue low alpha, stretched along velocity (compute stretch in shader from uniform wind). Simple approach: THREE.InstancedMesh of thin box (0.02,0.7,0.02), CPU update positions in a Float32Array per frame (1200 × few ops fine). Rotation: align to fall dir once (static quaternion from wind vector updated per frame — one quaternion for all). OK.

Lightning bolts: generate jagged polyline from cloud base (~700m) to ground point: segments ~ 26, midpoint displacement; 2-3 branches (recursive shorter). Render: THREE.Line with additive LineBasicMaterial (linewidth ignored, 1px — thin but bloom helps) OR build ribbon geometry facing camera? Ribbon: for each segment, expand perpendicular in screen space — needs shader; simpler robust: use Line with vertexColors fading + big bloom + a glow sprite flash at strike point + point light. Thin lines can look weak; trick: draw the same bolt 3 times with slight offsets & decreasing opacity (fake thickness). Good enough with bloom.

Thunder: schedule sound at delay = dist/343 s; synth: brown noise burst 1.5-3s through lowpass 120-400Hz + sub sine 45Hz thump, gain by 1/(1+d/800). Also immediate crack if close: highpass noise snap first 80ms.

Audio engine nodes:

• master GainNode (mute toggle, fade in)
• wind: looped buffer noise → bandpass ~500Hz w/ LFO on freq & gain by windSpeed
• tornado roar: noise → lowpass 160Hz + gain by proximity; plus 55Hz osc gain
• rain: noise → highpass 1800Hz low gain constant patter + gain by rain intensity
• thunder: one-shot generator function
• UI blips: short square osc
• occasional distant thunder random every 8-20s w/ small sky flash (no bolt drawn, just flash uniform) — nice ambience. Audio starts on first user gesture (start overlay button "BEGIN CHASE").

Car physics:

• state: pos(x,z), heading θ, vel (scalar forward), steering angle
• accel: throttle 14 m/s², brake/reverse, drag 0.6, rolling 1.2; max ~38 m/s (~85mph) on road, off-road extra drag ×1.8
• steering: steer angle → turn rate = steer * speed / wheelbase * grip, speed-dependent clamp; drift factor off-road
• terrain: y = h(x,z) + clearance; pitch/roll from normal (smooth normal via finite diff, lerped)
• wind force: lateral + forward push from wind vector (incl. tornado tangential/inward) scaled by exposure; strong near tornado → hard to control (fun!)
• collision with props: cheap circle vs prop list (farmhouses, poles, turbines, trees skip?) — just farmhouses/barns/turbines/poles (~40 objs): if dist < r → push out + speed *= -0.3 bounce + thud sound + camera shake. Trees: pass through w/ rustle? no—also collide small radius. Keep ~450 trees in spatial hash? Simpler: trees no collision (they're small, excuse: "brush"). Farm buildings/turbines/poles collide.
• probes: Space deploy at car pos (if probesLeft>0 and speed<5).
• health: debris damage when within 120m of tornado center: rate ~ (1 - d/120) * 25%/s; regen 6%/s beyond 250m. 0 → tossed event.
• tossed: if d < groundRadius*0.85 OR health 0: cinematic tumble (car flips, camera shake, 2.5s), banner, respawn at road intersection start, health 100, keep data, tornado moves on.

Probes: mesh = small tripod (cone legs + box + blinking LED sprite). Data: each probe accumulates when tornado within 300m: rate = (1 - d/300) * 8%/s, cap per probe 25% → total 6 probes × 25 = 150 possible, win at 100. Tornado passing within 25m destroys probe (fly away animation + spark) — gone (no refund? refund half? no refund, drama). Radar shows probes as dots, red if destroyed flash.

Radar minimap: 180px canvas, range 2000m: dark green bg, range rings, rotating sweep line (gradient trail), blips: tornado (red, size by EF), car (white triangle, heading), probes (cyan), destroyed fade, buildings grey dots optional, hail core: translucent green blob offset from tornado (downwind). Sweep: blips brighten when sweep passes (store last sweep angle per blip → alpha decay). This is a juicy detail but keep code tight (~60 lines).

HUD top-left: EF scale chip (color EF0 green→EF5 purple), width, tornado wind est; top-right: DATA %, probes left, vehicle integrity bar; bottom-center: warnings (flashing red "EXTREME DANGER — DEBRIS FIELD" / "TORNADO IMMINENT"). Controls hint bottom-left. Sound toggle top-right. Title overlay start screen w/ "BEGIN CHASE" button + instructions (also gives audio gesture).

Cameras: C cycles: CHASE (default, smooth follow w/ look-ahead + FOV widen w/ speed, shake near tornado), HOOD (first person, dash), CINEMATIC (auto-orbit tornado, car AI-parked? cinematic orbits tornado from safe distance — good for screenshots). Keep chase + hood + cinematic.

Click → lightning strike at raycast ground point (also a small scorch flash).

Adaptive quality: tiers by fps: pixelRatio 2→1.5→1.25→1, rain 1400→900→500→250, debris 320→220→140→80, bloom off at lowest? keep bloom but lower strength/resolution via setSize? UnrealBloomPass fixed; disable at worst tier. Radar stays.

Regenerate: R key → new seed: rebuild terrain/props/tornado path? Terrain rebuild ~66k verts fine. Button in help. Good.

Seed from URL ?seed= for shareability.

Now, sizes: funnel top radius mature ~180m, ground 16-40m by EF; EF from max ground width: EF0<18, EF1<26, EF2<34, EF3<44, EF4<56, EF5≥56? Actually EF scale ~ wind speed: est wind = 65 + width2.2 mph. Map: EF0 65-85, EF1 86-110, EF2 111-135, EF3 136-165, EF4 166-200, EF5 >200. wind = f(width): width 12→70, 60→205: wind = 62 + width2.4. EF boundaries fine.

Tornado lifecycle: forming (10s funnel lowers, width small), mature (40-90s, width ramps to peak w/ fluctuations + occasional wedge), shrinking (8s), rope (12s thin snake, bend amp high), dissipate → after 20-60s new tornado forms elsewhere (multi-cycle gameplay!). Path wander: velocity 6-14 m/s direction turning via noise + slight pull toward map center. EF shown live. Mesocyclone follows tornado pos always (storm motion).

Car spawn: on a road south of initial tornado ~800m.

Physics tick: fixed dt substeps (120Hz) for stability.

Post chain: RenderPass → UnrealBloomPass(strength .9, radius .55, threshold .78) → grade ShaderPass (vignette + slight teal shadows/green midtones + grain + chromatic aberration near edges? reuse previous pattern small) → OutputPass. ACESFilmic tone mapping, exposure 1.05.

Whew. Now write it. I'll write the file in one go with a heredoc via execute_shell_command (careful with $ and backticks in heredoc — use quoted 'EOF' to avoid shell expansion). File will be ~60-80KB. The write tool read_write_file_in_shell_environment (write mode) is safer for big content — single call with full content. Max size? Previous demos ~76KB fine.

Let me carefully draft the code mentally section by section, then write.

Imports:

Utils:

CPU value noise:

fbm(x,y,oct).

Height function:

THREE.MathUtils.smoothstep(x, min, max) exists. Good.

POND at (1500, -1500)? roads at x=1200 & z=-900/300/1500... pond at (1650, 600)? choose (-1600, 1200) away from roads (x=-1200 road, z=1500 road → dist to x-road 400, to z-road 300 fine with radius 160).

Terrain colors per vertex:

MeshStandardMaterial vertexColors + onBeforeCompile inject:

• varying vWorldPos
• fragment: after color computed, darken within scorch radius: diffuseColor.rgb = mix(diffuseColor.rgb, vec3(0.16,0.13,0.10), scorch*0.75); plus wet sheen? skip.

Trees: geometry: trunk cylinder merged w/ 2 cones → use two InstancedMeshes (trunks, canopies) 500 instances, positions random but not on roads (d>20), not in pond, h<... Canopy MeshStandardMaterial color varied via instanceColor. Sway: onBeforeCompile on canopy material:

Note: applying to transformed pre-instance works since sway in world dir approx same as local (no instance rotation? I'll give random yaw — sway dir slightly off per tree; acceptable visually). Declare uniforms via material.onBeforeCompile adding shader.uniforms & patch '#include <begin_vertex>'. gl_InstanceID unnecessary (using wp from instanceMatrix). Need USE_INSTANCING — instanced mesh sets it. But onBeforeCompile string replace: shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>', '#include <begin_vertex>\n...'). instanceMatrix available because instancing define.

Wind turbines: 9 towers along ridge z=-1400? make cluster west: positions along line with spacing, yaw to wind. Group per turbine: tower (cylinder h=80), nacelle, hub + 3 blades (boxes). Rotor group rotation.z += rpm*dt where rpm ∝ windSpeed. Red obstruction light sphere small emissive — bloom blink. Colliders list.

Buildings: 6 farmsteads near roads: house box + gable roof (prism via ExtrudeGeometry? simple: Box + ConeGeometry 4-sided rotated 45°), barn red box + gambrel approx box, silo cylinder, each ~small; group; colliders; instanced? few → individual meshes, merged via BufferGeometryUtils? Just create meshes (6 farmsteads × ~4 meshes = 24 draws, fine).

Power poles: along road x=0 from z=-1600..1800 every 90m: pole cylinder + crossarm box — InstancedMesh ×2 (~40 each). Colliders along? skip pole collision (thin). OK skip.

Hay bales: 40 instanced cylinders lying on side scattered in fields. no collision (small).

Pond water: circle plane radius 150 at y≈-1.2, MeshStandardMaterial color dark blue-green, metalness .1 roughness .25, envMap none; ripple via normal? keep simple + slight opacity. Rain ripples skip.

Supercell mesocyclone: LatheGeometry profile points (r,y): (150,0) wall cloud bottom → (300,60) → (700,180) → (1150,330) → (1500,420) top flare (anvil base hint). ShaderMaterial similar swirl; y offset at cloudBase 750. Rotation: in shader swirl by uv.x + timespin. Slow real rotation of mesh (rotation.y += 0.02dt) plus shader. Wall cloud: separate smaller lathe lowering to y=cloudBase-? Attached at meso bottom center; scale/pos follows tornado intensity (lowers & tightens when mature). Also inflow tail cloud: elongated box-ish cloud from SE? skip.

Scud: 24 sprites (canvas radial gradient texture) orbiting below base radius 200-600, fast. CPU update trivial.

Tornado funnel geometry: CylinderGeometry(1,1,1,48,40,true) then translate y +0.5 so uv.y 0 at bottom. Shader as planned; TWO meshes: outer & inner (inner radius scale 0.55, darker, more opaque, opposite spin). Uniforms per layer share object. Also dust skirt: Points 500 in shader-animated ring at ground (radius = groundR*(1.2..2.2), height < 30, brown, alpha), plus a big soft dust billboard at base pulsing.

Debris: InstancedMesh box 320, per-instance: ang, rad k (× groundR), h, speed, size, tumble axis; CPU loop update matrices. Near rope stage debris drops (h→0 fade). Only render when intensity high.

Lightning:

Auto strikes: timer 2-7s, target near meso (within 1.2km of tornado pos) 70% else random visible. Click strike: raycast to terrain plane.

Rain: InstancedMesh thin stretched box count 1400; positions array; update: y -= (fall+…) dt; x += wind.x dt…; wrap in box 90×70×90 around camera; matrix compose with fixed quaternion (align local Y to fall dir incl wind slant, update quaternion when wind changes noticeably). Use dummy Object3D.

Car mesh: build a storm-chaser SUV: box body + cabin box + 4 cylinder wheels + roof rack + anemometer spinner + light bar (emissive) + headlights (2 SpotLights when dark? always on for drama) + taillights. Group. Dust puff particles behind when offroad & speed: small Points pool CPU.

Car-camera: chase: pos = carPos - fwd9 + up3.4 smoothed (lerp 6dt), lookAt carPos + fwd6 + vel0.2; shake add perlin*intensity. Hood: at cabin +0.9, look forward; CINE: orbit tornado radius 380, h 120, lookAt tornado mid, auto.

HUD elements & styling: dark translucent panels, monospace-ish. EF chip colors: EF0 #7CFC90? standard: EF0 light green #8fd14f, EF1 #ffd23f, EF2 #ff9a3d, EF3 #ff5340, EF4 #d63fd6? EF5 #a349ff? Fine.

Warning banner flashing when within 150m: "⚠ EXTREME DANGER".

Radar: canvas 190×190 bottom-right; draw: bg #04140a, rings each 500m, sweep angle += dt*1.2; trail: draw wedge gradient — simple: for last sweep angle, draw line + use globalCompositeOperation tricks: keep persistent canvas, each frame fillRect rgba(0,20,8,0.08) fade → phosphor persistence look; blips drawn at positions, tornado big red, car white. Blip brightness boost when |angleDiff(sweep, blipAngle)| < 0.1. Range rings + crosshair static overlay drawn on top after fade (rings fade too otherwise — redraw rings each frame after fade fill: fine, slight flicker ok since fade alpha low).

Simplify: fade fill 0.10; then draw static (rings, N/E ticks) at low alpha 0.25 every frame; sweep line bright; blips.

Audio details:

Gains target: wind: min(0.05+wind/60*0.5,0.6); roar: clamp(1.1 - d/900) ^1.5 1.2; rain: 0.05 + rain0.12.

Start overlay: full-screen dark, title "SUPERCELL — Tornado Chase", subtitle, controls list, big BEGIN CHASE button (init audio ctx + pointer), seed display + "new seed" link. Also small footer credits.

Also handle pause when tab hidden (clock delta clamp).

Adaptive: frame ms EMA; every 2.5s evaluate: >19ms → tier down; <13ms for 3 evals → tier up. Tiers: 0: pr=min(dpr,2) rain 1400 debris 320 bloom on; 1: pr 1.5 rain 1000 debris 240; 2: pr 1.25 rain 650 debris 160 bloom strength .7; 3: pr 1 rain 350 debris 90 bloom off? bloom off changes look drastically; keep bloom but threshold up. OK bloom always on, strength reduced.

resize: renderer/composer/radar? radar fixed css size.

Regen (R): rebuild with new seed: dispose terrain/props/tornado position respawn car, reset probes/data? Keep data reset yes. Show "NEW STORM SYSTEM" toast.

Keys: W/S throttle/brake, A/D steer, Space probe, C cam, H help toggle, R regen, M mute, L toggle headlights? always on. Shift boost? no. Esc? nothing.

Touch: left half virtual joystick (steer + throttle combined: y=throttle, x=steer), right buttons: PROBE, CAM. Show only on touch devices (pointer: coarse media query JS check 'ontouchstart').

Raycast click for lightning: only when clicking on renderer canvas and not dragging joystick/UI. Use pointerdown/up with small move threshold.

Now GLSL strings — write carefully.

Sky dome shader:

Hmm gl_Position.z = w puts at far plane; with depthWrite false and rendered first, fine. Simpler: render sky as scene.background? Use big sphere radius 9000 with BackSide and fog=false material. Camera far 12000. OK skip the z trick; just sphere.

fragment:

Include tonemap? ShaderMaterial not tonemapped by default (toneMapped=true property exists on Material? For ShaderMaterial, material.toneMapped default true? Actually ShaderMaterial ignores toneMapped unless using #include <tonemapping_fragment>). Keep raw; colors pre-toned. Set material.fog=false.

Terrain onBeforeCompile: need world pos varying + scorch uniforms:

worldpos_vertex only computes when needed; safer replace '#include <begin_vertex>' append vWp = (modelMatrix*vec4(transformed,1.0)).xyz; (terrain not instanced; modelMatrix=identity but fine).

uniforms shared object {uTornado:{value:Vector3}}.

Tornado funnel ShaderMaterial (transparent, depthWrite false, side DoubleSide): uniforms: uTime, uHeight, uGroundR, uTopR, uSpin, uOpacity, uColA, uColB, uBend, uCore (inner layer flag → darker), plus uLightDir for shading? keep flat + fresnel.

vertex:

normal approx fine for edge fade.

fragment:

Order: draw outer then inner (renderOrder outer=10, inner=11, dust=9?). Meso cloud renderOrder 8. Sky default. Transparent sorting by distance might glitch between funnel layers; explicit renderOrder fixes.

Meso cloud shader similar fragment (different palette + more opaque), lathe geometry, DoubleSide.

Dust skirt Points shader: attributes: aSeed(3: ang0, radK, spd)

frag: radial soft circle * vAlpha * brown color. blending Normal, depthWrite false.

Debris instanced: MeshStandardMaterial dark brown; CPU update:

320 matrix composes per frame — ok.

Car build: group with body (rounded box via Box + bevel? plain boxes + colors), details:

• body 4.4×1.35×1.9 color steel blue-grey w/ orange stripe (thin box), cabin, windows dark, wheels torus? cylinders rotated, roof instruments mast + spinning cups (small cross), light bar amber emissive (bloom), push bar front. Headlights: 2 SpotLights angle .5 distance 120 intensity 3 warm + emissive quads. Taillight red emissive. Dust: Points 120 behind wheels when offroad & speed>8: spawn rate, life 1.2s, drift up + fade; CPU pool.

Car physics substep:

windAt(p): ambient (vec2 ~ 8-14 m/s toward storm + noise gusts) + tornado:

Vmax from EF wind. This drives car shake, debris handled separately, trees uniform amp global = ambient + roar? Trees sway by global scalar (can't per-tree easily w/o tornado xz uniform — pass uTornado & compute amp in shader per instance! We have wp in shader; compute d to uTornado.xz and amp = base + 2.5*exp(-d/300). Do it — trees near tornado thrash.

Exposure of car also affects camera shake: shake = clamp(1 - d/350).

Camera FOV: 62 + speed*0.25 clamp 75; lerp.

Radar draw details — write straightforward canvas code.

Data/UI updates per frame cheap; DOM writes throttled 5Hz except radar.

Banner toasts: div center-top, show text 3s fade.

Game states: 'title' → 'play'. Pause physics on hidden.

Seed handling: URL ?seed=12345; default random shown in help/overlay; R new random.

Now — probes max 6, each up to 25 data pts, rate ∝ proximity (max ~ 4.5%/s at <120m). Total data = sum; display floor. At ≥100 first time: "STUDY COMPLETE — 100% DATA" banner + audio chime arp. Keep playing endless.

Probe destruction: tornado center within 20m → destroyed: debris burst (reuse debris? simple: spawn 10 quick particles + remove), banner "PROBE LOST", thunder-ish crunch sound.

Also probes blink LED: small sprite pulsing (scale sin) — emissive material shared, pulse via material.emissiveIntensity global sin — all blink sync, fine.

Respawn car at nearest road intersection: find from list [(0,0),(1200,300)...] choose nearest to tornado minus 700m. Simpler: spawn point fixed (0, 300) heading north; initial tornado forms around (-400,-600) moving NE. Respawn same point.

Toss sequence: state car.tossed=true: 2.2s: car angular vel random spin, y += arc, camera shake big, then fade overlay quick, respawn, banner "VEHICLE TOSSED — BACK IN THE CHASE". Health reset.

Alright, also idle attract: title overlay shows scene animating behind (tornado active, cinematic cam). Nice: run sim in title with cinematic camera. BEGIN switches to chase cam + enable input.

Performance: terrain 256² = 65k verts one draw; trees 2 instanced draws; props ~40 draws; funnel 2; meso 1+1 wall; skirt 1; debris 1; rain 1; bolts few; car ~15; total < 100 draws.

Bloom threshold 0.8 so only emissives/lightning/headlights/sky flash pop.

Grade pass: vignette + grain + slight lift shadows green + saturation. Copy simple shader:

Custom ShaderPass with those uniforms (needs tDiffuse auto).

Edge case: WebGL2 required — three r160 fine.

Mobile: joystick implement: touchstart on left zone track identifier, dx/dy normalize radius 50px → steer/throttle; buttons PROBE/CAM/SOUND. pointer events unified; also mouse drag on canvas = look? no, mouse not needed; click=lightning.

Write the HTML/CSS:

• #hud (hidden until play): top-left storm panel (EF chip big, width, est wind, stage), top-right: data bar, probes, integrity; bottom-right radar canvas + legend; bottom-left controls hint; center toast; center-bottom danger banner flashing.
• #title overlay: title, sub, BEGIN CHASE button, controls grid, tip line, footer.
• Buttons: sound toggle icon top-right corner (also in hud).
• font: system stack + letterspacing; colors: storm green accent #9fd8a8, amber #ffb14d, red #ff5340.

Also meta description & title tag. Favicon: 🌪 emoji SVG data URI.

Let me also plan the tornado state machine code:

EF from width: windMph = 62 + width*2.35; EF: <86:0,<111:1,<136:2,<166:3,<201:4,else 5. chip update.

Camera-shake & audio distances from tornado pos 3D.

Colliders array: {x,z,r}. Car circle 1.7. Resolve: push along delta, speed *= 0.4, thud (audio blip low) + shake.

Trees placement avoid colliders & roads & pond & spawn area.

Regenerate: easiest robust = full state rebuild: scene.remove old groups & dispose geometries/materials — write a buildWorld(seed) that creates a worldGroup containing terrain+props; on regen dispose & remove; tornado/probes/car reset. To keep code simpler: location.reload()? Ugly but bulletproof… Actually many demos just do location.reload with ?seed=. But seamless nicer. I'll implement rebuild carefully: keep arrays disposables. Risk moderate; manageable: terrain geo/mat, tree geos/mats, props geos, water, meso stays (independent), tornado keeps (just re-place). I'll group: worldGroup = terrain, water, trees, props, colliders[]. On regen: remove & dispose, rebuild with new seed, reset tornado & probes & car & data. OK.

But wait — fbm/noise functions seeded globally; make let noise2 = makeNoise2D(rng) global reassignable; terrainHeight uses current. Car y uses terrainHeight → fine after rebuild.

Instanced trees material sway uniforms global shared objects — fine across rebuild if I reuse uniform objects {uTimeG, uWindAmp, uWindDir, uTornado}.

Ok, also spawn a few distant low hills silhouettes? Fog handles.

Ambience extras: distant barn roof peeling? skip. Birds? no. Power flash transformer when bolt hits near poles: skip.

Right — also "L" key? lightning manual at camera look point (raycast center screen) — good for KB users. And click.

I think plan is solid. Now write the code. I'll aim for clarity + comments. Let me write the entire file now in one big write. Must be meticulous about syntax. I'll then run node --check on extracted script, and also a quick GLSL sanity (balanced braces) check.

Some care points:

• Template literals inside the big HTML string — I'm writing file content directly (not via JS template), so backticks fine. Shell heredoc must be quoted to avoid $ expansion — I'll use the write tool instead, safer.
• In GLSL template strings within JS, avoid backticks inside.

Car input object with touch joystick writing into same fields.

Radar: implement with persistent canvas & fade; static overlay redrawn each frame at fixed alpha; sweep; blips list built each frame: probes (cyan), tornado (red radius by width), car (white wedge), hail blob (green circle offset downwind of tornado by wind dir * 300, radius width*6). North-up, range 2200m, scale = 90px/2200m.

DOM ids: efChip, efNum, efLabel, torWidth, torWind, torStage, dataFill, dataPct, probesLeft, integFill, radar, toast, danger, help, title, beginBtn, seedLabel, soundBtn, hud, joystick elems, touchBtns.

Audio unlock: beginBtn click → new AudioEngine (ctx), resume, start.

Title cinematic: camera orbits tornado; input disabled; HUD hidden; still render everything.

Let me now also fix shadow settings: renderer.shadowMap? Directional light shadows over 2km area → poor res; skip shadows entirely (storm ambient occlusion via vertex darkening & fog) — faster & fine. Headlight spots no shadow. Good — disable shadowMap.

Tone mapping ACES, exposure 1.0. renderer.outputColorSpace default sRGB in r160.

Fog: THREE.FogExp2(0x2e332e, 0.00048). Sky material fog=false. Terrain standard material fog true default.

Directional light: color 0xcfd8c8 intensity 1.1 from sun dir; Hemisphere 0x6a7568/0x2c2a24 0.55. Headlights SpotLight intensity ~ 60 (physical units? r160 uses physically correct lights by default? useLegacyLights default false since r155 → intensities in candela-ish; SpotLight intensity 80 distance 200 angle .55 penumbra .5 decay 1.2). Point light lightning flash intensity 0 normally; flash sets ~ 50000 with decay? Physical point lights need big numbers: intensity = 2e6?? decay 2 default → at 500m attenuation huge. Set flashLight.decay = 0, distance 6000, intensity ~ 3 (then fade). decay=0 means no attenuation — fine for global flash. Yes: decay 0, intensity animated 0→4→0.

Emissive materials bloom: light bar MeshStandardMaterial emissive 0xffb14d emissiveIntensity 3; headlights quads emissiveIntensity 6; turbine beacons red 4 blinking; probe LED 4.

Tornado colors: uColA #6b5d4f (dust brown), B #3a3f3d dark grey-green; core darker. Meso: A #565b58, B #2b2f2e. Wall cloud smaller, darker.

Terrain palette (fields): ['#5a6e3c','#6a7a40','#7a7d46','#8a7f4d','#6f6b3a','#5e7048','#84754b'] varied brightness ±10% by noise; road '#6b5b45'; shoulder '#7a6a52'; pond bed '#5d5a44'. Forest patches: where fbm moisture > 0.55 & cellhash forest → darker green '#3f5230' & trees denser there? Tree placement: random, accept if moisture(x,z) > 0.45 (clumps). moisture = fbm(x*0.0008)*0.5+0.5.

Cell field color: cellX=floor(x/260), hash via seeded rand? deterministic hash: h = fract(sin(cellX12.9898+cellZ78.233+seedOff)*43758.5453). seedOff from seed. Fine.

Vertex color compute loop 65k — fine at build.

Terrain geometry: PlaneGeometry(4800,4800, 220,220) → 48k verts, rotate -PI/2, compute positions y. 220 segs → 21.8m cells ok.

Normals computeVertexNormals.

Road mask function used in both height & color & tree rejection & car offroad test — consistent via roadFactor.

Turbine positions: 9 along x from -1800 to -600 at z=-1500 + jitter, spacing ~150. Ensure not on road z? road z=-900 & -1500? I set rz=[-900,300,1500]; z=-1500 road! Turbines near road fine (beside it): offset z=-1600. Colliders at their base r=6.

Farmsteads: 6 positions near roads but offset 40-80m. Compose: house(8×5×7)+roof cone4, barn 10×6×8 red + roof, silo r2.2 h11. Colliders r≈7 & 8 & 3.

Poles: along x=0 road z -2000..2000 step 95 → 43 poles; along z=300 road x -2000..2000 step 95 → 43; two InstancedMeshes total (pole + crossarm combined geometry? merge via group geometry: use two instanced meshes). No colliders (thin, excuse).

Wait power lines between poles? Catenary lines via LineSegments — nice detail: for each consecutive pair along road, 2 lines (crossarm ends) with sag curve 8 points. ~85 pairs × 2 × 8 = lines verts fine, one LineSegments, color dark. Do it — sells scale. But tornado destroys? no.

Hay bales 50 scattered, r 1.1 cylinders rotZ 90°, color hay.

Ok, write it all now. Also remember credits footer in title: "Demo 052 · procedurally generated · WebAudio".

Length estimate: ~1400-1700 lines. Let's write.

One more decision: name — folder 052-supercell, title "Supercell — Tornado Chase Simulator".

Also add keyboard: arrows same as WASD.

Touch joystick: only steer+throttle. Buttons: PROBE (deploy), CAM (cycle). Position: joystick bottom-left above hint? Move hint to top-center-left? Keep hint bottom-left, joystick bottom-left replaces hint on touch (hint hidden on touch). Radar bottom-right. Sound top-right always.

Danger banner: show when tornadoDist < 160: "⚠ DEBRIS FIELD — EXTREME DANGER"; < 60: "⚠ TORNADO IMPACT IMMINENT". Flash via CSS animation.

Toast queue simple function showToast(text, ms).

Study complete once flag.

Also FPS meter small bottom-center? Include tiny "fps · q" like previous demo (nice for adaptive visibility). yes #fps bottom-center small.

Now writing the file. I'll be extremely careful with matching braces/parens. After writing: extract module script → node --check; check import map JSON parse; grep for common mistakes (e.g., 'uniforms.' typos). Also GLSL brace balance per shader string via a small node script counting braces inside backtick blocks? Rough check fine.

Let me carefully write out the code.

Regarding THREE.MathUtils.smoothstep(x, min, max) signature — yes (x, min, max). And clamp, lerp, damp (damp(x,y,lambda,dt)) exists. Use damp for smoothing.

Debris spawn params: radK 0..1, ang random, spd 2.5..5 /(0.3+radK), h k: base height fraction random 0.05..0.5 scaled by current funnelHeightK (stage), size 0.5..2.2 (planks), tumble speeds.

Dust skirt: 420 points.

Rain quaternion align: dir = normalize(wind3 + (0,-58,0)); setFromUnitVectors(up, dir). Update when wind changes > small.

Car offroad detection: roadFactor(x,z) > 12.

Wind ambient: global wind vector slowly rotating: base speed 11 + 4sin(t0.05), direction slow rotate. Also gust noise added per-frame at car: + sin combos.

Tornado wind influence on car: windAt includes ambient + vortex with outer falloff d<700.

Exposure on car lateral: apply winddtk directly to position + slight heading disturbance (torque noise) when strong: heading += wind.len0.002rand? keep subtle.

Camera chase shake: shakeAmp = clamp(1.3 - dist/260) * (stage mature?1:0.6); offset camera by noise*amp.

Cinematic cam also shakes slightly.

Hood cam: position at car cabin, look forward + slight to tornado? just forward.

OK — data rate: probe within 300m: rate = (1-d/300)*5 (%/s) cap 25 each → close probe fills in ~20s of proximity. 4 probes near → 100% achievable. Good pacing.

Probe deploy condition: speed < 6 m/s else toast "TOO FAST — SLOW DOWN".

Also allow picking probes back? No.

Integrity: debris hits within 140m: rate (1-d/140)*30 %/s; also direct funnel contact instant toss. Regen beyond 300m 8%/s. Integrity <25% → warning toast once + smoke? skip smoke.

Toss: if dist < groundR*0.8+6 → toss.

After toss respawn: place car at (0, 600) heading north, integrity 100, speed 0.

Now meso wall cloud: scale/lower with intensity: wallY = cloudBase-? wall cloud mesh: lathe r bottom 60→200 top h 120; position y = cloudBase - 100*intensityK; opacity 0.25+0.5k.

Meso main: always visible, rotates, positioned above tornado (lerp follow, lag for storm motion feel), slight tilt by storm motion? skip tilt.

cloudBase = 780.

Funnel height H = 860 (reaches ground from 780 with margin since terrain up to ±30).

uTopR: at cloud: width7+90. Actually meso bottom r ~ 250 — funnel top should meet wall cloud bottom (~200 wide). uTopR = 120 + width3.5. fine.

Lightning strike points: near meso: tornado pos + offset gaussian 400. Auto timer: 1.5+rand*5 s, plus guaranteed flash w/o bolt sometimes (distant intra-cloud): skyFlash small + far rumble.

Sky uniforms: uFlash decays exp, uFlashDir from last bolt dir or random cloud dir.

Flash light positioned at bolt mid each strike.

Sound on toggle: master gain ramp 0/0.9; icon 🔊/🔇.

Radar legend tiny text: "TOR", "YOU", "PROBE" colored. Keep minimal: draw in canvas.

OK writing now. Also careful: ShaderMaterial for sky: set depthWrite false & renderOrder -1? Big sphere enclosing all → drawn normally fine with depthTest true (far). radius 8500 < far 12000 ✓. fog:false.

One subtlety: funnel transparent + fog? ShaderMaterial fog false → funnel visible through fog — good (tornado should be visible far away, iconic). Slight fog mismatch acceptable; add manual distance fade: alpha = exp(-dist0.00025)? compute in fragment from vViewPos length. Yes add subtle.

Meso same manual fog-ish fade? Meso should loom — add same factor weaker.

Rain instanced around camera — with fog automatic (MeshBasic? use MeshBasicMaterial color 0x9fb4c0 transparent opacity .38 fog true default). Streak length 0.9.

Debris MeshStandard brown fog default.

Bolt lines AdditiveBlending depthWrite false; also glow sprite at impact: SpriteMaterial additive radial texture (canvas), scale 90, life fade.

Reuse one canvas radial texture for scud clouds (grey) & glow.

Scud sprites: 22, Sprite w/ grey cloud texture opacity .5, scale 120-300, orbit radius 150-500 below base y 600-740, CPU update positions rotate fast.

I think we're ready. Let me write the file.

Also remember renderer.setAnimationLoop? Use requestAnimationFrame manual with clock like previous demo (they used loop()). Use renderer.setAnimationLoop for XR-less fine — use rAF.

Physics substeps: accumulate dt up to 0.05 clamp, step 1/120.

Draw HUD radar every frame (cheap 190px).

Let me write now — carefully, section by section, keeping a mental symbol table.

Key global mutable:

• seed, rng (mulberry32), noise2, fbmN wrapper
• scene, camera, renderer, composer, bloomPass, gradePass
• skyMat uniforms
• worldGroup, colliders[], spawnPoint
• tornado (Tornado instance), meso group + mats, wallCloud
• rain (mesh + arrays), debrisSys, skirt points
• car {group, state...}, input, cameras mode
• probes[], data, integrity
• lightning pool, flash light, sky flash uniforms
• audio engine
• quality tier, fps meter
• radar ctx

Functions: buildWorld(seed), disposeWorld(), terrainHeight, roadFactor, fieldColor..., makeTerrain, makeTrees, makeProps (farms/turbines/poles/lines/bales/water), makeSky, makeMeso, Tornado class, makeCar, makeRain, makeDebris, makeSkirt, makeBoltGeo, strike(x,z), updateRain, updateDebris, windAt(x,z,out), stepCar, updateCameras, updateHUD, drawRadar, showToast, regen, onResize, onPointer..., joystick, AudioEngine class, loop.

Now write. I'll number demo as 052-supercell.

For safety in the funnel shader: I use normalMatrix * vec3(...) — normalMatrix available in ShaderMaterial? Yes built-in uniform in vertex.

For Points shader: position attribute exists; I ignore base position, use aSeed attribute → declare attribute vec3 aSeed; in ShaderMaterial vertex (WebGL2 → three converts). Also must NOT declare attribute vec3 position (auto). OK.

gl_PointSize needs gl_PointSize in vertex ✓.

InstancedMesh count changes on quality (debris): create max 340, set mesh.count = tierCount.

Rain: recreate? mesh.count = tier too. positions array max size.

Time to write the actual file. I'll write it in one go.

CSS plan:

EF chip: big box colored bg with black text: #efChip{font-size:26px;font-weight:800;padding:2px 10px;border-radius:6px;background:#8fd14f;color:#0b1008;display:inline-block;} Rows small labels.

#dataPanel top-right: DATA bar (width 160), probes, integrity bar. #radarWrap bottom-right: canvas 190 + label. #hint bottom-left: keys list, small. #fps bottom-center tiny dim. #toast center-top: big letterspaced, opacity transition. #danger center bottom third: flashing red bold hidden default; .on{display:block; animation blink .5s steps(2) infinite} #soundBtn top-right corner above dataPanel? place top:14 right:14; shift dataPanel top:54. #title overlay: fixed inset 0, radial gradient bg over canvas (semi), center card; h1 huge letterspace, sub, button big, controls table, footnote. .hidden{opacity 0 pointer-events none}. Touch: #joy zone bottom-left circle + knob; #touchBtns bottom-right above radar? stack right side: PROBE, CAM. display none unless touch.

Now JS. Writing carefully... (mentally compose the whole thing, then dump).

I'll now write the final file content. Given length, I'll be systematic. Let me draft key tricky code blocks precisely:

Noise utils

Wait my expression: bottom = lerp(v00,v10,u); top=lerp(v01,v11,u); result = lerp(bottom, top, v) - 0.5 → [-0.5,0.5]. Write cleanly.

fbm:

cellHash:

Terrain

Terrain build with vertex colors; material MeshStandardMaterial({vertexColors:true, roughness:1, metalness:0}); onBeforeCompile scorch. Also geometry.attributes.color.

Field colors:

Convert hex to THREE.Color once into array of Colors; per vertex: copy color, multiplyScalar(0.9+0.2*noise), if mo>0.62 lerp toward forest #3c4f2e by smooth01((mo-0.62)/0.15)*0.7; road: d<5.5 → #6b5b45; d<9 → lerp road/shoulder; pond pd<170 sand #6f6a4e blend by (1-smooth01((pd-120)/50))? keep simple: pd<165 lerp toward sand. Slight brightness variation by height slope? skip.

Trees positions: attempts 2600 → accept if mo>0.52 && road>18 && pond>180 && |x|,|z|<2300 → target 420. Two InstancedMeshes: trunkGeo Cylinder(0.25,0.4,3,5), canopyGeo = two cones merged? Without BufferGeometryUtils import, just use one cone (r2.6,h6) at y 5.5 → canopy instanced at same pos with random scale 0.8-1.5 & rotation; trunk separate instanced (scale match x/z? trunk scale same k). Colors: canopy instanceColor dark greens varied; trunk brown.

Sway patch on canopy material:

uni = {time:{value:0}, windAmp:{value:0.15}, windDir:{value:new Vector2(1,0)}, tornado4:{value:new Vector4(0,0,0,0)}} — tornado4.z = strength (stage k), xy pos. Note wp4 computed from instanceMatrix (translation). position.y local. OK.

Turbines group function makeTurbine(): tower Cylinder(1.6,2.6,72,10) white-ish; nacelle Box(6,3,3) at top front; rotor group at nacelle front: hub sphere r1 + 3 blades Box(0.7, 26, 0.18) offset rotated — blades along local Y rotated z by i120°; rotor.rotation.z animates. Beacon: small sphere emissive red at nacelle top. Positions 9: x=-1750+i150 + jitter, z=-1620±20. yaw = windDir angle + PI (face wind): group.rotation.y = atan2(windDir.x? ...). Set once + slow update. Colliders r 7 at base.

rpm = windSpeed*0.09 + tornado near? clamp 2.2.

Farmsteads: array of {x,z,rot}. 6 spots hand-placed relative roads: e.g. (60,-700),(-80,420),(1120,-980),(1290,1400),(-1310,-820),(300,1520) with rot random. Each group: house: box(9,4.5,7) color #b8b0a0, roof: ConeGeometry(6.6,3,4) rotated y 45°, color #6e3b2f, pos y 4.5+1.5; barn: box(11,5.5,8) #8e3b30 + roof cone4 #5d3226; silo: Cylinder(2.2,2.2,11,10) #9aa0a4 at offset; colliders: house r7, barn r8, silo r3 → 18 colliders total.

Poles: along x=0 road: z from -2000..2000 step 95 → offset x = -12 (west side); along z=300 road: x -2000..2000, z=288. Instanced pole Cylinder(0.22,0.28,9,5) color #4a3b2c; crossarm Box(2.6,0.18,0.18) at y 8.2. Lines: for consecutive poles same row: two wires (x±1.2 at crossarm): catenary sample 6 pts sag 1.2; LineSegments color 0x1a1a1a.

Wires only along x=0 row (one direction) to halve; both rows fine (each ~41 pairs2 wires5 segs*2 verts=~16