Build 052-supercell Demo

Let me start by checking the current state of the demos folder, particularly the index and the last demo (051-neon-district), then build the planned next demo: "052-supercell — Tornado Chase Simulator".

Let me install shell tools first and explore the space.

Let me check the current state of the demos folder.

The last demo is 051-neon-district, and the index was already updated. The previous turn planned the next demo: "052-supercell — Supercell — Tornado Chase Simulator". Let me build that demo now.

The plan includes:

1. World Generation: procedural terrain (plains, roads, pond), instanced props (trees with sway, turbines, farmsteads, power poles with lines, hay bales).
2. Tornado System: custom shader for the funnel (two layers, dynamic shaping), dust skirt, debris field (instanced), lifecycle (forming, mature, shrinking, rope-out), EF-scale rating.
3. Supercell Cloud: rotating mesocyclone (lathe geometry with shader), scud clouds.
4. Weather Effects: lightning (fractal bolts, flash light, thunder audio with delay, click-to-strike), instanced rain streaks, wind field affecting car and environment.
5. Storm Chaser Vehicle: arcade physics, chase/hood cameras, headlights, dust trails, collision with props, integrity system, and a 'tossed' event.
6. Gameplay Mechanics: deployable probes for data collection (score), probe destruction, radar minimap (canvas-based), HUD (EF gauge, wind speed, data, integrity, warnings).
7. Audio: generative WebAudio for wind, tornado roar, thunder, rain, and UI sounds.
8. Post-processing: UnrealBloom for emissives and lightning, custom grade shader (vignette, grain, color shift).
9. Interactivity: keyboard/touch controls, adaptive quality tiers, regenerate option, start overlay with cinematic view.

This is a big demo. Let me look at how previous demos were structured to maintain consistency. Let me look at 051-neon-district briefly to understand the pattern.

***************************************************************************************************nt.

Good. Now I have a clear picture. I'll build the demo 052-supercell — "Supercell — Tornado Chase Simulator" per the plan from the previous turn. This will be a large single-file demo. Let me carefully architect it.

Plan recap for 052-supercell:

1. World Generation: procedural terrain (plains with gentle hills, dirt road grid, pond), instanced props (trees with sway shader, wind turbines with spinning blades, farmsteads (barn + silo + house), power poles with catenary lines, hay bales).
2. Tornado System: custom GLSL funnel shader (two-layer rotating noise, dynamic width by lifecycle), dust skirt (cylinder with noise shader), debris field (instanced boxes/planks orbiting), lifecycle: forming → mature → shrinking → rope-out; EF-scale rating based on max intensity; tornado path wandering with steering.
3. Supercell Cloud: big rotating mesocyclone cloud — lathe/cylinder stacked geometry with swirling shader, scud clouds (billboards/ellipsoids), slowly rotating, follows the tornado.
4. Weather Effects: fractal lightning bolts (Line segments or custom geometry), flash light + directional flicker, thunder audio delayed by distance, click-to-strike; instanced rain streaks around camera; wind field affecting car handling, trees sway, rain direction.
5. Storm Chaser Vehicle: arcade physics (accel/brake/steer, drift a little), chase cam + hood cam, headlights (spotlights), dust trail particles when off-road, collisions with props (push/damage), integrity system; getting too close to tornado = "tossed" event (car lifted, spun, dropped, damage).
6. Gameplay: deployable probes (press Space) — when tornado passes near a probe it collects data (score), probes can be destroyed by tornado; radar minimap (2D canvas: tornado, probes, car, roads); HUD: EF gauge, wind speed, data collected, integrity bar, warnings.
7. Audio: generative WebAudio — wind (filtered noise), tornado roar (brown noise + lowpass, distance-based), thunder (filtered noise burst with delay), rain patter, UI blips.
8. Post-processing: UnrealBloom + custom grade shader (vignette, film grain, greenish storm tint).
9. Interactivity: WASD drive, Space deploy probe, C camera, M sound, R regenerate, H help, touch controls (joystick + buttons), adaptive quality tiers (auto-degrade if slow), start overlay ("click to begin" — good for audio unlock), cinematic intro camera.

That's a lot. I'll write it as a single index.html, likely ~1800-2400 lines. Let me structure the code:

#include <project_vertex>

vec4 mvPosition = vec4( transformed, 1.0 ); #ifdef USE_INSTANCING mvPosition = instanceMatrix * mvPosition; #endif mvPosition = modelViewMatrix * mvPosition; gl_Position = projectionMatrix * mvPosition;

vec4 mvPosition = vec4( transformed, 1.0 ); #ifdef USE_INSTANCING mvPosition = instanceMatrix * mvPosition; #endif { float h = max(transformed.y, 0.0); vec2 wpos = mvPosition.xz; vec2 toT = uTornadoXZ - wpos; float d = length(toT) + 1e-3; float pull = clamp(uTornadoPull * 90.0 / d, 0.0, 1.2); vec2 dir = normalize(mix(uWindDir, toT / d, clamp(pull,0.0,1.0)) + 1e-4); float sway = sin(uTime * 1.6 + wpos.x * 0.05 + wpos.y * 0.043) * 0.5 + 0.5; float bend = h * (uWindBase * (0.6 + 0.4 * sway) + pull * 0.35); mvPosition.xz += dir * bend; } mvPosition = modelViewMatrix * mvPosition; gl_Position = projectionMatrix * mvPosition;

uniform float uTime, uSpin, uWidth, uTopW, uPinch, uInt, uWobble; uniform vec2 uLean; varying vec2 vUv; varying float vNoise; varying vec3 vPos; // snoise... void main(){ vUv = uv; float t = uv.y; // 0 bottom, 1 top float ang = atan(position.z, position.x); // wait cylinder axis is Y; position.x/z circle // radius profile float prof = mix(uPinch, 1.0, pow(t, 0.72)); // narrow at bottom prof = uWidth; prof = 1.0 + 0.35 * uInt * sin(t9.0 - uTime2.2) * 0.2; // subtle pulses vec3 p = position; // wobble displacement float n = snoise(vec3(cos(ang)1.3, sin(ang)1.3, t3.2 - uTime0.9)); float n2 = snoise(vec3(cos(ang)3.1 + 7.0, sin(ang)3.1, t6.5 - uTime1.7)); float amp = uWobble * (0.25 + t0.9); float rad = 1.0 + (n0.7 + n20.3) * amp; p.x = cos(ang) * prof * rad; p.z = sin(ang) * prof * rad; p.y = position.y; // 0..1 scaled by mesh scale.y? We'll bake height in geometry: cylinder height 1 centered? Use translate so y in 0..1. // rope tilt increases with height when roping: uLean applied as shear p.x += uLean.x * t * t; p.z += uLean.y * t * t; vNoise = n0.5+0.5; vec4 mv = modelViewMatrix * vec4(p,1.0); vViewZ = -mv.z; gl_Position = projectionMatrix * mv; }

