Create Wavefront Three.js Demo

************************************************************************************************************************************************************************************************************************************re.

Let me check the current state of the demos folder.

************************************************************************************************************************************************************************************************************************************************st.

I understand the structure. Now I need to create demo 032. Let me think of a cool concept that hasn't been done yet. Existing demos:

1. Spinning cube
2. Nebula galaxy
3. Mandelbulb explorer
4. Fluid dynamics
5. Gravity sandbox
6. Event horizon (black hole)
7. Sonic reactor (audio)
8. Void runner (game)
9. Azure odyssey
10. Abyssal bloom
11. Physarum garden
12. Powder alchemy (falling sand)
13. Clockwork nebula
14. Neon rain
15. Aurora borealis
16. Skitter (creatures)
17. Coral resonance
18. Threshold
19. Attractorium (strange attractors)
20. Murmuration (flocking)
21. Terraforge (terrain)
22. Cloudsea (clouds)
23. Frostline (frost)
24. Koi pond
25. Ferrofluid
26. Synchrony (coupled oscillators?)
27. Cymatics
28. Teslasphere
29. Pyrosymphony (fireworks)
30. Morphogenesis (Gray-Scott)
31. Galton cascade (probability/physics)

Ideas for 032:

• Double pendulum / chaos pendulum gallery — chaotic pendulums with trails
• Cloth simulation — wind-blown fabric with Verlet integration
• Marble run / Rube Goldberg machine
• Ant colony simulation — pheromone trails
• Boids in a tornado
• Water ripple / rain on pond with wave equation (already koi pond)
• Solar system orbital mechanics (gravity sandbox exists)
• Mandelbrot/Julia set explorer (mandelbulb exists)
• Game of Life 3D
• Lightning storm generator (teslasphere exists)
• Kaleidoscope shader
• Portal / non-euclidean
• Maze generator + solver visualization
• Wave interference / ripple tank with double slit — physics wave sim
• Sand pendulum / harmonograph — drawing machine
• Origami / paper folding
• Dandelion / seed dispersal
• Lava lamp metaballs (ferrofluid close)
• Circuit / electron flow
• Spirograph / harmonograph 3D
• Voronoi shatter / fracture
• Magnetic field line visualizer
• Pendulum wave machine — the classic pendulum wave! That's a great one: 15 pendulums with slightly different periods creating mesmerizing wave patterns. Combined with 3D rendering, bloom, trails, audio.

Actually, a Harmonograph / pendulum wave combo could be cool. But "Synchrony" (026) might already be pendulum-related — it says "coupled oscillators" maybe metronomes. Let me check what 026-synchrony is about to avoid duplication.

Another strong idea: "Chaos Garden" — double pendulum ensemble: hundreds of double pendulums with slightly different initial conditions, showing sensitivity to initial conditions, with glowing trails forming beautiful chaotic art.

Or ripple tank / wave interference: a 2D wave equation simulation rendered as a 3D water surface with obstacles, double-slit experiment, draggable sources. That's visually impressive and educational. Koi pond is more of a stylized pond; a wave-interference lab would be distinct.

Or "Lorenz weather" — attractorium already covers strange attractors.

Or "Voronoi fracture" — shattering glass/planets.

Or "Cloth & wind" — Verlet cloth simulation: flags, curtains, tearing. Interactive: grab and tear cloth. That's a classic impressive demo.

Or "Marble Machine" — a kinetic marble run with lifts, ramps, funnels, splitters. Similar in spirit to Galton cascade though.

Or "Ant farm / pheromone colony" — thousands of agents leaving pheromone trails, finding food. Could be rendered beautifully with glow trails. Similar to physarum garden though (slime mold).

Or "Firefly swarm synchronization" — synchrony might cover this.

Let me check 026-synchrony and 024-koi-pond descriptions to avoid overlap.

OK, so existing themes covered: fireflies/sync, koi pond, attractors, creatures, physarum, Galton board, morphogenesis, fireworks, tesla, cymatics, ferrofluid, frost, cloudsea, terraforge, murmuration, aurora, neon rain, clockwork, powder, abyssal, azure, void runner, sonic reactor, event horizon, gravity sandbox, fluid dynamics, mandelbulb, nebula galaxy.

Great candidates not yet covered:

1. Double pendulum chaos gallery — sensitivity to initial conditions, trails
2. Cloth simulation (Verlet) — interactive tearing, wind
3. Wave interference ripple tank — double-slit, wave equation
4. Pendulum wave machine
5. Maze generation + solving
6. Voronoi fracture / shatter
7. Harmonograph drawing machine
8. Marble run machine
9. Lava lamp / metaballs raymarching
10. Ant colony

I'll go with a wave interference ripple tank — "Interference" or "Ripple Lab": a GPU wave-equation simulation rendered as a glowing 3D water surface, with:

• Click/drag to create ripples
• Draggable wave sources (emitters) with adjustable frequency
• Double-slit / barrier presets demonstrating diffraction and interference
• A "rain" mode
• Heightfield rendered with nice shading, caustics-ish glow, bloom
• Audio: gentle water sounds / ambient pad tied to wave energy
• Presets: single source, double source interference, double slit, circular ripple tank, obstacle

Actually wait — koi pond likely has ripples too, but it's a stylized pond scene with koi fish. A physics wave-lab is distinct enough.

Alternatively cloth simulation — very tactile and fun: a flag/curtain you can grab, stretch, tear, with wind gusts, pins. Rendered with nice fabric shading. "Loom" or "Windchime"... Cloth is a classic but very satisfying.

Hmm, but which has more "wow"? A wave tank with interference patterns glowing in neon with bloom is gorgeous and educational. Cloth is more interactive.

Let me think about what would be most impressive and distinct: "Ripple Tank — Wave Interference Lab". Features:

• GPU ping-pong FBO wave equation simulation (height field), 512² or 1024²
• Rendered as a 3D surface mesh with vertex displacement + normal computation, emissive based on height/curvature, so crests glow cyan and troughs glow magenta, with bloom
• Interactive: pointer creates ripples (drag = continuous disturbance, stronger with speed)
• Emitters: place up to N oscillating point sources with adjustable frequency/phase; drag to move
• Barrier presets: double slit, single slit, barrier wall, circular dish, lens (refraction via slower medium region — variable wave speed map!)
• Variable medium: a "depth" map that changes wave speed — demonstrate refraction. Could have presets with a shallow lens region.
• Damping control, wave speed control
• Rain mode: random droplets
• Readouts: wavelength/frequency, interference pattern
• Audio: ambient pad whose brightness follows total wave energy; droplet plinks
• Camera: orbit controls, tilt
• Adaptive quality, snapshots, keyboard shortcuts, touch support

That's a solid plan and quite distinct from koi pond (which is a scene, not a physics lab).

Alternatively, combine: "wave lab" with a nice dark lab aesthetic — a glowing pool table.

Let me also consider a double pendulum chaos demo: an ensemble of e.g. 200 double pendulums started with nearly identical conditions, rendered as glowing traced ribbons diverging — "Chaos Bloom". Plus a big hero pendulum you can grab and fling. That's also gorgeous. Hmm.

I'll go with the ripple tank / wave interference lab — it's a physics visualization with strong wow factor, GPU compute, interactivity (barriers, slits, sources, refraction), and distinct from all 31 existing demos.

Name: "Interfera"? "Rippleworks"? "Wavefront"? "Interference Lab"? Let me call it "032-wavefront" — "Wavefront — Interactive Ripple-Tank Interferometry".

Let me design the technical architecture:

Simulation (GPU ping-pong):

• Two float render targets (or half-float) storing (h, h_prev) in RG channels, or store height + velocity. Classic approach: store current and previous height in two textures; update: next = 2*cur - prev + c²·∇²cur, with damping. Use RG16F: R = current height, G = previous height. Ping-pong.
• A "medium" texture (static per preset) storing wave speed multiplier (refraction) and damping/walls. Could encode: R = speed² factor, G = damping/absorb, B = wall mask. Update shader reads it.
• Brush shader: add Gaussian bump at pointer position, or set emitter value.
• Emitters: pass up to 8 emitters as uniforms (pos, freq, phase, amplitude, on/off); in update shader add sin(ωt) drive at emitter points (soft Gaussian).
• Boundaries: walls from medium texture (wall mask → reflect by zeroing height).

Rendering:

• A plane geometry (e.g., 256×256 segments for the mesh, or use a full-res displaced grid) with custom ShaderMaterial: vertex shader samples height texture to displace Y and compute normals from neighboring texels; fragment shader colors by height (crest/trough gradient), fresnel rim, specular from a light dir, "caustic" glow via curvature (laplacian magnitude → emissive), grid lines faint.
• Scene: dark lab table — a rimmed basin (rounded box frame), pedestal, floor with subtle reflection? Keep simpler: basin with metal rim, dark room, dust motes, bloom.
• Post: UnrealBloom + custom grade shader (vignette/grain/chromatic aberration) like other demos.
• OrbitControls with damping; auto-rotate idle.

Interaction:

• Pointer over the tank → disturb water (strength ∝ speed; click = droplet splash).
• Drag emitters to move them (raycast to emitter handles — small glowing spheres). Click empty water = splash.
• Presets: Open Pool, Double Source, Double Slit, Single Slit, Lens (refraction), Basin (circular), Maze? Each preset sets medium texture + emitters.
• Controls: frequency slider (for selected/all emitters), damping, wave speed, amplitude, rain toggle, pause.
• HUD: live readouts (frequency, wavelength, wave energy), preset buttons, help overlay.

Audio (generative WebAudio):

• Soft ambient pad; brightness tied to wave energy.
• Droplet "plink" sounds when splashing (sine/triangle with pitch by droplet size), convolution reverb-ish (simple feedback delay).
• Rain mode: gentle random plinks.

Adaptive quality: FPS-based tiers adjusting sim resolution (256/384/512), mesh segments, pixel ratio, bloom.

Keyboard: 1-6 presets, space pause, R rain, C clear, H help, S snapshot.

Let me check how other demos import Three.js to match conventions. Let me look at 031's imports quickly.

Good — conventions: three@0.170.0 via unpkg importmap, self-contained index.html, HUD panels with CSS, chips for controls, toast, stats. Now I'll build demo 032: "Wavefront — Ripple-Tank Interference Lab".

Let me design the full demo carefully.

Concept

A dark optics-lab style water tank on a pedestal. GPU wave-equation simulation (ping-pong FBO). Interactive ripples, draggable emitters, barrier/slit presets, refraction lens (variable wave speed), rain mode, generative audio, bloom + grade pass, adaptive quality, snapshots, touch.

Architecture

Simulation

• Sim resolution: 512 (high), 384 (med), 256 (low). Square.
• Two WebGLRenderTargets, type HalfFloatType, format RGBA, no depth. Store: R = height current, G = height previous, B = (unused / could store smoothed height for rendering), A unused. Actually simpler: R = h(t), G = h(t-1). Update writes new R and G=R_old.
• Medium texture: RGBA8 (or float) generated per preset on CPU into a DataTexture: R = c² factor (0..1 mapped), G = damping (extra absorption 0..1), B = wall (1 = solid wall), A = 1. Update shader reads medium: if wall → height 0 (reflective). c varies → refraction.
• Update shader (per texel): Wait, standard discrete wave eq: next = 2h - hPrev + c²·laplacian(h). With damping: next = h + (h - hPrev)·(1-damp) + c²·lap. c² must be < 0.5 for stability (CFL). Use c² ≈ 0.24 base, times medium factor (0.25..1). Damping ~0.998 applied to velocity term, plus medium absorption. Wall: if med.b > 0.5 → next = 0.
• Emitters: uniform array of up to 6: vec4 (x, y, freq, amp) + phase per emitter; drive: h += amp * sin(2π f t + φ) * gauss(dist). Better: set value via soft mask: next = mix(next, drive, mask). Drive with sin wave. Emitters can be toggled.
• Brush: pointer adds Gaussian bump: next += amp * exp(-d²/r²). Also "droplet" impulses from rain.
• Also add gentle "anti-blowup" clamp.

