Wake up

The task is "Wake up and do as you please." Previous context: I have a demos folder at /space/demos/ with 59 demos. The last execution created demo 059-zoetrope. So the natural continuation is to create demo 060 — a new cool Three.js demo — and update the index.

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

Let me inspect the demos folder to see the current state.

There are 59 demos. I'll create demo 060. Let me check the index.html structure to understand the card format, and look at a recent demo to understand the style.

Let me think about what demo to create next. Previous demos cover:

• Particles, galaxies, fractals, fluid, gravity, black holes, audio, runners, odysseys, underwater, physarum, powder, clockwork, rain, aurora, bugs (skitter), coral, threshold, attractors, murmuration, terrain, clouds, frost, koi, ferrofluid, sync (metronomes?), cymatics, tesla, pyro, morphogenesis, galton board, wavefront, gossamer (spider web?), magnetosphere, cloud chamber, wavefunction, epicycle, sandpile, kinetic theory, optics lab, squishy physics, neon tilt (pinball?), hyperfold (4D), photon garden, critical point, bridge building, primordial (life origins?), roller coaster, sakura, voxel world, neon district (city driving?), supercell (storm), caldera (volcano), dominoes, phantom jam (ghost music?), wavewalker (walking on water?), basin (?), microcosm (tiny world?), zoetrope.

For demo 060, ideas:

1. Paper airplane / origami folding — origami simulator
2. Tensegrity — floating compression structures
3. Double pendulum chaos garden — many double pendulums with slight differences showing chaos
4. Molecular dynamics / soap bubbles — soap bubble cluster physics with Plateau laws, thin-film interference shader
5. Pendulum wave machine — harmonic pendulum wave (already done with 026-synchrony?)
6. Firefly swarm synchronization — done (026-synchrony)
7. Gears / mechanical clock escapement — 013-clockwork-nebula exists
8. Voronoi shattering — glass shatter
9. Ink diffusion / marbling — ebru art with fluid
10. Lissajous / harmonograph — drawing machine
11. Marble run / Rube Goldberg — 054-domino-rally, 031-galton-cascade exist
12. Terrella / orrery — 037-epicycle is orrery-ish
13. Turing patterns — reaction diffusion (030-morphogenesis probably)
14. Chladni figures — 027-cymatics
15. Wormhole / hyperspace — 006-event-horizon
16. Soap film / bubble cluster — thin film interference, iridescence. Not done yet, I think! Ferrofluid is different. Bubbles with physically-based thin-film interference shader, floating and popping, merging — could be beautiful.
17. Kinetic sculpture — strandbeest — walking mechanism. Hmm, 059-zoetrope had a walker. Strandbeest linkage simulation could be cool and different though.
18. Ant colony — pheromone trails
19. Boids fish school in an aquarium — murmuration done.
20. Lightning / plasma globe — 028-teslasphere.
21. Molten glass / glassblowing — 053-caldera volcano.
22. Dandelion seeds blowing in wind — particle wind.
23. Zen garden / sand rake (karesansui) with ripple patterns — sandpile exists (038).
24. Siphon / Archimedes screw water clock
25. Perpetual motion / wave machine sculpture — "Ridge Racer"... hmm.
26. Candle / flame simulation — 029-pyrosymphony.
27. Prisms / rainbows — 040-lumen-lab optics.
28. Tornado of autumn leaves — supercell done.
29. Sympathetic resonance bridges
30. Waterwheel / hydro power
31. Springs lattice cloth — 041-squish-lab.
32. Vortex ring / smoke ring simulation — vortex rings colliding! That's beautiful — leapfrogging vortex rings with particles. Could be done with a simple vortex filament method.
33. Ink in water (dye advection) — 004-fluid-dynamics probably covers.
34. Cloud in a bottle
35. Tides / moon-earth-sun orbital — epicycle.
36. Origami crane folding — origami folding animation with math. Interesting but complex.
37. String art / cardioid curves — math art.
38. Hyperbolic tiling (Escher) — Poincaré disk with tessellation! M.C. Escher Circle Limit style. That could be a gorgeous shader demo — hyperbolic tiling shader with fish. Shader-based, impressive, different from everything else. Hmm, but "interactive" is a plus.
39. Voronoi crystals / geode growth
40. Time crystal
41. Soap bubble cluster — I'll go with this. "Effervescence"? "Bubbleworks"? Thin-film interference bubbles: spawn from a bubble wand/machine, float with buoyancy and turbulence, wobble (shape oscillation via vertex noise), collide and merge, pop with fragment burst into droplets, iridescent rainbow film shader with thickness variation, bloom postprocessing, audio pops. Also user can click/drag to blow bubbles. That's a solid demo with wow factor: custom GLSL thin-film interference shader is the star.

Let me check what 025-ferrofluid and 041-squish-lab are to make sure bubbles aren't too similar. Ferrofluid is magnetic spikes — different. Squish-lab is soft-body. Bubble demo would be distinct.

Alternatively: vortex rings colliding ("Vortices") — two smoke rings passing through each other. Very pretty but harder physics.

Or "Penrose" — Penrose tiling with inflation/deflation animation, showing aperiodic patterns? Math-art demo, pretty but less "alive".

I'll go with the bubble demo: "060-suds" or "060-iridesce" or "060-bubbleworks" or "060-effervescent". Name: "060-iridescence"? Let me check existing names... I'll call it "060-spectrum"? Hmm. Something evocative: "060-foam"? "060-soapworks"? Let me go with "060-iridescent" ... Actually a nice poetic name like others (basin, gossamer, zoetrope, caldera): "060-sudworks"? "060-spume"? "Spume" means foam — poetic and rare. Or "060-champagne"? Let me pick "060-spume" — hmm, might be too obscure. "060-bubbles" too basic. Others: "Lumen lab", "Photon's garden". I'll go with "060-spume" — poetic, fits the gallery's naming vibe (gossamer, spume, basin, caldera). Actually "Iridesce" — hmm. "060-iridesce"? The gallery has names like "primordial", "threshold", "synchrony" — single evocative words. "Spume" fits well.

Wait — actually let me reconsider the concept to maximize wow. A bubble demo needs:

• Realistic thin-film interference: physically based color from film thickness (uses interference formula for reflected light at wavelength λ, thickness d, refractive index n — compute RGB by integrating over response curves, approximated with three wavelengths or a polynomial palette approximation). Common approach: compute optical path difference = 2ndcos(theta_t), then intensity per channel = 0.5+0.5cos(phase). Use 3 wavelengths (650, 532, 450nm) or sample a spectrum → RGB conversion. This gives genuinely beautiful soap film colors.
• Film thickness varies: gravity drainage (thicker at bottom), swirls (noise-advected thickness field), thinning before pop.
• Fresnel reflection + environment (procedural gradient environment / scene reflection via matcap-ish approximation or an actual cubemap render of the scene? Could use a simple procedural sky gradient envmap via CubeCamera... expensive for many bubbles. Use a shared procedural environment sampled in shader — e.g., a gradient sky + ground + some neon stripes for interesting reflections).
• Transparency: bubbles are mostly transparent with reflective highlights. Render with additive-ish blending or custom shader with alpha = fresnel. Backside rendering for depth (two-pass: render backfaces then frontfaces).
• Wobble: vertex displacement with spherical harmonics (mode 2 oscillation typical of bubbles).
• Physics: buoyancy, drag, turbulent wind flow field (curl noise), bubble-bubble collision (soft repulsion), merging when touching for a while (or just bounce). Pop when film too thin or hitting floor/objects → particle burst of micro-droplets + ring.
• Interaction: pointer blows air (wind force), click creates bubbles, "wand" mode spawns stream. Audio: gentle pop sounds (Web Audio filtered noise burst + sine blip), ambient pad.
• Post: bloom, vignette.

Also maybe a bubble machine at the bottom: a little ring/wand that dips and blows bubbles periodically. Cute.

Rendering approach: Use instancing? Custom shader with per-bubble attributes (radius, thickness base, phase, hue offset). Bubbles wobble needs vertex displacement — instanced sphere geometry (say 64x48 segments) with per-instance attributes via InstancedBufferGeometry. Count maybe 60-120 bubbles. Two-pass rendering (back + front) → two instanced meshes sharing geometry with different materials (side: BackSide / FrontSide). Sorting for transparency is approximate; with additive-style reflection it mostly works. I'll use alpha blending with depthWrite off, sort instances by depth each frame? InstancedMesh sorting is painful. Alternative: since bubble reflection is mostly fresnel-based and alpha low, order-independent artifacts are minor. Use blending: NormalBlending with depthWrite false, and draw from far to near approximated by render order… Actually simplest robust: premultiplied additive-ish screen blending: use THREE.AdditiveBlending for reflections — overlapping bubbles just add light, looks fine and dreamy, no sorting needed. Plus a subtle transmission feel: darken? Can't darken with additive. It's fine — bubbles glowing softly on a darker background looks gorgeous with bloom. Choose a dusk/dark studio backdrop — consistent with many of my demos' neon aesthetic.

Pop effect: particle burst — instanced small quads/points with velocity, gravity, fading; plus an expanding ring (torus/ring shader or a points ring). Keep a pool of pop particles (e.g., 2000 points in one BufferGeometry, updated on CPU or GPU shader with birth time attribute — shader-animated particles: set birth pos/vel/time at pop, animate in vertex shader by t - birthTime). GPU particles: buffer of N=4096, each has birthTime, life, pos0, vel; vertex shader computes position if alive else degenerate. Points with soft sprite texture, additive.

Merging: when two bubbles touch, they could coalesce into one bigger (volume conserved: r = (r1³+r2³)^(1/3)) with a little jiggle. That's a nice touch — plus occasionally bubbles split? No, just merge and pop.

Floor: glossy dark floor with reflection? Simple: a subtle grid/polar glow or just a dark gradient with soft spotlight. Maybe a reflective floor via THREE.Reflector — costs a pass. Could look great: dark glossy floor reflecting glowing bubbles. Reflector at low res (512) is cheap enough. Let's include a Reflector floor with blur? Plain Reflector is sharp; mix with dark roughness via a semi-transparent dark plane above it. Actually simpler: skip reflector; use a radial-gradient "spotlight pool" floor with fake reflections: render mirrored instances? Overkill. Use Reflector — it's easy: import from examples/jsm/objects/Reflector.js, put slightly below an opaque-ish dark plane with opacity 0.85 to dim it. That gives nice reflections of bubbles and the machine. OK include it.

Bubble machine visual: a stylized wand ring that rises from a pool, film stretches across (a circle mesh with film shader), then blows bubbles — maybe simpler: an elegant brass/gold ring that bobs; bubbles emit from it. Keep it simple but nice: glowing ring at center-bottom.

Controls/UI:

• Sliders/buttons: "Breeze" (wind strength), "Bubble rate", "Gravity/Buoyancy", "Auto blow" toggle, "Pop all" button.
• Pointer: move to stir air (wind gust), click/drag to blow a stream of bubbles from pointer ray position, maybe.
• Audio toggle.
• Stats: bubble count.

Also drifting dandelion-like? No, keep focused.

Extra wow: giant bubble occasionally (rare, 2-3x size, slower), which merges others and pops spectacularly with droplet shower. And "film swirl" detail: per-bubble noise texture animated in shader creating swirling thickness patterns — key to realistic soap look. I'll bake a small noise texture procedurally (canvas) or use a DataTexture with value noise; or compute fbm in shader (cheaper: use a 2D noise texture sampled by triplanar-ish mapping: sample noise at normal.xy*scale + time offsets). fbm in fragment shader is fine for ~100 instanced spheres at high res... maybe heavy on low GPUs but acceptable. Use a 256x256 RGBA noise DataTexture (generated once) and do 2-3 samples — cheap and looks great.

Thin-film interference physically-inspired:

Better: use proper wavelength-to-RGB: sample ~8 wavelengths across 380-700nm, convert each to RGB via approximation function, average. That's the physically correct-ish way and gives rich colors. 8 iterations with a cheap wavelengthToRGB approx — fine in fragment shader.

Thickness d: base thickness ~ 300-800nm varying with: (a) height on bubble (drainage: d decreases toward top), (b) swirl noise advected by time, (c) age (thins over lifetime, pops when d_min < threshold), (d) per-bubble offset.

Also add slight iridescent rim and a fake "environment" reflection: envColor(normal reflect) = gradient sky (deep blue-purple) + horizon glow + a few "neon tube" stripes: e.g., vertical magenta/cyan bars computed from reflect dir — gives those iconic elongated highlights. Plus two analytic point-light speculars (Blinn).

Alpha: mostly transparent; alpha = fresnel*0.9 + spec. With AdditiveBlending, alpha ignored mostly; use color output premultiplied. I'll do: final = env * fresnelReflectance * filmColor + spec; plus a faint base sheen. AdditiveBlending. Double-sided two-pass for parallax depth: render BackSide first with its own film calc (normal flipped), then FrontSide. With additive both just add — good, gives depth.

Wobble: vertex displacement: pos += normal * radius * (a1Y2 modes) — implement as sum of 2-3 directional cosine waves: d = r(0.02sin(6ny + t*w1) * ... ) simple pseudo-sh modes. Per-instance random wobble params via attributes.

Physics per frame on CPU (100 bubbles is cheap):