uniform float uTime, uSpin, uInt; uniform vec3 uColA; uniform vec3 uColB; uniform float uOpacity; varying... void main(){ float t = vT; // from vertex float ang = vAng; // -pi..pi -> 0..1: a = (vAng/6.2831+0.5) // scrolling bands around: coordinate s = a3.0 - uTimeuSpin; float bands = snoise(vec3(s2.0, t5.0 - uTime2.4, uSeed)); float bands2 = snoise(vec3(s5.0 + 13.0, t9.0 - uTime3.1, uSeed2.0)); float m = bands0.65 + bands2*0.35; float alpha = smoothstep(-0.55, 0.75, m) * uOpacity; alpha *= smoothstep(0.0, 0.12, t) ; // fade at very bottom (dust blend) alpha *= 1.0 - smoothstep(0.75, 1.0, t)0.55; // fade into cloud vec3 col = mix(uColA, uColB, t + m0.2); col = 0.75 + 0.25m; gl_FragColor = vec4(col, alpha); }

speed += (throttleaccel - dragspeed - brake) * dt steer angle target; heading += steer * speed * grip * dt (with slip when windy) pos += forward * speed * dt wind: pos += windVel * dt * windFactor (stronger when tornado close)

Now I have everything I need. Let me write the demo. I'll create /space/demos/052-supercell/index.html. This is going to be a very large file. I'll write it in chunks using the write tool — better to write the full file at once with read_write_file_in_shell_environment write mode, but it may be very large (~100KB). The write tool should handle it, but to be safe I'll write in several sequential appends via shell heredoc? Heredocs with quoted 'EOF' avoid interpolation. But the file contains backticks and ${} template literals in JS — with quoted heredoc delimiter ('EOF'), no expansion happens, safe. However extremely long commands may hit limits. I'll split into ~6 parts, each appended with cat >> file << 'PART_EOF'.

Part 1: HTML head + CSS + body markup + importmap. Part 2: JS: imports, config, RNG, noise, audio engine. Part 3: renderer/scene/sky/lights/terrain/roads/props. Part 4: supercell cloud + tornado + lightning + rain. Part 5: car + probes + dust + HUD + radar. Part 6: input, cameras, quality, loop, events, boot.

Let me carefully draft the code mentally as I write each part.

Key global state:

Height function (JS): value noise fbm:

Implement value noise with hash grid:

Careful with negative ix multiplication overflow — JS numbers are doubles; ix*374761393 for ix up to ~1000 fine (< 2^53). But bitwise ops convert to int32 — (h ^ (h>>13)) on a double > 2^31 works via ToInt32. Fine for noise.

Value noise: smooth interpolation (smoothstep) of hash at integer lattice; fbm 4 octaves. Plus pond depression: store pond {x,z,r,depth}; h -= depth * smoothstep at pond.

Pond placed away from center, e.g. at seeded random location with min distance from roads? Roads cross terrain; pond overlapping road looks odd — place pond, then when building roads, skip segments whose midpoint within pond radius+margin. Roads as ribbons made of many segment quads — easy to skip by checking midpoint.

Also keep tornado away from spawn? fine.

Terrain geometry: PlaneGeometry(size, size, 180, 180) ~ 32k verts ok. Rotate -PI/2. Compute heights + vertex colors:

• base grass green varying with noise (dry grass yellow-green patches)
• near road lines: blend dirt color (distToRoad < 5) — cheap via mod distance
• pond area: sandy ring: if dist to pond center < r+8: sand color; underwater: darker. ReceiveShadow true. Material MeshLambertMaterial({vertexColors:true}).

heightAt(x,z) function used by everything — must be fast: fbm 4 octaves with hash — fine.

Roads: build BufferGeometry merged quads: for each grid line x = k*S (S=230), ribbon along z from -half to half step 10: quad strip width 7. y = h+0.18. Color slight variation? single color material, MeshLambert. Skip quads inside pond. Also roads need normals up — compute normals.

Power lines: along one specific road line (x=0 main north-south?) place poles every 46 units along the road x=0 (the central road), poles instanced: pole cylinder h=9 + crossarm box. Catenary: between consecutive poles, LineSegments with 8 segments sagging 1.2. Only along ~±half. Collision r=0.5 each pole.

Trees: positions seeded: clusters near roads? random scatter avoiding roads (distToRoad>9) and pond. Count per quality — but tree InstancedMesh built at world gen with max count 320; on low quality set .count lower. Two meshes: trunk (CylinderGeometry(0.22,0.34,2.6,5) translated y 1.3) and canopy: icosahedron sphere scaled (2.2, 2.8, 2.2) y ~ 3.6 — merge 2 spheres for silhouette? Keep one sphere + slight vertex jitter in geometry for organic look (precomputed). Color variation via instance color (setColorAt) green shades. Sway via onBeforeCompile patch (shared uniforms object WIND = {uTime, uWindDir, uTornadoXZ, uTornadoPull, uWindBase}).

Cast shadows: trees cast on high: mesh.castShadow = true (canopy only, trunk cheap skip? both fine).

Turbines: 4-6 in a "wind farm" row on one side: tower cylinder h=26, nacelle box, hub + 3 blades (BoxGeometry(0.28, 7.5, 0.9) tapered? plain) — blades group rotating around Z. Turbines slowly yaw to face wind (toward tornado inflow? face ambient wind dir). Collision r=1.6. Blade tip streaks? skip.

Farmsteads: 3 clusters: barn (red box 6x4x8 + gambrel roof via Box rotated 45°? use two sloped boxes or CylinderGeometry 3-seg? Simple: box + triangular prism (custom geometry or use ConeGeometry with 4 radial segments scaled). Use prism = ExtrudeGeometry? Overkill: use Box for roof rotated as gable via two boxes. Simplify: barn = red box + dark gable roof made from CylinderGeometry(radiusTop=0...) — actually easiest good-looking: use THREE.Shape triangle extrude along length. I'll build quick prism geometry manually with BufferGeometry (triangle cross-section extruded): verts for prism length L. Fine, small helper.

Silo: cylinder r=1.6 h=7 + hemisphere cap (SphereGeometry phiLength half? thetaLength 0.5). House: box + prism roof. Windmill? skip.

Hay bales: instanced cylinder r=0.9 h=1.4 lying on side (rotate x 90°), golden color, scattered ~40.

Rocks: small icosahedrons instanced ~60 gray. Skip maybe to reduce scope — keep, cheap.

Colliders list: {x,z,r, dmg} for trees(0.5), poles(0.5), turbines(1.8), buildings (barn: approximate circle r=5 per cluster piece? use per-piece circles), silo(1.8), house(3), bales(1.2 — soft: slow car, minor dmg 0), rocks(0.8).

For collision detection each frame: naive loop over colliders (~450) fine. Precompute in flat arrays for speed: Float32Array x,z,r.

Probes: max 6 inventory; deployed list; mesh: cylinder small + blinking sphere emissive (pulse via material emissiveIntensity in update). Beacon light: PointLight? too many lights; use emissive + bloom.

Now Tornado class (details):

Wind field function (shared, CPU): given pos -> returns {vx, vz, speed}:

Also rain slant uses ambient + inflow at camera.

Car toss condition: d < coreR (width*0.5 + 6) && intensity > 0.3.

Tornado funnel uniforms: I'll create ShaderMaterial with uniforms { uTime, uSpin, uWidth, uPinch, uWobble, uOpacity, uColA, uColB, uSeed, uFogColor, uFogDensity, uFlash }. Include manual fog in fragment: fogFactor = 1 - exp(-d^2 * density^2)? Use exp2 fog matching FogExp2: factor = 1 - exp(-densitydensity * depthdepth). Need varying view depth. I'll pass vViewZ.

Supercell cloud:

• meso: CylinderGeometry(top 430, bottom 250, height 200, 48, 24, true), positioned base at y=cloudBase+? Funnel top at ~250; meso from y 230 to 430. Shader: striations scrolling slowly around, alpha fade edges, dark belly color mix; follow tornado xz (lerp), tilt slight.
• base disc: CircleGeometry radius 320 at y ~ 235, shader swirl with darker center (wall cloud region radius 90 darker + rotates faster). Might combine into meso cylinder bottom cap. Keep separate disc mesh with swirl shader; plus wall cloud: smaller cylinder (r 80->55, h 40) right above funnel top rotating faster.
• scud: InstancedMesh sphere squashed ~24, dark gray, positions drifting slowly around under base; opacity via material transparent 0.85.
• distant storm ring? skip.

Lightning class:

Bolt generation: start = (target.x + rand*40, cloudBaseY-10, ...), end = target ground+0. Midpoint displacement: recursive on segments array: 7 iterations, offset magnitude *= 0.55. Then branches: pick 3 random mid points, branch down-out with fewer iterations, shorter. Store all as segments pairs into Float32Array. LineBasicMaterial({color: 0xcfe0ff, transparent, blending: Additive, depthWrite:false}) — set color multiplier high for bloom: use color 0xffffff and material.toneMapped=false, opacity animated; and set material.color.setRGB(2.2,2.4,3)? LineBasicMaterial color can exceed 1 via setRGB? Color clamps? THREE.Color accepts >1 values fine. toneMapped false ensures bloom.

Flash light: single shared PointLight repositioned to bolt mid, intensity animated 0..~3 (distance ~ 900, decay 1.2?). Use intensity in candela-ish for r160 physically correct lights? r160 default useLegacyLights=false; PointLight intensity in candela: need big values like 800000? Hmm. With renderer.useLegacyLights default false in r160? In r155+ default is physicallyCorrectLights... Actually r155 changed default of useLegacyLights to false. PointLight intensity then means candela; a value like 2 gives dim light at distance. To be safe: set renderer.useLegacyLights? Deprecated but still present in r160. Simpler: use large intensities: flashLight.intensity = 4e5? decay default 2 -> at 300m: 4e5/90000 ≈ 4.4. OK compute: intensity / d^2. For d=300 want ~3 => 2.7e5. Set 3e5 * flicker.

DirectionalLight "sun" through clouds: intensity ~ 0.55 (legacy?) — with physical lights, directional intensity is in lux-ish scaled... In practice three r160 examples use intensity ~1-3 for Directional with useLegacyLights=false? DirectionalLight intensity is irradiance; examples commonly use 1-3. Hemisphere similar. I'll use: hemi 0.9, dir 1.1, ambient none. Should be fine (examples use such values in r160 with default settings).

Rain: Points? I want streaks: use LineSegments with 2 verts each (top, bottom offset by velocity0.05) updated CPU each frame? 900 segments -> 1800 verts update per frame, fine. Positions in world around camera: box 140x80x140. velocity: fallSpeed 55 + wind. bottom = top - vel0.06. Color: uniform light blue-gray, transparent 0.35, additive? normal blending slight. LineBasicMaterial linewidth ignored, 1px lines — visible enough at 900 count. Simpler than instancing and good look with motion. Do LineSegments.

Splash? skip.

Dust from car: Points pool 200: each particle {pos, vel, life, size}; geometry attributes updated. texture: canvas radial gradient sprite. Also used for collision bursts & probe destruction & tornado debris dust puffs at ground? Tornado dust skirt covers.

HUD DOM:

• top-left: title panel (SUPERCELL, seed).
• top-right: buttons + radar canvas below them (radar 170px).
• bottom-left: EF gauge: label + bar with gradient (green→red) + value EF2 + wind mph.
• bottom-right: DATA value, INTEGRITY bar, PROBES count icons.
• center: warning banner (TORNADO WARNING proximity) flashing.
• bottom-center: controls hint.
• start overlay.
• toast.

Radar: canvas 170x170; draw every ~100ms (or each frame cheap enough):

Audio engine:

Noise buffer: 2s white noise buffer created once, reused with loop. Brown noise: separate buffer generated (integrated random walk).

Master gain 0.9; mute toggles gain 0.

Now input: keys map; Space deploy probe (keydown, ignore repeat); C camera cycle; H help overlay toggle? Include HELP in start overlay + H toggles same overlay; M mute; N new world; O orbit cam; P snapshot; F headlights? always on. R reset car position (if stuck) — add: 'R' respawn car at nearest road. Good.

Touch: joystick left bottom (drive: x steer, y throttle/brake), buttons right: PROBE, CAM. Use pointer events on zones. Show if 'ontouchstart' in window.

Camera shake: magnitude = speedFactor0.15 + tornadoProximity0.5 + toss 1.0; applied as random offset to camera pos & look.

Cinematic pre-start: camera orbits storm: pos = stormPos + (cos(a)*r, h, sin(a)*r), lookAt storm. After start: chase.

Regen world: function buildWorld(newSeed): disposes worldGroup children (traverse geometry/material dispose), clears colliders, rebuilds terrain/roads/props/pond, resets probes, tornado.reset(random), car to spawn. Keep rain/sky/cloud/tornado meshes (tornado reset only). Seed display update.

Dispose helper:

Careful: shared materials (tree material) disposed once fine.

Snapshot: renderer.domElement.toDataURL after composer.render(); create link download. Need preserveDrawingBuffer? We render then immediately capture in same task — safe without preserveDrawingBuffer if no async between. render(); toDataURL() sync — OK.

Quality auto: fps EMA; check every 3s: if ema < 45 && tier>0 -> tier--, apply; if ema > 58 && tier < startTier for 2 consecutive -> tier++. startTier by device: touch? med : high. apply(tier): set pixelRatio, bloom pass enabled/strength, shadow map enabled + autoUpdate, rain count (set drawRange), debris active count, tree count (instanced .count), scud count.

Shadows: renderer.shadowMap.enabled = true only high/med; dir light castShadow with camera bounds ±120, target follows car (update light.position = car + offset, target car). shadow.autoUpdate true; when low: renderer.shadowMap.enabled=false & materials needsUpdate? Toggling shadowMap.enabled at runtime requires material update; simpler: keep shadowMap enabled always but set dirLight.castShadow = tier>=1; and low tier just reduce... If castShadow false, no shadow rendering cost mostly. But shadowMap.enabled toggling requires needsUpdate on materials. Use: renderer.shadowMap.enabled=true once; dirLight.castShadow toggled per tier — that's fine without material recompile? Toggling light.castShadow does change shader defines? It affects shadow map sampling? Receiving materials compiled with shadow code if any light casts... may cause shader recompile stall once. Acceptable.

Initial: detect mobile via matchMedia('(pointer: coarse)').

Now — the funnel top should connect to cloud base; cloud follows tornado with lag: cloudPos lerp toward tornado pos with k=0.15/s; funnel top = cloudBaseY local... funnel mesh positioned at tornado ground pos with height fixed 260: top may detach from lagging cloud slightly — acceptable visually (real funnels trail). OK.

Wall cloud: positioned at cloudPos, above funnel top region.

Also ground debris ring darkening: decal? skip — dust skirt covers.

EF color: lerp green(0.2)->yellow->orange->red(1). Gauge bar width intensity*100%.

Wind mph at car: windField(carPos).speed * 2.237 (m/s to mph). Ambient ~ 7-14 m/s; near core: swirl k2: tangential speed at core edge ~ 60 m/s * intensity (EF5 ~ 90 m/s = 200mph). Set tangential peak = 75intensity m/s at r=coreR, decay 1/r beyond, solid-body inside. inflow = 18intensity*(1-d/700) m/s toward tornado. updraft not part of field (toss only).

Data collection: probes within 130 of tornado & intensity>0.2: rate = 30intensity(1-d/130); data += ratedt (KB?). Show as integer "KB" — call it "DATA KB". Probe destroyed if d < width0.5+5: spawn burst, audio, remove.

Score toast milestones: each 500 KB toast? minor.

Warnings: if d<160: "⚠ EXTREMELY CLOSE — BACK OFF"; d<300: "TORNADO WARNING"; flash banner.

Toss sequence:

Integrity: 100; collision damage: impact = |speedBefore|; dmg = max(0,(impact-6))*1.4; integrity<=0: disabled: speed=0, controls off 5s, banner "VEHICLE DISABLED — REPAIRING", then integrity=60.

Car spawn: on road near center: pos (roadHalfOffset...) choose (10, z=120) on north-south road x≈0... but roads at k*230; x=0 is a road line if 0 % 230 == 0 yes k=0. So spawn at (3.5, h, 200) heading north (-z?) heading angle 0 => forward -z? Define heading angle θ, forward = (sin θ, 0, cos θ)? Choose forward = (Math.sin(h), 0, Math.cos(h)) and car model built facing +z? THREE convention: build car facing +z, heading h, forward=(sin h,0,cos h). Spawn h=π => facing -z? whatever, spawn heading toward map center fine.

Radar road drawing: for each grid line within view: vertical lines x=k230 and horizontal z=k230 mapped: sx = (wx - camCx)*scale + 85 etc. draw as dim lines.

Now, sky shader:

Fog color: set to horizon color ~ #6b7a72? Storm palette: horizon #5d6d63 (greenish gray), zenith #1d2622 dark. Fog: 0x55645b exp2 0.00085? With distances 900 half-world: at 900m exp(-(0.00085*900)^2)= exp(-0.585)=0.56 — decent. Use 0.0011.

Sun/dir light direction: from upper SE, dim.

Colors general grade: final ShaderPass grade:

Bloom threshold 0.75 strength 0.5 radius 0.6 (high), med 0.35.

ACESFilmicToneMapping, exposure 1.05.

Alright — also "scud" and meso follow. Meso rotation shader time slow.

Also add occasional "bolt from meso to ground near tornado" auto + click-to-strike: pointer click (not drag) raycasts to ground plane -> lightning.strike(point) with cooldown 1s. On touch, tap = strike? conflicts with joystick zones — taps on canvas center fine.

Pointer vs orbit: in free-orbit mode OrbitControls enabled.

The HUD & panels styling: monospace like 051, color theme: storm green/teal + amber warnings. Accent --grn:#7dffb0? Let's theme: bg dark #0a0f0c; accent teal #6ee7b7? Use " radar green" #59ffa0 and amber #ffb14d, red #ff5252.

Now write the code. I'll be careful about:

• CylinderGeometry axis Y; after translate y∈[0,1].
• ShaderMaterial with fog manual.
• Lambert onBeforeCompile for trees: patch project_vertex as discussed; need uniforms merged: mat.userData.shader set in onBeforeCompile; store shader ref to update uniforms (uTime etc). Use shared uniforms object: mat.onBeforeCompile = (sh)=>{ sh.uniforms.uTime = WIND.uTime; ... } where WIND.uTime = {value:0} shared refs. Then update WIND.uTime.value each frame.

For USE_INSTANCING define: InstancedMesh sets it automatically.

One catch: my replacement of project_vertex must handle when material used with shadows (depth material) — shadow depth pass uses MeshDepthMaterial, separate, unaffected (sway not in shadow — fine).

• InstancedMesh count changes: set .count = N (<= max). instanceMatrix needsUpdate on build.

• LineSegments rain: geometry with position attribute dynamic; setDrawRange for quality tiers: drawRange count = segments*2.

• Debris instanced: update matrices each frame via Object3D dummy; count via mesh.count = activeCount (but active subset randomized: just iterate i<activeMax and scale 0 for i>=active? set mesh.count = activeCount works since indices 0..n). Use count.

• Tornado debris orbit params per instance in Float32Arrays.

• Probes: Group array; blinking via emissiveIntensity.

• Radar: getContext('2d').

Let me also include FPS meter (like 051: small bottom-left). Fine.

File size concern: probably ~110-130KB total. Writing via multiple heredocs. Each heredoc chunk maybe 15-25KB — should be OK for shell. Let me start writing.

Part 1 (HTML/CSS/markup/importmap):

Careful: heredoc quoted 'EOF' — content includes single quotes fine. Must ensure no line in content equals EOF marker. Use distinct markers PART1_EOF etc.

Let me now write all parts concretely.

CSS layout plan:

Markup:

Import map same as 051 (three 0.160.0).

Now JS. Let me write it out section by section carefully. I'll number and keep tidy.

Config:

RNG:

Simple LCG fine. Reseed on regenerate.

Height field with pond:

seed changes per regen -> different terrain. Good: incorporate seed into hash.

Water level: pondWaterY = heightAt(pond.x,pond.z) + depth*0.45? Compute base = heightAt center after depression ~ minH; set waterY = centerH + 1.8. Since heightAt includes depression, compute waterY = (rawH at center without depression?) Simpler: waterY = hCenter + 2.2 where hCenter = heightAt(pond.x, pond.z) (includes depression) — water slightly above depressed center but below rim. Set depth 5 -> center depressed ~5; rim at +0; water at center+2.2 still below rim by ~2.8.

distToRoad(x,z):

Check: x=0 -> ((0)+345)%230=115 -> |115-115|=0 ✓. x=115 -> (460)%230=0 -> 115 ✓ max. Good.

onRoad(x,z) = distToRoad < roadWidth*0.5+1.5.

Terrain build:

Lambert vertexColors.

Roads mesh: ribbons: BufferGeometry with positions/uv?/colors: For each line xi in grid lines within [-half, half]: build strip along z: step 12: verts two per step (x±w/2). y=heightAt+0.14. Skip segment if midpoint within pond r+6. Indices: two triangles per quad. Same for z-lines. Colors slight jitter per quad? single material color #6a563d with polygonOffset to avoid z-fight: material.polygonOffset=true, factor=-2, units=-2. Also renderOrder after terrain.

Normals: computeVertexNormals (they'll be near up; terrain slopes fine).

Pond water: CircleGeometry(r*0.95, 40) at waterY, MeshPhongMaterial({color:#27403a, transparent:0.9, shininess:120, specular:#9fb}) + custom? Keep phong simple; slight opacity pulse? skip. Position at pond center.

Props build functions as discussed. Colliders arrays: cx=[], cz=[], cr=[], cdmg=[].

Trees:

Sway shader injection (shared):

Wait toT/d vec2 division — GLSL allows vec2/float. OK. Note: transformed.y for trunk max 3, canopy up to ~7 with scale applied AFTER instanceMatrix... instanceMatrix includes scale, so mvPosition.y world height but hgt uses transformed.y (pre-scale) — fine relative.

uPull: set = intensity (0..1). pull = clamp(intensity*120/d,0,1.4): at d=120, intensity=1 -> 1.0. Good.

Turbines:

Farmsteads:

Hay bales: instanced 46: cylinder(0.95,0.95,1.5,10) rotateZ(PI/2) so axis horizontal? lying: rotateX(PI/2) makes axis along z... cylinder axis Y; rotate x 90 -> axis along Z lying. place y=h+0.95. golden #c2a35a. Avoid roads/pond. collider r1.2 dmg 0 (soft bounce).

Rocks: instanced 70 icosahedron r 0.4-1.1 gray #6d6a63; collider r small, dmg small? rocks dmg 0.5 factor. Fine.

Power poles along main road x=0 (and maybe z=0): poles every 46 from -half+40..half-40 along x=0 line offset x=+6 (roadside). pole: cylinder(0.14,0.18,9,5) #4d4036 + crossarm box(2.4,0.14,0.14) at y 8.2. Instanced pair meshes. catenary: for consecutive poles i,i+1: 2 wires at crossarm ends offsets (±1.1, 8.3): sag curve: p(t) = lerp + dip: y -= sag4t*(1-t)*1.6. 10 segments per span, one LineSegments total, color #222226. collider r=0.4 per pole.

Wait — poles along x=0 from z=-860..860: ~38 poles. Spans 372 wires10 segs = 740 segments fine.

Also car spawn on road x=0: spawn at (3, h, 300) heading π (facing -z toward center)? forward=(sin π,0,cos π)=(0,0,-1) yes heading π faces -z. Good.

Now tornado + cloud + lightning shaders. GLSL noise: use compact 3D simplex (ashima). Include once as string NOISE_GLSL and prepend to shaders needing it.

Funnel vertex (as drafted). Fragment as drafted with fog & flash.

Actually let me use cylindric uv from geometry for alpha bands: I compute in vertex: vT = position.y (0..1 after translate); vAng = atan(position.x? ) hmm cylinder positions: x = rsin(theta), z = rcos(theta) — angle = atan2(x, z)? fine: ang = atan(position.x, position.z) → -π..π → a = ang/6.28318+0.5. Pass varyings.

Funnel frag:

Colors: uColA = #6b5d4c (dusty), uColB = #3a4148 (dark slate). Inner layer darker & faster: spin -0.5 vs outer 0.35? Spin sign in s offset; layer params.

Vertex shader funnel:

careful: original uses atan(position.x, position.z) with circle x=sin, z=cos. Reconstruct p.x = sin(ang)profradpulse; p.z = cos(ang)profradpulse; p.y = t (unit; scaled by mesh.scale.y). lean: p.x += uLean.xtt; p.z += uLean.ytt.

uWidth uniform per material; mesh.scale = (1, height, 1) and width baked in shader — good: scale only y. So mesh.scale.set(1, funnelH, 1). Outer material uWidth = width, inner uWidth = width*0.62.

uPinch: forming: 0.05 → mature 0.32 → rope 0.12 with high lean. Set from intensity & phase: pinch = lerp(0.06, 0.34, smoothstep(0.1,0.6,intensity)); rope adds lean magnitude (0.6ropeFactor30).

Dust skirt: cylinder r=1 (scaled x/z = width*1.45, y= hgt 14% of funnelH min 26), shader: scrolling noise alpha brownish; vertex similar wobble small. Only visible when intensity>0.12: opacity.

Condensation cone at cloud base during forming? The funnel grows from cloud: during forming, funnel mesh drawn from top? Real: funnel descends. Implement: uniform uReach (0..1): visible portion from top down: discard fragments with vT < (1-uReach)? We want bottom part hidden initially: visible t ∈ [1-uReach, 1]. Add in frag: if (vT < 1.0 - uReach) discard; plus soft edge. During forming uReach 0.25→1. After forming =1. Rope: keep 1.

Debris: instanced Box(0.7,0.16,1.4)? mixed shapes via per-instance scale. count max 150. arrays: ang0, rad0, spd, y0, tumble axis... update: ang = ang0 + tspd(1+intensity); rad = rad0*(0.7+0.3sin(t0.7+i)) * (0.5+intensity); y = y0 * funnelH*(0.02+0.5intensity) ... compose matrix with rotation from timetumble. Set count = floor(max * clamp(intensity*1.3-0.12,0,1)). Also color per instance: dark browns/grays.

Meso shader:

uSpin slow 0.02. Also rotation of whole mesh: mesh.rotation.y += dt*0.02 — combined fine.

Base disc: CircleGeometry(320) rotated -x90 at cloudBase+4: shader: swirl: polar coords: r, ang: spiral noise: n=snoise(vec3(ang3 + r4 - uTime0.2, r3, seed)); alpha = smoothstep(1.0,0.35,r) * (0.75+0.25n); darker center ring at wall cloud r<0.28: multiply 0.55. color #2e3438ish.

Wall cloud: cylinder(r 70→52, h 42) at cloudBase-6? Actually wall cloud hangs below base: position y = cloudBase - 16, rotating faster (rotation.y += dt*(0.15+intensity*0.5)); material: same band shader darker, opacity 0.9.

Scud: instanced spheres flattened, ~24, orbit slowly under base r 120..300, y cloudBase-10..-40, dark #23282c, Lambert flat? Lambert fine. Drift: rotate group slowly; individual bob via shader? just rotate parent group.

Cloud group position lerp to tornado xz, y=0 fixed heights (cloud floats; terrain height variance ±7 negligible).

Rain:

Lightning: as planned. Bolt gen function returns Float32Array of segment pairs. Preallocate per-bolt arrays max: segments: main channel iterations: start with 2 points -> 7 subdiv => 128 points, 127 segs; branches 4 × (3 subdiv from 2 pts => 8 pts 7 segs) = 28 segs. total ~155 segs = 310 verts. Allocate 320*3 floats per bolt. Pool 4 bolts.

Flash env: t in 0..dur(0.28): intensity = pattern: base = exp(-t14) * (0.7 + 0.3sin(t90)) plus second strike pulse: if t in 0.12..0.2 add exp(-(t-0.14)30). Fine: compute flicker = (exp(-t10)(0.75+0.25sin(t80)) + 0.8*exp(-Math.pow((t-0.13)*22,2))) clamp.

light.intensity = 2.6e5 * flicker; sky uFlash = flicker; grade uFlash = flicker*0.35.

Thunder: delay = dist/340; volume = clamp(180/dist, 0.08, 1); lowpass freq = 400 + 2400*exp(-dist/300)? Near = crack: also highpass snap 2000Hz short. Implement audio.thunder(dist).

Auto strike scheduling: nextAuto -= dt*(0.6+intensity1.6); when <=0: strike at tornado.pos + rand offset (radius 60..260) or occasionally near meso edge; reset nextAuto = 2.5+rand5.

Click strike: on pointerup with small movement (<6px) and not on UI: raycast to y=heightAt? Use plane y=0 approx then set y=heightAt(x,z)+1. cooldown 1.2s. Only if storm active (any time, fine).

Car build:

Car physics update:

Tossed handled separately.

Camera:

HUD update fns straightforward.

Radar draw:

Banner warnings + toast as planned.

Start overlay content: title SUPERCELL, subtitle, feature list short, controls table, BEGIN button. On begin: overlay fade, audio.init, started=true, camera chase.

H toggles overlay (pause? keep running; overlay semi-transparent, fine).

Now finalize quality tiers:

fps monitor: ema; every frame acc; every 2.5s evaluate.

Also FPS display element update 4Hz.

Edge cases: WebGL context creation fail -> show message. Assume fine.

Snapshot:

But composer.render already happened this frame; calling again fine.

Resize handler: camera aspect, renderer size, composer size, bloom resolution.

Prevent context menu on canvas? fine.

Now, audio implementation specifics:

Keep implementation compact with helper methods: burst({type:'white'|'brown', filter:'lowpass'..., freq, t0, vol, dur, curve}).

setTargetAtTime in update each frame OK.

Alright, also HUD EF label: EF${ef} colored; width bar fill.

Probe inventory: 6; deploy key Space: if remaining>0 && !tossed: place at car pos - forward*3? Actually chasers deploy ahead in path; place at current pos. mesh add; remaining--. blinking.

Data HUD updates.

Also milestone toasts at first EF3+ reached: "TORNADO RATED EF3".

Track maxEF for session? Show in title? skip.

Tornado respawn: after dissipated, 8s later new tornado at random pos 300..600 from car; toast "NEW TORNADO FORMING — INTERCEPT". During dissipated: funnel hidden (opacity 0), cloud remains (still stormy), lightning reduced rate.

Also tornado affects car only when intensity>0.3.

Let me also handle car radar when tornado dissipated: draw faint.

Time to write. I'll aim for clean, sectioned code. Given the size, I'll write 6 shell appends. Let me be extra careful with GLSL strings and template literals inside heredoc — quoted heredoc is literal, safe.

One more design decision: put everything in one module script; no top-level await.

Also: OrbitControls import needed for orbit mode.

Shadow config: dirLight.shadow.camera left/right/top/bottom ±130, near 10 far 600, bias -0.0008, mapSize by tier. Position: car + (180, 260, 120) normalized direction *300; target car. updateMatrix.

Note: with Lambert + shadows fine.

Tree canopy geometry jitter: IcosahedronGeometry(2.1,1): modify each vertex: offset by (hash-0.5)*0.5 radially. Since vertices shared? Icosahedron detail 1 is non-indexed? IcosahedronGeometry is indexed (from PolyhedronGeometry — it's non-indexed actually; PolyhedronGeometry duplicates vertices per face (flat shading)). Jitter with per-face randomness => cracks... visually fine for foliage (faceted blobs). Actually cracks create gaps — bad. Use detail 1 and jitter along normal consistently per unique position: since duplicated verts share same position value, hashing by position gives same offset -> consistent. hash from rounded coords. Good.

mergeGeometries import from BufferGeometryUtils.

For canopy color variation per instance via setColorAt — Lambert + instanceColor works.

OK. Writing now. Part sizes: I'll do ~7 parts to be safe. Let me draft the entire code here mentally then write sequentially. I must keep track of every referenced function being defined. I'll write carefully.

Order in script:

1. imports, DOM refs
2. config, tiers, quality
3. rng/hash/noise/height/distToRoad
4. renderer, scene, camera, fog, lights, sky, post
5. audio class
6. world builders (terrain, roads, pond, trees, turbines, farms, bales, rocks, poles) + colliders + buildWorld + dispose
7. shared sway
8. supercell cloud
9. tornado
10. lightning
11. rain
12. dust particles
13. car
14. probes
15. wind field
16. HUD/radar/banner/toast
17. input (keys, pointer, touch)
18. cameras
19. loop + quality monitor + resize + snapshot + boot

WIND field function needs tornado state — define after tornado class but used by car update — fine as function hoisting: declare function windFieldAt(out, x, z) uses global tornado object defined later — at call time exists. OK with function declarations.

Let me write Part 1 now: HTML+CSS+markup+importmap.

For the overlay controls table:

Colors theme: --grn:#6dffa8, --amb:#ffb14d, --red:#ff5252, ink #cfe0d6, bg #060a08.

Radar panel position: top right below buttons: top:64px; right:14px.

EF panel: left:14px; bottom:34px (fps at bottom:14). Status panel right:14 bottom:14. Bottom hint center bottom:14 (may overlap status on small screens — hide on mobile).

Banner: top:78px center, big flashing text.

Let me write everything now. Also remember: demos index update after demo verified.

One more consideration: the amount of GLSL — simplex noise function (ashima snoise) is ~40 lines; used in 4 materials (funnel×2, skirt, meso, wallcloud, basedisc, sky) — each ShaderMaterial gets the same chunk prepended. Fine.

Write Part 1.

*******************************************************************************************************************************nk.

******************************************************************************************************************************************se.

Part 4: supercell cloud + tornado + lightning + rain + dust particles.

Supercell cloud:

• group cloudGroup (follows tornado with lag)
• meso cylinder with band shader
• base disc swirl shader
• wall cloud cylinder
• scud instanced spheres

Tornado class with funnel shaders, skirt, debris, lifecycle.

Lightning class.

Rain class.

Dust particle system (car dust + bursts).

Wind field function.

Let me write carefully. Funnel material factory:

Note: both vertex and fragment need snoise — fine to include in both.

Vertex shader:

Wait cylinder geometry positions: x = sin(theta)*r? THREE CylinderGeometry: vertex.x = radius * sin(u * radialSegments -> theta), vertex.z = radius * cos(theta). So atan(x, z) returns theta. Reconstruct with sin/cos consistent ✓.

Fragment:

Skirt material: similar but cylinder r=1 scaled, alpha from scrolling noise near ground, brown. Reuse funnelMaterial with different params + separate fragment? Just create second factory variant 'skirt' with simpler shader:

I'll make skirtMaterial factory.

Debris: InstancedMesh box; arrays: ang0[], rad0[], spd[], y0[], tum[], scl[]. Update:

mesh.count = active.

Tornado lifecycle — implement with phase state machine:

Hmm — width is applied in shader via uWidth; geometry radius 1 → radius = uWidth. For inner: uWidth set to width*0.6 each frame. Both meshes scale.y = funnelH. So mesh.scale.set(1, funnelH, 1). Set frustumCulled = false (since shader displaces and scales — bounding sphere wrong). Also renderOrder: skirt first? transparent sorting: set renderOrder: skirt 10, outer 11, inner 12? Draw outer then inner: inner renderOrder higher (drawn later). Since depthWrite false all blend.

Position: group at (x, groundY, z); funnel meshes at y=0 within group scaled y=funnelH → top reaches cloudBase.

But funnel top should meet cloud base ~250 above sea level, ground height varies: funnelH = WORLD.cloudBase - groundY + 10.

Phases store: this.phases = ['forming','mature','shrinking','rope'] with durations; simpler explicit if/else with this.phase string and per-phase durations stored at phase entry (this.phaseDur). enterPhase(name).

intensity continuity: store this.i0 at phase entry.

Lean: ropeFactor = (phase==='rope') ? smooth01(phaseT/dur) : 0; lean dir perpendicular to heading random side: leanMag = ropeFactor * 26; also slight lean always from wind: 4.

uPinch: forming: lerp(0.05, 0.3, env); mature 0.3; shrinking lerp→0.2; rope lerp→0.06 + wobble bigger.

Now supercell cloud:

Meso shader:

Actually meso cylinder geometry: translate(0, 0.5, 0) so t=position.y 0..1.

Base disc shader:

Circle geometry positions in XY plane before rotateX — rotate geometry then positions xz in local... After geo.rotateX(-PI/2), local positions have y≈0, x,z plane ✓.

Wall cloud shader: like meso but darker, faster scroll.

Scud: Lambert instanced, parented to scudGroup in cloud group; per instance random pos r 100..300, y cloudBase - rand*50, scale (18..34, 5..9, 12..20); color #262c30. Rotate scudGroup slowly.

Lightning class:

FLASH env: at k=0: exp(0)(0.72+0.28sin0)=0.72 + 0.85exp(-(0.347)^2)=0.85exp(-5.66)=0.003 → 0.72. Peak around k=0.34: exp(-2.2)=0.111 + 0.85 → ~0.9. OK.

flashLight intensity 3.2e5, distance 2400, decay 1.7: at 300m: 3.2e5/300^1.7 = 3.2e5 / (300^1.7). 300^1.7 = e^{1.7 ln300} = e^{1.7*5.7} = e^9.7 ≈ 16300 → ~19.6. Strong flash, good. Might be too strong: reduce to 1.6e5 later if needed; fine.

Rain class:

Init pos all zeros → first frame respawn handles via condition y===0&&x===0 — but random could place at exactly 0? practically no. Simpler: pre-initialize in constructor around origin. I'll pre-init with random in box around 0, cam starts at (0,60,160), close enough.

Dust particles (car + bursts):

Wind field function (global):

Use global clock tGlob. I'll implement with param t.

Wait tornado.pos is Vector2 (x, y=z). OK.

78 m/s ≈ 174 mph at core edge — EF4-5 territory at peak intensity. Good.

Turbine spin update in main loop: rotor.rotation.z -= dt * (1.2 + windspeedAtTurbine*0.12)? use ambient gust: spin = 1.4 + STORM gust; plus near tornado faster. Use windFieldAt at turbine pos? Cheap: ambient only + pull factor by distance to tornado.

Now write Part 4.

Note: windFieldAt references tornado global before it's constructed — but it's only called at runtime after construction. Fine.

Part 5: car, probes, HUD/radar/banner/toast, input.

Car:

Build car detail: front is +z. headlights at z = +2.16.

updateCar(dt, t):

• input handling (keys + touch joystick).
• physics as planned.
• wind effect: windFieldAt at car pos → car.pos.x += wxdtfactor where factor = tossed?1:(0.3 + slippery offroad 0.4).
• toss logic.
• collisions.
• terrain orient.
• dust emission.
• wheels spin, steer.
• headlight spotlight follows (inside car group so automatic).
• beacon pulse.

Tossed state:

During toss, camera shake high.

Damage/disabled:

Recover (R): teleport car to nearest road point: snap x to nearest multiple of S or z whichever closer, heading align road, speed 0, integrity = max(integrity, 40). Cost? fine free, toast.

Probes:

Probe data also small base rate? Only near. OK.

HUD update:

Radar draw as planned. Radar canvas 170. scale: 85px/450m. Draw:

Sweep angle = t*0.8 % 2π.

Input:

Space scroll prevention: e.preventDefault() when code Space.

Pointer click → lightning: track pointerdown pos/time on renderer.domElement; on pointerup: if moved<7px and dt<400ms and started and mode!=='orbit-drag'... In orbit mode OrbitControls also uses drags; small click fine. Raycast: ndc from event, raycaster.setFromCamera, intersect plane y=0: t = -origin.y/dir.y; point = origin + dir*t; clamp within world; lightning.strike(point.x, point.z) if lightning.cool<=0 → cool=1.2.

Touch joystick:

Camera modes: 'chase','hood','orbit'. cycleCam toggles chase→hood→chase. orbit separate (O or button cycles 3?). Button label update: '🎥 Chase'/'🎥 Hood'/'🎥 Orbit'. Let C cycle all three; O jump to orbit. OrbitControls enabled only in orbit; target lerp to tornado position (nice storm viewing); also allow car? target tornado.

Cinematic pre-start: camera orbits tornado: in loop if !started: angle = t0.06; r=380; cam.position = tor + (cosr, 150, sin*r); lookAt(tor.x, 120, tor.z). Sky follows camera.

Camera update (started):

Toast:

Snapshot:

New storm:

buildWorld disposes worldGroup incl trees; treeMeshes refs updated. Note: buildTrees sets treeMeshes = [trunks, canopies] and fullCount property — quality reapply needed: after buildWorld call applyQuality(tier).

Also probes: remove all probe objects.

car recover to spawn: place at (3, h, 300)? Ensure spawn area fine regardless of seed — on road x=0 ✓ (x=3 within road width 7.5/2=3.75 ✓ edge). Set x=2.

Reset car state.

Now HUD DOM refs & updates. Also FPS meter.

Part 5 code — car build:

Wait car referenced inside buildCar before car object defined — define car first, then buildCar assigns fields. Order: const car = {...}; car.obj = buildCar(); scene.add(car.obj);

SpotLight physical intensity: candela 1400, decay 1.8 → at 40m: 1400/40^1.8 ≈ 1400/758 ≈ 1.8 ✓ visible pool.

updateCar:

Hmm wind push: windOut.speed up to ~85 near core; factorspeeddt with clamp speed/60 → at core: 0.421.485dt? wait: pos += wind * factor * dt * clamp(speed/60) — at wind 85: 850.421.4 = 50 m/s push — huge. Should be pos += wind * factor * dt where factor small: at 85 m/s wind with factor 0.3 → 25 m/s drift — that's tornado tossing territory; the toss triggers inside core anyway (width0.55+5). Outside core wind decays: at d=2core: tang=39intensity → push 390.3=12 m/s — strong but OK near violent tornado. Keep factor 0.3 with clamp: pos += wind0.3dt*clamp(speed/55,0,1.2). Fine, dramatic but playable.

Wait — roll: hL measured at +side. If left higher than right, car rolls right (negative z rotation?). Sign conventions messy; visually subtle — keep as is, amplitude tiny.

Euler order 'YXZ' with pitch around X: with heading Y applied first, pitch about local X → correct forward pitch. Math.atan2(hBehind - hAhead, 4.4): if ahead lower (downhill), pitch should be positive nose down? rotation.x positive rotates nose up (around X axis +pitch tilts +z down? For object facing +z, rotation.x positive tilts front (+z) downward? Rotation about +X: +z goes toward -y? Right-hand rule: rotating about +X by θ: y→z, z→-y. So +z (nose) goes down for positive θ ✓ if downhill ahead (hAhead < hBehind → hBehind-hAhead>0 → pitch>0 → nose down ✓).

startToss:

damageCar:

When disabled ends: integrity = 58 (in updateCar: after decrement if crossing 0: if (car.disabled <= 0 && car.integrity <= 0) car.integrity = 58). Implement: if (disabled) { car.disabled -= dt; if (car.disabled <= 0 && car.integrity <= 0) { car.integrity = 58; toast('REPAIRED — ROLLING'); } }

recover:

Simpler: snap to vertical road x=kx, keep z, heading = 0 (north +z) or π. Choose heading facing along road toward map center: heading = car.pos.z > 0 ? Math.PI : 0 (facing -z if z>0 → toward center ✓ since forward=(sin,cos): heading π → (0,-1) ✓).

heading for horizontal road: facing -x if x>0 → forward=(-1,0): sin(h)=-1 → h=-π/2 ✓.

Probes:

Probe HUD: '●'.repeat(stock)+'○'.repeat(6-stock).

Radar:

Wait rotate: canvas rotate(θ) rotates coordinate system clockwise (since y down). We want car forward (sin h, cos h) in world (x right, z down) → direction on screen same. Triangle points "up" on screen? I drew moveTo(0,5.5) as tip pointing +y (down). With rotate(h): the local +y axis maps to (sin h? ...). rotate(h) maps local (0,1) → (−sin h, cos h)? Canvas rotate(θ): x' = x cosθ − y sinθ; y' = x sinθ + y cosθ. Local (0,1) → (−sinθ, cosθ). We want forward (sin h, cos h). −sin ≠ sin. So rotate(−h): local (0,1) → (sin h, cos h) ✓. Use rotate(-car.heading). And triangle tip pointing +y (down screen) = forward when h=0 ✓ (heading 0 → forward +z → down on radar since z down ✓).

Input handlers, joystick:

Joystick pointer events on #joy:

Click-to-strike on canvas:

HUD update function:

banner.className = 'show' + (cls?' '+cls:''). #banner.amber handles amber.

newStorm:

Hmm recoverCar toasts 'RELOCATED TO ROAD' — suppress? acceptable, two toasts overwrite anyway (recoverCar first then 'NEW STORM CELL'). Order: call recoverCar before toast so final toast is 'NEW STORM CELL' ✓.

toggleSound: audio.init() (if not), muted toggle, button label 🔊/🔇. Actually audio.init needs user gesture — button click is a gesture ✓. On Begin: init + unmute.

setCamMode/cycleCam + button label:

OrbitControls:

toggleOverlay: overlay.classList.toggle('hide'); if shown again after start, keep running (paused? no, keep running; note in overlay? fine).

Begin button:

btnHelp → toggleOverlay. Note: overlay has .hide initially? No — visible at boot (start screen). ✓ toggle via H.

OK, also collectingNow global set in loop from updateProbes.

Let me now write Part 5.

Part 6: cameras, quality tiers, main loop, boot, UI buttons, resize, snapshot, newStorm, toggleSound, toggleOverlay.

Quality tiers:

composer.setPixelRatio exists ✓.

fps monitor:

newStorm, toggleSound, toggleOverlay, snapshot:

Hmm — default: audio initialized on Begin with soundOn=true. toggleSound flips. Set initial soundOn=false; Begin sets soundOn=true + label.

Buttons wiring:

resize:

Boot:

WAIT — ordering problem: windFieldAt references tornado, Tornado constructor calls this.reset which doesn't call windFieldAt ✓. But Tornado class defined earlier references nothing of supercell ✓. newStorm references supercell & tornado — called at runtime ✓.

But Part 4/5 code references tornado in windFieldAt and updateCar — these are function declarations evaluated at call time; const tornado declared later in module scope — TDZ issue only if called before declaration executes. Calls happen in loop after everything defined ✓.

Also dust referenced in car functions; define dust before loop. rain, lightning same.

Boot order:

Hmm — tornado.reset uses srand() fine.

Wait, one problem: In Part 4 class Tornado references toast and audio in update — defined in part 5 (toast is function declaration hoisted ✓, audio const defined part 3 ✓). toast is a function declaration → hoisted ✓. OK.

deployProbe references started — let started declared in part 6 before boot... but deployProbe may be called only via events after ✓. TDZ: let started declared at part 6 top-level; any function referencing it before the let executes throws — but events only fire after script finishes ✓. Same for camMode, controls, lightning etc in handler functions ✓.

updateHUD uses windOut ✓ defined part 5.

Main loop:

_v1 reuse in loop for sky dir — but updateCamera also uses _v1... updateCamera called after sky dir set — sky dir set before updateCamera? In my order above, sky dir uses _v1 then updateCamera reuses _v1 later — fine sequential.

renderer.info.autoReset? fine default.

Also tornado.update before updateCar — toss check inside updateCar uses latest tornado ✓.

Wait: tornado.update(dt, t, carPos) signature I defined: update(dt, t, carPos) with carPos having .x/.z — I pass car.pos (Vector3, has x,z) ✓ uses carPos.x, carPos.z ✓.

One more: in Tornado.update when !alive: this._visuals(dt, t, 0) — sets group.visible = alive || intensity>0.01 → false → hidden ✓. But also SWAY pull remains from last alive state — set in update only when alive; when not alive should set uPull 0: in !alive branch add SWAY.uPull.value = 0. Let me patch: I'll add in the !alive branch. I'll fix via replace later or include in final review pass.

Also this.reach used in _visuals via this.reach ?? 0.25 — reset() doesn't set reach; enterPhase('forming') sets on next update ✓; but _visuals called in constructor? No — only in update ✓. First update: alive, phase forming, reach set ✓.

Init camera position for cinematic: camera.position set (0,60,160); tornado at car+320,-380 = (322, h, -80)... cinematic lerps anyway ✓.

Also don't forget: started referenced in updateCar & handlers; defined with let before loop starts ✓ but the keydown listener registered in part 5 BEFORE let started in part 6 executes — a keypress during load could call deployProbe → references started in TDZ → throw. Risk: user presses space before module finishes executing — module executes synchronously in ms; event handlers can't fire during synchronous execution (JS single thread, events queued). ✓ Safe.

Another check: applyQuality uses rain, tornado, treeMeshes — called at boot after those exist ✓. Called in newStorm ✓.

buildWorld uses $('seed') ✓ DOM ready (script at end of body, module deferred anyway ✓).

In part 3 buildWorld sets pondWaterY = null then recompute — harmless line, fine. Actually I wrote pondWaterY = null; then pondWaterY = heightAt(...) — heightAt references pond but not pondWaterY ✓.

buildTerrain uses pondWaterY ✓ computed before ✓.

One issue: findSpot uses srand() — defined ✓.

In buildTrees: const spot = findSpot(11, 1e9, 16, 1) || findSpot(11, 1e9, 16, 1); weird double call, harmless.

Tornado debris colors: setColorAt before mesh added ✓; instanceColor needsUpdate ✓.

THREE.CylinderGeometry(1.35, 1.1, 1, 40, 10, true) skirt: top radius 1.35 wider than bottom 1.1 — flared ✓ then shader uWidth scales: skirt radius = prof (mix(uPinch=0.85, 1, t^0.75)) * uWidth... but skirt geometry already has radius 1.1-1.35, and shader recomputes p.x/p.z from angle with prof — discards original radii! In the vertex shader I fully reconstruct radial position: p = sin(ang)profradpulse — so geometry radius irrelevant (only angle + t used). For skirt: radius = mix(0.85,1,pow(t,0.75)) * uWidth → 0.85..1 × uWidth where uWidth = width0.72 → then mesh.scale.set(width1.5, ...) — WAIT scale.x also multiplies shader-computed p.x! mesh.scale.x = width1.5 multiplies the already-width-scaled position → double scaling!

Careful: funnel meshes: mesh.scale.set(1, funnelH, 1) — x,z scale 1, so shader width applies directly ✓. Skirt: I set scale (width1.5, skH, width1.5) AND uWidth = width0.72 → final radius = uWidth * prof * scale.x = width0.72profwidth*1.5 — quadratic! Bug.

Fix: skirt scale.set(1, skH, 1), and set uWidth such that radius ≈ width1.5: uWidth = width1.5? prof max 1 → radius = width1.5 at top, 0.85width*1.5=1.27w at bottom. Good flared skirt. And remove scale x/z. I'll patch _visuals:

But wait — skirt geometry height 1 translated 0..1 → scale.y = skH ✓ height skH ✓.

Also funnel uPinch for skirt 0.85 gives slight flare ✓.

Additionally the skirt shader fades: a *= smoothstep(0.0, 0.10, vT) fades bottom — for skirt we want fade at TOP instead. Compromise: the funnel fragment fades bottom 0..0.1 (fine for skirt too — blends into ground) and top fade 1 - smoothstep(0.72,1,vT)*0.8 — skirt top faded ✓ good.

Patch needed — I'll do a replace after writing part 6.

Also funnel fragment a *= smoothstep(low, low+0.09, vT) with uReach for skirt: set uReach=1 → low=0 → smoothstep(0,0.09) duplicate of the 0.10 one ✓ fine.

Another check — Tornado._visuals lean: leanAng = heading + PI/2, uLean applied as p.x += lean.xtt — in local funnel space, mesh has no rotation ✓ world-aligned ✓.

Debris dummy rotation: rotation.set(ttum, ang, ttum*0.7) — t grows unbounded; rotation fine mod 2π.

Rain material opacity 0.3 with normal blending ✓.

Lightning color >1 with toneMapped false → bloom ✓. But LineBasicMaterial color set via new THREE.Color(2.0, 2.3, 3.2) ✓ allowed.

flashLight PointLight(color, 0, 2400, 1.7) — decay 1.7 param ✓.

Dust shader: gl_PointSize with pixelRatio? On high-dpr points appear smaller — acceptable.

Radar mx/mz scale: scale = C/450 = 85/450 ≈ 0.189 ✓ view radius 450m ✓ label says 450m ✓.

updateHUD — hpFill.style.width = car.integrity + '%' ✓.

Now write part 6 with the fixes incorporated (skirt fix I'll do as a patch to part 4 text via replace tool).

Also add SWAY.uPull.value = 0; when tornado not alive. I'll patch in Tornado.update !alive branch.

Let me also double check buildPowerLines — positions array holds x,y,z triplets; loop for (let z = -H; z < H; z += step) positions.push(off, heightAt(off, z), z); → poles count = positions.length/3 ✓ InstancedMesh count positions.length/3 ✓.

Wire catenary: from pole i-1 to i: both at x=off (+side ±1.1). z from pz to z ✓ y: py+8.3-sag — but terrain height varies per pole; I use py (previous pole's ground y) for both ends — slight mismatch vs current pole's y. Sag curve between different heights should lerp y too: y = lerp(py, y, t) + 8.3 - sag. Let me fix: wirePts.push(px+side, lerp(py,y,t0)+8.3-sag(t0), ...). Patch via replace later. sag function: 1.7 * 4 * t * (1-t) * 0.35 = 2.38t(1-t) max 0.6 at mid — fine.

Check strip() in buildRoads: corners order for vertical: [fixed-w, a],[fixed+w, a],[fixed-w, a+step],[fixed+w, a+step] → vi: (x-,z0), vi+1: (x+,z0), vi+2: (x-,z1), vi+3: (x+,z1). Triangles (vi, vi+2, vi+1) and (vi+1, vi+2, vi+3) — winding for upward normal (+y): counter-clockwise when viewed from above (+y looking down -y... in three, front face is CCW in right-handed coords viewed from front). For a ground plane facing +y: viewed from above, CCW. Points: vi at (x-,z0), vi+2 at (x-,z1), vi+1 at (x+,z0): from above (x right, z down in plan view? In three, looking from +y down, x right, z toward viewer (down in plan)). Triangle (x-,z0) → (x-,z1) → (x+,z0): going down then diagonal up-right: is that CCW from above? Looking from +y toward -y, the axes: x right, z down-screen. Path: top-left → bottom-left → top-right: that's clockwise on screen (top-left→bottom-left is down; bottom-left→top-right is diagonal; top-right→top-left is left)... screen-clockwise = CCW in right-handed when viewed from +y? Ugh. Simplest: computeVertexNormals will compute normals from winding; if wrong, normals point down → road dark & backface culled (invisible!). Material default side FrontSide. Risk of invisible roads!

Let me verify carefully with cross product. v0 = (-w, 0), v1 = (-w, step), v2 = (+w, 0) in (x,z). Triangle (v0, v1, v2). Edge1 = v1-v0 = (0,0,step) [in 3D (x,y,z): (0,0,step)]. Edge2 = v2-v0 = (2w,0,0). Normal = Edge1 × Edge2 = (0,0,step)×(2w,0,0) = (00 - step0, step2w - 00, 00 - 02w) = (0, 2wstep, 0) → +y ✓ CCW from above gives +y normal. My indices: (vi, vi+2, vi+1): v0=(x-,z0), v1'=(x-,z1)=vi+2, v2'=(x+,z0)=vi+1 ✓ matches above → +y ✓. Second triangle (vi+1, vi+2, vi+3): v0=(x+,z0), v1=(x-,z1), v2=(x+,z1). E1 = v1-v0 = (-2w,0,step), E2 = v2-v0 = (0,0,step). N = E1×E2 = (0step - step0, step0 - (-2w)step, 0) = (0, 2wstep, 0) ✓ +y.

Horizontal strips: corners: [a, fixed-w],[a+step, fixed-w],[a, fixed+w],[a+step, fixed+w]: vi=(z-,x0)... let me map: (x0,z-)=A, (x1,z-)=B, (x0,z+)=C, (x1,z+)=D with indices vi=A, vi+1=B, vi+2=C, vi+3=D. Triangle1 (A, C, B): E1 = C-A = (0,0,2w) [z+ - z-], wait C = (x0, z+) so C-A = (0,0,2w). E2 = B-A = (step,0,0). N = E1×E2 = (00-2w0, 2wstep-00, 0) = (0, 2wstep, 0)? compute: E1=(0,0,2w), E2=(step,0,0): cross = (00 - 2w0, 2wstep - 00, 00 - 0step) = (0, 2w·step, 0) ✓ +y. Triangle2 (B, C, D): E1 = C-B = (-step,0,2w), E2 = D-B = (0,0,2w). cross = (02w - 2w0, 2w0 - (-step)2w, 0) = (0, 2w·step... let me: x = E1yE2z - E1zE2y = 02w - 2w0 = 0; y = E1zE2x - E1xE2z = 2w0 - (-step)2w = 2w·step ✓; z = E1xE2y - E1y*E2x = 0 ✓ +y.

computeVertexNormals then averages with actual heights — fine.

PlaneGeometry rotateX(-PI/2) ✓ normals +y ✓.

prismGeo normals via computeVertexNormals — non-indexed positions, fine. Winding: slope faces outward? Check slope1 (+x side): verts (0,h,-hl),(hw,0,-hl),(hw,0,hl): E1 = (hw,-h,0), E2 = (hw,-h,2hl). N = E1×E2 = (-h2hl - 0(-h), 0hw - hw2hl, hw*(-h) - (-h)*hw) = (-2h·hl, -2hl·hw, 0)?? That points -x,-y — INWARD for the +x slope. Hmm: slope1 is the roof side facing +x. Normal should be (+x, +y)ish. My winding gives -x,-y → faces inward → invisible from outside & dark inside.

Fix: reverse winding for slope1: (0,h,-hl),(hw,0,hl),(hw,0,-hl)? Or reorder. Let me recompute all faces with outward normals. Actually simplest: make roof material DoubleSide? MeshLambertMaterial({side: THREE.DoubleSide}) for roofMat — cheap and safe for a handful of buildings. But lighting with flipped normals: computeVertexNormals on wrong winding gives normals pointing inward → lit incorrectly (dark). DoubleSide + wrong normals → Lambert shades using flipped normal for backface? three flips normals for backfaces automatically in Lambert? Yes: #ifdef DOUBLE_SIDED normal = normal * faceDirection;... faceDirection = sign(gl_FrontFacing)... With DoubleSide, three negates normal for back-facing fragments → correct-ish lighting. So DoubleSide roofs solve it. But end caps: triangles (0,h,hl),(hw,0,hl),(-hw,0,hl): E1=(hw,-h,0), E2=(-hw,-h,0): N = E1×E2 = ((-h0 - 0(-h)), (0*(-hw) - hw0), (hw(-h) - (-h)(-hw))) = (0,0,-2h·hw) → -z. End cap at +hl (front) should have +z normal → inverted too. DoubleSide fixes all.

I'll patch roofMat to DoubleSide. Actually check barnRoof geometry visible from all angles — DoubleSide ✓.

Similarly cap hemisphere on silo: SphereGeometry thetaLength PI/2 top half ✓ outward normals ✓.

Trees instanced canopy: IcosahedronGeometry detail 1 — PolyhedronGeometry IS non-indexed with duplicated verts — my jitterGeo hashes by rounded position key so duplicates get same offset ✓ no cracks ✓.

Now mergeGeometries([blob1, blob2]) — both non-indexed icosahedrons ✓ compatible (same attributes) ✓.

buildTrees canopyMat color white with instanceColor — final color = color × instanceColor ✓ tints ✓.

One more possible issue: addSway patches Lambert's project_vertex replacement — my replacement string re-declares vec4 mvPosition — the chunk itself declares it, so replacing the include with code that declares it once ✓ no duplicate. But worldpos_vertex chunk (used for shadows/env) comes BEFORE project_vertex in lambert vertex shader? Order in lambert: begin_vertex, morphtarget, skinning, displacementmap, project_vertex, logdepthbuf, clipping, worldpos_vertex... worldpos_vertex uses transformed and instanceMatrix again — unaffected by my patch (it computes worldPosition for shadow coords — sway offset won't apply to shadow coords → slight shadow mismatch at strong bend; acceptable).

Wait actually shadow receiving uses shadowmap sampling from worldPosition — bending not reflected → trees bent toward tornado but shading/shadow as if straight — subtle, fine.

USE_INSTANCING: defined automatically for InstancedMesh ✓.

Next: EffectComposer setPixelRatio — exists ✓. bloomPass resolution internal handles resize via composer.setSize ✓.

composer.setSize(innerWidth, innerHeight) in onResize ✓.

Snapshot before composer render of first frame? fine.

renderer.domElement.toDataURL — WebGL canvas without preserveDrawingBuffer: toDataURL right after composer.render() in same synchronous stack → buffer still valid ✓ (snapshot called from event handler: composer's last render was in previous RAF — buffer may be cleared! But we call composer.render() synchronously right before toDataURL within the same handler → valid ✓).

OK. Also the initial camera.position.set(0,60,160) unused since updateCamera cinematic lerps ✓.

controls construction before car exists? OrbitControls just needs camera+dom ✓.

started flag declared let started = false; before buildWorld boot? Order in part 6: declare UI fns, TIERS, then boot block, then loop. applyQuality in boot — uses rain/tornado — declared above boot ✓.

Also newStorm/setCamMode/etc referenced in part-5 keydown — function declarations in part 6 are hoisted at module level ✓ (function declarations hoist across the whole module scope — yes, top-level function declarations in a module are hoisted within module scope, so earlier addEventListener callbacks referencing them work when invoked later ✓). But cycleCam referenced in $('tCam') listener at part 5 — invoked on click only ✓.

TDZ: const btnCam = $('btnCam') in part 6 — setCamMode uses it ✓ after init.

Also: audio.ui inside setCamMode before audio.init → audio.ok false → no-op ✓.

One more: updateHUD/drawRadar called every frame — even before start (started=false) fine ✓.

tornado.update when !alive calls this._visuals(dt, t, 0) then possibly reset; also need SWAY.uPull.value = 0 — patch.

Also lightning.update auto strikes target tornado pos even when dissipated — rate scaled by 0.08 intensity when !alive → rare ✓ fine (storm still cycling).

Radar: tornado.pos is Vector2 (x, y=z) ✓ used as pos.y for z ✓ consistent everywhere.

Let me also add document.addEventListener('visibilitychange')? skip.

Edge: renderer.setPixelRatio then composer.setPixelRatio — in applyQuality then onResize() calls renderer.setSize + composer.setSize which preserve pixel ratio ✓.

Write part 6 now, then apply patches:

1. skirt scale fix.
2. roofMat DoubleSide.
3. SWAY pull reset when !alive.
4. power line wire y-lerp.

Now apply the fixes I identified:

1. Skirt double-scaling bug: this.skirt.scale.set(this.width * 1.5, skH, this.width * 1.5) + uWidth = width0.72 → quadratic. Fix: scale.set(1, skH, 1), uWidth = width1.5.

2. roofMat DoubleSide for prism geometry winding.

3. SWAY.uPull reset when tornado not alive.

4. Power line wire y-lerp between poles.

Let me apply these with replace_in_file.

**************************************************************************************************************************************************************************************************************************************rp.

Wait, in the wire code, const [px, py, pz] = [...] destructures from array — px etc. But I also need y (current pole y) — in the enclosing loop: const [x, y, z] = [positions[i*3], ...] ✓ y is defined. ✓

Now let me extract the module script and run node --check to catch syntax errors. The script is between <script type="module"> and </script> (the last script tag). Extract via awk/sed.

Syntax OK. Now let me do a quick GLSL sanity review and check a few logic issues:

1. Check funnel shader compile mentally:

• vertex: uses uTime, uWidth, uPinch, uWobble, uInt, uLean, snoise — all declared ✓. varyings vT, vA, vViewZ declared ✓.
• fragment: uTime, uSpin, uOpacity, uSeed, uColA, uColB, uReach, uFlash + FOG_GLSL uniforms uFogColor/uFogDensity declared via FOG_GLSL string ✓ varyings ✓.

Wait — FOG_GLSL declares uniform vec3 uFogColor; uniform float uFogDensity; and in the ShaderMaterial uniforms I include uFogColor and uFogDensity ✓.

cloudBandMaterial fragment: NOISE_GLSL + FOG_GLSL + uniforms used: uTime, uSeed, uColA, uColB, uOpacity, uFlash — declared in the fragment prologue ✓ (I wrote uniform float uTime; uniform float uSeed; ... ✓).

baseMat fragment: declares uTime, uFlash + NOISE + FOG ✓.

Sky shader: NOISE_GLSL + uniforms uTime, uFlash, uStormDir, uHorizon, uZenith, uStormCol — declared ✓. skyUniforms has all ✓.

Dust shader: attributes aSize, aAlpha; uniform uColor ✓.

Grade pass ✓.

2. Potential runtime issue: treeMeshes.fullCount = n; — assigning property on array ✓.

3. applyQuality — treeMeshes.fullCount || m.count ✓.

4. In buildWorld, treeMeshes assigned in buildTrees; on rebuild old meshes disposed via disposeGroup ✓ (instanceColor buffers disposed with geometry ✓).

5. Tornado._visuals — this.reach ?? 0.25 ✓.

6. tornado.reset in boot: tornado constructor already calls reset(120, -160) before toast/audio exist? Constructor → reset() → sets fields only, no toast/audio ✓. enterPhase ✓ safe.

7. lightning.strike uses srand ✓; audio.thunder called even when audio not init → guarded by this.ok ✓.

8. updateHUD uses banner.className = 'show'... — element id banner has CSS #banner.show ✓. When className='' → id styles only (opacity 0) ✓.

9. Radar: EF_COLORS[tornado.ef] ✓.

10. updateCamera uses tornado.pos.y as z ✓.

11. Hood camera: _v1.set(car.pos.x + sH*0.5, ...) — hood slightly forward ✓.

12. SpotLight target added to group g — car.spot.target = car.spotTarget ✓, target matrixWorld updated since it's in scene graph ✓.

13. Physics: steering while reversing — heading += steer*speed → reversing with steer flips direction naturally ✓.

14. Deploy probe position: behind car: - Math.sin(car.heading) * 3 → behind ✓.

15. Probe destroy distance: tornado.width * 0.55 + 4 ✓.

16. In updateCar, when tossed, wheels/beacon not updated — fine.

17. When car.disabled, throttle ignored, car decelerates via drag ✓.

18. qualityMonitor: auto tier up limited ✓.

19. onResize uses innerWidth — ✓.

20. The pd pointer click conflicts with OrbitControls drag: moved>7 guard ✓.

21. renderer.domElement pointerdown also fires when clicking joystick? Joystick is a separate DOM element above canvas → events don't reach canvas ✓.

22. Issue: In cinematic mode (before start), OrbitControls disabled ✓.

23. skyMesh.position.copy(camera.position) each frame ✓ radius 3400 < far 6000 ✓.

24. Fog on Lambert materials — default fog:true ✓ matches scene.fog ✓. ShaderMaterials for funnel/cloud handle fog manually ✓. Sky fog:false ✓. Rain LineBasicMaterial fog default true → distant streaks fogged ✓ fine. Lightning material fog? LineBasicMaterial has fog:true default; additive bolt far → fogged slightly, ok.

25. One concern: flashLight distance 2400 with decay 1.7 — fine.

26. dirLight.position.set(car.pos.x + 180, 260, car.pos.z + 120) + target — shadow camera follows ✓.

27. Trees castShadow with custom onBeforeCompile — depth material for shadows is separate MeshDepthMaterial without sway ✓ fine.

28. Debris MeshLambertMaterial color white × instanceColor ✓. Debris count starts 0... constructor: debris.count default DEBRIS_MAX; first _visuals sets count ✓.

29. In Tornado.update respawn branch: uses toast (hoisted function ✓) and audio ✓.

30. buildWorld — buildTrees uses findSpot(11, 1e9, 16, 1) — minRoad 11, maxRoad 1e9 — the dr > maxRoad check: dr <= 115 always < 1e9 ✓ so only minRoad matters ✓.

31. Farm placement: findSpot(16, 70, 40, 60) — 60 tries might fail → skip ✓.

32. The overlay .card p.desc has a typo color:#a9bcB0; color:#a9bcb0; — harmless duplicate.

33. gradePass ShaderPass object: uniforms tDiffuse auto-set ✓.

34. UnrealBloomPass threshold param 0.78 (third arg is strength? Constructor signature: UnrealBloomPass(resolution, strength, radius, threshold) — I passed (res, 0.5, 0.65, 0.78) → strength 0.5, radius 0.65, threshold 0.78 ✓.

35. Check: composer.setPixelRatio(q.pr) — exists in r160 ✓.

36. IS_TOUCH initial tier 1 ✓.

37. In Rain.update, first frame cam.y ~ 60+ (cinematic 150): box spawn y cam.y+45+rand*24 ~ up to 220 — rain visible in cinematic ✓.

38. Audio update called every frame with windOut (car's wind) ✓.

39. windOut.speed in mph: 2.237 ✓ ambient 7gust≈5-9 m/s ≈ 11-20 mph ✓ reasonable.

40. Danger distances vs width: width at EF5 (intensity 1) = 61; coreR = 61*0.55+5 ≈ 38.5. Toss radius OK. Probe collect radius 135 ✓.

41. car.dustAcc increments only when dusty conditions; else reset 0 ✓.

One more potential issue: in updateCar, keys, joy, started — started declared in part 6 via let; updateCar defined in part 5 — closure over module scope, called after boot ✓.

recoverCar called at boot (before started) ✓ sets car position ✓.

Also car.obj.rotation.set(0, car.heading, 0) in recoverCar — then updateCar slerps to terrain quaternion ✓.

42. Loading order: buildWorld → ... → applyQuality(tier) → loop. applyQuality references rain & tornado — defined ✓ (const rain = new Rain before applyQuality) ✓ order in boot: supercell, tornado, lightning, rain, dust, car, recoverCar, tornado.reset, supercell pos, applyQuality ✓.

43. new Tornado(scene) constructor calls this.reset(120, -160) — fine, then boot resets again ✓.

44. toastTimer — let toastTimer = 0 and clearTimeout(0) fine ✓.

45. Meta: banner variable conflicts? const banner = $('banner') — no global conflict ✓.

46. new THREE.Color(2.0, 2.3, 3.2) — Color constructor with r,g,b > 1 ✓ stored as-is.

47. CircleGeometry for base disc: rotateX(-PI/2) → normal +y? CircleGeometry faces +z; rotateX(-90°) → faces +y ✓ visible from above; DoubleSide anyway ✓.

48. In Supercell.update: wall.position.x = tor.pos.x - group.position.x — wall is child of group → world pos = group + wall.position = tor.pos ✓.

49. Meso cylinder radius top 430 — huge; camera far 6000 ✓.

50. Cloud base disc at CB-14 = 236; funnel top at cloudBase - 30 relative ground: funnelH = CB - groundY - 30 → top y = groundY + funnelH = 220 → funnel ends at 220, base disc at 236, wall cloud spans CB-48..CB-2 = 202..248 with translate 0.5 → wall geometry y 0..1 scaled? wall geometry: CylinderGeometry(50, 72, 46,...) translate(0, 0.5, 0) → local y 0..46? No — translate(0, 0.5, 0) shifts -23..23 to 0.5..46.5. Hmm: cylinder height 46 centered → y ∈ [-23, 23]; translate 0.5 → [-22.5, 23.5]. I intended 0..1 normalization but height isn't 1. The cloudBandMaterial uses vT = position.y expecting 0..1! For meso: height 190 → y ∈ [-95, 95], translate 0.5 → [-94.5, 95.5]. vT = position.y = raw → completely wrong range!

Bug: cloudBandMaterial's vT and funnel's t both assume position.y ∈ [0,1]. For funnel geometry: CylinderGeometry(1,1,1,...) height 1 → y ∈ [-0.5, 0.5]; translate(0, 0.5, 0) → [0, 1] ✓ correct. Skirt height 1 ✓.

But meso (height 190, translated 0.5) and wall (height 46, translated 0.5) get vT in world units — broken shader (bands/alpha wrong).

Fix: in cloudBandMaterial vertex, normalize: need uniform uHeight? Simpler: change geometry translate to scale heights to 1: for meso: CylinderGeometry(430, 250, 1, 48, 20, true) translate(0, 0.5, 0), then mesh.scale.y = 190. Wall: height 1, translate, mesh.scale.y = 46. Radius unaffected by y-scale ✓. Position adjustments: meso.position.y = CB - 20 with scaled y 0..190 → spans CB-20..CB+170 ✓. Wall: position.y = CB - 48 → spans 202..248 ✓.

So change:

• mesoGeo: height 1 → new THREE.CylinderGeometry(430, 250, 1, 48, 20, true); mesoGeo.translate(0, 0.5, 0); and this.meso.scale.y = 190;
• wallGeo: new THREE.CylinderGeometry(50, 72, 1, 32, 8, true); wallGeo.translate(0, 0.5, 0); this.wall.scale.y = 46;

51. Similarly check tornado funnel: geometry height 1 ✓ correct.

52. cloudBandMaterial bands: sin(vT * 26.0 + m * 5.0) with vT 0..1 ✓ after fix.

Let me apply fixes for meso and wall geometry.

Now let me write a quick smoke test that runs the module logic in Node with mocked imports? That's heavy. Instead, let me do a static sanity pass on a few more things:

1. Verify GLSL braces balance in each shader by extraction — quick script to count braces/parens per shader string would be nice but strings embed in JS template literals. Node already parsed JS. For GLSL, I can write a small Node script that imports nothing but extracts template literals containing 'void main' and checks brace/paren balance and basic uniform usage. Let me do a rough check with grep: count 'void main' occurrences (should be ~12).

2. Check for accidental duplicate const declarations — node --check passed, so no.

3. Check that all DOM ids referenced exist in markup: seed, btnNew, btnCam, btnSound, btnSnap, btnHelp, radar, efLabel, efFill, efBar? (efBar not referenced in JS ✓), windV, distV, dataV, hpBar?, hpFill, probeV, banner, toast, overlay, btnBegin, joy, tProbe, tCam, fps, app. Let me verify with grep.

4. One more logic check — deployProbe uses started — also touch button. ✓

5. updateProbes — probes removed from scene but stay in car.probes with alive=false — radar skips !alive ✓.

6. In buildWorld, $('seed') — exists ✓.

Let me run these checks.

All IDs exist. 12 void main = 6 vertex + 6 fragment shaders (sky, meso band, base disc, funnel (shared factory but 2 instances — it's 1 vertex + 1 fragment in code), dust points, grade) — wait: sky (2), cloudBand (2), base (2), funnel (2), dust (2), grade (2) = 12 ✓.

Now GLSL brace balance — since these are JS template literals, a missing brace would likely still pass node --check. Let me write a quick Node script to extract each template literal shader and check balance of {}, (), and also verify varyings match between vertex/fragment. A simpler heuristic: extract strings containing 'void main' and check braces balanced.

Actually easier: let me use Node to evaluate the file with mocked modules? Too heavy. Let me just extract template literals via regex and check balance.

All GLSL literals balanced, no suspect patterns.

Now let me do a deeper runtime sanity test — I can actually run a headless simulation of the pure-JS logic (noise, heightfield, tornado lifecycle, wind field) in Node by extracting relevant functions. That would catch runtime errors in class logic. But three.js imports make it hard. Alternative: use a headless browser? Probably not available. Let me check if there's a headless chromium... Actually simpler: create a Node test harness that stubs 'three' module enough to import the file? The module does DOM access at top level (document.getElementById etc.) — too much stubbing.

Alternative pragmatic approach: careful targeted re-read of the trickiest sections. Let me re-read the Tornado class update & visuals and the Supercell update once more, plus check srand usage in constructors (srand is fine).

One thing I want to double check: CylinderGeometry(1, 1, 1, 56, 44, true) — openEnded param position: (radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded) ✓.

new THREE.CircleGeometry(335, 48) ✓.

mergeGeometries import used ✓.

THREE.IcosahedronGeometry(2.2, 1) ✓.

In jitterGeo, hashN(i * 3 + 1, 17) — hashN uses seed — at boot seed set; jitter per build — fine.

In buildTrees: findSpot(11, 1e9, 16, 1) || findSpot(...) — fine.

Check buildFarm pieces collider transform: g.updateMatrixWorld(true) after parent.add? I call parent.add(g) then g.updateMatrixWorld(true) — but parent's matrixWorld may not be updated... worldGroup has identity transform ✓ so fine.

Wait in buildFarm: I wrote:

Let me verify the actual order in the file... I wrote parent.add(g); g.updateMatrixWorld(true);? Looking at my part 3:

Yes ✓.

worldGroup has no transform ✓ so matrixWorld = local ✓.

Now applyQuality called in newStorm — rain & tornado & treeMeshes ✓.

Potential issue: dirLight.shadow.map.dispose() when map exists then set null ✓ forces realloc.

Another check — composer.setPixelRatio + composer.setSize in onResize ✓.

updateCamera orbit mode: controls.target.lerp — controls.update applies damping ✓ camera controlled by controls ✓. When switching back from orbit to chase, camera.position stays where orbit left it; chase lerp pulls it back ✓ smooth.

Pre-start cinematic: camera.lookAt storm ✓. Note camera.position.lerp with k=1-exp(-dt*1.2) from (0,60,160) — initial tornado at car(2,300)+320,-380 → (322, -80). Distance ~ 700 → lerp slowly brings it around ✓.

HUD: $('fps') update ✓.

Edge: rain.update uses camera.position for box — in cinematic high orbit, rain spawns around camera — good.

updateHUD(dCore) — dCore computed from tornado.pos (Vector2) ✓.

One more: banner shows 'STREAMING PROBE DATA' in amber — collectingNow set by updateProbes before updateHUD ✓ order in loop: updateProbes (sets collectingNow) → ... → updateHUD ✓.

Audio.update parameters: audio.update(windOut.speed, roar, 1, car.speed) — rainAmt 1 constant ✓.

audio.setMuted(!soundOn) in toggleSound; Begin sets soundOn=true → setMuted(false) ✓.

Now, is there an issue with started being referenced in the keydown handler for Space → deployProbe checks if (!started) return; ✓ good (prevents probe deploy before begin).

snapshot before start? Allowed, renders cinematic ✓.

I think the demo is solid. Two more minor improvements worth doing quickly:

A. In updateCar, when tossed we return early — HUD wind etc still updated in loop ✓. But wheels don't spin — fine.

B. The dirLight.intensity 1.05 with storm sky might be bright; acceptable.

C. renderer.info — not needed.

D. One potential visual issue: funnel fragment col += uFlash * 0.5; — uFlash is float, adding to vec3 → adds to all channels? In GLSL, vec3 + float is invalid! GLSL does NOT implicitly broadcast float to vec3 in addition... Actually GLSL DOES support vec3 + float: "The arithmetic binary operators add (+), subtract (-), multiply (*), and divide (/) operate on integer and floating-point scalars, vectors, and matrices. If one operand is a scalar and the other is a vector or matrix, the scalar is applied component-wise." ✓ Valid. Same in sky: col += uFlash * (0.32 + 0.5*storminess); float → component-wise ✓ valid.

E. In base disc shader: vec3 col = mix(vec3(0.10, 0.115, 0.12), vec3(0.23, 0.26, 0.27), ...) ✓.

F. cloudBandMaterial vertex: vT = position.y; — with geometry translate(0,0.5,0) and height 1 → 0..1 ✓ after my fix.

G. meso vT banding: smoothstep(0.0, 0.14, vT) * (1.0 - smoothstep(0.8, 1.0, vT) * 0.7) ✓.

H. Dust gl_PointSize — large sizes near camera; size 2-3.6 * (240/z) at z=5 → 170px huge → alpha discard via smoothstep circle ✓ fine, soft.

I. Rain uses Math.random() not srand — fine.

J. camera.lookAt in hood mode with shake ✓.

K. Trees near spawn: findSpot minRoad 11 → spawn on road x=2 won't collide immediately ✓. Power poles at x=6.5 though! Spawn at (2, 300) on road x≈0 — poles at x=6.5, road half-width 3.75 → pole 6.5 is off-road ✓ car width 1.9 → clearance ~2.5 ✓ ok. Driving along road might clip poles if swerving — that's gameplay ✓.

L. colliders include poles at x=6.5 every 46 along z — car spawn (2, z=300) heading π (toward -z) ✓ clear.

M. recoverCar — kx = round(car.pos.x / S) * S: car.x=2 → kx=0 ✓ pos.x = 2 ✓ heading π if z>0 ✓.

Looks good. Now, one more potential visual problem: the funnel uOpacity outer 0.5 with DoubleSide — the far side of the funnel shows through the near side: with depthWrite false and DoubleSide, back faces and front faces both render — sorted? Within a single mesh, triangles render in order — back-to-front not guaranteed → visual artifacts possible but typical for such demos; the layered noise alpha tends to look fine (adds density). Keep.

Also: outer funnel renderOrder 11, inner 12, skirt 10 — transparent objects sorted by renderOrder ✓.

The cloud meshes: default renderOrder 0, transparent → rendered before funnel (renderOrder higher drawn later) ✓ funnel inside cloud ✓ good.

One thing: cloud meshes frustumCulled = false ✓ set.

this.base.frustumCulled = false ✓.

scud frustumCulled false ✓.

Trees frustumCulled default true — InstancedMesh bounding sphere computed from geometry only (not instances)! Default three behavior: InstancedMesh has boundingSphere computed via computeBoundingSphere() which accounts instances in newer three (r160: InstancedMesh.computeBoundingSphere exists and is used by raycast, but frustum culling uses geometry.boundingSphere unless mesh.boundingSphere? In r160, InstancedMesh has its own boundingSphere property? Frustum culling checks object.boundingSphere? Actually WebGLRenderer projectObject → frustum.intersectsObject(object) → uses object.geometry.boundingSphere (centered at object origin). For InstancedMesh spread over 1800 units, geometry bounding sphere ~ radius 3 → culled incorrectly when camera looks away from origin!

In r160, InstancedMesh has boundingSphere property? Let me recall: r158+ added InstancedMesh.computeBoundingSphere() and frustum culling DOES use instanced bounding sphere if available. In three r160, Frustum.intersectsObject checks object.boundingSphere !== undefined ? object.boundingSphere : geometry.boundingSphere... Hmm. I believe r156+ InstancedMesh gained boundingSphere computed from instances, and intersectsObject uses object.boundingSphere if not null. To be safe: set frustumCulled = false on all InstancedMeshes (trees, bales, rocks, poles, arms, debris, scud) — debris/scud already false. Trees span whole map — set false. Cost trivial (few draw calls always).

Let me patch: trunks.frustumCulled = false; canopies.frustumCulled = false; bales mesh, rocks mesh, poles, arms.

Similarly LineSegments for wires: geometry bounding sphere computed automatically on first render? computeBoundingSphere called by renderer when needed — wires span map → boundingSphere computed from positions ✓ correct since static geometry positions are world-space ✓ fine.

Roads/terrain geometry world-space ✓ fine.

Patch instanced meshes now.

Now let me run a proper runtime smoke test. Since a headless browser is likely unavailable, let me at least test the pure-logic portions (RNG, noise, heightfield, road distance, tornado lifecycle math, wind field) by extracting them into a Node test with minimal stubs. Actually, an easier high-value test: check whether headless Chromium or a browser is available.

No headless browser. Let me build a Node smoke test with a minimal three stub — actually simpler and quite valuable: extract the pure logic functions from the module (rng, hash, noise, heightAt, distToRoad, tornado lifecycle envelope, wind field math) and verify outputs are finite and sane over iterations. I'll copy the relevant pure functions manually into a test file (they don't depend on THREE).

Let me write it quickly.

All logic tests pass:

• Height range -9.4..5.6 (pond depression OK, gentle plains ✓)
• Road distance math ✓
• Lifecycle stays in [0,1] over 150s with peak 0.91 ✓
• Wind: 165 mph at core edge (EF4 territory ✓), ~11 mph far away ✓

Now re-extract and re-check syntax after the patches, then update the demos index. Let me also double-check the file's HTML structure is complete (closing tags).

***********************************************************************************************************1).

*****************************************************************************************************************************************************************er.

Everything verified:

• 52 demo cards, all links resolve, no dupes, range 1-52.
• New demo: 052-supercell/index.html, 2156 lines, 98KB.
• Syntax OK, GLSL balanced, logic tests passed, DOM ids verified.
• Index updated with the new demo at the top.

One last quick sanity — verify the extracted module one more time has no leftover issues from the python patch (already node --check'd after patches ✓ — yes, check052b was extracted after all patches).

Let me also do a final quick grep for any obvious leftover problems like "TODO" or double-defined variables... node --check passed so no duplicate const in same scope.

I'm confident. Complete the task with _success, then _checkTaskRunStatus to close the run? The instructions: task run ends when checkpoint records terminal status. I'll call _success with a brief summary.