Ping-pong: simMat with uniforms tCur (current state tex), tMed, uEmitters, uTime, dt stuff. Render to target B reading A, then swap.

Clear: render a quad filling with zeros.

Medium generation (CPU)

For each preset, generate a Uint8 array size SIM×SIM (or separate MED_RES 256) with:

• Default: R=255 (full speed), G=0 (no extra absorption), B=0.
• Walls: B=255 → height forced 0. Draw barrier shapes (lines with thickness, slits gaps).
• Lens: R=~90 (slower → refraction), maybe smooth edges (Gaussian profile) to avoid sharp reflections. G slight absorption in lens.
• Edge absorption: to avoid reflections at tank borders, make a border ring with increasing absorption G and reduced R? Simplest: walls at the very edge (B=255) for a clean reflective tank — reflections at the boundary are actually physical for a ripple tank. But they can create mush; a damping border ("sponge layer") looks better for open presets. I'll add sponge: outer ~16 texels ramp G 0→0.06 and keep walls at outermost 2 texels. For "Basin" preset (circular dish), wall circle with sponge inside? Keep it simple: circular wall ring.

Presets:

1. Open Pool — no barriers, 1 emitter center-left? Actually "Open Pool": no emitters, free play + rain. Maybe one emitter at center at low amp.
2. Double Source — two emitters side by side, same freq, in phase → classic interference.
3. Double Slit — one emitter left, barrier with two slits right of it → diffraction pattern.
4. Single Slit — one emitter, one slit.
5. Prism/Lens ("Refraction") — plane waves from a line emitter (or several emitters in a row to approximate plane wave) hitting a circular/hexagonal shallow lens → focusing. Plane wave: a row of ~12 in-phase emitters along left edge. Or a "line source" — I can support a line emitter type: uniform vec4 line (x1,y1,x2,y2) + freq/amp; in shader compute distance to segment. Simpler: use many point emitters — but limited to 6-8. Let me support 8 emitters + 2 line sources. Line source shader: distance from uv to segment, drive with sin.
6. Basin (circular dish) — circular wall, one emitter off-center → beautiful circular reflections/focusing.
7. Maze/Obstacle field? Maybe skip; 6 presets is enough. Or "Crystal" — a grid of small wall dots → phononic crystal scattering. That's cool! "Lattice": grid of small pegs (walls) with a central emitter → scattering patterns. I'll include it as preset 6, basin as 5... Let me finalize:
   1. Open Pool
   2. Double Source
   3. Double Slit
   4. Refraction Lens
   5. Crystal Lattice
   6. Echo Basin

Emitters & interaction

• Emitters rendered as small glowing rings/spheres floating above surface; draggable (raycast against invisible hit-spheres). Hover highlight. Selected emitter: freq slider adjusts it (or all).
• Pointer on water: moving drags create ripples (strength ∝ speed, radius by pointer), click/tap = droplet splash (impulse + plink sound + visual ring?).
• Rain mode: random droplets at random positions, each with plink.

Rendering