• velocity += (buoyancy - gravity) * dt (buoyancy slightly > gravity for rise; bigger bubbles rise faster: terminal velocity ~ r).
• drag: v *= exp(-k dt).
• curl-ish wind: precomputed flow field function flow(pos, t) using sin/cos combos; plus pointer gust: v += gustDir * falloff(dist to pointer ray).
• bubble-bubble: soft-sphere repulsion; if overlapping > threshold and relative speed low → merge (volume add), spawn small sparkle; cooldown to avoid chain merges... Actually merging whenever overlap deep is natural.
• floor bounce/pop: if y - r < floor → pop (or slide). Pop randomly when film thin: pop probability increases with age & thinness. Also ceiling: drift sideways at top? Add gentle bounds: soft radial boundary pushing back toward center (a big invisible dome), else they fly away. Use toroidal wrap? Simplest: soft box bounds with inward spring, plus they pop eventually anyway.

Pop scheduling: each bubble has maxLife ~ r-dependent (8-20s) + randomness; when age > maxLife or thin spot → pop. On pop: spawn ~40 droplets + ring + sound (if audio on & not too frequent).

Sound: WebAudio: pop = short noise burst through bandpass at random freq + tiny pitch-drop sine. Ambient: soft filtered noise "breeze" + occasional chime on merge. Keep subtle.

Structure the code cleanly with comments. This is a big single file (~1000+ lines). Let me look at an existing recent demo to match conventions (import map version, UI style).

Let me look at 059-zoetrope quickly and the index.html card format.

******************************************************************************************************************ml.

The conventions are clear: three@0.160.0 with import map, dark neon aesthetic UI with monospace font, panels. I'll create demo 060: "Spume — Iridescent Bubble Physics" — an interactive soap-bubble world with physically-based thin-film interference shader, bubble merging/popping, GPU droplet particles, reflective floor, bloom, generative audio, and pointer interaction (blow bubbles, gusts).

Let me now write the demo. I'll build the file carefully. Key components:

1. HTML + CSS UI (title panel, controls panel with sliders, stats panel, buttons: Blow mode toggles, audio, pop all, quality; help panel).
2. Import map with three@0.160.0, addons: OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, ShaderPass, OutputPass, Reflector.
3. Scene:
   • Background: dark gradient (custom big sphere shader or scene.background color + fog). I'll do a subtle vertical gradient backdrop via a large inverted sphere with gradient shader — nice.
   • Floor: Reflector (mirror) + overlay dark translucent plane for roughness feel + a soft radial light pool decal.
   • Bubble machine: brass ring wand at center that bobs; small glowing "soap pool" ring beneath; bubbles spawn from ring, drift up.
   • Bubbles: InstancedBufferGeometry sphere, two passes (back/front) with custom ShaderMaterial, additive blending, per-instance attributes: offset (vec3), radius, seed, thickness base, age/maxAge (update via instanced attributes each frame — set needsUpdate; fine for ~128 instances). Actually simpler: keep a fixed max instance count (e.g., 96). Each frame update aOffset, aData (radius, ageNorm, seed, pop?) attributes. Draw range set to active count... but with merging/popping the set changes; use scale=0 for dead.
   • Film thickness in shader: d = base * (drainage by normal.y) * swirl(noise) * ageThin. Compute interference color with 4-8 wavelength samples.
   • Wobble: vertex displacement using normal-direction sinusoid modes with per-instance seed and age.
   • Pop particles: GPU-animated Points with attributes set at pop time (birth pos, vel, birth time, life, size). Ring effect: expanding ring sprite — I can encode "ring" particles as bigger points that expand? Simpler: droplets + a shockwave ring mesh pool (say 8 reusable ring meshes with shader-driven expand/fade). Or make rings also as points with special flag: size grows over life. I'll do two point systems: droplets (gravity, streaky) and rings (flat billboarded ring texture expanding). Simplest: one Points system with aType attr: 0 droplet, 1 ring. Ring particle texture drawn as ring; scale grows with age. OK.
   • Lights: since bubbles are custom-shaded (no scene lights needed for them), but the machine/floor need lighting: add hemisphere + directional + point lights. Use MeshStandardMaterial for machine (envMap from a PMREM of a simple gradient scene? To make brass look good, generate a small procedural environment: use THREE.PMREMGenerator with a RoomEnvironment from addons! Easy: import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js' then scene.environment = pmrem.fromScene(new RoomEnvironment()).texture. That gives nice metal.
4. Post: EffectComposer + RenderPass + UnrealBloomPass + final ShaderPass (vignette, grain, slight chromatic aberration?) + OutputPass.
5. Physics CPU loop.
6. Audio: WebAudio manager — master gain, pop synth, merge blip, ambient breeze noise (looped filtered noise with LFO), toggle button; resume on first gesture.
7. Interaction:
   • OrbitControls with damping, autoRotate slow.
   • Pointer: raycast to an invisible plane at machine height; when pointer down: blow bubbles from pointer position toward up-ish (spawn stream at pointer ray point near floor?) Better: pointer acts as "wind": moving pointer creates gust affecting bubbles near the ray; click & hold spawns bubbles at the 3D point under pointer (projected onto a vertical plane facing camera at some depth, clamped) that then float up. Drag = paint a stream of bubbles. That's delightful.
   • Also a "fan" toggle: continuous rotating breeze.
8. UI sliders: Bubble rate (machine), Breeze strength, Size (avg), Buoyancy/Lift, Lifetime maybe. Buttons: Machine on/off, Audio, Pop All, Quality (bloom on/off / pixel ratio), Camera reset.
9. Stats: bubble count, merged count, popped count, fps.

Edge cases: instanced attribute updates; sorting not needed (additive). Reflector renders scene — bubbles additive will reflect fine (reflector renders scene without itself; two-pass bubble materials render ok in reflection).

Performance: sphere geometry 48x32 segments ~ 3k tris per bubble * 96 * 2 passes = ~600k tris worst case; fine on desktop, maybe heavy on mobile — provide quality toggle reducing instance max count and bloom. Keep default sphere 40x28.

Also graceful WebGL fail message (#nogl).

Let me also double check Reflector import path: 'three/addons/objects/Reflector.js'. Yes.

Now about the thin-film interference — the core shader. Physically-inspired implementation:

Simplify: intensity = 0.5 + 0.5*cos(phase). Scale by fresnel. Sample wavelengths: use Gaussian-ish approximation of CIE with 3 broad peaks — better: sample 6 wavelengths (610, 580, 550, 510, 470, 430) with approximate RGB contributions: Use a simple wavelength→RGB approx function (standard one by Dan Bruton). 6 samples averaged → decent rainbow.

I need cosT2: refraction angle inside film. cosI = dot(N, V). sinT2 = sinI/n2 → cosT2 = sqrt(1 - sinT2²).

Film thickness d (nm): base 250-750nm. Variations:

• Drainage: thinner at top: factor = mix(1.35, 0.45, smoothstep(-1,1, localNormal.y)) — wait top drains → top thinner: d = mix(0.45, 1.35, (localN.y0.5+0.5)).
• Swirl: sample noise texture with polar-ish coords: uv = localN.xy * scale + time*drift + seed offsets; d *= mix(0.6, 1.4, swirl).
• Marbling streaks: second noise sample at stretched coords for banding.
• Age thinning: d *= mix(1.0, 0.35, ageNorm^1.5) → film thins as it ages; pop triggered on CPU at maxAge.

Fresnel: Schlick F0=0.02 (soap film). Reflectivity also boosted at grazing. Final color = envColor(reflectDir) * F * filmColor + filmColor * F * 0.6 (ambient iridescence) + specular highlights * filmTint.

envColor: procedural "studio": base gradient by dir.y (deep indigo → black), plus horizon band glow (violet), plus 3-4 elongated "light bars": brightness += barColor * pow(max(0, dot(dir, barDir)), sharp). Choose bar colors: cyan, magenta, amber, white. These produce beautiful streaky reflections on spheres. Also add a soft ground bounce from below (dim).

Alpha/output for additive: out color = reflection stuff. Also add a very slight transmission tint? Skip; additive only adds.

Backside pass: same shader with side:BackSide, normals flipped via gl_FrontFacing? In BackSide pass, geometry normal is fine; we compute with N = normalize(normal) (pointing outward but we see inside) — use N = -N? For the inside surface, view hits inner wall; reflection dir computed with -N to approximate. Simpler: use the same math with flipped normal sign — film color roughly similar; contributes extra depth. I'll add uniform uPass (0 back, 1 front) and flip normal when uPass==0. Both additive → nice double-layer. Also scale back pass intensity 0.6.

Wobble displacement in vertex shader:

Normal recompute: skip exact; perturb slightly — with additive soft shading it's fine to use original normal for lighting (wobble subtle).

Per-instance attributes:

• iOffset (vec3) — center position
• iRadius (float)
• iSeed (float)
• iAge (float 0..1 normalized)
• iJiggle (float 0..1 extra wobble, decays)
• iThick (float base thickness nm, e.g., 380-620) Update every frame: offset, age, jiggle, radius (grow-in animation on spawn: scale radius with ease-out elastic-ish).

CPU physics details:

• Arrays of bubble objects: {pos, vel, r, seed, age, maxAge, jiggle, thick, giant}
• Spawn: from wand ring position (animates: dips into pool, lifts, blows — simple cycle), or from pointer.
• Forces: buoyancy: acc.y += lift * (0.55 + r factor) ... let's define: target rise speed vt = lift * sqrt(r/0.35); vel.y approaches vt via drag. Simpler: vel.y += (vt - vel.y) * min(1, dt*1.5).
• Wind field: flow(p,t) = vec3( sin(p.y0.7+t0.8), 0.3sin(p.x0.5 - t0.6)+..., cos(p.x0.6+t*0.7) ) * breeze; plus rotating fan component when fan on: swirl around Y axis at machine.
• Pointer gust: if pointer moved recently: for bubbles within 2.5 of pointer 3D point: vel += gustVec * falloff.
• Bubble-bubble interactions (O(n²), n≤96 → 9k checks fine): if dist < r1+r2: push apart softly; if dist < 0.82*(r1+r2) → merge into larger (keep bigger's pos lerped by volume), jiggle=1, chime sound, sparkle particles. Don't merge giants beyond maxR.
• Bounds: horizontal cylinder radius R=6.5 soft push; ceiling y>9 pop? Let them pop naturally; if y > 10 → pop quietly (drift out). Floor y < r → pop with splat (droplets horizontal) + ripples? just pop.
• Pop conditions: age>maxAge; floor hit; popped by "Pop all"; random micro chance scaled by age (film instability). Also pointer "poke pop": if pointer click near bubble (raycast distance < r*1.05) → pop it with extra flair. Nice interactivity: poke to pop!
• On merge: radius = cbrt(r1³+r2³), cap 1.6; maxAge extended; jiggle.
• Giant spawn: 4% chance r *= 2.2, slower rise, longer life.

Droplet particle system (GPU animated):

• capacity 4096. Attributes: aBirth (time), aLife, aPos0 (vec3), aVel (vec3), aSize, aHue. Cursor index; on pop, write k particles starting at cursor (wrap), set needsUpdate with updateRange (or just update whole buffer ranges via addUpdateRange in r160: attribute.addUpdateRange? In r160, BufferAttribute.updateRange exists (single). Use .updateRanges? r160 has updateRange property {offset,count}; multiple addUpdateRange was added ~r159? To be safe, just set needsUpdate=true and update whole buffer — 4096*3 floats, trivial.)
• Vertex shader: t = (uTime - aBirth)/aLife; if t<0||t>1 → gl_Position degenerate (behind camera / size 0). pos = aPos0 + aVeltt + 0.5g*tt². gl_PointSize = aSize * (1-t) * (300/dist). Fragment: soft circle sprite, color = mix of iridescent palette by hue + white core; additive.
• Ring particle: separate small system or same with flag — simpler: same system but velocity radial in plane + size grows: encode type in aHue sign? I'll add aType attr: 0 droplet (gravity, shrink), 1 ring (no gravity, grow, faster fade). Ring texture drawn procedurally in fragment via distance from center: ring = smoothband(abs(len-0.7)).

Wand machine visuals:

• A "pool" — short cylinder (r=1.1, h=0.25) with glowing soap surface (custom mini shader disc with swirls, additive-ish or MeshStandard with emissive + the film shader? Simpler: MeshPhysicalMaterial with iridescence! three r160 MeshPhysicalMaterial supports iridescence — nice for pool surface AND could even be used... but bubbles need custom. For pool: MeshPhysicalMaterial({iridescence:1, iridescenceIOR:1.3, roughness:0.05, metalness:0, transmission:0.6, color:0x111122}) — looks soapy under environment.
• Brass ring torus + stand: MeshStandardMaterial metalness 1 roughness 0.25 gold color; with RoomEnvironment envmap looks classy.
• Animation cycle: ring dips into pool (y down), rises, pauses, "blows" (spawn 1-4 bubbles from ring center with tiny initial velocity), rises more, returns. Continuous loop ~ every 2.4s/rate. Bubbles actually spawn from ring center while it hovers.

Also faint god-rays? skip.

Backdrop sphere shader: big sphere (r=60) BackSide gradient: bottom #070810 → horizon #101528 with subtle violet band → top #04050a; plus a few dim stars? Add subtle noise stars — cute. Cheap: hash-based star sparkle in fragment. Yes, tiny stars at low intensity + a big soft nebula gradient.

Floor: Reflector at y=0, with a dark plane at y=0.001 (opacity 0.72, color #05060a, roughness look) to dim/smudge reflection. Reflector textureWidth 1024 or 512. Plus radial "light pool" ring glow under machine (additive disc shader) for grounding.

Bloom: threshold ~0.55, strength 0.75, radius 0.6.

Final pass shader: vignette + film grain + subtle chromatic offset at edges? Keep vignette+grain.

Tone mapping: ACESFilmic via renderer.toneMapping; OutputPass handles.

FPS adaptive: if avg frame > 26ms for 3s → reduce pixelRatio to 1, then disable bloom. Add "auto" quality. Keep simple: quality button cycles High/Medium/Low.

Now, audio:

• ctx, master gain (0.5), compressor.
• pop(freq): noise buffer burst 60-90ms through bandpass(freq, Q=8) + gain env exp decay; plus tiny sine 'plink' dropping freq.
• merge: two quick sine blips rising (fifth apart).
• spawn blow: soft filtered noise 'whoosh' 0.3s, very quiet — maybe skip, or tie to machine blow with lowpass noise swell.
• ambient: looping noise buffer (2s) → lowpass 400Hz → gain 0.03 with slow LFO 0.05-0.1Hz on filter freq; plus subtle detuned pad (two sines 110Hz & 165Hz through gain 0.015)? Keep it airy: just breeze noise + occasional dreamy chime when giant pops (pentatonic pluck).
• Audio starts on first user gesture; button toggles.

UI layout: follow zoetrope style: #pt title top-left, #pc buttons top-right, #pl sliders left, #ps stats bottom-left, #ph help bottom-right, #toast. Colors: pick palette: cyan #7df9ff? Bubble theme: iridescent — primary cyan (#7ee8fa), accent magenta (#f0a6ff), gold (#ffd27d). Dark bg #05070d.

Buttons: Machine (on), Audio, Poke mode? (poke is default on click... conflict with orbit drag). Hmm: OrbitControls uses drag to rotate; click without drag = poke. Implement pointerdown/up with movement threshold: if moved <6px and <350ms → poke ray at bubbles (pop nearest within threshold) else it's a rotate. Blowing: hold and drag? That conflicts with orbit. Solution: mode toggle button "BLOW / ORBIT": in Blow mode, dragging paints bubbles & gusts and orbit is disabled (controls.enabled=false). Default ORBIT? Default BLOW is more fun first impression... but orbit is expected. I'll default to ORBIT, with a prominent toggle. Also keyboard: hold B to temporarily blow. In Blow mode cursor becomes crosshair.

Sliders: RATE (machine bubbles/min 0..60), BREEZE (0..2), LIFT (0.3..2), SIZE (0.5..2 multiplier), SWIRL? (shader marbling intensity 0..2) — fun to see film patterns change. 5 sliders ok.

Stats: bubbles, popped, merged, biggest r, fps.

Buttons: BLOW/ORBIT mode, MACHINE on/off, FAN? (fold into breeze), POP ALL, AUDIO, QUALITY, RESET CAM.

Title: "SPUME" — subtitle: "iridescent bubble physics · thin-film interference". Demo card title: "Spume — Iridescent Bubble Atelier"? Description for index.

File naming: /space/demos/060-spume/index.html.

Let me now write the code. This will be long (~1200 lines). I'll write it in one go with a heredoc via read_write_file tool (write mode). Careful with shader code and template literals. Let me draft mentally key shader chunks.

Bubble vertex shader:

Wait — instanced: using InstancedBufferGeometry + Mesh? For instanced attributes with ShaderMaterial, use **************************try with THREE.Mesh — works: geometry.instanceCount set. modelMatrix = mesh matrix (identity). OK.

Hmm — but radius growth animation: iRadius updated on CPU each frame with easing. Fine.

Bubble fragment shader:

Blending: AdditiveBlending, transparent true, depthWrite false. Two meshes: back (side BackSide, uPass=0) rendered first (renderOrder 1), front (renderOrder 2).

One catch: with InstancedBufferGeometry shared by two materials — fine, two meshes sharing geometry instance.

Drainage orientation: vLn.y in local space — bubble doesn't rotate so world==local up. Good.

Pop particle shaders:

Blending additive, depthWrite false, transparent.

Pool disc & machine: standard materials + RoomEnvironment.

Reflector floor: Reflector with color 0x0a0c14... Reflector's shader shows mirror color; overlay plane dims. Note Reflector renders scene each frame (extra pass) — with 96 instanced spheres x2 passes + particles it's ok.

Hmm, Reflector + additive instanced bubbles in reflection: fine.

Order of drawing: floor reflector (renders scene into texture during its onBeforeRender — automatic).

Now CPU details for spawning from pointer in Blow mode: cast ray from camera through pointer; find point where ray crosses "blow plane" — use plane at y = 1.2 horizontal? Better: distance fixed: point = ray.origin + ray.dir * dist where dist = distance to a sphere around machine center? Simplest: intersect with horizontal plane y=0.15 (floor); clamp within radius 5.5; spawn slightly above floor, they float up. If ray misses (pointing up), project onto plane facing camera at dist 6, clamp y in [0.3, 6]. Combine: try floor plane; if t invalid or too far, use camera-facing plane at 6. OK.

Poke: raycast: compute distance from ray to each bubble center; if minDist < r*1.1 and along ray positive → pop the nearest such.

Audio poke pop: higher pitch for smaller bubbles: freq = 1800/r-ish clamped 300..3000.

Machine cycle implementation: state machine: phase t cycles 0..1 over period T = 60/rate seconds clamped min 1.2s? Actually rate slider = blows per minute 0..40. If rate==0 machine off. Cycle:

• t in [0,.25): ring dips to pool (y from 0.55→0.28, ease)
• [.25,.45): lifts to 0.9
• [.45,.8): blow phase: emit bubbles (1 + floor(rand*2) + sizeSlider influences radius) spread across remaining phase, slight upward initial vel; ring stays
• [.8,1): return down to 0.55 hover. Simplify: just bob with sin and emit at phase crossing. Fine.

Also idle ambient micro-bubbles from pool occasionally (tiny).

Giant logic: random 5% if size slider>1.2 → r*=2.0, longer life, special pop (more particles + chime arpeggio).

Counts: MAX_BUBBLES = 110 (desktop) — plus quality scaling: Low → 60 & no bloom & reflector 512, pixelRatio 1. Medium: 80, bloom, pixelRatio min(dpr,1.5). High: 110, pixelRatio min(dpr,2).

Auto quality: start High; monitor EMA frame time; if >24ms for ~120 frames → step down; toast notify.

Resize handler. prefers-reduced-motion? skip.

#nogl fallback with try/catch around renderer creation.

Meta description & title. Also add "back to gallery" link chip (check zoetrope body for the pattern — likely has one). Let me check body HTML of zoetrope for back-link markup to keep consistent.

Let me view the rest of the zoetrope head/body quickly (lines 60-140) to copy UI patterns (back link, buttons, sliders markup, toast, nogl, stats rows).

I have all the conventions. Now let me write demo 060 "Spume". I'll write the full file. This is going to be long — I'll write it carefully in one go.

Let me structure the JS:

Details to get right:

1. InstancedBufferGeometry from sphere:

Add instanced attrs: iOffset (3), iRadius, iSeed, iAge, iJiggle, iThick (1 each). All DynamicDrawUsage.

2. Materials: ShaderMaterial with uniforms {uTime, uPass, uSwirl, uNoise}; side: FrontSide/BackSide; transparent: true; blending: AdditiveBlending; depthWrite: false. Also depthTest: true.

3. Since the sphere geometry is unit radius 1 and we scale in shader by iRadius — positions = normal * radius; normals stay unit. Good.

4. WL to RGB approximation function (Dan Bruton style):

Sample 6 wavelengths 400→650 step 50.

Hmm, at d small (~100nm), phase ≈ π + small → intensity ≈ 0 for all → black (silvery/transparent — correct! thin films go black before popping). At d=0 exactly black. Nice: dying bubbles darken — physical.

Film thickness mapping: base 350..600nm; drain factor top 0.4 bottom 1.5; so top ~140-240nm → colors at top: 21.33200 = 532 OPD → green-ish region etc. Good range.

5. Noise texture: generate 256x256, two channels of smooth fbm value noise. CPU:

Tileable via modular lattice sampling.

6. Backdrop: SphereGeometry(70, 32, 16) BackSide ShaderMaterial: gradient + stars via hash on direction (cell-based):

Keep dim (bloom threshold above). fog none.

Also add scene.fog? With dark scene maybe FogExp2 0.012 — bubbles far dim... additive + fog doesn't mix well (fog on ShaderMaterial needs manual). Skip fog.

7. Machine:

• Pool: CylinderGeometry(1.15,1.3,0.22,48) at y=0.11 — body MeshStandardMaterial color #1a2030 metalness .9 roughness .35; Surface: CircleGeometry(1.08) at y=0.225 MeshPhysicalMaterial({color:0x0a1420, roughness:0.08, metalness:0, transmission:0.5, thickness:0.4, iridescence:0.9, iridescenceIOR:1.32, iridescenceThicknessRange:[120,520], clearcoat:1}). Need envMap (scene.environment) — with RoomEnvironment it'll shine.
• Ring: TorusGeometry(0.55, 0.045, 16, 64) gold (color 0xd8b25c? brass #c9a227, metalness 1, roughness 0.22), held by rod: CylinderGeometry(0.03) from below into pool. Ring orientation: vertical? Real bubble wands: ring vertical, film spans it, blow horizontally; or ring horizontal dipped & lifted, bubbles blown upward from below. I'll do: ring horizontal (flat), dips into pool, lifts up to y~1.0, then air pulse from below launches bubbles upward — matches spawn direction (upward).
• Ring group position animated; a thin "film disc" inside ring appears when lifted: CircleGeometry(0.55) with the pool physical material (double side) visible only during lift phase, scaled alpha... use visible toggle + opacity. Simpler: visible during lift/blow with opacity 0.85; pops away at blow start (bubbles spawn). Cute detail.
• Base stand: small brass cylinder column + foot.

8. Reflector:

Reflector color multiplies texture; choose 0x565f74 to dim. Then overlay: CircleGeometry(14) MeshBasicMaterial({color:0x04050a, transparent:true, opacity:0.62, depthWrite:false}) at y=0.002? Wait overlay above mirror dims by blending. Also overlay should not z-fight: y=0.004, polygonOffset maybe. Plus center glow disc: additive radial gradient circle radius 7 opacity ~0.16 under machine at y=0.006. And a contact "soap ring" around pool: torus thin emissive.

Hmm — Reflector + overlay + additive bubbles: bubbles drawn over; fine.

Edge: Reflector textureWidth fixed 1024 (quality Low → 512, set at build; on quality change rebuild? Just pick 1024 always; Low quality reduces pixelRatio & bloom only).

9. Physics & spawn:

Rise: vt = lift * (0.35 + 0.9*Math.sqrt(r)) — bigger rise faster (real: bigger rise faster). vel.y += (vt - vel.y)min(1,dt2.2). Horizontal drift: flow field + breeze dir slowly rotating; v.x/z approach flow via similar relaxation, plus gust impulses.

Flow field:

Fan swirl? skip fan.

Gusts from pointer motion in blow mode (or always?): pointer move → gust vector at pointer 3D pos with strength ∝ pointer speed; affect bubbles within 3.0 radius: v += gustDir * falloff(dist) * dt * k. Always-on gusts makes it playful in any mode. Yes: pointer gusts always active (move mouse to stir), bubbles spawn only in blow mode.

Pairwise: for i<j both alive: d2; min = ri+rj; if dist < min:

• if dist < min*0.86 → merge (unless both giant & r>1.4) — merge into bigger: bigger absorbs: r=cbrt(r1^3+r2^3), p weighted by volume, v weighted; jiggle=1; maxAge = max + 3; sparkle at midpoint; chime.
• else soft repulsion: push along normal by (min-dist)kdt on velocities. Cap n²: fine.

Floor pop: p.y - r < 0.02 → pop (splat: droplets upward cone + flat ring). Ceiling y>11 → pop silently (few particles). age>maxAge → pop. Also random: if age>maxAge*0.7, small prob per sec * (age/maxAge)^4 * dt... maxAge covers.

Pop FX:

• droplets n = 18 + r*26 (giant 1.8), speeds 0.8+r1.5 random sphere biased up (splat: biased outward horizontal), life 0.5-1.1s, size 2-5px *r^0.4, colors: iridescent palette sample by random hue → use hsl→rgb on CPU into aCol (mix toward white).
• ring: 1 (giant 2 staggered), size start = r90px? ring particle positioned at bubble center; grows (t6 factor) — world growth should scale with r: aSize = 30r... The ring expand factor 6 in shader; tune: final world radius ≈ r2.4 → since point size is in pixels scaled by 180/z, approximate. It'll look fine with aSize=26r, grow 1+t7.
• sound pop(r, giant).

10. Poke: on pointerup (click without drag, any mode): raycast bubbles; pop nearest hit within r*1.15. In blow mode clicking also spawns — conflict: in blow mode, drag paints bubbles; quick click = poke pop if hit bubble else spawn one. OK.

11. Spawn painting in blow mode: while pointer held & moving: every 70ms spawn at pointer 3D point with small random offset, r by size slider * (0.16+rand*0.2). Also pointer gusts push them around.

12. Attribute upload per frame: for k in 0..MAXB-1: from bubbles array (compacted each frame? simpler: bubbles fixed slots array length MAXB with alive flag; write attrs for alive, else radius 0). instanceCount = MAXB always; dead = radius 0 → degenerate point (all verts at center → still rasterizes a dot? normal*0 = origin offset → zero-area triangles, no fragments. fine.)

13. Bloom & final pass. Vignette+grain shader pass:

14. FPS meter + auto quality: frameEMA; check each 2s: if ema>24 and level>0 → level--, apply: [High: pr=min(dpr,2), bloom on; Med: pr=min(dpr,1.5), bloom on strength*0.8; Low: pr=1, bloom off]. Manual quality button cycles, disables auto? Keep auto anyway with toast.

15. Stats DOM update every 250ms: bubbles alive, popped total, merged total, biggest, fps.

16. Help panel text: explain thin-film interference.

17. Toast function.

18. Keyboard: [B] toggle blow mode (or hold), [M] machine, [space] pop all, [S] sound, [Q] quality, [R] reset cam.

19. Camera: fov 42, pos (5.4, 3.4, 7.6), target (0,2.2,0). controls: damping, minDistance 2.5, maxDistance 26, maxPolarAngle 1.52 (don't go under floor), autoRotate 0.35 speed when idle? autoRotate on, pauses on interaction (controls 'start' event → disable for 8s). Zoetrope had slow auto-orbit — do same pattern: controls.autoRotate = true; on user interaction set idleTimer; resume after 10s.

20. Audio module:

Noise burst for pop: create small buffer each pop (0.12s) or reuse one 1s noise buffer with playbackRate variation — reuse: source.buffer = noiseBuf; bandpass freq 700+rand*1800 (scaled by 1/r); gain env: 0.25 → exp decay 0.09s. Plus sine osc freq from 900/r^0.33 dropping 0.55 in 0.08s, gain 0.12 decay. Limit: max 6 pops per 100ms (counter) to avoid clipping chaos on Pop All → Pop All staggers pops over ~1.2s anyway (nice cascade!). Implement popAll: sort bubbles by height descending, schedule popTime = now + i0.02. Physics loop pops when time>=popTime.

21. Prevent context menu on long-press? touch: pointer events unified; touch drag = orbit or blow per mode. Fine.

22. Reduced motion / visibility: skip.

23. Also nice: while in blow mode show a faint "wand ring" cursor at pointer 3D point: small additive ring sprite following pointer. Adds polish — implement with a small sprite/mesh (ring texture via canvas radial) — cheap. Do it: THREE.Sprite with canvas ring texture, scale 0.5, visible in blow mode.

Now sizes: bubbles radius 0.2..1.5 world units; scene scale: pool at origin r~1.2, room radius 14, ceiling 12. Camera (5.4,3.4,7.6) target (0,2.2,0). Good.

Let me also handle DPR in particle point size: uPix = renderer.getPixelRatio().

Reflector: careful — reflector shader samples its own texture with projective coords; bubbles additive in reflection render — reflector renders scene with its own clip plane oblique projection — works automatically since it's just another render with modified camera; instanced shader materials render fine.

One more consideration: two bubble passes + reflector = bubbles rendered 4x per frame (2 main + 2 reflection). 96 instances * 48x32 sphere (≈3000 tris) → 9630004 ≈ 1.15M tris. Hmm heavy-ish but GPU fine on desktop; Low quality could halve instance count — make MAXB dependent on quality level: build with 128 slots but set geo.instanceCount = cap(level) e.g. High 120 / Med 90 / Low 60 — physics also respects cap (spawn fails when full). Also sphere segments: keep 40x28 (≈2100 tris). OK.

Also Option: exclude bubbles from reflector to halve cost? Reflections of bubbles on floor = big wow. Keep.

Alright — also the machine ring "film disc": when blow phase begins, hide disc and spawn bubbles at ring pos with slight upward vel + small random horizontal. Ring then descends back into pool and cycle repeats.

Machine cycle timing: rate slider = blows per minute (0-40, default 14). T = 60/rate (min 1.2s). Phase machine with continuous t += dt/T; phases:

• 0.00–0.30: dip: ring y: hover 1.15 → 0.24 (ease inout), film hidden
• 0.30–0.50: lift: y 0.24 → 1.15, film visible (appears at 0.30),
• 0.50–0.85: blow: at 0.50 spawn bubbles (n), film hidden with tiny 'poof' sparkle at 0.5? film detaches: hide at 0.52; ring y wobble small at 1.15..1.3
• 0.85–1.00: settle back hover 1.15 Just implement with piecewise smooth functions; simpler: compute y via keyframe lerp helper key(t, [[0,1.15],[0.3,0.24],[0.5,1.15],[1,1.15]]) with smoothstep between keys.

Film disc: child of ring group; visible when phase in [0.32, 0.52]; scale from 0.2→1 during 0.32-0.42.

Ambient tiny bubbles from pool: every ~2.5s spawn 1 micro bubble r 0.06-0.12 from pool surface (independent of machine). Adds life. They pop fast.

Pointer 3D point: pointerWorld(): raycaster from camera; intersect plane y=0.12 if dir.y<0 and t in (0,30) → clamp radius 6; else point at t=6 along ray clamped. Gust uses that point; spawn uses point + y 0.25.

Sprite cursor in blow mode at that point.

Stats & counters: popped, merged, born counts.

Edge: THREE r160 CircleGeometry fine; RoomEnvironment import path 'three/addons/environments/RoomEnvironment.js'. PMREM:

r160 RoomEnvironment constructor optionally takes renderer — actually new RoomEnvironment() no args (it took renderer arg in some versions for... no, it doesn't need). Use no-arg; fromScene(env, 0.04).

Tone mapping: renderer.toneMapping = THREE.ACESFilmicToneMapping; exposure 1.05; outputColorSpace default sRGB in r160. Composer with OutputPass at end handles tonemap+srgb.

Note: with EffectComposer, renderer.toneMapping applies via OutputPass. Materials' toneMapped property respected. ShaderMaterial output isn't tone-mapped automatically (tonemapping is applied in OutputPass to whole buffer — good).

Additive ShaderMaterial with tone mapping: OutputPass tonemaps final HDR buffer — set renderer buffers HalfFloat for bloom quality: EffectComposer default uses HalfFloatType in r160? RenderPass target — EffectComposer creates WebGLRenderTarget with HalfFloatType by default since r152ish? Yes, r152+ default HalfFloat. OK.

Now write the whole file. Also meta description, title "Spume — Iridescent Bubble Physics".

CSS palette: --cy:#7ee8fa (cyan), --mg:#f0a6ff, --gd:#ffd27d, --ink:#e8ecf4, --dim:#8b93a7. Panel background rgba(6,10,14,.62), border rgba(126,232,250,.16). Title "SPUME" letter-spacing .5em, glow cyan.

Buttons (#pc): bMode (Blow/Orbit), bMachine (Machine on), bPopAll (Pop All), bSound, bQuality (Auto/High/Med/Low?), bCam (Reset Cam). Keep Quality as cycle button showing level.

Sliders (#pl): RATE blows/min 0-40 default 14; BUBBLE SIZE 0.5-2 default 1; BREEZE 0-2.5 default 1; LIFT 0.3-2.2 default 1; FILM SWIRL 0-2 default 1.

Stats (#ps): IN FLIGHT, POPPED, MERGED, LARGEST, WAND, RENDER fps + quality badge.

Help (#ph): explanation of thin film + keys.

Toast + nogl.

Now, let me write out the entire HTML file. I'll be careful about:

• GLSL strings inside template literals — backticks fine.
• No unescaped </script> inside JS strings.
• Pointer events on canvas: renderer.domElement listeners pointerdown/move/up; also touch-action none (CSS #app canvas).

For OrbitControls vs blow painting conflict: when blowMode, controls.enabled=false.

Poke detection threshold: track downPos, downTime; on up: if dist<7px && dt<400ms → poke.

Gust: track pointer move delta → world-space approx: gust vector = (dx, -dy) mapped: compute two world points (prev pointer world, current pointer world) → gust = (cur - prev)/dt * strength, applied to bubbles near cur point. Store lastGust = {p, v, t}.

Simplify: gust field maintained as list of recent impulses: on pointermove, if speed sufficient, add impulse {p: curWorld, v: deltaWorld*8 (clamped len 6), t: now}. In physics: for impulses younger than 0.25s: for each bubble within 2.8 of p: b.v += v * falloff * (1 - age/0.25) * dt. Clear old.

Pop scheduling for Pop All: b.popAt = elapsed + i*0.025 for sorted alive; physics: if(popAt && t>=popAt) pop.

Merging sound throttle: lastChime time > 90ms.

Auto quality: ema dt; every frame: if(elapsed>4 && ema>0.026 && qLevel>0 && now-lastDrop>2.5){qLevel--; applyQuality(); toast} Manual button sets qLevel and qAuto=false? Keep auto enabled but manual sets floor? Simplest: quality button cycles [AUTO, HIGH, MED, LOW]; AUTO starts high & adapts; manual fixes level. Implement: modes array; qMode index; effective level = qMode==0? autoLevel : qMode-1.

Initial camera & controls save for reset.

Render loop with clock; cap dt 0.05.

Write stats every 0.25s.

Edge: when tab hidden, dt clamp handles.

Particle pool: 3600; each pop writes 20-60 → wrap fine.

Let me also give slight rotation to bubble texture coords over time for swirl advection (in shader via uTime offsets — already).

I think I'm ready to write the file. Length estimate ~950 lines. Let me write it.

Also remember: update /space/demos/index.html adding card 060 at top of list (after the "New demos are added here" comment line).

Card text: num: Demo 060 h2: Spume — Iridescent Bubble Atelier p: "A soap-bubble physics playground shaded by real thin-film interference — every rainbow swirl is computed from film thickness, drainage and refraction angle. A brass wand machine blows a steady stream; bubbles wobble, merge into giants, thin to black and burst into GPU droplet cascades. Stir gusts with your pointer, paint bubbles in Blow mode, poke to pop, over a mirror floor with bloom, procedural studio reflections and generative audio pops."

Now write the demo file. I'll write it with the write tool in one call. Be meticulous with the shader code.

One more check on Reflector import and usage in r160: import { Reflector } from 'three/addons/objects/Reflector.js'. Constructor(geometry, {clipBias, textureWidth, textureHeight, color, multisample}). ok.

RoomEnvironment: new RoomEnvironment() — in r160, yes no required args (renderer param was removed/optional... Actually in r160 signature: class RoomEnvironment extends Scene { constructor() }? Let me recall: earlier versions had constructor(); the demo webgl_materials_envmaps_exr... The standard usage in r160 examples: const environment = new RoomEnvironment( renderer );? Hmm. In three r160, RoomEnvironment.js — checking memory: r150+ constructor takes no arguments. Wait, actually there was a change: RoomEnvironment( renderer ) was never required... In r162 migration: "RoomEnvironment no longer requires renderer argument"? I recall in r162: new RoomEnvironment() then pmremGenerator.fromScene( environment, 0.04 ). Earlier r140: also no args. I'll just call new RoomEnvironment() — safe for r160. Even if it accepted an optional renderer, no-arg works.

pmremGenerator.compileCubemapShader? not needed. Use:

Also renderer.useLegacyLights? In r160 default is false (physical lights) — light intensities: hemisphere 0.6, dir 1.2, fine.

Shadows: do I want shadows? Machine onto floor: dir light castShadow with small shadow map — nice subtle. But reflector + shadows fine. Add PCFSoft, only machine casts, floor reflector doesn't receive (it's a custom shader) — shadows wouldn't show on mirror anyway. Skip shadows entirely (overlay plane can't receive either without extra work). Skip — keeps perf.

Let me write now. I'll also include a subtle rotating "halo" spotlight cone above machine? skip.

Extra visual polish: faint dust motes drifting (tiny additive points, 300, slow) for atmosphere. Cheap, adds depth. Include: static Points with positions random in cylinder r 8 h 9, shader: drift by sin(time*speed+phase), size 1-2px, alpha low. I'll fold into one Points with basic PointsMaterial? Need soft round sprite → canvas texture, PointsMaterial({size:0.03, map, transparent, opacity:0.35, blending:Additive, depthWrite:false, sizeAttenuation:true}) and animate positions on CPU? 300 points CPU update trivial: y slow rise wrap, x/z sin drift. OK do CPU update.

Font: monospace as per style.

Also handle contextmenu prevent on canvas.

Accessibility labels minimal.

Now writing the file. I'll aim for clean, commented code.

Also: const isCoarse = matchMedia('(pointer: coarse)').matches; → default quality auto starts at Med for mobile. Fine: autoLevel starts 1 on coarse.

Let me now carefully compose the shaders.

Backdrop fragment with stars:

OK.

Bubble fragment env(): as drafted. Note: additive double pass with env bars pow 90 — highlights will bloom nicely.

Careful: varying usage; WebGL2 via three uses GLSL3? three ShaderMaterial defaults to GLSL1 (auto-converted). texture2D works. Fine.

filmColor loop for(int i=0;i<6;i++) — fine.

One subtlety: in fragment shader, vLn is local normal of unit sphere — but instanced positions computed in shader; normal attribute is per-vertex of sphere — fine.

Wobble: also grow-in "birth pop": scale radius from 0: CPU animates r from 0.3*target → target with easeOutBack over 0.5s — store bornT and target r; effective r computed CPU each frame; attribute iRadius updated. Good — vertex shader just uses iRadius.

Merge jiggle: iJiggle decay: b.jiggle = exp(-3dt).

Now the CPU update per frame writes: iOffset[i3..], iRadius, iSeed, iAge, iJiggle, iThick for MAXB slots; needsUpdate on each. Arrays preallocated Float32Array(MAXB*3) etc.

Physics relaxation approach:

Merges as described. Spawn initial velocity: (rand-0.5)0.3, 0.5+rand0.4, (rand-0.5)*0.3.

Ring blow position: ringGroup.position (x maybe 0, z 0) + y ~1.15.

Pop function: write particles, sound, counters, mark dead, hide slot.

Droplet writer:

attributes needsUpdate (whole buffer ok).

Ring particle: aType=1, aVel=0, life 0.5, size = 34*r (tuned), color white-ish film tint.

Colors: filmTint from hsl: hue random, sat 0.8, light 0.72 → to white mix 0.35. Precompute helper hsl2rgb.

Audio pop freq scale: base = 900/Math.pow(r,0.5) clamp 240..2600.

Now the pointer world point function:

Blow painting: on pointerdown in blow mode: blowing=true; lastSpawn=0; spawn at point immediately? Small delay for click-vs-drag: spawn only after movement>6px or hold>250ms; else on pointerup treat as click → poke/spawn single. Implement: on down record; on move if blowing && (moved enough) → painting=true; spawn throttle 80ms. On up: if(!painting && quick) → pokeAt(point) (pop if hit; else spawn 3 small at point as a "poof"). Reset.

Orbit mode click (no drag): poke only.

Gust impulses also in orbit mode (pointer moves without button? yes—hover gusts, delightful). But on touch devices hover doesn't exist; fine.

Keyboard: b toggle mode, m machine, s sound, space pop all (preventDefault), q quality, r camera.

Resize: camera aspect, renderer + composer setSize, bloom resolution auto-handled via setSize; uPix update; backdrop fine.

Auto-quality: measure with performance.now around render? Use dt ema: ema = ema0.95 + dt0.05; every 2s check ema>0.027 → drop. Also skip first 4s (shader warmup).

Toast util with timeout.

I think the design is complete. Writing now.

The film disc inside ring: use MeshPhysicalMaterial with iridescence & transmission — transparent; to avoid sorting issues set depthWrite false. visible toggling per phase. CircleGeometry(0.52, 48) rotated -PI/2 horizontal as child of ring group (ring horizontal). Ring torus rotated X 90° to be horizontal: TorusGeometry lies in XY plane by default → rotate x by PI/2 to make it horizontal (XZ). Ring group holds torus + film disc + rod? Rod from pool bottom up through center? Real wand dips; rod would intersect bubbles visually. Instead make ring "float" with a small counterweight stem going down into pool at edge? Simplest visually clean: a slim curved arm from pool edge up over center holding ring (like a faucet). Build: arm = torus arc (TorusGeometry(0.8, 0.035, 12, 32, PI*0.55)) positioned at pool rim, rotated to arc over center. Static. Ring group hangs from arm tip? Ring animation moves ring though — ring would detach from arm. Alternative: ring attached to vertical piston rod from above? Simplest believable: ring mounted on a vertical rod that goes down into pool center; rod+ring move together (rod telescopes into pool). Visually: thin cylinder (r 0.025) from y 0.1 up to ring at y (animated), length adjusts — use a unit cylinder scaled. Do: rod = Mesh(CylinderGeometry(0.028,0.028,1,12)); each frame: rod.scale.y = ringY-0.05; rod.position.y = (ringY+0.05)/2... let ring sit atop rod: ring y = rodTop. rod base at pool floor 0.05. OK — looks like a mechanical bubble wand rising from the pool.

Film disc: child positioned at ring height (add to scene, position y = ringY each frame, or parent to a ringGroup that also holds torus; rod separate). ringGroup.position.y = ringY.

Pool: add emissive rim ring (TorusGeometry(1.16,0.02) additive basic material cyan, opacity 0.5) at y 0.23 for glow accent.

Dust motes: 260 points.

Glow disc under machine: CircleGeometry(6.5) additive radial gradient texture (canvas), opacity 0.18, y=0.006. And a second tighter warm glow r 2.2 opacity 0.12 gold. These also hide reflector seam. Note reflector is radius 14; glow discs overlay with additive.

Overlay dim plane radius 14 color #04060b opacity 0.66.

Reflector color: 0x9aa4bd (multiplier) — combined with overlay → dim mirror. Tune: Reflector 'color' multiplies the mirrored texture; 0x8b95ad ok.

Camera-facing plane fallback for pointer when looking at horizon — implemented.

Let me now also define applyQuality(level):

• level 0 (Low): pixelRatio 1; bloomPass.enabled=false; instanceCap=64; reflector textureWidth? leave; dust hidden.
• level 1 (Med): pr=min(dpr,1.5); bloom on (strength 0.65); cap 88;
• level 2 (High): pr=min(dpr,2); bloom 0.8; cap 120. composer.setPixelRatio? EffectComposer has setPixelRatio — call both renderer & composer.

geo.instanceCount = cap each apply.

UI quality button label: "Quality: Auto·High" etc. Keep simple: bQuality text QUALITY: ${qMode==0?'AUTO('+name(autoLevel)+')':name}.

OK writing the file now for real. I'll write to /space/demos/060-spume/index.html.

Also meta description for SEO-ish, matching style of others.

Let me write the JS with clear sections. I'll be careful that every function referenced exists. Let me draft the whole thing textually in my head... it's long; I'll just write it directly into the file, being careful.

Also remember: place card into /space/demos/index.html right after <!-- New demos are added here --> line.

Let me write the file now.I have everything I need. I'll create Demo 060: "Spume — Iridescent Bubble Atelier" — a soap-bubble physics playground with a physically-based thin-film interference shader (rainbow swirls computed from film thickness, drainage and refraction angle), bubble merging/popping physics, GPU droplet bursts, a brass wand machine, mirror floor, bloom, pointer gusts/blow-painting/poke-to-pop, and generative audio. Writing the file now:

Now let me validate the JavaScript syntax. I'll extract the module script and run node --check on it. Note the script uses imports of 'three' which node can't resolve, but node --check only parses — imports don't need resolution for syntax check. Let me extract the script content between <script type="module"> and </script> and check.

Also I should review a few potential bugs:

1. In pointerWorld, when called from pointerup handler — I call raycaster.setFromCamera(ndc, camera) again after pointerWorld — pointerWorld already sets ndc and raycaster. Fine.

2. In pokePop, _v reuse: _v.copy(b.p).sub(raycaster.ray.origin) then along = _v.dot(...), then const closest = _v.copy(raycaster.ray.direction)... — reassigning _v fine; closest is a reference to _v. Then closest.distanceTo(b.p). OK.

3. The unlock listener: removeEventListener('pointerdown', unlock) inside — but it only removes when soundOn. Actually logic: if soundOn, resume audio and remove listener. If not soundOn, keep listening. That's intended. But once:false explicit. OK.

4. AudioMan.setOn calls this.init() — good.

5. Issue: In stepPhysics, machine._ph used in stats — defined. OK.

6. filmDisc.material is soapMat.clone() — MeshPhysicalMaterial with transmission — transmission requires transparent pass; fine.

7. Potential z-order: filmDisc transparent with depthWrite false — ok.

8. bubbleGeo.instanceCount = instanceCap — uploadBubbleAttributes writes all MAXB slots; dead ones have radius 0 — but instances beyond instanceCount aren't drawn anyway. When cap decreases, bubbles beyond cap that are alive just vanish visually... Actually slots are in the bubbles array order; alive bubbles with slot index >= instanceCap would not render. Hmm — spawnBubble uses bubbles.find(b=>!b.alive) which takes the first free slot, so alive bubbles cluster at low indices. When cap drops from 120 to 64, if >64 alive, some high-slot bubbles become invisible but still alive; they'll pop soon. Acceptable. Also spawn guard uses aliveCount() >= instanceCap. Fine.

9. **************************try with ShaderMaterial: instanced attributes work with Mesh + InstancedBufferGeometry — yes.

10. precision highp float; in fragment — three prepends its own precision; declaring again may cause duplicate-precision error? In three.js ShaderMaterial, the renderer prepends precision highp float; automatically to fragment shaders. Adding another precision highp float; statement... Actually three prepends a prefix that includes precision; a second precision declaration later in the shader is legal GLSL (precision statements can appear multiple times). It compiles fine. But to be safe, remove the explicit precision lines? Many examples include it without issue. GLSL ES allows multiple precision qualifiers declarations. It's fine — but wait, three's prefix comes first, then my precision highp float; line — legal. OK, keep.

11. varying vec3 vN, vWp, vLn; varying float vSeed, vAge, vThick; in vertex: I declared varying vec3 vN, vWp, vLn; — multi-declarator varyings are fine in GLSL ES 1.0? Yes, comma-separated declarators allowed.

12. In bubbleVert I use mat3(modelMatrix) — with Mesh, modelMatrix exists. InstancedBufferGeometry doesn't auto-provide instanceMatrix unless using InstancedMesh — I don't use it. Good.

13. cameraPosition is a built-in uniform in vertex AND fragment shaders in three.js? In fragment shaders, three provides cameraPosition only in the vertex prefix by default... Let me recall: three.js WebGLProgram prefix for fragment shader includes uniform vec3 cameraPosition;? Checking memory: The fragment prefix in three r160 includes:

Yes! Fragment prefix includes cameraPosition. Good.

14. In pMat vertex shader I use viewMatrix — provided in vertex prefix. projectionMatrix yes. OK.

15. Reflector: it uses its own shader; renders scene. Our bubble meshes are frustumCulled=false so they'll render in reflection. Good.

16. Points pGeo.boundingSphere = new THREE.Sphere(..., 1e5) plus frustumCulled=false — set both, fine.

17. radialGlowTexture uses THREE.CanvasTexture with colorSpace SRGB — fine.

18. Sprite material initially with an empty map then replaced — SpriteMaterial map set after creation; needsUpdate automatically when assigning map? Assigning .map after first render requires material.needsUpdate = true... The sprite hasn't rendered yet (block runs before first frame) — assignment before first render is fine.

19. wandCursor renderOrder 10, depthTest false — draws on top. OK.

20. UnrealBloomPass with bloom.enabled toggle — passes support .enabled. Yes.

21. composer.setPixelRatio exists. Yes.

22. In applyQuality, $('qBadge') — applyQuality is called before UI wiring section? Order: post-processing → quality management (applyQuality defined, but called in main loop section AFTER UI wiring). Wait: applyQuality() is called in "main loop" section which comes after UI wiring. But if(matchMedia...) right after quality section modifies S.autoLevel — fine. However applyQuality references $('qBadge') via document.getElementById — defined at UI section (const $ = ...) which is AFTER quality management section but BEFORE the call. const $ is in temporal dead zone only until its definition executes; applyQuality is called after definition. OK.

23. onResize() called at end of applyQuality — onResize is a function declaration hoisted? function onResize(){...} declared in resize section, after quality section but function declarations hoist within module scope... Module top-level function declarations are hoisted across the whole module, so calling onResize before its textual definition works. Yes.

24. elapsed used in writeParticle (pBirth) — elapsed is declared with let elapsed = 0 in main loop section, but writeParticle/spawnBubble are only called at runtime after elapsed initialized (the opening bubbles spawn happens after let elapsed). Wait — spawnBubble is called in main-loop section after let elapsed = 0 declaration. And stepPhysics calls happen in animate. popAll called from UI events. All after module fully evaluated. But careful: const clock... line — elapsed declared with let at main loop; functions referencing it earlier in text are fine (closure + hoisted let, TDZ only matters if called before init). OK.

25. machine._ph initial undefined → (machine._ph ?? 0). OK.

26. Ring keyframes: if machine off → ringY 0.28. If rate 0 but machineOn → also 0.28 (rate 0 means no blows). Slider min 0. OK.

27. In stats: machine._ph>0.5?'BLOWING':'DIPPING' — _ph may be undefined → 'DIPPING'. fine.

28. Merge guard: (a.targetR**3 + b.targetR**3) < 3.6 → targetR combined < ~1.53 radius. OK.

29. killBubble inside pairwise loop — when merge happens we continue inner loop; but after merging, a may have been absorbed (if b bigger). We check if(!a.alive) continue only at loop start... After mergeBubbles(a,b), small.alive=false — if a was the small one, a.alive false; inner loop continues with j++ using a — next iterations check b.alive (b is inner var) but a might be dead; we'd compute interactions with a dead bubble. Need guard: after merge, if(!a.alive) break inner loop. Let me fix: after merge, if(!a.alive) break; else continue; Actually continue goes to next j; the code inside loop checks if(!b.alive) continue; but not a. Add a check right after merge: if a died → break. Let me patch.

Also killBubble during pairwise (floor/age deaths happen in per-bubble section, not pairwise) — only merge affects pairwise. Fix needed.

30. bubbles.find — fine.

31. Three r160 THREE.DataTexture default type UnsignedByte — data Uint8Array. needsUpdate. LinearFilter no mipmaps by default for DataTexture? Default minFilter is NearestFilter for DataTexture actually; I set mag/min Linear. generateMipmaps default false. Good.

32. soapMat.clone() for filmDisc — fine.

33. The Reflector + dimmer: dimmer has depthWrite false, renderOrder default 0 — reflector also renderOrder 0. Dimmer drawn after reflector (added later) with depth test — both at y≈0; dimmer at y=0.004 slightly above; depthWrite false on dimmer; it will blend over mirror. poolGlow/warmGlow additive above. But bubbles have renderOrder 3-5, transparent — fine, drawn after.

Reflector is not transparent → renders in opaque pass first. Good.

34. bloom threshold 0.62 — bubble colors: env bars * film * F... will exceed. Backdrop stars ~0.4 — mostly below threshold. OK.

35. gradePass ShaderPass constructor: ShaderPass accepts object with uniforms — the standard pattern is ShaderPass({uniforms, vertexShader, fragmentShader}) — yes it clones uniforms; accessing gradePass.uniforms.uTime works.

36. renderer.getContext() check in try — ok.

37. On cvs.addEventListener('pointerdown') — OrbitControls also listens; both fine. In blow mode controls.enabled=false prevents rotate.

38. pointerup listener on window (addEventListener global) — e is PointerEvent with clientX — fine.

39. On touch devices pointermove fires only while touching; hover gusts won't exist — fine.

40. renderer.domElement.getBoundingClientRect() each pointerWorld call — ok.

41. THREE.CircleGeometry used with Reflector — reflector works with any geometry. OK.

42. The qLevel() mapping: qMode 1 → 3-1=2 high; 2→1 med; 3→0 low. cycleQuality increments qMode 0→1 (High) →2 (Med) →3 (Low) →0 (Auto). Label: QNAMES[3-S.qMode] — for qMode=1: QNAMES[2]='HIGH' → 'Quality: High'. Good.

43. Auto drop: S.autoLevel-- then applyQuality — but applyQuality computes lvl from qLevel() which for qMode 0 returns S.autoLevel. Good.

44. In bindSlider for swirl I update both materials. Good.

45. points variable name — shadows nothing. OK.

46. spawnBubble guard aliveCount() >= instanceCap — O(n) each call; spawn calls are rare. fine.

47. Missing: initial filmDisc.visible=false set at creation — yes.

48. rod.position.x = ringGroup.position.x — ringGroup position x/z is 0 anyway. fine.

49. Backdrop material fog:false — ShaderMaterial doesn't have fog unless uniforms merged; passing fog:false is harmless.

50. One more: matBack/matFront uniforms uSwirl initial S.swirl=1. Good.

51. pMat uniform uPix updated in applyQuality. Good.

52. spawnBubble sets b.born = elapsed — at module eval time for the 7 opening bubbles, elapsed=0 — fine.

53. Clock starts on first getDelta — fine.

54. Pop-all scheduling uses elapsed — good.

55. THREE.MathUtils.clamp — imported as clamp. Good.

56. hsl() helper name conflicts with nothing. ok.

57. In burst() I call writeParticle with _v zeroed for ring after using _v in loop — the last droplet's velocity set into _v then writeParticle(p, _v.set(0,0,0), ...) — but writeParticle copies values into attribute arrays synchronously (setXYZ), so reusing _v is fine.

58. writeParticle references elapsed — TDZ safe at runtime.

Now fix issue #29 (pairwise merge loop). Also consider: killBubble called during per-bubble loop mutates bubbles alive flags — safe.

One more potential visual issue: additive blending with gl_FragColor = vec4(col, 1.0) — alpha ignored in additive (src ONE, dst ONE)? THREE.AdditiveBlending: src = SRC_ALPHA? No — three's AdditiveBlending = srcFactor SRC_ALPHA, dst ONE. Actually in three.js: AdditiveBlending → blendSrc SrcAlphaFactor? Let me recall: THREE.AdditiveBlending sets gl.blendFunc(gl.SRC_ALPHA, gl.ONE)? Hmm — in three.js, AdditiveBlending uses SrcAlpha and One. Since alpha=1.0, result = col*1 + dst. Fine either way.

For the Points material same.

Backdrop: alpha 1 opaque. Good.

Now patch the pairwise loop. Current code:

Change to:

Also inside inner loop after continue for dead b etc. Also when b absorbed, b.alive=false — next j checks b of new slot. fine.

Let me also double check filmDisc orientation: CircleGeometry faces +Z; rotated -PI/2 about X → faces +Y (up). Camera sees from above mostly — good; set side default front. From below invisible — acceptable (or DoubleSide better: soapMat side default FrontSide; make filmDisc material DoubleSide: set filmDisc.material.side = THREE.DoubleSide after clone. Let me patch: filmDisc.material.side = THREE.DoubleSide;

Also poolSurface faces up — fine.

Another check — THREE.Sphere import: part of three core. Used for boundingSphere. fine.

machine._blew logic: when ph wraps below 0.5 reset. At ph>=0.52 fires once. Between 0.5 and 0.52 there is a gap where _blew already true? Sequence: ph crosses 0.5 (film hides at 0.54)... filmDisc visible ph in (0.36,0.54). Blow at 0.52 while film still visible — minor overlap; acceptable (bubbles appear to blow off film). fine.

Now also, one subtle thing: const cvs = renderer.domElement; declared after functions using it? It's declared before the addEventListener lines — fine; setBlowMode references cvs at runtime only.

Also $('bMode') etc exist.

Patch time: fix the merge-break and filmDisc side. Then extract JS and node --check it.

Now validate the JS. Extract the module script and run node --check. Note: node --check works with .mjs for module syntax. Let me extract lines between <script type="module"> and the closing </script>.

I'll use awk/sed to extract, write to /tmp/spume.mjs, and run node --check. Also I can do a deeper runtime test with three@0.160.0 in node like the previous run did (mocking browser-only bits is harder here — WebGL renderer can't run headless without a GL context). The previous run validated geometry pipelines in Node. Here, the key risky parts are: the shader code (GLSL) and general JS logic. For GLSL validation, I could use a GLSL validator if available (glslangValidator — probably not installed). Let me at least check JS syntax and run a small Node harness with three to instantiate the geometry/attribute code paths that don't need WebGL: InstancedBufferGeometry creation, DataTexture, noise texture gen, hsl, spawn/merge physics functions (they depend on THREE.Vector3 only). I can simulate: extract the functions? That'd require refactoring. Simpler: write a small Node test that imports three and re-implements the critical math checks? The previous run tested geometry merges. Here there's no merge util. The main risk is shader compile errors, which I can't easily test without GL.

Option: install headless-gl? Heavy. Alternative: careful manual review of shader code.

Let me review the GLSL once more:

bubbleVert:

Note: three's vertex prefix already declares attribute vec3 position; attribute vec3 normal; attribute vec2 uv; plus uniforms modelMatrix, viewMatrix, projectionMatrix etc. My custom attribute declarations are appended — no conflicts (iOffset etc unique). BUT: for WebGL2, three converts attribute→in automatically. Multiple attribute float a, b; comma declarations fine.

One concern: three ShaderMaterial prefixes define attribute vec3 position; etc. only if... yes always for vertex. OK.

bubbleFrag:

• uniform float uTime, uPass, uSwirl; multiple declarators fine.
• #define PI fine.
• functions fine.
• texture2D in GLSL1 fragment fine (three compiles GLSL1 style with WebGL2 via auto-conversion: texture2D → texture). Fine.
• Loop with constant bounds fine.
• wl2rgb uses undeclared vars r,g,b assigned in branches — declared float r,g,b; then all branches assign r,g,b: check branch w<440: r=...; g=0.0; b=1.0; yes all assigned. Then f. fine.
• filmColor uses PI. fine.
• main: all vars declared. vec3 col = env(R) * film * (F*3.2 + 0.10); fine.
• gl_FragColor — fine.

One risk: precision highp float; — three's fragment prefix already includes precision; duplicate is legal GLSL. OK.

pMat vertex: attributes aPos0 etc; uses viewMatrix, projectionMatrix — provided. varyings fine. bool dead fine.

pMat fragment: fine.

Backdrop shaders: fine. hash13 fine.

gradePass fragment: uses hash function name — fine (no conflict).

Vertex for gradePass: uses position, uv, projectionMatrix, modelViewMatrix — provided by three. OK.

Now JS check via node --check. Let me extract.

Also check the Reflector textureWidth 1024 constant. Fine.

One more possible issue: new THREE.InstancedBufferAttribute(new Float32Array(MAXB), 1).setUsage(...) returns the attribute (setUsage returns this). Yes.

bubbleGeo.instanceCount = instanceCap — initial 120 while MAXB=128 attributes — instanceCount ≤ attribute count. Good.

Points material: Points with ShaderMaterial needs position attribute for draw count — pGeo has 'position' (pPos) filled zeros — count = PCAP. Good.

dust PointsMaterial with map & transparent. Good.

SpriteMaterial map replaced — before first render — good.

Extraction & node --check now.

Syntax OK. Now let me do a deeper runtime validation of the non-WebGL logic using Node with three@0.160.0, like the previous run did. I'll write a harness that stubs browser globals minimally and imports three, then tests:

1. The noise texture generator logic (pure JS).
2. Bubble physics: spawn, merge volume conservation, stepPhysics (needs more stubbing).
3. InstancedBufferGeometry attribute setup (works in Node — no GL calls until render).
4. GLSL: can't compile without GL. But I can at least lint braces/parens balance and check for obvious issues.

Actually, importing the extracted spume.mjs in Node would fail at document etc. Instead, I'll write a focused harness replicating critical pure-logic functions by importing them... they're not exported. Alternative: extract function bodies via regex? Messy.

Better approach: a harness that provides jsdom-like stubs. Is jsdom available? Probably not installed. Let me check node version and whether npm install is feasible. The previous run used three@0.160.0 in Node — meaning npm install worked. I'll do the same: create /tmp/spumetest, npm install three@0.160.0, then write a test that:

• stubs: document (createElement canvas with getContext returning minimal 2d context object), window, matchMedia, devicePixelRatio, innerWidth/innerHeight, addEventListener, requestAnimationFrame (no-op), performance, AudioContext absent.
• But the module creates WebGLRenderer — requires real canvas.getContext('webgl2') → our stub returns null → code throws → #nogl path → throw e → fail. So can't run the full module in Node without GL.

So instead test the physics in isolation: copy the physics functions into the harness (they're self-contained with THREE + module-level vars). That's duplication but verifies math. Given previous runs did exactly this kind of targeted validation, acceptable. But honestly the highest risk is GLSL compile. Can I install a GLSL parser? glsl-parser npm? There's @shaderfrog/glsl-parser — a pure-JS GLSL parser! That can catch syntax errors in GLSL ES. Let me try installing three@0.160.0 + @shaderfrog/glsl-parser and:

1. Parse all shaders through the GLSL parser (it won't catch semantic three-specific issues but catches syntax).
2. Run physics harness: spawn/step/merge/pop with THREE imported, by extracting the relevant code region from the file between markers (e.g., from const flow = new THREE.Vector3(); to end of stepPhysics) — I can wrap: build a sandbox module that defines the needed module-level vars (S, bubbles, MAXB, instanceCap, gusts, elapsed, machine stub, ringGroup/rod/filmDisc stubs, AudioMan stub, _v, writeParticle/burst/killBubble real ones, pDirty etc.) — a lot of interdependencies. Simpler: extract from /* ====== bubble physics ====== marker to end of uploadBubbleAttributes function, prepend stubs for the referenced externals (machine, ringGroup, rod, filmDisc, S, pDirty, writeParticle→real? writeParticle uses attribute arrays...).

Simplest robust: stub attribute arrays with {setXYZ(){}, setX(){}, needsUpdate:0} objects; stub AudioMan with no-ops; stub machine/ringGroup/rod/filmDisc with plain objects; stub _v as THREE.Vector3; keep real spawn/merge/kill/step/upload functions; provide S; PCAP vars; pGeo attribute stubs; elapsed=0; instanceCap=120; MAXB=128; bubbles array real. Then run 600 steps of stepPhysics(1/60) with S.machineOn, S.rate=30, spawn from machine; assert: no exceptions, positions finite, merges happen eventually? merges need bubbles to overlap — machine spawns at ring with random offsets — over 10s some merge likely. Also force a merge manually: spawn two overlapping. And pop: set age beyond maxAge. Then assert counters > 0 and all finite.

Also test hsl() ranges 0..1, noise texture data in 0..255.

And the GLSL parse via @shaderfrog/glsl-parser for all 6 shader strings (backdrop v/f, bubble v/f, particle v/f, grade v/f) — extract by regex from file: strings between backticks following vertexShader: etc. Might be easier: regex /vertexShader:\s*([\s\S]*?)/g and /fragmentShader:\s*([\s\S]*?)/g, plus vertexShader:/* glsl */` variants — regex handles since backtick string follows colon with optional comment.

Let me set this up.

Wait — the physics section in the demo references aliveCount(), spawnBubble, killBubble, mergeBubbles, burst, flowAt, addGust, stepPhysics — where do they start? const flow = new THREE.Vector3(); is right before flowAt. The section from const flow to uploadBubbleAttributes includes flowAt, addGust, aliveCount, spawnBubble, killBubble, mergeBubbles, stepPhysics. And burst/writeParticle are defined earlier (particle section) — killBubble calls burst! burst calls writeParticle + AudioMan.pop + S.counts. In my harness I stubbed writeParticle but NOT burst. The eval'd code includes... let me check order in the demo file:

1. Particle system section: pCursor, hsl, writeParticle, pDirty, _v, burst.
2. Dust.
3. Bubble physics: const bubbles = [], const flow, flowAt, gusts, addGust, aliveCount, spawnBubble, killBubble (calls burst, AudioMan.pop), mergeBubbles (calls writeParticle, AudioMan.chime), stepPhysics (calls spawnBubble, killBubble, flowAt, AudioMan.whoosh, filmDisc, ringGroup, rod, machine).
4. uploadBubbleAttributes.

So my extraction from const flow misses burst — killBubble → burst undefined → ReferenceError at first pop. I stubbed writeParticle but burst isn't defined in harness. Options: extend extraction start to include burst (let pCursor = 0; line onward). That includes writeParticle (real) which uses pPos0..pType stubs and elapsed — I have elapsed. pCursor/PCAP — real code has let pCursor = 0; and uses PCAP — PCAP is declared as const PCAP = 3600; in particle section — before pCursor. If I start extraction at let pCursor = 0;, PCAP must be stubbed — I have const PCAP = 3600 in harness. But eval'd let pCursor = 0; — redeclaration conflict with my harness let pCursor = 0;? I declared let pCursor in harness — remove mine, keep PCAP. Also hsl declared in real code (function hsl) — conflict with my harness hsl — remove harness one.

Also spawnBubble/killBubble/mergeBubbles/stepPhysics are in extracted code — I ALSO redefined spawnBubble in harness ("helpers beyond the cut") — wait, spawnBubble IS within the cut (it's after aliveCount, before killBubble; all between flow and uploadBubbleAttributes). Let me verify order in the demo:

const flow...; flowAt; gusts; addGust; aliveCount; spawnBubble; killBubble; mergeBubbles; stepPhysics. Yes — spawnBubble is inside the extraction. So my harness redefinition of spawnBubble via function spawnBubble — function declarations hoist and the eval'd code... eval in module scope: eval(physicsCode) — function declarations inside eval in strict mode (modules are strict) stay scoped to the eval call! In strict mode, eval has its own scope for function declarations and var/let/const — so stepPhysics etc. defined inside eval are NOT visible outside in strict mode. Hmm! That breaks my harness (I call stepPhysics after eval).

Workaround: use indirect eval? No — strict mode scoping still applies since the eval'd code itself... Actually: in strict mode code (module), direct eval creates a new variable environment; declarations don't leak to caller. So stepPhysics won't be accessible after eval.

Fix: append ;globalThis.__test = { stepPhysics, spawnBubble, mergeBubbles, aliveCount, killBubble }; to physicsCode before eval, then use those refs. Or wrap: eval(physicsCode + '\nreturn {stepPhysics, spawnBubble, mergeBubbles, aliveCount, killBubble};') — eval returns completion value. Let me do: const P = eval(physicsCode + '\n({ stepPhysics, spawnBubble, mergeBubbles, aliveCount, killBubble, flowAt });').

But the eval'd functions reference harness-scope vars (S, bubbles, elapsed, _v, machine, ringGroup, rod, filmDisc, AudioMan, pPos0..., PCAP) — direct eval sees the surrounding lexical scope — those must be let/const in harness scope (they are) — works. However elapsed is mutated inside physics? No — elapsed mutated in harness loop; writeParticle reads elapsed — fine via closure.

Also my harness redefined spawnBubble — remove it since real one is extracted.

But careful: extraction start — I'll start at let pCursor = 0; to include pCursor, hsl, writeParticle, pDirty (harness also declares pDirty → conflict: harness let pDirty=false + eval'd let pDirty=false → eval'd code in strict eval scope declares its own pDirty inside eval scope only — shadows outer; assignments to pDirty inside eval'd functions affect the eval-scoped one, not harness one. Harness doesn't use pDirty afterward — fine. Same for pCursor if I remove mine. But variables the eval'd code needs from OUTER scope: THREE, S, elapsed, instanceCap, MAXB, _v, machine, ringGroup, rod, filmDisc, AudioMan, PCAP, pPos0..pType, bubbles, gusts? (gusts is declared inside cut: const gusts = []). bubbles declared before const flow — keep harness's. elapsed — declared harness-side; writeParticle (in eval scope) reads outer elapsed — closure over harness let — good.

Declarations inside the cut that shadow outer: pCursor (remove from harness), hsl (remove), writeParticle (remove — I had a stub; remove), pDirty (keep harness one? If cut declares let pDirty = false it shadows — harness doesn't need it; but I declared pDirty in harness — duplication harmless: outer one unused by eval'd code since shadowed. Actually writeParticle assigns pDirty — resolves to eval-scope one. Fine.)

But _v — declared in particle section via const _v = new THREE.Vector3(); — is it inside the cut? Order in demo: pCursor, hsl, writeParticle, let pDirty = false;, const _v = ..., burst. Yes inside cut if I start at pCursor. But harness also declares _v — outer shadowed, fine (unused).

burst also inside cut. S needed — outer. AudioMan outer stub. elapsed outer. PCAP — PCAP declared in particle section BEFORE pCursor: const PCAP = 3600; then pGeo etc... pCursor comes after points creation. So PCAP stays as harness const. But pGeo, pMat, points — between PCAP and pCursor — not in cut (start at pCursor), not needed by physics (burst uses writeParticle only). Good.

Extraction end: at function uploadBubbleAttributes — stepPhysics ends before it. Good. Also pokePop etc. after — not needed.

One more: the eval'd code references aliveCount() inside spawnBubble — both inside cut. Good.

And document/window not referenced in cut. Math.random fine.

Strict-mode eval function scoping: declarations (function stepPhysics(){}) inside direct eval in strict mode → confined to eval's scope; returning an object literal capturing them works.

BUT there's a subtlety: eval of code containing const/let at top level of eval scope — fine.

My harness's own spawnBubble duplicate — remove it (I noted "helpers beyond the cut" — wrong, it's inside). Remove that whole block.

Also instanceCap — harness let instanceCap = 120 — spawnBubble inside eval reads outer one. Good.

Also harness const _v shadows? eval code has own _v. OK.

Additionally: does stepPhysics reference S.rate etc — S in outer scope. Good.

Let me rewrite test.mjs accordingly.

Wait, one problem: instanceCap in the demo is declared as let instanceCap = 120; and spawnBubble references it. In my harness I declare const instanceCap = 120 — the eval'd code reads the outer instanceCap — fine.

Also stepPhysics references S.breeze via flowAt — S in outer scope. Good.

One issue: in the eval'd code, writeParticle references pDirty (declared in the cut: let pDirty = false; — yes inside cut since cut starts at let pCursor). And burst references _v — inside cut. Good.

Also stepPhysics references spawnBubble etc — inside cut. And Math.random — fine.

elapsed — outer let; writeParticle reads it via closure. Good.

Another subtlety: direct eval in strict mode — the eval'd code's top-level let/const/function stay in the eval scope, but closures capture outer scope correctly. The returned object literal evaluates in eval scope where those functions are visible. Good.

Potential gotcha: the cut includes const flow = new THREE.Vector3(); — references THREE — outer import. Good.

Also — does the physics section contain const clamp? No, clamp defined at top of module (outside cut) — does physics use clamp? spawnBubble uses clamp(r, 0.05, 2.6)! And killBubble? No. stepPhysics uses clamp for filmDisc scale: const s = clamp((ph-0.36)/0.08, 0, 1);. And spawnBubble uses clamp. clamp is NOT in the cut and not in my harness stubs → ReferenceError!

Fix: add const clamp = THREE.MathUtils.clamp; to harness externals. Let me patch the test file.

Also TAU — used in burst (const th = Math.random()*TAU) — TAU defined at module top, not in cut → add to harness: const TAU = Math.PI*2;.

Let me check other identifiers used in the cut that live outside:

• writeParticle: elapsed (ok), PCAP (ok), pPos0/pVel/pCol/pBirth/pLife/pSize/pType (ok), pCursor (inside).
• burst: hsl (inside), writeParticle (inside), _v (inside), TAU (ADD), Math.
• flowAt: S, Math.
• addGust: gusts (inside).
• aliveCount: bubbles (ok).
• spawnBubble: instanceCap (ok), bubbles, clamp (ADD), elapsed, S, Math.
• killBubble: burst, AudioMan, S.
• mergeBubbles: S, _v, hsl, writeParticle, AudioMan, pDirty.
• stepPhysics: S, machine, filmDisc, ringGroup, rod, spawnBubble, AudioMan, Math, bubbles, clamp, flowAt, flow (inside), killBubble, gusts.
• TAU also in stepPhysics ambient micro bubbles (Math.random()*TAU) — ADD.

Patch harness: add const TAU = Math.PI*2; const clamp = THREE.MathUtils.clamp;.

The issue: big.targetR**3.toFixed(4) — ** has higher precedence than member access call? Actually big.targetR**3.toFixed(4) parses as big.targetR ** (3).toFixed(4) → (3).toFixed is "3." then toFixed — 3.toFixed(4) is a syntax error because 3. looks like a float literal followed by toFixed → "Invalid or unexpected token". Need parentheses: (big.targetR**3).toFixed(4).

Wait — the demo code itself uses A.targetR**3 patterns: (a.targetR**3 + b.targetR**3) — that's fine (** with member access operands is OK; the problem was only 3.toFixed). Also big.targetR**3 in Math.abs — fine.

But hold on — does the demo file contain any **3 followed by .toFixed? $('stBig').textContent = S.biggest.toFixed(2)+' m' — fine. b.r**3/(a.r**3+b.r**3) — fine.

Also check v1/vt etc — fine.

Run the test again.

All GLSL parses pass (8 shaders including the big bubble fragment shader at 3319 chars). Physics mostly passes. One failure: "merge conserves volume (r³ 0.0024 vs 0.1520)".

Wait — the merge test: A spawned at (5,5,5) r=0.5, B at (5.1,5,5) r=0.3. before = A.targetR**3 + B.targetR**3 = 0.125+0.027=0.152. After mergeBubbles(A,B): big.targetR should be cbrt(0.152) → r³=0.152. But got 0.0024.

Hmm — but note: between spawn and merge... no wait, the issue: after the 1800-frame loop ended, elapsed = 30s. spawnBubble sets b.r = r*0.25 and b.targetR = r. Then mergeBubbles uses big.r**3 and small.r**3 for volumes — v1 = big.r³ (current radius, not target!). big.r = 0.125 (0.5*0.25) → v1 = 0.00195; v2 = 0.075³ = 0.00042; vt = 0.0024; big.targetR = cbrt(0.0024).

So the bug is real: mergeBubbles uses current radius r (which during grow-in is only 25% of target) for volume conservation, not targetR. In real gameplay this means merging two freshly spawned bubbles produces a tiny bubble — a genuine logic inconsistency. Fix: use targetR for volume math:

Position/velocity weighting by targetR volumes is also better. Also the merge test result "max radius bounded: 0.00" — at end of sim, alive bubbles' max r... printed 0.00 — hmm, maxR computed over alive bubbles = 0? "alive count sane: 9" but maxR 0.00? Because at the moment of sampling (after loop), alive bubbles have r... wait, killBubble sets b.r=0; alive ones should have r>0. maxR=0.00 suspicious — oh! The check ran for(const b of bubbles){ if(!b.alive) continue; maxR = Math.max(maxR, b.r); ...} — after 30s, bubbles alive with r>0... unless all 9 alive were just spawned by the machine at loop end (r = 0.25*target ~0.05-0.15 → prints 0.05ish, not 0.00). Hmm 0.00 exactly?

Wait — maybe grow-in: b.r += (b.targetR*eo + b.targetR*0.25*(1-eo) - b.r)*min(1,dt*10) — when g=1, eo=1: b.r += (targetR - b.r)*0.166 → converges. Fine.

Let me think — 0.00 toFixed(2) means maxR < 0.005. All alive bubbles have r≈0? That suggests the grow-in formula broken: b.targetR*eo + b.targetR*0.25*(1-eo) — at g=0: eo=0 → value = targetR0.25; at g=1: eo=1 → targetR. So b.r → tracks that. Starting r = targetR0.25. Should grow fine to targetR in 0.55s...

Unless stepPhysics isn't reaching the grow-in because... const g = clamp((t - b.born)/0.55, 0, 1); — born set at spawn = elapsed. Fine.

Hmm wait — maxR sampled AFTER the loop, but my merge test spawns A and B at (5,5,5) after the loop and samples... no — maxR sampled before merge test, right after loop. 9 alive. Let me debug: maybe many alive bubbles are micro-bubbles (0.05-0.12 targetR) → r up to 0.12 → toFixed(2) = "0.12" not 0.00.

Actually — could it be that all 9 alive bubbles were spawned in the final frames and r = 0.25*0.05=0.0125 → "0.01"? Still not 0.00.

Hmm, let me actually debug by printing radii. Also there's a subtle bug: in stepPhysics, bubbles popped by killBubble inside the per-bubble loop set r=0 — alive=false. Alive ones nonzero...

OH WAIT. I see it: b.r += (b.targetR*eo + b.targetR*0.25*(1-eo) - b.r)*Math.min(1, dt*10); — this is in the per-bubble section... let me re-read what I wrote in the demo:

At g=1: eo = 1 → target value = targetR1 + targetR0.25*0 = targetR. b.r → targetR. Good.

Hmm so why 0.00? Unless... the micro-bubbles: spawnBubble(..., 0.05+Math.random()*0.08) — spawnBubble clamps r min 0.05. r after grow-in → 0.05..0.13. toFixed(2) would print 0.05-0.13.

Unless maxR loop didn't see them... wait, maybe alive bubbles are the ones from spawn at f=300 (0.5/0.5) that merged... 30s elapsed, maxAge = 7+3+rand*6 ≈ 10-16s → they'd have popped by t≈46... no, sim ends at 30s — spawned at 5s, age 25s > maxAge → popped.

Let me just debug-print. Actually — hold on. Is b.r updated at all? In stepPhysics per-bubble loop... b.r += (...). Yes.

Hmm, but WAIT: spawnBubble sets b.r = r*0.25 where r param... after clamp. And b.targetR = r. Then killBubble sets r=0. alive → r>0.

Unless all 9 alive bubbles were JUST killed?? No, kill sets alive=false.

Let me actually add a debug print. Also possible: after 30s with rate=30/min and popping, maybe remaining alive = 9 are all fresh micro-bubbles... The pool micro-bubble spawn: if(Math.random() < dt*0.5 && S.machineOn) → p = 0.5/s → every ~2s one micro r 0.05-0.13. maxAge = 7+r6+rand6 → ~8-14s. So at any time ~4-7 micros alive with r≥0.05... maxR should be ≥0.05.

Actually "0.00" — is it possible maxR stayed 0 because... for(const b of bubbles){ if(!b.alive) continue; maxR = Math.max(maxR, b.r); — if b.r is NaN? Math.max(0, NaN) = NaN, prints "NaN"... not 0.00.

OR — my toFixed print: maxR.toFixed(2) — if maxR = 0.0017 → "0.00". So all alive bubbles have r < 0.005. Which bubbles have r that small? Bubbles in killBubble have r=0 but they're dead...

OH! I see it now — spawnBubble: b.r = r*0.25 — then in stepPhysics, the grow-in line runs BEFORE... fine. But look at the ordering issue in the per-bubble loop: births happen in stepPhysics (machine blow at ph 0.52; micro spawns). At the LAST frame of the sim (f=1799), machine spawns happen during that same stepPhysics call — then the SAME call's per-bubble loop grows them a bit. r ≈ targetR0.25 + small. For a micro bubble targetR 0.05 → r ≈ 0.0125. For wand bubbles targetR 0.2-0.51.2(size) → r ≈ 0.06-0.15.

Hmm none give <0.005.

Unless... S.size=1.2 in harness. r = (0.20+rand*0.30)*1.2 → 0.24-0.6.

Wait, actually, let me reconsider: is it possible that at end of sim, NO wand bubbles alive and all micros also died, and the 9 alive are... hmm.

Actually — maybe I have the direction of the grow-in easing wrong so b.r never converges... b.r += (target - b.r)*0.166 per frame at 60fps → converges to target in ~20 frames. Definitely converges.

Let me just add debug output rather than speculate. Also fix the real merge-volume bug (use targetR).

Actually hold on, let me recheck the "alive count sane: 9" and "max radius 0.00" ordering — maxR includes only alive. One more candidate: spawnBubble finds bubbles.find(b=>!b.alive) — returns first dead slot. When merging, small.alive=false, small.r=0 — dead slots have r=0 but they're skipped...

Hmm wait, is it possible that bubbles array entries show alive=true but r=0? killBubble sets alive=false AND r=0. mergeBubbles sets small.alive=false, small.r=0. Nothing sets alive=true with r=0... except spawnBubble sets alive=true BEFORE setting r? Order in spawnBubble: b.alive=true; ... b.targetR=r; b.r=r*0.25. Within same synchronous call, no intermediate observation.

OK let me just debug print. And separately — the maxR check happening right after the last stepPhysics call: at that point pops from "popAt"? No popAll. Floor pops: bubbles at floor pop and respawn...

You know what — let me just print the alive bubbles' r values in the harness to see. Add debug before the maxR check. Also fix the merge volume bug in the demo first.

Actually — WAIT. I see it!!! In stepPhysics:

t is the second arg = elapsed. b.born = elapsed at spawn. OK.

Hmm, and b.age += dt → death when age>maxAge. maxAge = (7+r6+rand6)/sqrt(lift)... in the demo: b.maxAge = (7 + r*6 + Math.random()*6) * (giant?1.6:1) / Math.sqrt(S.lift); lift=1 → same.

Let me stop speculating and debug.

All tests pass now. But look — "debug alive radii:" printed EMPTY, yet "alive count sane: 17". That's a contradiction... unless aliveCount() counts differently than bubbles.filter(b=>b.alive).

OH. I see it. aliveCount is from the extracted code — it iterates over bubbles — but which bubbles?? The extracted code has const bubbles = []; at pStart... wait no — my extraction started physics at src.indexOf('const bubbles = [];') — so the extracted code DECLARES its own bubbles in eval scope, shadowing the harness one! The harness's bubbles array (used in the debug print and maxR loop) is never populated. aliveCount uses the eval-scope bubbles (17 alive — real). So the "max radius 0.00" and "inside arena bounds" checks were checking an empty set — meaningless.

Fix the harness: retrieve the eval-scope bubbles via the returned object. Add bubbles to the returned object: ;({ stepPhysics, ..., bubbles }). Since bubbles is declared with const in the cut, it's in eval scope — include it in the return literal. Then use P.bubbles everywhere in harness (also the NaN watchdog loop and the giant check used harness bubbles — all should use P.bubbles).

The spawnBubble etc operate on eval-scope bubbles — correct already.

Note the NaN watchdog: for(const b of bubbles) — harness bubbles — empty → watchdog never ran. Fix to P.bubbles.

Also spawnBubble's bubbles.find uses eval-scope — fine.

Let me update: return bubbles in the object, and replace harness bubbles references after eval with P.bubbles. The harness still declares its own bubbles const (used for... nothing after fix — can remove, but harmless; the eval cut declares its own in eval scope). Actually wait — the cut starts at const bubbles = []; so it declares bubbles + populates slots itself (the for-loop after is in the cut: for(let i=0;i<MAXB;i++) bubbles.push({...}) — yes that loop is right after the declaration, inside the cut). Good — so harness doesn't need to declare bubbles at all. Remove harness bubbles; use P.bubbles.

Patch:

1. Remove harness const bubbles = []... block.
2. Add bubbles to eval return object.
3. Replace bubbles with P.bubbles in: NaN watchdog loop, sawGiant check, maxR/allIn loop, alive radii debug.

Now the harness is honest: 9 alive bubbles with real radii (0.06–0.62), all bounds/volume checks pass, NaN watchdog actually ran over 30 simulated seconds. All 8 shaders parse.

Remaining verification concerns:

1. The demo code references in the extracted physics section worked — good sign for those functions. But there are untested code paths: uploadBubbleAttributes, pointerWorld, pokePop, UI wiring, applyQuality, animate. These are DOM/GL-heavy — reviewed manually.

2. Check remaining ** usage in demo for the same precedence pitfall — search for **3.toFixed type patterns in demo. The demo has (a.targetR**3 + b.targetR**3) — fine. big.targetR**3 alone — fine. Let me grep for suspicious patterns.

3. The qLevel mapping for autoLevel: autoLevel values 2/1/0 map to QNAMES index — applyQuality uses [64,92,120][lvl] — lvl from qLevel(). For qMode 0 → S.autoLevel (2,1,0) — correct indexing. For qMode 1,2,3 → 3-qMode → 2,1,0 — correct.

4. The cycleQuality label: QNAMES[3-S.qMode][0]+... → qMode=1 → QNAMES[2]='HIGH' → 'High'. Good.

5. Check no leftover undeclared variables in demo: run a lint-ish check — I could run node with the extracted module + stubs... heavy. Alternative: use a quick ESLint? Not installed. Do a manual grep for common typos. Actually, a decent trick: parse the extracted spume.mjs with node's parser (done — syntax OK) and additionally do an "undefined identifier" scan... skip — careful review done earlier.

6. One more check on Reflector: import { Reflector } — path correct. In r160 Reflector options accept multisample default 4. OK.

7. Also check RoomEnvironment no-arg constructor in r160: Let me verify quickly in node — import and instantiate RoomEnvironment (it extends Scene, creates meshes with emissive materials — no GL needed) and PMREMGenerator requires renderer — skip PMREM. Just check new RoomEnvironment() doesn't throw in Node.

Let me also verify UnrealBloomPass/EffectComposer/etc import paths exist in three@0.160.0 package, and Reflector/RoomEnvironment instantiate (constructors may need GL? Reflector constructor creates a WebGLRenderTarget — new THREE.WebGLRenderTarget doesn't need GL context (only when used). EffectComposer requires renderer — skip. Just verify the module files exist and import cleanly, plus RoomEnvironment & Reflector constructors run with stubs.

Test in node:

Reflector constructor: sets up texture matrix, WebGLRenderTarget — no GL calls. OK try.

Also new UnrealBloomPass(resolution, strength, radius, threshold) — constructor creates render targets & materials — no GL. EffectComposer(renderer) — needs renderer with getContext? It creates WebGLRenderTarget with size from renderer.getDrawingBufferSize — needs a renderer object; skip composer, or fake minimal renderer {getDrawingBufferSize:()=>new Vector2}. Skip — import check suffices for those.

Let me run that quick import/construct test.

All imports and constructions work. The **3 usages in the demo are parenthesized correctly.

Now update the gallery index. Add the 060 card after the <!-- New demos are added here --> line. Also update header count if any — let me check if the index header mentions a count (e.g., "59 demos"). Let me check.

****************************************************************************************************************>`.

Now run the same consistency check the previous run did: verify every demo folder has a card and every card has a folder, and HTML tags balance in index. Let me write a quick consistency check script.

Gallery is consistent: 60 folders, 60 cards, no orphans, tags balanced.

Final check — re-run the physics harness against the updated demo file (after the merge fix) to confirm the file on disk passes everything (the last run was already against the fixed file — the merge fix was applied before the successful run? Let me verify the order: I fixed mergeBubbles in the demo, then patched the test, ran → ALL TESTS PASSED with "merge conserves volume (r³ 0.1520 vs 0.1520)". Yes, that run was against the fixed file. The only subsequent demo edit was... none (index.html only). Actually wait — the filmDisc DoubleSide fix and merge fix were before the final test run. The demo file hasn't changed since the passing run. Good.

One more sanity check on the demo: the #stWand stats line uses machine._ph — fine. Also double-check a couple of subtle runtime paths I haven't exercised:

1. applyQuality() is called at startup — it calls onResize() → uses camera/renderer/composer — all defined. It sets pMat.uniforms.uPix — pMat defined. It touches $('qBadge') — DOM ready (script at body end). OK.

2. setBlowMode — uses $('bMode') — ok.

3. On pointerup (window), pokePop uses raycaster — set by pointerWorld just before. OK.

4. Grade pass ShaderPass object form — the uniforms are cloned by UniformsUtils.clone; gradePass.uniforms.uTime — ShaderPass sets this.uniforms = UniformsUtils.clone(shader.uniforms) then this.material = new ShaderMaterial({uniforms: this.uniforms...}) — yes uniforms accessible. OK.

5. AudioMan.setOn before init — this.init() inside setOn handles. If no AudioContext (unsupported), this.ctx stays null; setOn returns early. pop/chime guard !this.ctx. OK.

6. Points: initial aBirth filled with -1e3 → t = (0 - (-1000))/1 = 1000 > 1 → dead → gl_Position degenerate (2,2,2,1) — clipped. gl_PointSize 0. Fine.

7. pLife filled 1 → no division by zero. OK.

8. Dust: dustMat uses radialGlowTexture map with PointsMaterial — map in PointsMaterial is supported (uses gl_PointCoord). OK.

9. The wandCursor SpriteMaterial initial map: I first create with a blank-ish radialGlowTexture('rgba(126,232,250,0)','rgba(126,232,250,0)') (transparent), then replace with ring canvas before first render — fine.

10. renderer.domElement appended before controls created — OK.

11. composer.render() — RenderPass renders scene; Reflector updates during render. OK.

12. controls.enabled = !on in blow mode — OrbitControls disabled → no rotate while painting. Good.

13. meta viewport set. Mobile: panels hidden except buttons — OK.

Edge: spawnBubble uses elapsed — declared later with let elapsed = 0 in main-loop section — opening bubbles spawn AFTER that declaration. All UI-triggered calls happen post-init. OK.

Also confirm S.biggest formatting — '—' default. OK.

One last look at a potentially problematic pattern: in the keydown handler, ' ' (space) triggers popAll and preventDefault — fine.

And the unlock listener: registered with addEventListener('pointerdown', unlock, { once:false }) — inside, removeEventListener('pointerdown', unlock) only when S.soundOn — otherwise stays; harmless.

Also in AudioMan.setOn, when S.soundOn false at page load, no init until user toggles — good (autoplay policy respected since toggling is a user gesture).

Everything checks out. Let me do a final quick visual review of the demo file top-to-bottom for any obvious slip, e.g. mismatched IDs between HTML and JS. Grep the getElementById/$ calls vs id attributes.

All checks pass:

• JS syntax valid (node --check)
• All 8 GLSL shaders parse cleanly (incl. the 3.3KB bubble fragment shader)
• Physics harness: 30 simulated seconds, 35-45 spawns, merges, pops, no NaNs, bounds respected, volume-conserving merges verified to 1e-6
• All three@0.160.0 addon imports resolve; Reflector/RoomEnvironment/UnrealBloomPass/InstancedBufferGeometry construct headlessly
• All DOM ids referenced exist
• Gallery index: 60 folders ↔ 60 cards, balanced tags

The demo is complete. Task summary for the checkpoint: created demo 060-spume. Done — call _success.