• Basin: rounded rectangular frame (metal rim), inner dark floor beneath water surface. Water surface = PlaneGeometry SIM/2 segments (e.g., 256×256 high tier) with ShaderMaterial:
  • vertex: sample height tex (bilinear via texture2D — linear filter on half float needs OES_texture_half_float_linear; widely supported; fallback: set filter Nearest and do manual bilinear in shader — safer to do manual bilinear in vertex shader with texelFetch? WebGL2: texelFetch works in vertex shader. I'll do manual bilinear sampling with textureLod offsets... simpler: use LinearFilter and rely on half-float-linear extension (universally available on desktop/mobile WebGL2). To be safe, I'll implement manual bilinear in the vertex shader using texelFetch — guaranteed correctness. Compute normal via central differences with texelFetch too.
  • fragment: color = deep water base + emissive gradient by height (crest: cyan-white, trough: deep violet/magenta), curvature (laplacian) → "caustic" sparkle, fresnel with view dir, specular highlight from key light, faint grid lines (uv grid), wall visualization: sample medium tex → walls rendered as raised glowing edges? Walls are part of the medium; render wall mask as emissive amber lines so barriers are visible on the surface. Also lens region tint (slightly different hue where medium slower).
• Also render wall geometry: extruded thin boxes for barriers? Nice touch: build wall meshes from the medium texture per preset (marching squares overkill). Simpler: render walls in the surface shader (emissive + slight raise in vertex shader: if wall, raise height a bit to look solid). Raising walls in vertex shader with a smooth mask looks like glass barriers.
• Pedestal + rim: MeshStandardMaterial metal; floor: large dark plane with subtle grid? Keep the room dark with fog; dust motes (Points with drifting shader); a soft spotlight.
• Post: EffectComposer: RenderPass → UnrealBloomPass → grade ShaderPass (vignette + grain + chromatic aberration + slight tonemap curve). OutputPass.

Audio

• AudioContext on first gesture. Master gain → compressor.
• Ambient: two detuned sines/triangles through lowpass, slow LFO; filter freq modulated by wave energy (computed on CPU: sample a few texels? Reading back GPU is expensive. Instead estimate energy from emitter activity + pointer activity + rain — "activity" metric maintained on CPU). Good enough: activity = emitter amps sum + splash impulses decaying.
• Plinks: on droplet/splash — sine osc with exponential decay, pitch from pentatonic scale, velocity by impulse size, panned by x position (StereoPannerNode).
• Simple generated reverb: convolver with noise-decay IR (generate 1.5s buffer).

HUD/Controls

• Title, subtitle. Stats: FPS, sim res, wavelength readout (λ = c/f in world units), active emitters, energy bar.
• Chips: 6 presets. Sliders: frequency, damping ("viscosity"), wave speed, rain rate. Buttons: pause, clear, rain toggle, sound, snapshot, help.
• Toast on preset change with name + hint.
• Help overlay listing shortcuts.
• Keyboard: 1-6 presets, Space pause, R rain, C clear, M mute, S snapshot, H help.

Adaptive quality

• FPS monitor: tiers High (sim 512, mesh 256, pr min(dpr,2), bloom on), Medium (384, 192, pr 1.5, bloom on), Low (256, 128, pr 1.25, bloom off or low). Auto-step down/up with hysteresis. Manual override via keys? Keep auto + note in help.

Sim resolution change requires rebuilding RTs and medium texture — implement rebuild(simRes) that regenerates medium for current preset and clears state.

Structure

Single index.html, importmap three@0.170.0, OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, ShaderPass, OutputPass.

Now — one important detail: the wave update shader needs the medium texture and emitter uniforms. Emitter count: 8 points + 2 lines. Uniform arrays: uEmit[8] as vec4 (x, y, freq, amp), uEmitPhase[8] float, uEmitOn[8] float; lines: uLineA[2], uLineB[2] (vec2 each) or vec4 uLine[2] (x1,y1,x2,y2), uLineF[2], uLineAmp[2], uLineOn.

Driving: for point emitter: d = length(uv - pos); mask = exp(-ddK); h += amp * sin(ωt + φ) * mask * dtScale. Actually to drive cleanly, better to set h toward drive value: h = mix(h, drive, mask0.9). But mixing with neighbors causes sharp edges; small radius gaussian is fine. I'll do additive with small radius — additive can blow up at resonance; use mix-to-drive approach which is stable: drive = ampsin(phase); next = mix(next, drive, mask). With mask = exp(-(d/r)^2), r ~ 2.5 texels.

Phase: accumulate on CPU per emitter: phase += 2π f dt. Pass uPhase array. f in Hz ~ 0.5–6. Wavelength: c_world / f. c in texels/step = sqrt(c2) ≈ 0.5. Steps per second: sim runs once per frame (or substeps 2×). At 60fps, c = 0.5 texel/frame = 30 texel/s. λ = 30/f texels. For f=2Hz → 15 texels at 512 res — small. Hmm, that's a short wavelength relative to tank. For nice interference we want λ ~ 1/20 of tank width = ~25 texels at 512. f = 30/25 = 1.2Hz. OK so default freq ~1.2-2 Hz. Slider range 0.4–4 Hz. Also wave speed slider scales c2 (0.15–0.3 → c 0.39–0.55 texels/frame). Fine.

Substeps: run 2 sim steps per frame at high tier for faster apparent propagation? c² max stable = 0.5; at c²=0.25, c=0.5 texel/step. With 2 substeps: 60 texels/s at 60fps → λ at 2Hz = 30 texels ≈ 1/17 of tank. Good. I'll run 2 substeps (configurable by tier: low tier 1 substep? No — physics speed should stay consistent; keep 2 substeps but lower res at low tier; propagation speed in world units changes with res... at 256 res with 2 substeps, c=0.5 texel/step → 60 texels/s = 0.23 tank/s vs 512: 0.117 tank/s. Hmm, inconsistent across tiers. To keep world-space speed constant, c in texels must scale with res: c² uniform = base * (res/512)². I'll compute uC2 = cWorld² scaled. Actually simpler: uC2 = uC2base * (SIM/512)^2. With c² base 0.24 at 512 → at 256: 0.06. Stable and consistent.

Also emitter radius should scale with res: r = 2.5 * SIM/512.

Brush radius in uv units — fine as-is.

Walls & sponge

Medium G channel = absorption: next *= (1 - absorb). Sponge ring at borders: absorb ramp 0→0.08 over ~5% of tank. Plus outermost texels wall B=1.

For the lens: R channel 0.35 (c² scaled → slower), smooth boundary via radial smoothstep, slight absorb 0.01. To make lens visible: tint in shader where med.r < 0.9.

For crystal lattice: small wall dots (radius ~3 texels at 512) in grid with spacing ~1/12 tank, leave center clear for emitter.

For basin: wall where radius > 0.42 (in uv from center), sponge inside wall? Wall directly.

Double slit: vertical barrier at x=0.62, thickness ~4 texels, slits: two gaps of width ~10 texels separated by ~40 texels centered. Emitter at (0.25, 0.5).

Single slit similar with one gap — merge into double slit preset? Keep both? I'll do: presets = Open Pool, Double Source, Double Slit, Lens, Lattice, Basin. Six chips.

Readouts

• λ (world units): c_world / f. c_world = sqrt(uC2)SIM substepsfps... compute: c_texels_per_step = sqrt(uC2); steps/s = 260 (assume 60 — use measured fps); c_world = c_texels_per_step * stepsPerSecond / SIM (tank = 1 world unit in uv). λ = c_world/f. Display in "cm" assuming tank = 30cm? Just display arbitrary units: λ in tank-% : λ% = λ100. Display f Hz and λ as % of tank width. Nice and simple.
• Energy bar: CPU-side activity metric.
• FPS + tier.

Snapshot

renderer.domElement preservedrawingbuffer false → use composer render then toDataURL right after render in same frame. Standard approach: on keypress set flag; after next composer.render(), canvas.toBlob → download link.

Touch

Pointer events unified; OrbitControls handles touch rotate; need to distinguish water interaction vs camera orbit: use one-finger drag on water = ripple? Conflict with orbit. Solution: OrbitControls enabled; water interaction on pointerdown only when hitting water AND (event is touch → still ripple while orbiting?). Common approach in these demos: drag = ripple, orbit with two fingers / right-drag. I'll set OrbitControls touches: ONE: ROTATE? Then one-finger can't ripple. Alternative: pointer interaction ripples on move while pointer down over water, and orbit uses right mouse / two-finger. Set controls.mouseButtons = { LEFT: null?...} Hmm. Previous demos likely handled this. Simplest robust: LEFT drag on water = ripple; orbit = RIGHT drag or two-finger; wheel = zoom. On touch: one finger = ripple, two finger = orbit/zoom. Set controls.mouseButtons = { LEFT: -1? } Actually THREE.MOUSE constants: set controls.mouseButtons = { LEFT: null, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.ROTATE } and controls.touches = { ONE: null, TWO: THREE.TOUCH.DOLLY_ROTATE }. Setting null may break; use -1? In three r170, setting to null/undefined disables that button? The code checks switch (this.mouseButtons.LEFT) — if undefined, no action. Hmm, but pointerdown still captured. It's fine.

Also dragging emitters: raycast emitter handles first; if hit, drag emitter (disable controls during).

Also add "camera auto-orbit" when idle (slow rotation) that pauses on interaction — nice touch.

Visual polish

• Tank: rounded-rect rim (use Shape with rounded rect + ExtrudeGeometry, or 4 boxes + torus corners — simpler: a flat ring made from Shape/Extrude with hole). I'll build rim via THREE.Shape rounded rect outer + hole inner, extrude 0.06, metal material. Inner floor: dark plane slightly below water at y=-0.02 with subtle radial gradient texture (canvas texture).
• Water surface world size: 6 × 6 units at y=0.
• Pedestal: cylinder + base box, dark metal.
• Lighting: ambient dim, key spotlight from above-front, small point light that follows brightest emitter? Keep: SpotLight + rim PointLight cyan.
• Dust motes: 300 points drifting in a cylinder, additive, size attenuation, subtle.
• Background: very dark gradient + fog. Maybe faint grid floor far below? Skip floor, use fog + vignette.
• Walls rendered in water shader: raise y by wallMask*0.05 and emissive amber — looks like glass barriers glowing at edges. Also render actual thin glass boxes for barriers? The shader-raised walls may look lumpy at 256 mesh res. Alternative: keep walls flat but render emissive neon lines on surface + separate geometry: for each preset, also generate wall polylines? Too complex. I'll do shader approach with smoothing: wall mask blurred in medium texture (store blurred mask in B, hard mask in... hmm need hard mask for sim). Store in B the hard mask for sim; shader can sample B and raise — lumpy at mesh resolution. Better: store blurred mask in A channel of medium for rendering (alpha unused by sim). Medium RGBA: R=speed², G=absorb, B=wall hard, A=wall blurred (for render). DataTexture RGBA8: fine. Blur on CPU with a few box-blur passes over the wall mask.

Vertex shader: h = height sample; y = h * uHScale + wallSoft * 0.06. Normal from height only (ignore wall for normal, or include — include wallSoft gradient for shading edges). Fragment: emissive wall color = amber * wallSoft.

• Caustics/glow: emissive = crestColor * smoothstep on h + curvature sparkle: curv = laplacian magnitude → add white sparkle * curv. Compute lap in vertex? Pass h and compute per-fragment via texture sampling in fragment (cheaper: sample 4 neighbors in fragment for normal + laplacian; do displacement in vertex with single sample). Mesh 256 segments vs sim 512: vertex samples bilinear (manual). Fragment: sample height at uv with neighbors for normals — do it in fragment for crisp normals (normal per fragment). Vertex only displaces. Good.

Fragment shading:

Bloom picks up emissive.

• Height scale: sim h amplitude ~ [-1,1]; world y scale 0.18.

Sim details (stability)

• Clamp h to [-2, 2].
• Absorb: next = (1 - absorb - uBaseDamp). uBaseDamp from viscosity slider: 0.0005–0.02 per step. Wait damping formula: next = h + (h - hPrev)(1-damp) + c2*lap. damp ~ 0.001–0.01. Slider "viscosity" 0..1 → damp = mix(0.0004, 0.012, v).
• Emitters drive after integration via mix.
• Rain: CPU schedules droplets → uniform array of up to 4 pending splashes per frame (x,y,amp,radius) applied in update shader. Pointer drag also writes as splash each frame (amp by speed). Implement uSplash[6] vec4 (x, y, amp, radius), uSplashCount int. In shader loop 6, if i<count add gaussian*amp.

Splash adds to "next": next += amp * exp(-d²/r²). Positive and negative alternating? A droplet = positive bump then it oscillates naturally. Fine.

• Clearing: render black quad to both targets.

Sim shader code

Note: texture2D on half-float with nearest filter for state (we want exact texel reads) — use NearestFilter for state RTs, and do manual bilinear in render shaders via texelFetch (WebGL2 GLSL ES 3.0 — but ShaderMaterial default GLSL1... three.js compiles to GLSL3 only if material.glslVersion = THREE.GLSL3. For raw sim shaders I can use GLSL1 with texture2D and nearest — fine. For manual bilinear in water vertex shader, I can sample 4 nearest texels with texture2D and mix manually — no texelFetch needed. Good, keep GLSL1 everywhere for simplicity.

Manual bilinear:

With NearestFilter, sampling at texel centers gives exact texels.

Emitter handles

Small icosahedron spheres glowing, floating at y=0.12 above surface at emitter uv→world. Draggable: raycaster on pointerdown against handle meshes (invisible larger hit spheres). While dragging, move emitter uv, disable orbit. Also click emitter without drag = toggle on/off? Nice: double-click toggles. Keep simple: drag to move; slider controls selected emitter freq; click selects. Tap on emitter = select; drag = move.

Also hovering shows ring highlight.

Presets definition (JS)

Medium painter functions per preset operating on Float/Uint8 arrays at MED_RES = SIM (same res as sim; regenerate on rebuild). Use SIM res for medium (same texture size) — DataTexture updated on preset change.

Sponge: absorb = smoothstep from edge: d = min(x,1-x,y,1-y); absorb = 0.09 * smoothstep(0.045, 0.0, d)^? plus wall if d < 0.004.

Let me write medium gen in JS with helper functions: rect wall, circle wall, disk lens, etc.

Frequency slider behavior

Applies to all "on" emitters & lines (keeps ratio? just set absolute f for all point emitters; lines same). Store per-preset default.

Phase accumulation

On CPU: for each emitter i: phase[i] += 2π * f * dt (dt = frame dt, clamped). Pass phases as uniform floats. Same for lines.

Stats

FPS meter (EMA), tier display, λ readout: c_world = sqrt(uC2_eff) * SIM * substeps * fps / SIM... let me define: per step, wave moves sqrt(c2_eff) texels where c2_eff = uC2 * med.r (med.r=1 in open water). steps/sec = substeps * fps. texels/sec = sqrt(uC2)substepsfps. world/sec = /SIM. λ_world = world/sec / f. Tank width world = 6 units. Display λ as world units with 2 decimals, or as % of tank. I'll display both f (Hz) and λ (units).

Energy/activity: activity = Σ emitter amps0.3 + splashAccumulator (decays) + rain rate0.1 → drive audio filter + HUD bar.

Audio implementation

Pentatonic: A minor pentatonic [A3, C4, D4, E4, G4, A4, C5, E5] frequencies. Plink pitch chosen randomly from scale, lower octave for big splashes.

Mute toggle M. Start muted? Start unmuted but requires gesture; show "click for sound" hint toast.

Adaptive tiers

FPS EMA; if < 45 for 2.5s → step down; if > 57 for 8s → step up (max High). Rebuild on tier change: recreate RTs, medium, mesh geometry (or keep mesh geometry max and set draw range? simpler: recreate plane geometry). Also composer.setSize & pixel ratio.

Manual quality override: Q key cycles? Add chip "Quality: Auto/High/Med/Low"? Keep auto + display; add key Q to cycle manual override. Nice.

Snapshot

Press S or button: set pendingSnapshot; after next composer.render(), toDataURL('image/png') → a.download = 'wavefront.png'. Need renderer preserveDrawingBuffer OR capture immediately after render in same task — do the capture synchronously right after composer.render() in animate when flag set. That works without preserveDrawingBuffer.

Help overlay

Panel listing controls, toggled with H / ? button. Start visible briefly? Show toast hints instead; help hidden by default, small "?" chip.

Toast

Preset name + hint on change; also hints like "drag the glowing orbs".

OK, also idle auto-orbit: controls.autoRotate = true, speed 0.4; disable on pointerdown, re-enable after 6s idle.

Now, world mapping: tank spans [-3,3] in x,z (6 units). uv (0..1) → world x = (u-0.5)*6, z = (v-0.5)*6. Note plane rotated -90° x. I'll build PlaneGeometry(6,6,seg,seg) rotated via geometry.rotateX(-PI/2), and in shader use uv directly. Height along +y.

Camera: fov 42, pos (4.2, 4.6, 5.4) looking at (0,0,0). Controls target (0,0,0), minDistance 3, maxDistance 14, maxPolarAngle 1.35.

Emitter handles positions: x=(u-0.5)*6, z=(v-0.5)*6, y=0.16.

Raycast water: raycaster.intersectObject(waterMesh) → point → uv = (x/6+0.5, z/6+0.5). Since water is displaced in shader, raycast uses base plane — fine.

Pointer ripple: on pointermove with pointer down over water (and not dragging emitter, not orbiting with right button): add splash at uv with amp ∝ clamp(speed) * 0.6, radius 0.012. Also on pointerdown (left, on water): droplet amp 0.9 radius 0.01 + plink.

But wait: left-drag orbits? I decided LEFT = ripple, RIGHT/two-finger = orbit. So controls.mouseButtons = { LEFT: -1? }. In three r170 OrbitControls, mouseButtons LEFT: null → no action. Actually the code: switch ( event.button ) { case 0: mouseAction = this.mouseButtons.LEFT; ...} then switch (mouseAction) { case MOUSE.DOLLY... case MOUSE.ROTATE... case MOUSE.PAN... default: state = STATE.NONE }. Setting LEFT: null → default → NONE. Good. And touches = { ONE: -1? } similar: touches.ONE: null → NONE. TWO: THREE.TOUCH.DOLLY_ROTATE. Hmm but then on touch devices one finger ripples — good, two fingers orbit — good.

But there's subtlety: OrbitControls calls event.preventDefault on pointerdown? It sets pointer capture. Should be fine; our own pointer handlers on the same canvas will still fire (we attach to renderer.domElement or window). I'll attach to renderer.domElement with pointer events and use raycast.

Also wheel zoom remains. Middle dollies.

Edge case: pointer down on water then drag — continuous ripples while moving; also small ripples while holding still? Add tiny "touch" disturbance while held (amp 0.15, radius 0.008) so holding finger makes a small persistent stir. Good.

Rain: rate slider 0–30 drops/min? 0–600/min. Each drop: random uv (margin 0.06), amp rand 0.4–1.0 (negative? alternate sign for variety: amp * (rand<0.5?1:-0.7)), radius 0.006–0.012, plink with vel by amp, pan by x. Schedule via accumulator: drops per second = rate; acc += rate*dt; while acc>1 spawn.

Splashes per frame cap 6 (uniform array) — merge pointer splash into queue; if queue full, drop oldest. Rain at high rate may exceed 6/frame at low fps — scale: process up to 6, discard rest (fine).

Now the render water shader. Let me write it:

Vertex:

Note: medium texture with LinearFilter gives smooth .a (blurred mask stored in A anyway; double smooth fine). But med.a sampled with bilinear — DataTexture RGBA8 LinearFilter — supported everywhere. Good. Clamp uv sampling at edges: set wrap ClampToEdge.

Fragment:

That's a solid look: dark teal water, cyan crests, violet troughs, amber glowing barriers.

Palette: uDeep #06222b-ish, uCrest #5ff2ff, uTrough #b06cff, uRim #2f6f7f. Accent amber for UI: #ffc36e? The existing demos each have own palette; I'll go teal/cyan + amber accents. CSS accent: #5fd9e8 / amber #ffb45e for walls.

Bloom threshold ~0.55, strength 0.85, radius 0.6.

Grade pass: vignette + grain + slight chromatic aberration + lift/gamma. Reuse pattern from other demos (I haven't seen their grade shader, but standard).

Now emitter handle visuals: small glowing sphere (icosahedron r=0.07) + ring (torus r=0.14 flat) pulsing with emitter phase — scale ring by |sin(phase)|. Color cyan when on, grey when off; selected → amber. Lines sources: render as thin glowing box bar between endpoints.

Handles float y = 0.18 + bob.

Also add a subtle "scanline" readout? Enough.

HUD layout (CSS similar to 031 style but own palette):

• #hud top-left: title "WAVEFRONT", subtitle "ripple-tank interference lab".
• #stats top-right: FPS, tier, freq, λ, energy bar, emitters on.
• #controls bottom center: preset chips row (1..6), sliders row (freq, viscosity, speed, rain), buttons row (pause, clear, rain, sound, snap, help).
• #toast center-top.
• #help overlay panel.
• #vig overlay? grade pass handles vignette.

Footer note: "three.js r170 • GPU wave equation • drag the water".

Now write the code. It'll be long (~1300-1500 lines). Let me be careful with:

• three@0.170.0 importmap (match 031).

• WebGL2 required for half-float RT — three r170 requires WebGL2 anyway. HalfFloatType RT renderable: standard.

• State RTs: NearestFilter, ClampToEdge, HalfFloatType, RGBA, no depth/stencil.

• Sim material: RawShaderMaterial? Use ShaderMaterial with a fullscreen triangle/quad. I'll use the classic: OrthographicCamera(-1,1,1,-1,0,1) + PlaneGeometry(2,2) + mesh, rendered per pass. Or use a tiny helper. Fine.

• Medium DataTexture: RGBA8, LinearFilter, Clamp. data Uint8Array(SIMSIM4). Regenerate per preset & sim res. med.r = c2mul255, med.g = absorb255 (absorb per-step 0..0.12), med.b = wall255, med.a = wallBlurred255.

Blur for wall mask: 3 passes of 3x3 box blur on float array.

• Emitter uniforms: use arrays in ShaderMaterial: uniforms uEmit: {value: [Vector4,...]}, uEmitPhase: {value: Float32Array or array of numbers} — three supports flat arrays for float arrays: {value: [0,0,...]} works with uniform float uEmitPhase[8]. Yes.

• Update loop per frame:

Phases: advance total per frame by 2π f dt; per substep advance half.

Water material uniform tH = read.texture each frame (after swap, set once after loop).

• Clearing water: clearSim(): render clearMat (outputs 0) to both targets.

• Pause: skip sim, still render.

Also add "pulse" feature: pressing E fires a big Gaussian pulse at center? Click already does. Skip.

Emitter dragging: pointerdown → raycast handles (hit spheres). If hit → dragging emitter, set selected. Else raycast water → splash + set stirring. pointermove: if dragging emitter → move to water intersection uv (clamp margin 0.04). Else if stirring → splash by speed. pointerup: release.

Click (no drag) on emitter: toggle on/off? Let's do: quick tap (<250ms, <6px move) on emitter toggles on/off. Drag moves. Selected emitter highlighted; freq slider edits all ON emitters (simpler & predictable) — hmm, but per-emitter freq could be cool for beating patterns... Double source with slightly different freq = moving interference! Let me allow: freq slider sets ALL emitters; shift-drag on slider? No. Alternative: "detune" — presets define freqs; slider scales base freq for all (multiplier). I'll keep: slider sets absolute freq for every emitter & line (they share), since presets define them equal anyway. For beating, user can toggle... fine, shared freq. Simple & clean.

Actually, let me add per-emitter "solo" selection: clicking emitter selects it; slider then edits selected only; button "All" resets to all. Too complex. Shared freq it is. Detune can be a future idea.

Wave speed slider: 0.5–1.4 multiplier on base c² (base c2 at 512 = 0.22). uC2 = 0.22 * mul * (SIM/512)². Note stability: c2med.r ≤ 0.221.4 = 0.31 < 0.5 OK.

Viscosity slider: damp 0.0004..0.014.

Rain slider: 0..24 drops/s.

Default preset: Double Source (most iconic). Actually start with Open Pool + one emitter? The "wow" first impression: Double Source interference immediately shows pattern. Start with preset 2 (Double Source). Toast: "Double Source — drag the glowing orbs; click water to splash".

Freq default 2.2 Hz.

Wavelength display: c_world/s = sqrt(uC2_eff)SIM... wait: sqrt(c2) texels/step * substepsfps steps/s = texels/s; world units/s = texels/s * (6/SIM). λ = speed/f. With c2=0.22 at 512: sqrt=0.469 texel/step; 2 steps/frame * 60 = 120 steps/s → 56.3 texels/s → *6/512 = 0.66 world/s. λ at 2.2Hz = 0.30 world units (tank=6). Nice: ~20 wavelengths across? 6/0.3 = 20. Good interference scale.

Slit geometry: gap width should be ~ λ: λ in uv = 0.3/6 = 0.05 → at 512: 25 texels. Slit gap ~0.045 uv, separation 0.16 uv. Barrier at x=0.60, emitter at (0.22, 0.5). Slits at y=0.5±0.08.

Lens preset: line source at x=0.12 vertical (y 0.2..0.8) → plane wave; lens disk center (0.62,0.5) radius 0.16, c2mul inside 0.30 with smooth edge (smoothstep over 0.05). Expect focusing toward a focal point.

Lattice: grid of dots: spacing 0.11 uv, dot radius 0.012 uv, offset rows? Square grid; central clear circle radius 0.1 with emitter at center. Walls=dots.

Basin: wall ring at r=0.44 (thickness 0.02), emitter at (0.5, 0.32) off-center → focusing to other side. Sponge outside ring unnecessary (wall reflects). Keep border walls anyway.

Double source: emitters (0.5, 0.5±0.11), f 2.2, in phase.

Open pool: one emitter (0.5,0.5) f 1.4 amp 0.7 on — gentle; rain off default.

Single slit? Skip, 6 presets as listed.

Now audio reverb IR: 1.2s stereo noise decay. Pad: 2 osc (sine 110 & 110*1.005) + triangle 55 → lowpass → gain. Activity → filter freq.

Plink: freq from pentatonic [220, 261.63, 293.66, 329.63, 392, 440, 523.25] (A C D E G A C). vel → gain 0.05–0.3. decay 0.8–1.6s. pan -0.8..0.8.

Also soft "splash noise"? Skip, plinks suffice + pad.

Snapshot filename: wavefront-YYYYmmdd-hhmmss.png.

Help overlay content: list shortcuts & gestures.

Footer credit small bottom-left? Other demos have? Not sure; keep minimal: small hint bottom-right "drag water • drag orbs • right-drag orbits". Put in help instead; add tiny persistent hint line under controls? I'll add a small #hint bottom-left, fades after 10s.

Edge: prevent context menu on canvas (right-drag orbit). renderer.domElement.addEventListener('contextmenu', e=>e.preventDefault()).

Resize: update camera, renderer, composer, bloom.

Tier change rebuild:

• create RTs (dispose old), medium texture regenerate at new res, water geometry recreate (dispose), update uSimRes, uTexel, uC2 recompute, clearSim, re-place emitter handles (uv unchanged), composer pixel ratio & bloom pass enabled flag.

FPS monitor: ema; check every 1s: if ema<45 && tier<2 → tier++ (worse), reset cooldown 4s. If ema>57 && tier>0 && sinceChange>8s → tier--.

Manual override: pressing Q cycles Auto→High→Med→Low→Auto. Show in stats.

Now, one more consideration: renderer = new THREE.WebGLRenderer({antialias:true, powerPreference:'high-performance'}). ToneMapping: ACESFilmic, exposure 1.05. OutputColorSpace default sRGB. With composer + OutputPass handles tonemap? In r170, OutputPass applies tone mapping & color space. Use RenderPass → bloom → gradePass → OutputPass. Grade pass operates in linear HDR before OutputPass — chromatic aberration in linear fine.

Grade shader:

OK. Also dust motes: Points ~260, shader: position drift via time in vertex (sin fields), size 1-3px * dpr, additive, opacity 0.35, color cyan-ish. Simple.

Pedestal & rim:

• Rim: rounded rect shape outer 7.0×7.0 (half 3.5) radius 0.35, hole inner 6.14×6.14 radius 0.22, extrude depth 0.22, bevel small. Position y from -0.02 to 0.2? Water at y=0 plane; rim top at 0.22. Rotate extrude to lie flat: ExtrudeGeometry along z; rotateX(-90°) so z→y. Place so top y=0.24.
• Inner floor: plane 6.2×6.2 at y=-0.35, dark with radial gradient canvas texture (center #0a1a20 → edge #030608). Water surface transparent? No — opaque water shader with dark base; floor below barely matters but seen through? Water opaque → floor invisible. Hmm. Make water slightly translucent? Add alpha by depth? Keep opaque; floor still visible beyond water edge inside rim (margin 0.07). Fine — or skip inner floor and put a "basin box" (open box) dark. I'll add basin interior: box walls via 4 thin boxes + floor, very dark teal, so edges look solid.
• Pedestal: cylinder r=2.2 h=0.5 at y=-0.6, + box base 5×0.18×5 at y=-0.95, dark metal (#14181d, metalness 0.8 roughness 0.4). Ground: big circle r=30 at y=-1.05, #05070a, fog handles fade.
• Lights: ambient 0x1a2a33 0.6; spot (4,7,3) intensity 60, angle 0.5, penumbra 0.6, color 0xbfe8ff, castShadow false; point cyan (0,1.2,0) intensity 3 distance 6 — "glow from tank" subtle; point amber small at rim corner? Keep two.

Standard materials for rim/pedestal react to lights. Rim color #1c2229 metal.

Emitter handles: MeshBasicMaterial (unlit, bloom-friendly): sphere color 0x9ff4ff when on; ring torus basic color same, additive blending, opacity pulsing. Selected: 0xffc36e. Off: 0x3a4a52 dim. Hit sphere: invisible mesh r=0.3.

Line source handle: bar mesh (BoxGeometry thin) basic cyan, plus end caps? Just bar, draggable too? Lines fixed in presets; not draggable (keep simple) — but allow toggle? Skip interaction for lines.

Now stats: emitters count on; energy bar = activity.

Toasts: preset name + hint, 2.6s fade.

Title: "Wavefront". Subtitle: "ripple-tank interferometry".

Let me also double check the sim update: next = h + (h-hp)*(1-damp) + c2*lap. With damp applied to velocity term only. Plus med.g absorb multiply. Walls zero. Good.

Emitter drive with mix: at emitter texels, next ≈ drive (mask near 1 at center). uEmitR in uv: 2.2 texels = 2.2/SIM. exp(-d²/r²): at d=r, e^-1=0.37. mix clamp m*1.2.

Line: same r.

Splashes: radius param in uv (0.008–0.02), amp 0.3–1.2. exp(-d²/r²) with r given — at d=r factor 0.37; effective width ~2r. OK.

Also initial condition: zeros. Emitters ramp amplitude on preset load: ampEnv from 0→1 over 1.5s to avoid click. Multiply drive amp by env. Also on freq change keep phase continuity (phase accumulates, freq changes → fine).

Rain default: off. Viscosity default 0.25 → damp ~0.0044? map: damp = 0.0004 + v*(0.0136). v=0.22 → 0.0034. OK.

Wave speed default 1.0.

Now — write the file. I'll write it in one go with a heredoc via execute_shell_command? The file is large (~1400 lines). Writing via read_write_file_in_shell_environment (write mode) is cleaner. The tool supports full content write. Let me compose carefully.

Actually, given the s3fs slowness warning, one big write is best.

Let me now write the complete HTML.

Key structural outline:

Let me carefully write all of it. I'll pay attention to correctness of three.js r170 APIs:

• new THREE.WebGLRenderTarget(w, h, { type: THREE.HalfFloatType, format: THREE.RGBAFormat, minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, wrapS/T: ClampToEdgeWrapping, depthBuffer:false, stencilBuffer:false })
• DataTexture: new THREE.DataTexture(data, w, h, THREE.RGBAFormat, THREE.UnsignedByteType); tex.minFilter=LinearFilter; magFilter=LinearFilter; needsUpdate=true; In r170, default colorSpace NoColorSpace — good (linear data).
• ShaderMaterial uniforms with arrays: uEmit: { value: Array.from({length:8},()=>new THREE.Vector4()) }, uEmitPhase: { value: new Array(8).fill(0) } — three handles plain number arrays for float arrays? For uniform float uEmitPhase[8], value should be a flat array of numbers — yes, supported (UniformsUtils handles arrays; WebGLUniforms singular arrays: float arrays accept number[]). Yes.
• int uSplashCount uniform int: value number, fine.
• Loop indexing with non-constant? if (i < uSplashCount) — dynamic break allowed in GLSL ES 3.0 (WebGL2). three r170 compiles GLSL1-style shaders to 300 es with compatibility defines (texture2D → texture). Dynamic loop conditions fine in 300 es.
• OrbitControls import from 'three/addons/controls/OrbitControls.js'.
• EffectComposer/RenderPass/UnrealBloomPass/ShaderPass/OutputPass from addons.
• OutputPass constructor: new OutputPass().
• UnrealBloomPass(resolution: Vector2, strength, radius, threshold).
• composer.setPixelRatio exists? EffectComposer has setPixelRatio and setSize — yes.
• controls.mouseButtons = { LEFT: null, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.ROTATE } — hmm, r170 OrbitControls: setting to null works (mouseAction null → STATE.NONE). Actually there's a subtlety: if (this.mouseButtons.LEFT === undefined)... The default object is replaced wholesale — fine. touches = { ONE: null, TWO: THREE.TOUCH.DOLLY_ROTATE }.

Hmm wait — in recent three versions, mouseButtons: { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }. Setting LEFT: null → in onMouseDown, mouseAction = this.mouseButtons.LEFT → null → switch default → STATE.NONE. Good.

• Also controls.enablePan false.

Raycasting water: waterMesh is a Mesh with PlaneGeometry rotated; raycast against it works with geometry (not shader-displaced) — good.

For raycast I need waterMesh.visible true — fine.

Pointer events: use pointerdown/move/up/cancel on renderer.domElement; also pointerleave. Track pointers map for multi-touch? For simplicity handle single active pointer for stirring; OrbitControls handles two-finger itself.

One catch: OrbitControls in r170 listens on domElement for pointerdown and calls setPointerCapture? It does this.domElement.setPointerCapture(event.pointerId) only when state != NONE I think. With LEFT null → NONE → returns early without capture. Good — our handlers still get moves on element. But touch ONE: null → NONE → no preventDefault → page might scroll? Body overflow hidden; canvas touch-action: set touch-action: none in CSS to prevent scrolling. OrbitControls sets domElement.style.touchAction = 'none' itself. OK.

Stirring: on pointermove if isStirring: compute uv, speed = dist/dt; splash amp = clamp(speed*8, 0.15, 1.1)*0.5; radius 0.011. Also throttle: min distance 0.004 uv between splashes.

pointerdown on water: splash amp 0.95 r 0.009 + plink(vel 1, pan). Also start stirring.

While pointer held but not moving: every frame add tiny splash amp 0.06 r 0.007 at hold uv (creates gentle stir). Might accumulate energy — small amp fine with damping.

Emitter drag: pointerdown raycast handles first. If hit: dragEmitter = handle; controls disabled? OrbitControls with LEFT null won't rotate anyway; but two-finger could — fine.

Tap toggle: record downPos/time; on up, if dist<6px && dt<300ms && dragEmitter → toggle emitter.on; else if tap on water → already splashed at down.

Selected emitter = last dragged/tapped; ring color amber.

Freq slider: sets freqAll: for each emitter def & line: f = value. Update readouts.

Now the "activity" metric: activity = clamp( Σ(on? amp:0)0.25 + splashEnergy + rainRate0.02 ). splashEnergy decays *0.94 per frame, += amp on each splash. Drive pad.

Energy bar width = activity*100%.

FPS meter: frames count each second.

Wavelength: λ = sqrt(uC2eff)*SIM... wait recompute: c_texel_per_step = sqrt(uC2 * 1.0) [open water med.r=1]. steps/s = substeps * fpsMeasured (use 60 for display stability? use measured fps clamp 30–120). c_world/s = c_texel_per_step * steps/s * (6/SIM). λ = c_world / f. Display λ in "wu" (world units) 2 decimals. Also show f Hz.

Tier display: name + sim res.

Now the medium painters. Helper:

Wait — absorb also needs to apply where wall? Wall zeroes anyway. Sponge absorb 0.10 max per step — that's strong; over 120 steps/s kills reflections. OK.

But careful: sponge absorb with damp formula: next *= (1-med.g). med.g=0.1 → strong. Good for edges.

Painters use uv-space helpers:

Implement generically: iterate all texels, compute fields — N=512 → 262k iterations × presets load only. Fine.

Segment distance function for capsule walls.

Presets:

Double slit wall: vertical segment x=0.60, y from 0.10 to 0.90, thickness 0.012, with two gaps: gap centers y=0.42 & 0.58, gap half-width 0.024. Implement: for each texel, if |x-0.60|<0.006 and y in [0.10,0.90] and not within gaps → wall.

Hmm, slit width 0.048 uv ≈ λ(0.05) — good diffraction.

Lens: slow = 1 - (1-0.30)smoothProfile where profile = smoothstep at edge: p = 1 - smoothstep(r-edge, r, dist). slow = 1 - 0.7p → inside 0.30. Add slight absorb inside: 0.004*p. Also render tint uses med.r → visible disk.

Lattice dots: for gx in range: cx = 0.5 + (i+0.5)0.115 for i in -4..3? Let me: spacing s=0.115; for a=-4..4, b=-4..4: cx=0.5+as, cy=0.5+b*s; skip if hypot(a,b)*s < 0.10 (center clear); skip if outside [0.08,0.92]; paint disk r=0.0115 wall.

Basin ring: wall where |dist-0.44| < 0.006.

Also for 'slit', maybe add side absorbers? The sponge handles edges.

Emitter world y bob: y = 0.16 + 0.02sin(t2+i).

Ring pulse: scale = 1 + 0.25*|sin(phase)|, opacity 0.5+0.4*|sin|.

Now, code volume is large; let me write it now. I'll aim for clean, commented code.

One more check — UnrealBloomPass with HalfFloat composer? EffectComposer default uses HalfFloatType RTs in recent three (r152+ default HalfFloat). Yes, r170 composer defaults to HalfFloatType. Good for HDR bloom.

OutputPass handles tonemapping via renderer.toneMapping. Set renderer.toneMapping = THREE.ACESFilmicToneMapping BEFORE creating OutputPass (it reads at render time via material defines? OutputPass reads renderer.toneMapping each render — it sets defines in render()). Fine.

Also renderer.setClearColor(0x030507).

Fog: scene.fog = new THREE.FogExp2(0x04070b, 0.055). Water shader ignores fog (ShaderMaterial without fog) — fine, it's the centerpiece. Standard materials get fog.

Camera far 60.

Motes shader:

Additive blending, depthWrite false.

Motes positions: random in cylinder r 8, y -0.5..5.

OK — also the "hint" element: bottom-left small text, fades.

Buttons row: Pause(⏯), Clear, Rain toggle, Sound, Snapshot, Help — chips with active states.

Slider row: FREQ (0.4–4 Hz step 0.05), VISC (0–1 step .01), SPEED (0.5–1.4 step .02), RAIN (0–24 step 1).

Preset chips: 1 Open Pool, 2 Dual Source, 3 Double Slit, 4 Lens, 5 Lattice, 6 Basin.

Stats rows: FPS, QUALITY, FREQ, λ (WAVELENGTH), SOURCES, ENERGY bar.

Toast on load: "WAVEFRONT — double source" + hint.

Also add keyboard: 1-6, space, C, R, M, S, H, Q.

Snapshot: id 'snap'.

Now about applying splashes: queue array pendingSplashes (max 6 per frame). In animate: uniforms.uSplashCount.value = n; for i<6 set uSplash[i]. Apply only on first substep (else double energy) — set count 0 for second substep.

Phase advance: per substep: phase += 2π f (dt/substeps). Set uniforms each substep (phases change). Fine.

Emitter amp envelope: env = min(1, env + dt/1.5) after preset load; drive amp = def.amp * env. Also per-emitter on/off smoothing? On toggle, ramp individual env quickly (0.3s) to avoid clicks: keep per-emitter envCur lerping toward on?1:0. Multiply into uniform amp.

Water uHScale: 0.16.

Also add subtle ambient "breathing" of water? No.

Now, potential perf: water fragment does 9 bilinear samples × 4 texture reads each = 36 texture reads per fragment. At 256×256 mesh... fragment count = pixels covered (~half screen at 1440p ≈ 2M) × 36 = heavy but GPU fine on desktop; on weak GPUs tier drops mesh but fragment cost stays (screen-space). Optimize: compute h + normal in vertex (5 bilinear = 20 reads per vertex, cheap) and pass interpolated; fragment then uses interpolated h & normal — but normals from vertex interpolation at 128–256 seg mesh look smooth/soft; acceptable and much faster. Compromise: vertex computes h, hx, hy (3 bilinear samples = 12 reads) → pass vH, vN; fragment does curvature via 0 extra samples (skip lap sparkle or approximate from vH gradient via dFdx? dFdx(vH) gives screen-space derivative — usable for sparkle: curv = length(dFdx(vH)) + ... fine). Fragment then: no texture reads except medium (1 read).

Let me restructure: vertex:

Pass vN (object=world since mesh at identity), vH, vUv, vWorld.

Fragment: use normalize(vN) (interpolation denormalizes slightly), dFdx sparkle:

Hmm dFdx of vH per pixel — vH varies with world displacement; sparkle ∝ screen gradient — view dependent, could shimmer oddly but looks like glints. OK.

Also fragment medium sample for walls/lens/grid.

Vertex bilinear: 3 bilinear × 4 = 12 reads/vertex — trivial.

Edge case: mesh segments 128–256 vs sim 256–512: vertex sampling aliasing? Bilinear at mesh resolution undersamples fine waves (λ~25 texels at 512; mesh 256 → vertex every 2 texels — OK). Fragment uses vertex-interpolated h — resolution = mesh. Fine.

Normals K: hx is height difference across 2 texels (uv e=1/SIM each side → 2/SIM uv → world 26/SIM). dh/dx_world = hx / (12/SIM) = hxSIM/12. Normal x = -dh/dx * 1 (y scale). With uHScale applied: displacement world = huHScale, so slope = hxuHScaleSIM/12. n = normalize(vec3(-hxS,1,hyS)) where S = uHScaleSIM/12. At SIM=512, uHScale=0.16: S=6.8. Compute in shader: uniform uSlope = uHScale * uSimRes / 12.0.

Now write everything. Also remember renderer.outputColorSpace default is SRGB in r170 — with composer + OutputPass, correct.

Let me also handle WebGL context creation failure gracefully? Skip.

Font: system stack like 031.

Colors CSS: --accent: #6ee7f2 (cyan), --accent-soft rgba(110,231,242,.35), --amber: #ffb45e, panel rgba(8,14,18,.55), stroke rgba(110,231,242,.16), text #dff3f6, dim #5f7d86.

Background body #04070a.

Title "W A V E F R O N T" letterspaced, subtitle "ripple-tank interferometry".

Let me now also design the help overlay content:

Footer credit: small line in help: "three.js r170 · GPU wave equation".

Alright — also Q quality cycling: auto → high → med → low. Stats shows "AUTO·HIGH" etc.

Time to write the file. I'll write it fully, then node --check the extracted module, then update index.

Careful with template literals inside the HTML script — fine since I'm writing via the file tool (no shell interpolation). Use read_write_file_in_shell_environment write mode with full content. The content is long; that's OK.

Let me draft the JS module mentally with care for syntax errors, then write.

Also: const isCoarse = matchMedia('(pointer: coarse)').matches → start tier Med on mobile.

Detail: sim RTs and medium at tier change: function buildSim(N). Water geometry: function buildWater(seg).

For medium DataTexture at rebuild: dispose old texture.

Preset application: set emitters array (clone defs), phases=0, env=0, regenerate medium, clearSim, update handles visibility (handles for point emitters only; line handles: show thin bar, not draggable), toast.

Handles: pool of 8 handle groups (sphere+ring+hitmesh), show/hide by emitter count. Line bars: pool of 2.

Line bar mesh: BoxGeometry(len, 0.03, 0.05) positioned/rotated between endpoints, y=0.10, basic material cyan dim, plus glow via bloom (color bright). Rebuild per preset: create/dispose or reuse pool with scale/rotation. Pool of 2, set scale.x = len.

Also line sources pulse opacity with |sin(phase)|.

Pointer → water uv: raycaster.setFromCamera(ndc, camera); intersect waterMesh; if length: point → uv=((p.x)/6+0.5, (p.z)/6+0.5)?? With +v → −z: v = 0.5 - p.z/6. Let me verify: geometry.rotateX(-π/2) maps original (x, y) plane point to (x, 0, −y). uv u = x/6+0.5 ✓; original y = (v−0.5)*6 → z = −(v−0.5)*6 → v = 0.5 − z/6 ✓.

So uvFromWorld(p) = [p.x/6+0.5, 0.5−p.z/6].

Handles positioned: x=(e.x−0.5)*6, z=(0.5−e.y)*6.

Now audio engine details:

IR generation: buffer 2ch, 1.4s, noise * exp(-t*4).

Pad: osc1 sine 96Hz? For water lab, low calm: 82.4 (E2) sine + 123.5 (B2) + 164.8 slight detune triangle at low gain → lowpass 300–2200 by activity → padGain 0.05. Plus slow LFO on gain (0.03 amp, 0.07Hz).

Plink: osc sine freq from scale, gain env: 0→vel*0.25 in 5ms → exp decay 1.1s; plus harmonic osc *0.4 one octave up shorter. → panner → dry master + reverb send 0.5.

Master → compressor → destination.

Activity smoothing in animate: Audio.setActivity(activity).

Autostart: first pointerdown anywhere → Audio.init() + resume (if soundOn default true). Sound chip toggles.

Now stats update every 0.25s.

Snapshot:

Resize: standard.

FPS/tier logic:

Manual override sets autoQ=false; Q cycles.

setTier(i): rebuild sim RTs + medium + water geometry + pixel ratio + bloom enabled; toast small note? Update stats label.

Careful: rebuilding sim clears waves — acceptable.

Also cap pixel ratio: pr = min(devicePixelRatio, tier.pr).

OK, writing now. Also add window.addEventListener('error') → show message? Skip.

One more UI element: preset chips labeled with numbers: "1 Pool", "2 Dual", "3 Slits", "4 Lens", "5 Lattice", "6 Basin".

Let me write the whole file.

Also remember meta description.

Regarding line source in 'lens' preset: line at x=0.10 vertical from y=0.18 to 0.82, f=1.8, amp 0.8. Plane wave travels +x toward lens at 0.63. λ at f1.8: c 0.66 wu/s → λ=0.37 wu = 0.061 uv. Lens radius 0.16 uv. Focal: n = c1/c2 = sqrt(1/0.3)=1.83. Plano-convex? Disk lens focuses at f = R/(n−1) ≈ 0.16/0.83 = 0.19 uv beyond center → focus near x=0.63+0.19=0.82. Nice visible focusing.

Also lens absorb small.

Basin preset: ring wall r=0.44 thickness 0.006 (half) → wall where |d−0.44|<0.006. Emitter at (0.5, 0.30) — inside. Waves reflect off circular wall, focusing near opposite side / center.

Lattice: emitter center f=2.6, λ=0.66/2.6=0.254wu=0.042uv; spacing 0.115uv ≈ 2.7λ → nice Bragg scattering. Dot radius 0.0115.

Double slit: barrier x=0.60, gaps at y=0.42,0.58 half-width 0.024 → slit width 0.048 ≈ λ(0.05 at f2.2: λ=0.66/2.2=0.30wu=0.05uv ✓). Separation center-to-center 0.16uv = 3.2λ → several fringes.

Double source separation 0.22uv = 4.4λ → nice hyperbolic fringes.

Now — write!

Actually one consideration on uEmitR: radius in uv = 2.4/SIM. At 512: 0.0047. mix mask exp(-d²/r²): covers ~5 texels. Good.

Splash radius default pointer 0.011 uv.

Rain drop: amp 0.5–1.1 (sign random +/−0.6), radius 0.006–0.011.

Also on preset 'pool', rain toggle suggested.

Let me also include a subtle auto-demo: on load, after 1s, dro

Now write the full index.html. I'll write it in parts to avoid one giant tool call failing? The write tool should handle large content. Let me write it in one go — approximately 1300 lines. Actually, to be safe with the tool, I'll write in 2-3 sequential appends using shell heredoc? Heredocs with quoted delimiter avoid interpolation. But the write tool is cleaner. Let me try one full write; if it fails, split.

Let me compose the entire file now, carefully.

Now let me validate the JavaScript syntax by extracting the module and running node --check. Also review a couple of subtle issues:

1. controls.mouseButtons = { LEFT: null, ... } — in three r170, OrbitControls onMouseDown → switch (event.button) maps to this.mouseButtons.LEFT → null → switch (mouseAction) default → state = STATE.NONE. Good.

Wait, actually in r170 the code is:

Yes null → NONE. Good.

For touches: onTouchStart → switch ( _this.touches.ONE ) with TOUCH.ROTATE etc., default NONE. Good.

2. In stepSim, I set u.uEmitOn.value[i] = e.env > 0.02 ? 1 : 0; — but the shader uses uEmitOn[i] > 0.5 gate and uEmit[i].w amp which already includes env. Fine.

3. emitters = p.emitters.map((e) => ({ ...e, phase: Math.random() * 0, env: 0 })); — Math.random() * 0 = 0. That's silly; just 0. Not a bug, but sloppy. Leave or fix — I'll fix to phase: 0.

4. Potential issue: in applyPreset, $('sFreq').value = (p.emitters[0] || p.lines[0] || { f: 2.2 }).f; — for 'lens' preset, lines[0].f = 1.8. Good.

5. refreshHandles uses e.phase — emitters have phase. Good. lines[i] — linePool loop uses L.phase. Good.

6. waterMat.uniforms.tH.value is null until first stepSim. If paused at boot (not paused), fine — animate calls stepSim before first render. OK.

7. buildWater is called in applyTier; applyTier also calls buildSim which references waterMat.uniforms — fine, waterMat exists.

8. Order at boot: applyPreset(1, true) → genMedium needs SIM — SIM initialized from TIERS[tier].sim at module level. Good. Then updateDamp(), applyTier() → buildSim (regenerates medium again — fine), buildWater, onResize. Then animate.

9. In applyTier: buildSim() → clearSim() renders with renderer — fine.

10. Issue: simQuad.material = clearMat in clearSim then back to simMat. OK.

11. In stepSim, simQuad.material = simMat; set every substep — harmless.

12. u.uSplash.value[i].set(...splashQueue[i]) — spread of 4-element array into Vector4.set — OK.

13. Emitter drag: pickWater raycasts waterMesh — waterMesh displaced only in shader; raycast uses CPU geometry (flat plane). Good.

14. pickHandle — hit spheres are children of grp; raycaster.intersectObjects(targets, false) — non-recursive on the hit meshes themselves — fine since we pass the hit meshes directly.

15. Problem: hit.userData.emitIndex = i — set at pool creation; handle i corresponds to emitters[i] — good since pool size MAX_EMIT and we show handle i for emitters[i].

16. OrbitControls touches = { ONE: null, TWO: THREE.TOUCH.DOLLY_ROTATE }. Good.

17. el.addEventListener('pointerdown'...) — with e.button !== 0 && e.pointerType === 'mouse' return — right-click orbits, doesn't splash. Good. But note: right-drag orbit → pointermove events fire with stirring false — fine.

18. AudioEng.init() on pointerdown — creates context; if sound "on" default true. bSound has 'active' class initially. Good.

19. Snapshot: pendingSnap declared with let pendingSnap = false; in resize/snapshot section, but referenced earlier in UI wiring ($('bSnap').addEventListener('click', () => { pendingSnap = true; })) and keydown handler — those are closures executed later, and let is hoisted in TDZ... The keydown listener registration happens before let pendingSnap declaration executes, but the handler only runs on user action after full module evaluation. However — $('bSnap').addEventListener(...) closure references pendingSnap — fine at runtime (after declaration). But wait: module evaluation order — UI wiring section comes before let pendingSnap = false; line. The closure captures the binding; TDZ only matters if executed before declaration line runs. User clicks happen after module fully evaluated. OK.

20. statT etc fine.

21. gradePass ShaderPass: ShaderPass expects a shader object with uniforms/vertexShader/fragmentShader — yes.

22. bloomPass.resolution.set(w, h) — UnrealBloomPass has resolution property? Constructor takes resolution Vector2 and stores it; it also has setSize which composer calls. Setting .resolution directly isn't the standard API — composer.setSize calls pass.setSize(w,h) which for UnrealBloomPass sets internal render targets. So my bloomPass.resolution.set(w,h) is unnecessary but harmless (resolution property exists as a Vector2). Actually let me check r170 UnrealBloomPass: constructor (resolution, strength, radius, threshold), stores this.resolution = (resolution !== undefined) ? new Vector2(resolution.x, resolution.y) : new Vector2(256, 256). setSize(w,h) updates render targets. So setting .resolution is harmless. Keep.

23. composer.setPixelRatio(pr) exists on EffectComposer. Yes.

24. motes.material.uniforms.uPR.value = pr in applyTier — motes defined before applyTier called. Yes.

25. DataTexture default colorSpace — NoColorSpace, good for data.

26. Sim RT NearestFilter — good for exact texel reads in sim shader. Water shader does manual bilinear with nearest — correct.

27. Medium texture LinearFilter — sim shader samples texture2D(tMed, vUv) at texel centers; linear filter blends between texels — at texel centers the weight is exactly 1 on that texel (vUv for sim quad = texel centers? vUv from fullscreen quad: uv ranges 0..1 across the render target; fragments land at texel centers (i+0.5)/N — linear sampling at exact texel center returns that texel. Good. Walls: med.b > 0.5 test — at texel center exact. Good.

28. Half-float RT rendering — WebGL2 EXT_color_buffer_float — three r170 WebGL2 always; HalfFloatType renderable widely supported. Good.

29. renderer.setRenderTarget(null) after sim steps — needed before composer.render. Done.

30. The wall variable name collision in genMedium helpers — fine.

31. slitWallX(0.6, 0.1, 0.9, 0.006, [[0.42, 0.024], [0.58, 0.024]]) — barrier at x=0.6 ± 0.006, y in (0.1, 0.9), gaps at y=0.42 & 0.58 half-width 0.024 → slit width 0.048. Good.

32. Lens: lensDisk(0.63, 0.5, 0.16, 0.3, 0.05) — mul 0.3 → slow=0.3 inside. p computation: 1 - clamp((d - (r - edge)) / edge, 0, 1) → d < r-edge → p=1; d in [r-edge, r] → ramp; d > r → skipped (d < r check). At d slightly less than r... fine. But there's a discontinuity at d=r boundary: outside loop not entered, slow stays 1; at d=r−ε, p = 1 − (r−ε−r+edge)/edge = 1 − (edge−ε)/edge = ε/edge ≈ 0 → slow=1. Continuous.

33. In fragment shader, slow = 1.0 - med.r — med.r is byte/255 of slow — lens 0.3 → slow 0.7 → tint. Sponge areas have slow=1 → 0. Good.

34. Water vertex shader: texture2D(tMed, uv).a — LinearFilter on DataTexture — smooth. Good.

35. vNorm — used with dFdx in fragment — WebGL2 GLSL: three injects #version 300 es and maps texture2D etc. dFdx available in ES 3.0 fragment shaders without extension. Good.

36. Potential issue: ShaderMaterial fragment uses dFdx — in GLSL1 (WebGL1) needs GL_OES_standard_derivatives, but three r170 compiles all shaders as GLSL ES 3.00 (WebGL2) — fine.

37. camera.aspect initial 1 — onResize fixes at boot. Good.

38. controls.update() per frame with damping. Good.

39. In animate, if (dt > 0) fpsEMA += ... — dt from clock.getDelta() always >0. fine.

40. stepSim — when emitters.length < MAX_EMIT, uniforms for indices beyond length keep old values. uEmitOn for those indices: after preset change, stale values may remain 1 from a previous preset with more emitters! Bug: e.g., switching from 'dual' (2 emitters) to 'pool' (1 emitter) — uEmitOn[1] stays 1 with old position/amp → ghost emitter. Must zero unused slots in stepSim or applyPreset. Fix: in stepSim loop for i < MAX_EMIT: if i < emitters.length {...} else { u.uEmitOn.value[i] = 0; }. Same for lines.

Let me fix that.

41. Also in refreshHandles, handlePool[i] hidden when no emitter — good.

42. applyPreset sets $('sFreq').value — but slider input listener sets emitters' f — applyPreset sets f from defs directly (cloned), and slider shows it. Good.

43. toast(PRESETS[1].name, ...) at boot — applyPreset(1, true) silent, then toast manually. Good.

44. hintEl fade. Good.

45. endPointer uses e.clientX — pointerup has clientX. pointercancel may have them too. OK.

46. iOS: AudioContext resume on pointerdown — handled.

47. One more: simMat.uniforms.uEmitPhase.value is a plain JS array of numbers — three's setValueV1fArray? For uniform float uEmitPhase[8], three uses gl.uniform1fv(location, value) — plain array works. Good.

48. uSplashCount int uniform — value number — three sets via uniform1i based on GLSL type introspection. Good.

49. bloomPass.threshold 0.55 — water emissive crest ~1.7×color → HDR >1 blooms. Good.

50. Fog + ShaderMaterial: water doesn't include fog chunks — fine.

51. scene.fog affects standard materials (rim, pedestal, floor) — good depth cue.

52. floor CircleGeometry radius 34 with fog exp2 0.05 — at distance 34, fog factor e^-(0.0534)^2? FogExp2: factor = 1 - exp(-(ddensity)^2)? THREE FogExp2: fogFactor = 1.0 - exp( - fogDensity * fogDensity * fogDepth * fogDepth ). At d=20: (0.05*20)^2=1 → 1-e^-1=0.63. At 34: (1.7)^2=2.89 → 0.945. Good fade.

53. Spot light intensity 90 with distance 30, decay 1.6 — r170 uses physical units; SpotLight intensity in candela; 90 cd at ~9 units → 90/9^1.6 ≈ 90/33 ≈ 2.7 — reasonably bright. OK-ish; visual tuning blind. Point light intensity 4, distance 9, decay 1.8 → at 2 units: 4/2^1.8 ≈ 1.15. Fine.

Hmm, actually with useLegacyLights removed in r165+, intensities are physical; my values are guesses but plausible. The water is self-lit (custom shader) anyway; lights only affect rim/pedestal/floor.

54. renderer.setClearColor(0x030507) + fog color 0x04070b — slight mismatch; fine.

55. Missing: waterMesh used by pickWater before buildWater? Boot order: applyPreset → updateDamp → applyTier (buildWater) → animate. Pointer events only after user interaction. Good.

56. updateC2 reads $('sSpeed') — DOM ready (script at end of body). Good.

57. In keydown 'q' logic:

First Q: auto→manual at current tier. Second: tier+1... when tier exceeds 2 → back to 0 + auto. But when autoQuality set true again, applyTier called with tier=0 — good. Edge: after manual high→med→low→(tier 3 → 0, auto). OK.

But when autoQuality true and fps low, tier auto-decrements... then user presses Q → manual at current tier. Fine.

58. $('stQual').textContent set in applyTier only — auto step changes call applyTier — good.

59. Memory: buildSim disposes RTs and medium. buildWater disposes geometry. Good.

60. emitters phase continuity on freq change — phase accumulates with current f — continuous. Good.

61. In stepSim, when paused we skip — but waterMat.uniforms.tH retains last texture — but rtA/rtB swapped... after pause, rtA is the last written — tH points at rtA.texture — stable. Good.

62. Rain while paused — guarded. Stir while paused — queueSplash guarded by !paused for hold-stir; pointerdown splash still queues but sim paused → applied on resume (queue persists). Minor: queueSplash on pointerdown while paused queues silently; on resume splash appears. Acceptable. Actually let me guard pointerdown splash too? It's fine — even nice.

63. splashQueue processed only in stepSim first substep; if paused, queue grows unbounded? queueSplash shifts when > MAX. Fine.

64. Multiple applyPreset while quality auto changes — medium regenerated each time; consistent.

65. distSeg — used by wallSeg (unused by presets currently — slitWallX and wallDisk/wallRing/lensDisk used; wallSeg unused but harmless).

66. h.slitWallX — 'h' param name shadows nothing. Fine.

67. Check genMedium sponge: absorb 0.1 max — per step multiply (1-0.1)=0.9 — at 120 steps/s strong damping near edges. Good.

But wait — the outer wall d < 0.006 → at 512 res, 0.006*512 ≈ 3 texels. Good.

68. Emitter positions vs walls: 'slit' emitter at (0.2, 0.5) — fine. 'basin' emitter (0.5, 0.3) inside ring r=0.44: dist from center = 0.2 < 0.44 ✓. Lattice center clear ✓.

69. uEmitR = 2.4/SIM — at 512: 0.0047 uv → world 0.028 — small source. Good.

70. Line source radius same 0.0047 — thin line; plane wave from x=0.1. Good.

71. One concern: emitter drive mix(next, drive, clamp(m*1.2, 0, 1)) — at center m=1.2 clamped 1 → next = drive exactly. The drive oscillates ±amp·env·ampEnv ≤ 0.9 — within clamp range. Good.

72. Stability: c2 max = 0.22*1.4 = 0.308 < 0.5 ✓ (with med.r ≤ 1).

73. waterMat.uniforms.uSlope = 0.16 * SIM/12 — at 512: 6.83. hx range maybe ±0.5 → normal x ±3.4 → strong normals. Might be too strong; visually dramatic. Fine-ish; can't preview. Slightly reduce? uHScale 0.16 with h up to ~1 → 0.16 world height over ~2 texels (0.023 world) slope → very steep → normals nearly horizontal. Hmm — hx across 2 texels for a sine wave λ=25 texels amplitude 0.5: hx ≈ 0.5 * 2π * (2/25) ≈ 0.25. slope = 0.25 * 6.83 = 1.7 → normal tilt 60°. That's too steep for nice speculars. Reduce uSlope divisor: use /24 instead of /12 → 0.85 → 40°. Still strong. Real slope: dh_world/dx_world = (hx * uHScale) / (2 * TANK/SIM) = hx * 0.16 * SIM / 12. So uSlope as defined IS the physical slope. Physical waves of 0.08 world amplitude (h=0.5) with λ 0.29 world → slope = 0.08*2π/0.29 ≈ 1.7 — physically correct! Water waves are steep. For shading aesthetics, soften: multiply by 0.55. I'll set uSlope = uHScale * SIM / 12 * 0.55. Let me adjust in code: in buildSim and initial uniform. I'll change formula to waterMat.uniforms.uHScale.value * SIM / 12 * 0.55.

74. Fragment spark from dFdx(vH)*26 — vH per-pixel gradient: vH interpolated from vertices; dFdx gives change per pixel — at high mesh res, per-pixel change tiny → spark ≈ 0 mostly; near steep crests bigger. OK subtle. Fine.

75. grid — vUv*16 → 16 cells across tank. subtle 0.05. OK.

76. Toast/hint z-index fine.

77. #help display none default; toggled. Clicking panel closes. Good.

78. bSound starts active (sound on) — but AudioContext only created on first gesture; if user never clicks, no audio — standard.

79. AudioEng.toggle() when ctx null → init creates with master gain this.on ? 0.9 : 0 — on=true initially → gain 0.9; then toggle flips on→false → gain 0. Good.

80. In plink, g.gain.exponentialRampToValueAtTime(0.0004, ...) — from v — fine.

81. StereoPanner guard — fine.

82. motes added before applyTier sets uPR — initial uPR 1 then set. Good.

83. composer.render() every frame; snapshot after — captures post image. Good.

84. renderer.domElement.toBlob — after composer.render in same frame/task — buffer still valid (no preserveDrawingBuffer needed within same task). Good.

85. Unused: distSeg used by wallSeg only; both unused by presets but part of helper API — fine, documented as helpers.

86. let toastTimer = 0 then clearTimeout(toastTimer) fine.

87. const uvToWorld used in refreshHandles — defined before use in module order? uvToWorld defined right after linePool, before refreshHandles definition — but refreshHandles called in animate (runtime) — fine regardless.

88. selectedEmit initial -1; applyPreset sets 0 if emitters exist. Good.

89. Check refreshHandles(t) — handlePool[i] for i ≥ emitters.length → emitters[i] undefined → hidden ✓.

90. In applyPreset, document.querySelectorAll('#presetRow .chip') — chips created before applyPreset(1) at boot? Boot calls applyPreset AFTER UI wiring section (boot at bottom). ✓.

91. updateDamp called at boot before applyTier — simMat exists ✓.

92. In buildSim, updateC2() reads slider — exists ✓.

93. applyTier → buildSim → clearSim → renderer render — before first composer.render — fine.

94. One thing: applyTier() calls buildSim() which regenerates medium — but applyPreset also regenerates; boot does both (preset then tier) — double generation, harmless.

95. Node syntax check — let me extract and check.

96. hintEl.style.opacity = 1 at boot — CSS transition handles fade. ✓

97. controls.autoRotate = true initially — nice.

98. Camera near rim: minDistance 3.2, maxPolar 1.38 — can't go below horizon much. Good.

99. THREE.MOUSE.DOLLY for MIDDLE ✓.

100. Potential lint: emitters = p.emitters.map((e) => ({ ...e, phase: Math.random() * 0, env: 0 })); → change to phase: 0.

Also fix the stale-uniform bug (#40): in stepSim, loop to MAX_EMIT/MAX_LINE and zero unused.

And adjust uSlope (#73).

Let me apply these three fixes now, then run node --check.

********************************************************************************************************************************************ne.

Now validate JS syntax with node --check by extracting the module script.

Syntax OK. Let me also do a quick sanity check on GLSL by a crude method — can't compile shaders without a GL context easily. Let me do a careful re-read of the shader code sections for GLSL errors.

Sim shader:

• uniform vec4 uSplash[6]; with ${MAX_SPLASH} = 6 ✓
• loops with if (i < uSplashCount) — i is int, uSplashCount int ✓
• texture2D — three converts to texture() in GLSL3 ✓
• gl_FragColor — three maps to pc_fragColor? For ShaderMaterial in WebGL2, three prepends #define gl_FragColor pc_fragColor etc.? Actually three.js ShaderMaterial in r170 with WebGL2: shaders get prefix that includes layout(location = 0) out highp vec4 pc_fragColor; #define gl_FragColor pc_fragColor — yes, three handles gl_FragColor for ShaderMaterial. ✓

Water vertex shader: uses uv, position, modelMatrix, viewMatrix, projectionMatrix — all provided by ShaderMaterial ✓.

Fragment: dFdx — fine in GLSL3.

One thing to check: in the water vertex shader I sample textures in the vertex stage — texture2D in vertex shader → three maps to texture() — in GLSL3 vertex shader, texture() without bias argument is fine (lod 0 implicit? In vertex shaders, texture() is allowed — implicit derivatives don't exist, but texture() in vertex shader uses level 0... Actually in GLSL ES 3.00, texture() in vertex shader is valid; it samples base level since no derivatives). Yes — texture() in vertex shader = textureLod base level implicitly. ✓ Mipmaps: our textures have no mipmaps (minFilter Nearest/Linear, no mipmap generation) ✓.

Motes shader: attribute float aSeed; — in ShaderMaterial, three prepends attribute declarations? For ShaderMaterial with WebGL2, three injects #define attribute in etc. for vertex shaders. Yes — standard attributes (position etc.) auto-declared; custom attribute float aSeed; — with GLSL3 conversion, three's prefix includes #define attribute in? Hmm. In WebGL2 mode, three.js WebGLProgram prefixes vertex shaders with:

Yes, it does include those compat defines for ShaderMaterial (non-raw). ✓ So attribute/varying/texture2D/gl_FragColor all work.

gl_PointCoord in fragment ✓. gl_PointSize ✓.

Grade pass shader: ShaderPass material — same compat ✓.

Now, a couple more runtime concerns:

1. renderer.setPixelRatio + composer.setPixelRatio then onResize calls renderer.setSize/composer.setSize — order fine.

2. EffectComposer created before applyTier sets sizes — initial size default (window?) — composer constructor uses renderer size; we call onResize at boot ✓.

3. bloomPass = new UnrealBloomPass(new THREE.Vector2(1,1), ...) — then setSize via composer ✓.

4. Boot: applyPreset(1, true) — before applyTier(). applyPreset calls clearSim() — rtA/rtB exist? They're created in buildSim... which is called in applyTier AFTER applyPreset! Bug: applyPreset → clearSim() → rtA is null → renderer.setRenderTarget(null) twice, renders to canvas with clearMat — harmless? renderer.setRenderTarget(rt) with rt null → renders to canvas — fine, no crash. Then buildSim creates RTs and clears properly. Actually wait — applyPreset also calls genMedium(p, SIM) — fine, and sets simMat.uniforms.tMed.value = medTex — creates a medTex, then buildSim disposes it (if (medTex) medTex.dispose()) and regenerates — fine.

But clearSim with null RTs: renderer.setRenderTarget(null); renderer.render(simScene, simCam); renders the clear quad to the canvas — before first real render; harmless (canvas cleared black anyway, and composer.render happens later each frame). OK, no crash.

5. waterMat.uniforms.tH.value null until first stepSim — first animate frame: not paused → stepSim runs before composer.render ✓.

6. pickWater before waterMesh exists — waterMesh built in applyTier at boot ✓ before any pointer event.

7. refreshHandles — emitters[i] — after applyPreset ✓.

8. handlePool created at module level before presets applied — visible=false initially ✓.

9. In animate: emitters.reduce(...) — fine.

10. $('stEnergy').style.width ✓.

11. Edge: applyPreset uses document.querySelectorAll('#presetRow .chip') — chips exist ✓ (created earlier in module).

12. keydown '1'..'6' — k >= '1' && k <= '6' string comparison ✓.

13. e.key.toLowerCase() for space → ' ' ✓ handled.

One more consideration — the slitWallX helper signature: (x0, y0, y1, th, gaps). Called h.slitWallX(0.6, 0.1, 0.9, 0.006, [[0.42,0.024],[0.58,0.024]]) ✓.

lensDisk(cx, cy, r, mul, edge) called h.lensDisk(0.63, 0.5, 0.16, 0.3, 0.05) ✓.

wallRing(cx, cy, r, th) called h.wallRing(0.5, 0.5, 0.44, 0.006) ✓.

wallDisk(cx, cy, r) ✓.

Now update the demos index.html. Insert card after the "" comment. Use the awk approach as the previous run did (safer on s3fs).

Card content:

Description: "A GPU ripple-tank interference lab — a real-time wave equation solved on ping-pong float buffers across up to 512² cells, rendered as a neon water surface where crests glow cyan and troughs violet. Drag glowing sources (tap to mute them), stir the water, or summon rain; six presets stage the classics — open pool, double-source fringes, double-slit diffraction, a shallow refraction lens that bends plane waves to a focus, a Bragg-scattering peg lattice and a focusing echo basin — with live frequency/wavelength readouts and a wave-energy meter. Featuring generative WebAudio (pentatonic droplet plinks with convolution reverb over an energy-driven pad), UnrealBloom plus vignette/grain/chromatic grade, drifting dust motes, adaptive quality tiers, PNG snapshots, keyboard shortcuts and full touch support."

Match the indentation style — the newest cards use deeper indentation (031 card is indented with 20 spaces for <a). Looking at the sed output: <a class="demo-card" href="./031-galton-cascade/index.html"> — 20 spaces. I'll match that.

Insert with awk after the comment line.

Index updated: 32 demo cards, 032 first. Let me do a final verification: re-read the demo file around critical sections to make sure the s3fs writes persisted correctly (previous run had a lost-edit issue). Verify the three fixes are present and the file is intact.

All fixes persisted. One check: grep -n "phase: 0, env: 0" — it printed only 3 lines but I searched for 4 patterns; the "phase: 0, env: 0" pattern didn't print? Let me look: output shows lines 616, 779, 1105 — the phase: 0, env: 0 grep pattern didn't match! Let me check — the replace preview earlier showed line 795: emitters = p.emitters.map((e) => ({ ...e, phase: 0, env: 0 }));. The grep pattern "phase: 0, env: 0" should match... unless grep treated it fine but output was cut? The output shows only 3 matches from the second grep. Hmm, the && chain: grep -c "uSlope" → 4 ✓; second grep printed 3 lines and exited 0 (matched). But "phase: 0, env: 0" isn't in the output. Wait — the second grep had 4 alternative patterns; it printed matches for 3 of them. The first pattern phase: 0, env: 0 — no match?? But grep exit code 0 since others matched. Let me verify line 795 directly.

Confirmed: the phase: 0 edit was lost (the s3fs race condition the previous run warned about — the subsequent uSlope edits overwrote it since they were based on a stale read, or the write was lost). Also Math.random() * 0 appears 4 times? "grep -c" says 4 — wait, Math.random() * 0 appears once in that line... grep -c counts lines, and it says 4 lines contain "Math.random() * 0"?? Hmm — no wait, grep -c "Math.random() \* 0" — the \* escapes... in grep basic regex, \* means literal *. "Math.random() * 0" — hmm, 4 matches? That seems wrong. Unless... Math.random() * 2 - 1 no. Let me think: Math.random() * 0 literal appears in: line 795 only. Why 4?

Oh wait — the parens in grep BRE are literal, fine. Hmm, maybe other lines: pos[i * 3] = Math.cos(a) * r; no. Math.random() * 0.88 — "Math.random() * 0" matches as prefix of "Math.random() * 0.88"! Yes — rain droplet lines: 0.06 + Math.random() * 0.88 twice (x and y), and 0.006 + Math.random() * 0.005 — that's "Math.random() * 0.005" — prefix "Math.random() * 0" matches too. So 4 lines: 795, two rain lines, one rain radius line. OK that explains it.

So only line 795 needs fixing. Re-apply the edit and verify immediately.

Fix persisted (grep-exit=1 means no phase: Math.random remains), syntax valid.

Let me do one final holistic check of the demo file — verify key structural pieces are all present (importmap, all shader materials, boot sequence) and the index page is intact. Then finish.

Actually, let me do one more quick review pass of a couple of remaining risk points:

1. controls.mouseButtons = { LEFT: null, ... } — I want to double check three r170 OrbitControls handles null without throwing. In onPointerDown → if pointerType mouse → onMouseDown(event). There:

null → default → NONE → no capture. ✓ No throw.

For touch: onTouchStart:

null → NONE ✓. TWO: DOLLY_ROTATE ✓.

But wait — in r170, is it this.touches.ONE with TOUCH.ROTATE? Yes.

2. OrbitControls also has onMouseWheel — wheel zoom works regardless ✓.

3. One issue: with LEFT null and ONE null, OrbitControls never calls preventDefault on those pointer downs — page scroll prevented by touch-action: none which OrbitControls sets on domElement style in constructor (this.domElement.style.touchAction = 'none') ✓.

4. el.addEventListener('pointerdown'...) — our handler runs alongside ✓.

5. pickHandle — raycast against hit spheres; hit sphere radius 0.34 at y≈0.17 above water; water pick would also hit behind — we check handle first ✓.

6. Drag emitter: pointermove → pickWater gives uv even when pointer moves fast off mesh → returns null → keep last position ✓.

7. endPointer — toggles on tap ✓.

8. Emitter env easing: e.env += ((e.on?1:0) - e.env) * min(1, dt*6) ✓ smooth.

9. uEmitOn gate e.env > 0.02 — when toggled off, env decays below 0.02 → gate off ✓.

10. Sim splash radius: s.w used as exp(-d²/(s.w²)) — radius in uv ✓.

11. Wavelength stat: cTex = sqrt(uC2) * 2 * fps — uC2 already includes speed multiplier and res scaling ✓. λ = (cTex/SIM)*TANK/f ✓.

12. stSrc counts on emitters + lines ✓.

13. Boot toast shows PRESETS[1] = Double Source ✓.

14. #hint bottom 118px — above controls ✓.

15. Help overlay click-to-close ✓.

16. applyTier on auto changes rebuilds sim (clears waves) — acceptable, noted.

17. Potential divide-by-zero: uLinePar loop dot(ba,ba) — lines have distinct endpoints ✓; unused lines have uLine (0,0,0,0) but gate uLinePar.z > 0.5 skips before division? No — the division dot(vUv-a, ba)/dot(ba,ba) is INSIDE the if (uLinePar[i].z > 0.5) block ✓ skipped for unused.

18. slitWallX gaps loop for (const [gc, gw] of gaps) ✓.

19. genMedium blur loop bounds 1..N-2, edges keep previous soft value (0 or wall at border) — border wall soft stays ~wall value? soft array initialized as wall (edges=1), blur writes only interior; edges remain 1 → rim glow at tank edge — actually nice (glowing tank border).

20. DataTexture — in r170 default flipY false; medium painted with y up in uv space; sim treats vUv.y consistently; emitters y in uv — consistent everywhere since both sim and medium use same uv. Water mesh uv: PlaneGeometry uv (0,0) bottom-left → after rotateX, v maps to -z as computed ✓. DataTexture row 0 = j=0 = v=0 ✓ consistent with texture sampling (v=0 samples row 0 when flipY=false) ✓.

21. Emitter uv→world mapping consistent with pickWater inverse ✓.

22. TANK=6, rim inner 6.12 — water plane 6×6 fits inside rim ✓.

23. Basin floor at y=-0.42, water at y≈0 ✓.

24. spot decay 1.6, distance 30 ✓.

25. iOS Safari: HalfFloat RT renderable — supported on iOS 15+ WebGL2 ✓. OES_texture_half_float_linear not needed (Nearest) ✓. Medium LinearFilter on Uint8 ✓ universally.

26. stereoPanner guard ✓.

27. devicePixelRatio guard || 1 ✓.

28. matchMedia('(pointer: coarse)') ✓.

29. Memory leak on repeated tier changes: RTs disposed ✓, geometry disposed ✓, medTex disposed ✓.

30. The #stats hidden on mobile ✓.

One more potential visual issue: the water fragment col += vec3(1.0) * spec * 0.75; — spec from L direction; fine.

And bloom threshold 0.55 with ACES tonemapping — bloom pass operates pre-tonemap on HDR values; crest emissive up to ~1.7 → blooms ✓; base water ~0.1 → no bloom ✓.

I'm fairly confident in the demo. The index page is updated. Everything checks out. Let me do a final quick sanity listing and finish with _success.

************************************************************************************************************************************************************************************************************************************ss.