Photon Garden Demo Creation and Deployment

The task says "Wake up and do as you please." The previous task created a demo "043-hyperfold". My purpose is to create cool Three.js demos in /space/demos/. So I should create a new impressive demo.

Let me first check the current state of the demos folder, then decide on a new demo idea. Something advanced: maybe an interactive ray-marched scene, an audio visualizer, a fluid simulation, a particle galaxy, a physics-based demo... Since 043-hyperfold was a 4D polytope explorer, let me create something different — e.g., a GPU-based N-body particle galaxy simulation with bloom, or a ray-marched fractal explorer, or a fluid simulation.

Let me check the demos index first to see what demos already exist to avoid duplication.

Let me install shell tools and look around.

Let me check the demos folder to see what exists.

There are 43 demos. I need to create demo #44. Let me look at the list of existing demos to pick something new:

1. spinning-cube
2. nebula-galaxy
3. mandelbulb-explorer
4. fluid-dynamics
5. gravity-sandbox
6. event-horizon
7. sonic-reactor
8. void-runner
9. azure-odyssey
10. abyssal-bloom
11. physarum-garden
12. powder-alchemy
13. clockwork-nebula
14. neon-rain
15. aurora-borealis
16. skitter
17. coral-resonance
18. threshold
19. attractorium
20. murmuration
21. terraforge
22. cloudsea
23. frostline
24. koi-pond
25. ferrofluid
26. synchrony
27. cymatics
28. teslasphere
29. pyrosymphony
30. morphogenesis
31. galton-cascade
32. wavefront
33. gossamer
34. magnetosphere
35. cloud-chamber
36. wavefunction
37. epicycle
38. sandpile
39. kinetic-theory
40. lumen-lab
41. squish-lab
42. neon-tilt
43. hyperfold

Let me check what some of these are to avoid overlap. Let me quickly look at a couple of the index cards to understand descriptions. Let me grep the index.html for the demo titles/descriptions.

There are 43 demos covering a wide range. I need to create demo 044 with something not yet covered. Let me brainstorm ideas that aren't covered:

Existing themes: 4D polytopes, pinball, soft-body, optics, gas kinetics, sandpile, Fourier drawing, quantum orbitals, cloud chamber, magnetosphere, spider web, wave interference, Galton board, reaction-diffusion, fireworks, plasma globe, Chladni plate, fireflies, ferrofluid, koi pond, frost, volumetric clouds, terrain erosion, boids, strange attractors, portals, cymatics lagoon, creature locomotion, aurora, cyberpunk city, orrery, falling sand, slime mold, deep sea, sailing, endless runner, audio visualizer, black hole, gravity sandbox, fluid, mandelbulb, galaxy, cube.

Ideas for a new demo:

1. Elasticity / cloth + rope playground — covered partially by squish-lab (soft bodies) and gossamer (verlet cloth).
2. Double pendulum / chaos pendulum collection — physics playground with coupled pendulums, Lyapunov exponent display. Not covered. Could be nice: "Pendulum Garden" — many double pendulums showing chaos, energy readouts, phase-space plots. Might be considered moderate wow.
3. Voronoi / Delaunay shattering glass — fracture physics demo.
4. Voxel destructible world — like teardown-ish.
5. Planet formation / accretion sim — dust collapsing into protoplanets with collisions (sticky particles). Partially gravity-sandbox.
6. Electromagnetic field visualizer — charges and field lines; partially ferrofluid/magnetosphere.
7. Mass-spring bridge / truss builder with collapse physics — build bridges, test them with cars. Interactive game-ish. "Bridge Builder" — could be cool: verlet beam structures, stress visualization (color by strain), collapse simulation. This is a classic impressive physics demo (like "Sodaplay/BridgeBuilder"). Not covered yet! Stress-colored beam physics, interactive building, wave propagation through structures.
8. Marble run / machine builder — Rube Goldberg.
9. Wave-particle duality / double-slit quantum — partially wavefront + wavefunction.
10. Orbital mechanics KSP-lite — partially gravity-sandbox.
11. Ant colony / ecosystem sim.
12. Light-driven raytraced scene with spheres — path tracing in GLSL. "Photon"-style progressive path tracer with spheres/quadrics, materials, depth of field. This could be very impressive: a real-time progressive path tracer in a fragment shader (like smallpt). Not covered: lumen-lab is ray optics (2D analytic), not 3D path tracing. A progressive path tracer with SDF/spheres, importance sampling, temporal accumulation, denoising... That's a strong "wow" demo — physically based rendering with caustics, soft shadows, depth of field. Interactive: move objects, change materials, time of day.
13. Shattering crystal / Voronoi fracture.
14. Turing machine / Game of Life 3D — cellular automata (not yet covered! 038 sandpile is CA-ish but not Life). A 3D Game of Life or a "Life canvas" — but might be less wow.
15. Knot theory visualizer — torus knots morphing.
16. Weather simulation / storm chaser.
17. Rubik's cube solver.
18. Mini golf / bowling physics game.
19. Tank / artillery game.
20. Superfluid / SPH water tank — 3D SPH fluid with particles! 004 is 2D Eulerian fluid; 3D SPH particle water in a glass tank you can tilt — that's impressive. GPU SPH with ~100k particles, screen-space fluid rendering (depth → bilateral blur → normals → refraction). Very cool: "Aquarium" / "Splash Lab". Interactive tilt tank, wave maker, spheres to drop. This is a strong candidate — particle-based 3D fluid is a classic GPU showcase.
21. Music sequencer / step-sequencer with visuals.
22. Fire simulation / pyro — 029 pyrosymphony is fireworks; a volumetric fire shader could differ.
23. Flight simulator through canyon.
24. Double pendulum kinetic sculpture — "Chaos Pendulum".
25. Planetary rings / Roche limit sim — tidal disruption of a moon into rings. That's cool: a moon approaching a planet gets torn apart, forms ring. N-body with self-gravity. Might be heavy.
26. Massive particle life — "Particle Life" (Clusters) — artificial life with attraction/repulsion matrices producing cell-like emergent behavior. That's a great demo: thousands of particles, color-coded species, emergent predator/prey, amoeba structures. GPU compute with spatial hashing. Not covered! It's mesmerizing and interactive (tweak force matrix live, presets). "Primordial Soup" / "Particle Life".

Given the pattern of demos (each with physics depth, generative audio, bloom+grade, adaptive quality, snapshots, keyboard/touch), I'll pick something fresh and visually stunning.

Let me evaluate: SPH 3D fluid is quite heavy to implement well in one file (neighbor search via spatial hashing on GPU requires bitonic sort or CPU). Could do CPU SPH with ~4k particles — less wow.

Particle Life with GPU compute (O(n²) via fragment shaders like murmuration did GPU boids) — murmuration already did O(n²) GPGPU boids with 9216 birds. Particle life with species force matrix is similar tech but emergent behavior is different and very beautiful. But it may feel similar to boids/slime.

Progressive path tracer — different from anything above, real wow factor: photorealistic rendering, accumulating samples, depth of field, glossy reflections, refraction with caustics. Interactive scene editing (drag spheres, change materials, sun position). Three.js can render to a fullscreen quad with a fragment shader doing path tracing, accumulating over frames while camera is static, resetting on change. That's very doable in a single fragment shader with spheres + planes. Features: temporal accumulation with sample counter, progressive refinement; depth of field with adjustable aperture/focus; materials: lambertian, metal, dielectric (glass), emissive lights; cornell-box-like scene or outdoor scene with sun; environment sky with sun importance sampling maybe too complex — simpler: explicit light sampling of emissive spheres (NEE). Also add "denoise" no. Add tone mapping ACES in the grade pass.

Performance: full-res path tracing in WebGL2 fragment shader with ~16 spheres, 4-8 bounces, 1 sample/pixel/frame at 60fps — decent GPU can handle at 1080p with scaling. Adaptive resolution when camera moves. This is a classic "wow" demo (like shadertoy path tracers).

Alternatively Bridge Builder physics — interactive, fun, game-like. But rendering is simpler; less "wow" visually though colorful stress visualization with bloom could be nice.

Another idea: Voronoi shatter / glass fracture — click to shatter a glass pane with procedurally generated cracks, slow-mo physics. Cool but maybe mid.

Knots & ropes — no.

Planetary accretion disk forming planets — nice but gravity-sandbox exists.

Wave-particle / quantum double slit — wavefunction exists.

Electromagnetism lab: build circuits? — nah.

Flocking + predator 3D — murmuration covered.

Interactive 3D L-systems / procedural tree growth with seasons — "Arboretum": procedurally growing trees (L-systems / space colonization algorithm), swaying in wind, seasons changing, leaves falling (particles), day/night. Space colonization growth is beautiful and organic. Not covered: gossamer has a spider, terraforge terrain. A growing forest could be lovely: watch trees branch toward light, drop leaves in autumn, snow in winter. Moderate complexity.

I think the path tracer is the strongest "wow" demo that's clearly distinct: "Photon Garden" / "Lumen Trace" — a progressive Monte Carlo path tracer running in a fragment shader. Interactive: drag objects, change material of selected (matte/metal/glass/light), move sun, DOF controls, auto-accumulate with sample count, adaptive resolution during interaction, presets (Cornell box, glass caustics, metal gallery, sunset field). Plus small animations.

Actually, let me reconsider — one concern: writing a robust path tracer in a single file within reasonable time is doable. Include:

• Scene: analytic spheres + ground plane + box walls (Cornell) built via arrays in shader.
• Materials: diffuse (cosine sampling), metal (reflect + fuzz), dielectric (refract with Fresnel/Schlick), emissive.
• Direct light sampling (NEE) toward emissive spheres to converge faster.
• Accumulation buffer via render targets (RGBA32F), reset on camera/scene change.
• Sample counter, convergence display.
• Camera: orbit + focus distance + aperture (DOF).
• Grade pass: exposure, ACES tonemap, vignette, grain.
• Interactive: click-drag spheres on the ground plane; buttons to set material; presets; sun/HDRI sky toggle.
• Adaptive: lower internal resolution while interacting.

That's very achievable and impressive. Name: "Photon Study" or "Pathtracer Playground" or "Caustic Lab". Let me call it "044-photon-forge" or "044-rayforge"... The collection names are poetic: "Lumen Lab" is taken (ray optics). Something like "Lightwell", "Photon Garden", "Ember Trace", "Glass & Gold", "Prismatique"... "Photon Forge"? "Raywright"? I like "Photon Garden" — scene with spheres (glass, metal, glowing) on an infinite checker/ground, soft sun, accumulating into photoreal image.

Hmm, but wait — is there interactivity enough for the "wow + interactive" standard? Yes: drag spheres, pick materials, presets, DOF racking, exposure, time-of-day sky. Plus live sample count and converge.

Alternatively the Bridge Builder might be more playful. But photoreal path tracing has stronger "wow". Also, three.js isn't really needed for a path tracer (fullscreen quad), but that's fine — Three.js used for render pipeline and overlay UI? The guidelines say use Three.js; I can use it for composer/post and rendering the fullscreen quad — that's fine (several demos like event-horizon/mandelbulb used similar single-shader approaches).

Let me also consider a double-pendulum "Chaos Garden": many pendulums with bloom trails, Lyapunov divergence (two nearly-identical pendulums diverging), phase space, energy gauges. It's physically rich but visually simpler.

Decision: 044-photon-garden — progressive path tracer.

Actually wait — let me double check demo 040 Lumen Lab is 2D ray optics, not 3D path tracing. Yes: "interactive ray-optics workbench — aim mono or white lasers ... prisms, lenses ... Snell refraction ... caustics" — that's 2D analytic beam tracing, different from Monte Carlo 3D path tracing. Good, no conflict. And 006 event-horizon ray-marches black hole lensing; 003 mandelbulb ray-marching fractal. A Monte Carlo path tracer with progressive accumulation is distinct.

Plan for the demo file /space/demos/044-photon-garden/index.html:

Architecture:

• Three.js r160+ via import map (unpkg). Use EffectComposer? For accumulation I need my own render targets. Simplest: two float RTs ping-pong for accumulation; path-trace shader writes accumulated color (sum). Then a "present" shader divides by sample count, applies exposure + ACES + gamma + vignette + grain. Could also add UnrealBloom — bloom on path-traced lights looks great. Use EffectComposer with RenderPass of a "present" scene (fullscreen quad sampling accum texture) + UnrealBloomPass + output pass. That's fine.

• WebGL2 required: check renderer.capabilities.isWebGL2; use THREE.WebGLRenderTarget with type: THREE.FloatType, format: RGBAFormat. Accumulate in shader: gl_FragColor = vec4(prev + current, 1).

Path tracing shader details:

• Max spheres ~16 in uniform arrays: pos/radius, albedo, material type (0=diffuse,1=metal,2=glass,3=light), fuzz/ior params, emission.
• Ground plane y=0 with optional checker texture computed procedurally; also big sky dome via procedural sky (sun disk + gradient) sampled on miss; environment contributes light. For Cornell-box preset, walls as boxes (axis-aligned planes). To keep it simpler: include a "room" mode where 5 planes (walls/ceiling/floor) exist with colors, else infinite ground + sky.
• Ray-sphere & ray-plane intersections analytic.
• Sampling: cosine-weighted hemisphere for diffuse; reflected + fuzz jitter for metal; Schlick Fresnel for glass with refraction (ior 1.5), handle total internal reflection.
• NEE: at each diffuse bounce, sample random point on each light (or pick one light at random, weight by count) — with spheres ~2 lights fine. Simplify: pick one random light sphere per bounce.
• Russian roulette after bounce 3.
• RNG: hash-based PCG from pixel + frame.
• Camera: thin-lens with aperture & focus distance.
• 1-2 samples/pixel/frame depending on quality tier; max bounces 6-8.

Progressive: render into accumulation ping-pong. When camera moves or scene changes, reset samples=0. While interacting, drop to lower res (e.g., 0.5x) for responsiveness; when idle, full res.

Interaction:

• OrbitControls for camera (target on ground). Any change resets accumulation.
• Click-drag spheres on ground: raycast; dragging moves sphere; reset accumulation. Shift-drag to raise/lower. Scroll over sphere: change radius? Maybe simpler: scroll = radius, keys 1/2/3/4 set material of hovered/selected sphere (matte/metal/glass/light), X deletes, A adds new sphere at hit point. This makes it a little scene editor!
• Sun position slider (time of day), sun size, sky brightness.
• Aperture & focus sliders (DOF), exposure.
• Presets: "Studio Trio" (glass, metal, matte on pedestal), "Caustics" (glass sphere cluster + bright light), "Cornell Box" (classic box with colored walls and blocks?—spheres only ok), "Sunset Field" (random matte spheres on ground with sun low), "Metallic Gallery".

Scene representation JS side: array of sphere objects mirrored into uniforms each reset.

Also emissive "sun" or area lights as spheres with emission ~ (10-40).

Grade pass: uniforms exposure, vignette, grain amount, chromatic aberration slight; ACES filmic. Bloom via UnrealBloomPass with threshold ~1.0 and low strength.

HUD: title, sample count + Spp, FPS, quality tier, buttons for presets, material palette, sliders (sun elevation/azimuth/brightness, aperture, focus, exposure), toggles (auto-orbit, grain), snapshot PNG, mute audio. Keyboard shortcuts list overlay (press H).

Audio: generative WebAudio — soft ambient pad; little chime when accumulation hits milestones? Sound when adding/deleting spheres (soft "tok"), whoosh when preset loads. Keep modest. Since it's a render demo, audio is secondary but the collection standard includes it. Mute by default? Previous demos had audio with mute toggle; start muted until user gesture (autoplay policy requires gesture anyway). I'll add a sound toggle that starts audio on first click.

Adaptive quality tiers: high: internal scale 1.0, spp/frame 2; medium: 0.75, 1; low: 0.5, 1. Adjust based on fps.

Also handle convergence: when samples > some threshold, reduce spp/frame to 1 to save power, and stop at like 8192 samples (freeze), show "converged".

Also "auto-orbit" cinematic: slowly orbits camera; each frame moves → resets? For path tracer that prevents accumulation... Instead: orbit continuously while rendering 1spp (like real-time PT) — noisy but moving; when orbit stops, accumulate to clean. That's a good demo trick: "moving = noisy, still = magic". Auto-orbit toggle.

Also add subtle animated elements? e.g., "animate" toggle: emissive sphere bobs → forces continuous re-render at 1spp (denoiser-less animation). Could be fun ("Turntable" mode: spheres slowly rotate around → continuous 1spp noise-fest with afterimage-like accumulation smoothing using exponential moving average instead of raw accumulation!). Nice idea: EMA accumulation mode for moving scenes: color = mix(prev, new, 1/max(1,min(samples, N))) — gives temporal smoothing with adaptation. I'll implement: uniform blend = 1/min(sampleIndex+1, maxAccumFrames). In static mode maxAccumFrames huge; in moving mode clamp to ~8 for noise smoothing.

File structure: single index.html with importmap, module script. Let me carefully write the GLSL.

Let me write the shader pseudocode:

RNG:

Seed per pixel: uint seed = uint(gl_FragCoord.x)*1973u + uint(gl_FragCoord.y)*9277u + uint(frame)*26699u; then pcg.

Intersect: loop spheres; loop planes. Track closest t, id, type.

Sky: on miss, color = mix(horizon, zenith, pow(max(dir.y,0.),0.6)) * strength + sun: float cosang = dot(dir, sunDir); sun disk smoothstep(cos(sunAng), ...) times sunColor — plus soft glow. To reduce noise, sun is sampled only on miss (no NEE for sun) — with small sun this converges slowly for diffuse surfaces... Add NEE toward sun too: treat sun as directional light: at diffuse bounce, with probability choose sun direction sampling within cone. Simpler: direct light = sunDir jittered within sunAngular * shadow test. And skip sky sun contribution when hit from camera? The classic approach: MIS complicated; approximate: direct sun sampling at each diffuse vertex + on-miss sky gradient WITHOUT sun disk (to avoid double counting), then caustics through glass still get sun via disk sampling when refracted ray hits... Refracted rays through glass hitting sky would miss the sun disk → weak caustics. Hmm. For caustics, better keep sun disk in sky AND accept slight double-count; or do: sun disk in sky (for specular/refracted paths) + NEE sun for diffuse surfaces with last-bounce-only... Simplest robust: keep sun in sky background (miss shader) and also do NEE sun sampling at every diffuse bounce with shadow ray; disable sun in miss shader for camera-visible background? Double counting is only an issue if both; many shadertoys do both and just look slightly brighter. To stay physically cleaner:

• missShader(dir) returns sky gradient + sun disk * sunVis where sunVis uniform = 1.
• At diffuse bounce: radiance += throughput * albedo * sunColor * max(dot(n, jitteredSunDir),0) * shadowed? * solidAngleFactor. Solid angle factor: sampling sun disk uniformly within cone of half-angle: pdf = 1/(2π(1-cosA)) ≈ 1/(π A²) for small A. contribution = albedo/π * cos * L_sun * (1/pdf) = albedo * cos * L_sun * π A² ... wait radiance of sun disk L_sun: sunColor. E = L * ω = sunColor * π sin²A. So direct = albedo/π * cosθ * L * ω.

To avoid double-count with sky-sun disk: rays that randomly scatter toward sun would also hit disk — rare for small A. Glass paths refracting and hitting sun disk get correct energy. Slight double count negligible; fine for a demo.

Lights (emissive spheres): NEE sampling toward random light at diffuse bounce: contribution = albedo * L_e * cos * cosL / (dist² * pdf_area)... standard sphere light sampling: sample point on sphere uniformly (area pdf 1/(4πr²)); convert to solid angle: pdf_sa = dist²/(cosL * area). E = L * ∫cos dω over solid angle of sphere. Contribution = albedo/π * cos * L * ω_sphere, ω = 2π(1 - sqrt(1-(r/d)²))... simpler to sample cone toward sphere like sun: jitter direction within cone half-angle asin(r/d). Then E = L*ω with ω=2π(1-cosA). direct = albedo/π * cosθ * L * ω * (1/numLights considered)... If picking one light of L lights with prob 1/L, multiply by L.

Emissive spheres also return emission when hit directly.

OK. Implementation detail: keep arrays as uniform vec4 uSpheres[MAXS] etc. MAXS=20, MAXP=8.

Movement: when user drags sphere, keep 1spp and clamp blend to 1/8 (EMA).

Now the present shader: sample tAccum (contains EMA result), apply exposure, ACES, vignette, grain, chromatic aberration (small radial offset sampling tAccum 3x). Output to screen via composer chain: RenderPass(presentScene) → UnrealBloom → OutputPass? OutputPass does tone mapping (would double-tonemap). Instead: my present shader outputs final LDR; composer: RenderPass + UnrealBloomPass (additive on top) + final. If present outputs LDR with tone mapping applied, bloom threshold won't catch brights... Bloom of path-traced image: better bloom in HDR before tonemap. So present shader outputs HDR * exposure (linear), then UnrealBloom threshold ~1, then custom final ShaderPass doing ACES+gamma+vignette+grain. That mirrors earlier demos (grade pass).

But tAccum is float texture; present pass: vec3 c = texture(tAccum, uv).rgb; gl_FragColor = vec4(c * exposure, 1) with slight CA sampling (sample tAccum 3 times with tiny radial offsets — cheap). Bloom then final grade (ACES + vignette + grain + gamma). Note grain in HDR-grade pass after tonemap is fine.

RenderTargets: HalfFloatType is enough (values up to ~60k, exposure pre-tonemap). Sun color ~ 40 → halffloat max 65504 ok. Use HalfFloatType for compat.

Ping-pong: accumA, accumB. Path-trace pass renders quad into accumWrite reading accumRead. Then present reads accumWrite. Swap.

JS scene definition:

Presets:

1. Studio Trio (default): ground plane checker-ish matte gray; big glass sphere center (r=1, y=1), brushed metal sphere left (gold), matte coral sphere right; small emissive sphere light above (r=0.5, emiss 12) + sky. Backdrop: cyclorama? Keep ground plane + sky.
2. Caustic Cluster: 3 glass spheres on glossy-ish ground (metal plane? planes can't be metal in our model — could allow plane material type too; simpler: ground matte light gray), bright small sun + emissive sphere for sparkle → caustics accumulate beautifully.
3. Cornell Box: 5 planes forming box (floor white, ceiling white with emissive quad-ish → use emissive sphere near ceiling), left red wall, right green wall, back white; two spheres (glass + metal). Planes need per-plane albedo and emission: supported.
4. Sunset Field: 12 random matte spheres on ground, warm low sun, purple-orange sky.
5. Metal Gallery: brushed metal spheres various fuzz, cool studio sky, big soft emissive sphere (softbox).

Plane material: allow type too? For simplicity: planes are lambertian with albedo + emission. Good enough.

Camera presets per preset.

Interactions list:

• Orbit: drag (rotate), wheel (zoom), right-drag pan. Accumulation resets on change; while interacting EMA clamp for smoothness.
• Click sphere to select (highlight ring?). Drag sphere: moves on ground plane (y=r). Shift+drag: vertical. Wheel over selected: radius ±.
• Keys 1-4: set material (matte/metal/glass/light). A: add sphere at cursor ground point. X/Del: remove selected. C: cycle preset. O: auto-orbit. G: grain toggle. B: bloom toggle. M: audio. H: help overlay. P: snapshot. R: reset accumulation (re-render clean).
• Sliders: Sun elevation, azimuth, intensity; aperture; focus distance; exposure; sky preset (day/sunset/night/studio)? Keep sun sliders + sky brightness.

HUD: top-left title + sample count + fps + convergence bar. Bottom controls. Right: help panel toggled.

Audio: soft pad (two detuned saws → lowpass, slow LFO), plus "shutter" chime on snapshot, "tok" on add/remove, soft whoosh on preset. Start on first user gesture; M toggles.

Snapshot: render one frame at high samples? Just capture canvas via toDataURL after a render.

Adaptive quality: measure EMA fps; tiers hi/med/low controlling renderScale (1/0.75/0.5) & bounces (7/6/5) & spp (2/1/1). When fps < 45 for a while → step down; > 58 → step up. Also cap pixelRatio.

Also idle-converge: when static & samples < 8192 keep accumulating; show "converged ✓" when hit cap and stop rendering to save energy (still render present pass at low rate for grain animation? Keep rendering at 30fps for grain life but skip PT pass).

That's a lot of code but manageable (~1300-1600 lines). Let me write carefully to avoid GLSL compile errors. Test via node? Can't run WebGL headless easily... Maybe I can use a quick sanity check: compile GLSL with a validator? Not available offline. I'll be extra careful with GLSL ES 3.0 syntax (three r160 uses WebGL2; ShaderMaterial defaults GLSL1 syntax converted? For RawShaderMaterial I must write #version 300 es myself. Using regular ShaderMaterial, three injects #version and built-ins; texture() works. I'll use ShaderMaterial with gl_FragColor? In WebGL2 three's ShaderMaterial still supports gl_FragColor via auto-conversion (three adds #define gl_FragColor pc_fragColor etc. when GLSL3?). Simplest: use ShaderMaterial and write code as GLSL1-style (varying, texture2D → three auto-converts to texture). Three r160 with WebGL2: ShaderMaterial defaults to glslVersion null → it prepends #version 300 es and defines compatibility macros (attribute→in etc., texture2D→texture). Yes, WebGLProgram does this conversion. gl_FragColor: in 300 es they define layout(location=0) out highp vec4 pc_fragColor; #define gl_FragColor pc_fragColor. So writing GLSL1 style works. Loops with non-constant? Use constant bounds with break — fine.

Uniform arrays of vec4: uniform vec4 uSpheres[20]; set via { value: [new THREE.Vector4(), ...] }. Works.

Int uniforms: uniform int uNumSpheres; set number. OK.

Let me now also handle "renderer" — set powerPreference: 'high-performance'.

One catch: EffectComposer with HalfFloat buffers — by default composer uses HalfFloatType in recent three. OutputPass not needed; final grade pass with renderToScreen handled by composer automatically for last pass.

Also OrbitControls import from 'three/addons/controls/OrbitControls.js'.

Edge: dragging spheres vs orbit controls conflict: pointerdown raycasts spheres; if hit → disable controls, start drag; else controls active. Standard.

Selection highlight: draw a small ring at sphere base? Simplest: in PT shader, if uSelected == sphere id, tint emissive slightly? That would re-path-trace with outline: e.g., mix albedo toward white pulsing. Doable: if(i==uSelected) baseAlbedo = mix(baseAlbedo, vec3(1.0), 0.15 + 0.1*sin(time*4)). Cheap & clear.

Focus distance: default = distance to selected sphere or auto = camTarget distance. Slider override.

Let me write the code now. I'll aim for a polished, well-commented single file. I'll write it locally in /tmp then copy to /space (space is s3fs, slow; but single file write is fine).

Also update /space/demos/index.html adding card at top of list (after "").

Let me carefully draft the GLSL path tracer.

Constants: #define NS 20 #define NP 8.

Hit struct — GLSL ES has structs ok.

intersect:

plane: t = -(dot(n,ro)+d)/dot(n,rd).

scene intersect loops.

sky(dir): gradient + sun disk + soft halo.

NEE sun + lights at lambert vertices.

trace():

Light list: uniform int uNumLights; uniform int uLightIdx[NS]; — int arrays as uniforms: value must be array of ints; three supports value: [1,2,...]? For int arrays, three's uniform upload uses uniform1iv — supported if value is Int32Array or array? uniform1iv accepts sequence. Three's SingularUniform handles arrays fine. I'll pass value: new Int32Array(NS)? Set via value: lightIdxArray where lightIdxArray is regular array — three checks Array.isArray → uses setValueV1i? PureArrayUniform with glsl type int → setValueV1iv accepts number[]. OK.

cone sampling toward direction d with min cos:

Wait ternary in GLSL ES: abs(d.y)<0.99 ? vec3(...) : vec3(...) fine.

cosine dir:

occluded(ro, rd, maxT, skipId): intersect returns id; visible if (kind==1 && id==lightId) → not occluded. For sun: visible if kind==0 (miss). Implement shadow(ro, rd, lightId): returns true if light visible. For sun pass lightId=-1 → visible only if no hit.

Camera ray with DOF:

Main:

Blend: frame counts samples; blend = min(1/(frame+1), 1)? For EMA clamp: blend = max(1/(frame+1), 1/EMA_MAX) when moving. Also when spp>1, frame increments by spp so blend = spp/(samples+spp). Manage CPU side: samples counter; blend = spp/(samples + spp) clamped below by 1/16 when "interactive mode". When samples >= cap and static → skip PT pass entirely.

Clamping fireflies: clamp sample luminance to e.g. 40 to reduce fireflies: acc = min(acc, vec3(40.)). Optional uClamp. Include cheaply.

Present shader (HDR→ composer):

Grade shader after bloom:

Composer: RenderPass(presentScene, camQuad) → UnrealBloomPass(res, strength .35, radius .6, threshold 1.0) → gradePass (renderToScreen). Set composer rendertarget type halffloat (default in r160 is HalfFloatType I think — yes since r152 default HalfFloat).

Present scene: fullscreen quad (three's Pass FullScreenQuad via ShaderPass). Simpler: presentPass = new ShaderPass(presentShader, 'tAccum')? ShaderPass sets tDiffuse from readBuffer — but I want it to read my accum texture directly. Easiest: make present a ShaderPass with uniform tAccum assigned, and in its fragment ignore tDiffuse. ShaderPass renders using textureID uniform; I'll write fragment using tAccum only, fine — the input buffer is wasted but harmless. Actually ShaderPass copies previous pass output into tDiffuse; for first pass it's the render... For first pass composer uses readBuffer initial. RenderPass of an empty scene costs little. Alternative: use TexturePass? Simplest robust: make my own Pass subclass? Keep it simple: RenderPass(tiny dummy scene with fullscreen quad mesh using ShaderMaterial that samples tAccum). I'll just build a scene with a fullscreen triangle (PlaneGeometry(2,2), ortho camera) and use RenderPass. Clean and clear.

Grade pass: ShaderPass with fragment reading tDiffuse (composer chain input). Output final LDR; mark renderToScreen — composer handles automatically if it's last.

Tone mapping: since I tonemap in shader, set renderer.toneMapping = NoToneMapping and outputColorSpace: final pass writes sRGB-encoded color; three might re-encode? When rendering to screen with composer, outputColorSpace handling in ShaderPass — set renderer.outputColorSpace = THREE.SRGBColorSpace; the grade shader outputs already-encoded sRGB values; three won't auto-convert ShaderMaterial output. Fine.

Sun parameters: elevation (deg), azimuth, size (angular radius), intensity; sky: zenith/horizon colors computed from elevation (day→sunset→night lerp), or choose from sky presets with custom colors. I'll compute sky colors procedurally from sun elevation for cohesion, with a "sky tint" per preset scalar.

Now JS scene & presets.

Sphere object: {p:THREE.Vector3, r, albedo:[r,g,b], type:0..3, fuzz, ior, emission:[...]}.

Presets:

Let me include per-plane: albedo, albedo2 (checker), emission, aux(x:checker scale or 0).

Cornell box planes:

• floor: n=(0,1,0), d=0
• ceiling: n=(0,-1,0), d=3 → plane: n·x + d = 0 → for y=3: n=(0,-1,0), d=3: -y+3=0 → y=3 ✓
• back: z=-2: n=(0,0,1), d=2
• left red: x=-2: n=(1,0,0), d=2
• right green: x=2: n=(-1,0,0), d=2 Camera at z ~ +5 looking at (0,1.2,0). Emissive sphere near ceiling r=0.4 emission (18,16,14). Two spheres: glass r=0.8 at (-0.7,0.8,0.2), gold metal r=0.8 at (0.75,0.8,-0.3). Sky strength 0 (black outside; box closed anyway, but camera outside? camera inside? Put camera just outside front open side; box open toward camera. Fine.

Sun in cornell: elevation irrelevant; set skyStrength 0.

Ground checker for studio: scale 1.0, albedo2 darker.

Now counts: NS=20 spheres is plenty (max user-added). NP=8 planes.

Uniform value arrays fixed length NS/NP; JS fills from scene each reset.

Dragging: raycaster vs sphere meshes — but there are no meshes; implement ray-sphere intersection in JS manually (same math). Keep list of THREE objects? Simpler: manual intersect in JS with scene spheres; pick nearest t>0. Drag: intersect pointer ray with ground plane y = sphere.p.y? Standard: drag on plane y = sphere center y (horizontal move) — compute ray-plane intersection each move; shift+drag: plane vertical facing camera. Wheel over sphere: radius *= 1±0.08, keep y=r (resting on ground) unless held in air (shift keeps y, min r 0.15 max 2.5).

Materials via keys apply to hovered sphere (or selected). Adding: press A → raycast ground; add matte random pastel sphere r=0.5 at hit.

Auto-orbit: rotates azimuth slowly → marks "interactive" (EMA mode). Focus dist auto = distance(cam, target) each reset unless user overridden via slider (F key cycles focus mode? keep slider + auto checkbox default on).

Exposure slider 0.25..4. Aperture 0..0.6 (radius in world units at focus). Bloom strength fixed 0.35 toggle B. Grain 0.035 toggle G.

Convergence bar: samples toward cap 4096 (or 8192). Progress = min(samples/cap,1). When reached: "converged — rendering paused (move to resume)". Save energy: stop composer? Still run composer each rAF but skip PT; grain anim continues (cheap). Actually skip everything except present+grade at 30fps. Simplest: keep composer.render() always (present+bloom+grade ~ cheap), skip PT pass when converged.

FPS meter & adaptive: EMA of dt; every 2s evaluate: if ema fps < 40 → tier down; > 55 → tier up (hysteresis 4s). Tiers affect renderScale & spp & bounces:

• hi: scale min(dpr,2) capped at 1.5? PT full res at dpr2 is heavy; cap internal scale: hi=1.0 (CSS pixels * 1.0), med=0.75, low=0.5. Multiply by devicePixelRatio min 1.25? Let's define internal res = floor(size * scale) where scale hi=1.0, med=0.7, low=0.5, and spp hi=2, med=1, low=1; bounces 7/6/5. On hi-dpi, renderer composer runs at dpr for crisp UI? Composer at same internal res? Upsampling: present pass renders accum (low res) to composer buffer at full dpr — texture sampling smooth upscale (LINEAR). Set composer size = size*dpr(min 1.5). OK.

Snapshot: after composer render, canvas.toBlob → download link. Add slight: temporarily render at scale 1 with +spp? Keep simple: capture current canvas.

Audio engine:

• ctx lazy init on first gesture.
• Pad: 2 saw osc detuned ±4 cents through lowpass 600Hz, gain 0.05, slow LFO on cutoff. Chord: root 110 + fifth + octave? Use triangle for softness.
• Tok (add/remove): short sine blip pitch 300-500.
• Whoosh (preset): filtered noise sweep.
• Shutter (snapshot): click = short noise burst hp filtered.
• Master mute toggle M. Volume modest.

HUD layout (DOM, not WebGL):

• top-left: title "Photon Garden", subtitle; stats: SPP count, fps, tier; convergence progress bar.
• top-right: buttons row: Presets (cycle), Add, Delete, material buttons (Matte/Metal/Glass/Light) apply to selection, Orbit toggle, Mute, Help, Snapshot.
• bottom: sliders: Sun elev, Sun azim, Sun size? intensity, Aperture, Focus, Exposure. Keep 5 sliders + quality select maybe. Put in collapsible panel (toggle ⚙).
• help overlay: shortcuts list; toggled H or ?.

Style consistent with index dark theme.

Responsive resize handler.

Deep-link? Previous demo had deep-linkable URLs — nice but optional; skip to control scope (already big).

Now — writing all this code correctly in one shot is the challenge. Let me write it in sections and double-check GLSL carefully.

Potential GLSL pitfalls:

• Integer/float mixing: be careful float(uSpp), int(mp.x+0.5).
• Arrays indexed by non-constant int: allowed for uniforms in GLSL ES 3.0 with dynamic indexing? Indexing uniforms with dynamic index is allowed in fragment shaders in ES 3.0 (for uniforms, yes — dynamically uniform not required in ES3 for uniform arrays? In GLSL ES 3.00, indexing of uniform arrays with any integral constant-index-expression... Actually ES 3.0 allows arbitrary indexing into uniform arrays (only sampler arrays need constant). Yes fine.
• break inside loop with struct return — fine.
• recursion none.
• PCG uint arithmetic — fine in ES3. But careful: ShaderMaterial default precision: three sets precision highp float; precision highp int; ok. uint ops ok.
• texture2D on sampler2D with float texture: needs LINEAR filtering — float linear filtering requires OES_texture_float_linear; use HalfFloatType (linear filtering widely supported for half float in WebGL2). I'll use HalfFloatType for accum targets. Values clamped to <= 40 by firefly clamp; halffloat fine.

One more consideration: reading tPrev and writing to same target — must ping-pong. Implement accumRead/accumWrite swap after each PT pass. Present pass always reads accumWrite (the latest). After swap, accumWrite becomes the texture just written? Let me define: before PT pass, uniforms.tPrev = accumA.texture, render to accumB. After render, present reads accumB. Then swap roles: next frame tPrev = accumB, render to accumA. So maintain read and write refs, swap after each PT render; present uses write (last rendered). ✓.

Reset accumulation: set samples=0 → blend = 1 (overwrites prev) — no need to clear texture since blend=1 ignores prev? mix(prev, acc, 1) = acc ✓.

Multiple spp per frame: blend = spp/(samples+spp) ensures equal weight: new = (prevsamples + accspp)/(samples+spp) where acc is average of spp. ✓ samples += spp after.

EMA clamp when interactive: blend = max(blend, 1/24). And samples tracking: keep samples += spp anyway for display; on interactive, maybe set samples = min(samples, 24)? For display honesty, keep effectiveSamples = min(samples+spp, 24*...) eh— display "samples" as accumulated count; in EMA mode cap at 48: samples = min(samples+spp, 48). Fine.

Converged cap: 8192.

Firefly clamp uClamp = 32.

Sky model:

Note sun color already "radiance-like" e.g., vec3(40,35,30)... For direct lighting: E = Lω with ω=2π(1-cosA): for A=0.53° (real sun) ω≈6.8e-5, L needed ~ 1e5 for E~7 — too hot for halffloat? 1e5 < 65504? No, exceeds. Use bigger sun (demo default angular radius ~3-4°, stylized) → ω = 2π(1-cos4°)=0.0153; L=300 → E≈4.6 nice. Sun color 300 fits in halffloat ✓ (max 65504). Firefly clamp at 32 would clamp direct sun contributions... the NEE sun contribution added per bounce is Lωalbedocos/π ≈ 4.6*... after multiply by albedo/π: ~1.4 fine. The clamp applies to final accumulated sample radiance — camera rays hitting sun disk would be 300 → clamped 32, slight energy loss on direct view but prevents bloom blowout; acceptable? Bloom threshold 1 — sun disk at 32 blooms nicely. OK set clamp 48. Fine.

Emissive spheres: emission values like 8-30.

NEE toward light spheres: solid angle ω=2π(1-cosA) with cosA=sqrt(1-(r/d)²). Contribution = alb/π * cosθ * Le * ω * numLights.

Also sample sun for metal/glass bounces? Skip (specular NEE less important; disk visible through reflections naturally since sky() includes disk; reflections of sun in metal sphere will show. For rough metal (fuzz), disk blur appears via random scatter hitting disk — noisy but fine.

Also after diffuse NEE we add emission of light when path hits it (L += T*emi) — double counting with NEE? Standard issue: NEE + naive emission-hit both count direct lighting. Proper approach uses MIS or "first bounce only NEE" trick. Simple fix used in smallpt-style demos: don't add emission when hit after a diffuse bounce for which we already did NEE toward that light? Complexity... Simplify: only do NEE at the FIRST diffuse vertex after a specular chain start? Common shadertoy simplification: perform NEE at every diffuse vertex but DON'T accumulate emission when a diffuse-sampled ray hits a light (only camera/specular hits add emission). Implement: flag fromDiffuse (last bounce was diffuse sampling): if hit light and fromDiffuse → skip emission (it was already counted via NEE). But that introduces bias if light sampling picks only one light... acceptable visually; actually correct under single-light NEE if that light is THE sampled one... we pick random light; skipping emission from all lights when fromDiffuse undercounts others. Whatever — energy discrepancy slight, demo looks right. I'll do: emission added only if !fromDiffuse (camera ray or after specular). And NEE picks ONE random light each diffuse vertex (times numLights). That's the classic approach; looks correct.

Sun disk similar double count: fromDiffuse rays hitting sun disk — skip sun disk in sky() when fromDiffuse? sky() called on miss with no knowledge... pass a bool. sunDisk included if !fromDiffuse. halo keep. Minor.

Alright. Also planes can't be lights (emission planes add via fromDiffuse rule; cornell light is a sphere, ok). Actually add emission to plane hits too (camera-visible glow) with same rule.

Sphere light selection builds uLightIdx each reset in JS (indices of spheres with type 3 or emission>0).

Type 3 = light: treat hit as terminator: L += emission, break (no scattering). Give light spheres also visible round shape. Yes: if type==3 { if(!fromDiffuse) L+=Temi; else skip? hmm lights should also be NEE-sampled from diffuse vertices — handled. When camera ray hits light: L+=Temi; break. When diffuse ray hits: skip emi, break (already counted). When specular ray hits: add. }

Glass "albedo" as tint (1,1,1) default; colored glass tint e.g. (0.9,0.98,0.95).

Metal albedo gold (1.0, 0.766, 0.336), silver (0.97), copper.

Now the present/grade/post chain uniforms: exposure, grainAmt, vignette, time, caAmt.

UnrealBloomPass import from addons.

OutputPass not used; grade pass does sRGB encode manually via pow(col, 1/2.2) — better use ACES then accurate sRGB: mix(12.92*c, 1.055*pow(c,1/2.4)-0.055, step(0.0031308,c)). I'll write helper.

ACES filmic approximation (Narkowicz):

OK. Also grain: hash(uv*time) * amt added in LDR.

CA in present pass: sample tAccum thrice with radial offsets:

uCA ~ 0.0015.

Vignette in grade.

HUD: build with DOM + CSS. Reuse style vibe from index (dark, indigo accents).

Alright — also "focus" slider: 1..30 world units; plus "Auto" button sets focus to selected/target distance. Aperture slider 0..0.5. Exposure 0.25..4 (log scale slider -2..2 → 2^x). Sun: elevation 2..85°, azimuth -180..180, size 0.5..8°, intensity 0..600.

Also sky follows sun elevation: compute skyZenith/Horizon from elevation with sunset blend; plus preset tint multiplier. Compute in JS, pass colors.

skyColor(elev): day: zenith (0.19,0.34,0.65)*1.0, horizon (0.75,0.82,0.9); sunset: zenith (0.12,0.1,0.28), horizon (1.0,0.45,0.2); night: zenith (0.01,0.015,0.04), horizon (0.05,0.06,0.1); blend by elev: elev>25 day; 4..25 mix sunset; <4 mix night (to -6). Sun color warm at low elev: lerp white (1,0.98,0.95)→(1,0.45,0.15). Times intensity.

Also studio preset uses skyStrength 0.35 gray gradient? Provide per-preset skyMode: 'physical' or 'studio' (fixed soft gradient + big soft sun). Keep 'physical' for all but set studio skyStrength moderate.

Time to write. I'll write the whole file in one go, carefully. Estimate ~900-1100 lines. Then sanity check by parsing with node (syntax check of JS via node --check on extracted module? The module uses import from URL — node --check only parses; fine, do syntax check by extracting script to .mjs and running node --check). GLSL can't be validated easily — maybe glslangValidator not installed. I could try npm i glslang? Offline? Probably no network... there IS network (import_url tool exists; unpkg reachable). Could install glslang via npm? Overkill; I'll hand-verify GLSL thoroughly.

Actually maybe I can validate GLSL with a quick node script using headless-gl? Not installed; npm install may work but native build risky. Skip; careful manual review.

Let me write the file now. I'll create /tmp/photon.html first, then copy to /space/demos/044-photon-garden/index.html.

Directory name: 044-photon-garden. Title: "Photon Garden".

Let me write the code.

Key JS structures:

presets as functions building scene + camera + sun settings.

Upload uniforms function syncScene():

PT uniforms object:

Int uniform arrays in three: PureArrayUniform set_value for int uses setValueV1iv which accepts arrays. ✓

PT material:

Render loop:

Wait present must read the texture AFTER it's written — accumWrite.texture ✓ before swap.

RT creation:

Resize: recreate RTs at internal res; reset accumulation.

Camera basis update: from perspective camera used by OrbitControls (real THREE.PerspectiveCamera for orbit logic & raycasting) — copy pos & basis to uniforms. camFwd = getWorldDirection; right = cross(fwd, up).normalize... compute via matrix: right = (m.elements[0], [1], [2])? Use camera.matrixWorld columns: x col = right, y col = up, fwd = -z. tanHalfFov = tan(fov/2 rad).

OrbitControls change → on 'change' event set needsReset & interacting flags. Also during auto-orbit, each frame rotate azimuth: controls.autoRotate = true; autoRotateSpeed slow. While autoRotate, accumulation never converges → EMA mode (blend clamp 1/24) → looks like noisy realtime PT. Toggle button "Turntable".

Interacting state: pointerdown dragging sphere OR controls active (user input) → use EMA clamp + maybe reduce spp to 1 and renderScale low temporarily? Keep simple: EMA clamp + spp stays.

But converged-stop vs autoRotate: if autoRotate on, never "static", so keep rendering (samples capped at 48 in EMA). ✓

UI events summary (DOM):

• presetButtons: one button cycling + label, or 5 small buttons. I'll render small buttons.
• material buttons apply to selected sphere; if none selected, hovered.
• sliders bound to params; each input → resetAccum.

Sun param recompute function updateSun() sets uSunDir from elev/azim, colors, sky colors, sunCos from size.

Raycast helper JS:

Pointer events on canvas:

• pointerdown: pickSphere → if hit: selected=idx, dragging=true, controls.enabled=false, setPointerCapture. else selected=-1? Only clear selection on empty click (not drag) — track moved distance; on pointerup if !moved and no sphere hit → deselect.
• pointermove: if dragging: mode = shiftKey? vertical : ground. Compute new pos; sphere.p updated; y = mode vertical? clamp(hit.z? use plane facing camera: plane with normal = camFwd through original point) : keep y=r (resting) — nice: spheres rest on ground by default. For cornell (enclosed) resting on floor fine. syncScene() each move (re-upload arrays) + EMA mode. Also update hover highlight cursor.
• pointerup: dragging=false, controls.enabled=true; if !moved && picked empty → deselect.
• wheel: if hover/selected sphere: adjust r (preventDefault, stop orbit zoom): r *= e.deltaY<0?1.07:0.93; y=r if resting; else controls zoom default.

Keys:

• 1 matte,2 metal,3 glass,4 light (apply selected/hovered). For light: set emission default (14,12,10), type 3. For others emission 0.
• A add at ground point under cursor (raycast y=0; if none, in front of camera at dist focus).
• X or Delete remove selected.
• C cycle preset. T turntable toggle. B bloom toggle. G grain toggle. M audio. H or / help. P snapshot. R reset accumulation (manual re-render; also clears EMA).

All interactions call syncScene()/resetAccum() appropriately.

Audio module (compact):

Start unmuted-on-first-gesture? Previous demos: mute toggle; audio starts on first interaction (required by policy). I'll auto-init on first pointerdown, muted=false, button shows state. M toggles.

Pad: oscillators started once; gentle.

Adaptive quality & fps meter:

Also cap DPR for composer: dpr = min(devicePixelRatio, 1.75).

Snapshot:

renderer created with preserveDrawingBuffer:true to allow capture (slight perf cost but ok) — or render then capture synchronously (same task) which works without preserve. I'll render + toBlob synchronously; safe.

HUD stats update every 0.25s: samples, spp/frame, fps, tier name, converge bar width, "converged" badge.

Help overlay div with table of shortcuts; hidden toggle.

Now write the PT fragment shader string fully and carefully. Let me write it:

RNG:

Intersect:

Scene hit:

Shadow test with allowed light:

For sun: allowId=-1 → any hit blocks ✓. For light sphere li: allowId=li, any other hit blocks; hitting nothing also "visible"?? If the sampled cone direction toward light might actually miss the light sphere (edge jitter) → then no hit → returns true incorrectly (counts light when ray missed it). But sampling within cone asin(r/d) guarantees geometric hit of the sphere (cone exactly subtends the sphere). Edge float issues minor. ✓

Sky with fromSpec flag:

Sampling helpers: cosineDir, coneDir (build basis).

schlick:

Note when going inside→outside eta=ior, r0 same. ✓

radiance:

I'll use three@0.170.0. Now write the demo file. It's long; I'll write it in parts to /tmp/photon.html using multiple write operations (create + append via shell heredocs might be messy with quotes — better use read_write_file_in_shell_environment write mode for full content in one go; the tool supports large content presumably. The file will be ~40-50KB. Let me split into 2-3 appends to be safe: first write part 1 (mode write), then append? The write tool replaces whole file; for appending I can use execute_shell_command with cat >> file << 'EOF'. Quoting heredoc with 'EOF' prevents variable expansion; content contains backticks and $ (GLSL template literals) — heredoc with quoted delimiter is safe for everything except a line containing exactly EOF. OK.

Plan: part 1: HTML head + CSS + body DOM + importmap + start of module script (imports, renderer setup, scene data, presets). Part 2: shaders. Part 3: main JS logic (uniform sync, interaction, audio, UI, loop) + closing tags.

Let me draft carefully.

Part 1 draft:

Now the JS. Let me write it fully, being careful.

Constants & state:

Hmm — outputColorSpace affects final render to screen; ShaderPass output isn't converted. Set outputColorSpace = LinearSRGBColorSpace to avoid any double conversion. Grade shader outputs sRGB-encoded values.

Camera + controls:

Accum targets:

Shaders — passVert shared:

PT fragment (as drafted). Present fragment, grade fragment.

Scene data & presets:

Presets list:

Studio Trio:

Caustic Cluster:

Cornell Box:

Sunset Field:

Ember Ring (softbox):

Sky recompute:

hmm simplify:

THREE.MathUtils.smoothstep(x, min, max) ✓.

Sky strength per preset; sliders could include "sky" too — skip, sky strength preset-based (studio 1.0, cornell 0, ember 0.12).

pt uniform sync:

resetAccum: samples=0.

Camera basis upload per frame (cheap):

Render loop:

Wait — present reads accumRead after swap = last written ✓.

Converged logic: when samples>=cap → converged=true → skip PT. If user interacts → resetAccum (samples=0, converged=false). Turntable: samples capped 48, converged never (since interactive branch always renders; converged stays false). Let me restructure cleanly:

controls 'change' event: controlsChanged flag → in loop: resetAccum() (also on window resize etc.). Also set interactUntil = now+300ms on change events so during drag orbit uses EMA? Actually orbit change → we reset (blend=1, no history) → image is 1spp noisy while orbiting, sharpens when stop. That's the nice "realtime PT" behavior — no EMA needed for orbit. But damping continues change events → reset until damping settles ✓.

Sphere dragging: keep EMA (history retained since scene mostly same? no — sphere moved, ghosting!). Any scene/camera change MUST blend=1 (full reset), else ghosts. So dragging also resets each move → 1spp noisy while dragging, sharp after. Fine — remove EMA complexity entirely! Turntable = continuous reset → 1spp noisy motion (authentic PT preview). Simpler and honest.

But then "samples" display during turntable ~0. OK.

So: interactUntil not needed. Any change → resetAccum → blend = spp/(0+spp)=1 ✓.

Grain keeps final image alive even when converged ✓.

Auto focus: focusDist = dist to target each frame when auto; slider manual sets focusAuto=false; "Auto" button re-enables.

Adaptive tiers:

Sizes:

Present pass reads accumRead with linear upscale ✓ (vUv full screen).

Composer: RenderPass(presentScene, quadCam) → bloom → grade.

gradeShader = {uniforms:{tDiffuse, uTime, uVig, uGrain, uExposure...}} — exposure in present instead. Grade: tDiffuse, uTime, uGrain, uVig.

Present uniforms: tAccum, uExposure, uCA.

Interaction raycasting:

Pointer handlers with capture, drag modes, hover cursor, wheel-resize. While dragging: interactUntil = now+200 each move; syncScene() (re-upload) — cheap for 20 spheres.

Add sphere (A or button): ray from current pointer (or center of screen) → ground plane y=0; pos; random pastel albedo; r 0.45-0.6; type matte; select it; syncScene.

Delete (X): remove selected; selected=-1; syncScene.

Material apply (1-4): target = selected>=0?selected:hover; mutate:

• matte: type 0, emission 0, keep albedo.
• metal: type 1, fuzz 0.12 default, albedo→ if it was light, set silver .95.
• glass: type 2, albedo ~ (0.98,0.99,1.0), ior 1.52.
• light: type 3, emission [14,12.5,10] (scaled by?), keep albedo. syncScene.

mat-target label shows selected index/type.

Turntable toggle: controls.autoRotate; speed 0.8; button .on class.

Snapshot P.

Audio: compact module with pad + sfx. Start on first pointerdown (resume). Button toggles master gain; label 🔊/🔇.

Pad:

Sfx functions as earlier planned.

Keyboard handler with e.key.

Help overlay content: shortcuts table.

Preset buttons created from PRESETS; clicking loads preset: S.spheres/planes replaced, sun params, skyStrength, camera pos/target (set controls.target + camera.position), sliders refresh, selected=-1, syncScene(), whoosh sfx.

Sliders: elev, azim, size, intensity, aperture, focus, exposure. Each has span readout. input → update params + resetAccum (sun/aperture/exposure changes need re-render? exposure affects present only — no PT reset needed; grain none; CA none; aperture/focus/sun → resetAccum).

Also F key toggles auto-focus.

Bloom toggle B: bloom.enabled. Grain G: grade uGrain 0/0.05.

Edge case: pt.uSpp as int uniform value number ✓.

Now present frag:

grade frag:

sRGB: pow 1/2.2 fine.

Bloom input is HDR pre-tonemap (present output = accumexposure, up to ~484). threshold 1.0 ✓ strength 0.5 radius 0.55.

The composer buffers: EffectComposer default uses HalfFloatType since r152 ✓.

One catch: RenderPass clears with renderer clear color (black) ✓.

PT pass: I render directly via renderer (not composer) ✓.

Now PT fragment full text — let me write it completely and carefully:

schlick defined before radiance:

main:

Wait: rng seed: uint(frag.x) truncation ok. Multiplication overflow wraps (uint) fine.

Note uint(uSeedBase) — uSeedBase float increments per frame; fine.

Hmm: if(uAperture > 0.0) — aperture in world units; default 0.04 → subtle DOF.

texture2D auto-converted ✓.

One concern: Hit h; h.t=1e30; h.kind=0; h.id=-1; h.p=vec3(0.); h.n=vec3(0.); struct field init ok.

GLSL ternary with vec3 in mkBasis: abs(n.y) < 0.99 ? vec3(0.0,1.0,0.0) : vec3(1.0,0.0,0.0) — allowed ✓.

pick = pick >= uNumLights ? uNumLights-1 : pick; int ternary ok.

Looks solid. Now uniforms JS names must match exactly. For pt uniforms object I referenced pt.uX — I'll create const ptU = {...} and material uniforms: ptU.

uSeedBase float per frame += 1.

Present frag as above. Grade frag as above.

Now the full JS main part. Let me also add a tiny loading of controls change:

With damping, change fires continuously while moving ✓.

Drag state machine:

Simpler: store drag start sphere pos; on move, compute target point:

• ground mode: intersect ray with plane y = sphere.p[1]; newXZ = hit.xz (clamped radius 30); sphere.p[0]=x; p[2]=z; keep y (if resting y=r stays).
• vert mode: intersect ray with plane through sphere center facing camera (normal = camFwd); newY = clamp(hitPt.y, r, 20); set p[1]=y. Also allow x/z from that plane? Vertical plane drag: use plane normal = camera forward → movement in screen plane; set p = hitPt clamped. That's intuitive (like move in view plane). Ground mode = move on ground plane.

For "resting" behavior: when user drops sphere (pointerup) and mode ground → snap y=r (rest). During ground drag keep y=r. OK: ground drag sets y=r always.

pointermove when not dragging: hover = pickSphere(ray); canvas.style.cursor = hover>=0?'pointer':'grab'; update label maybe.

wheel: if(hover>=0||selected>=0){ target = hover>=0?hover:selected; e.preventDefault(); s.r clamp(s.r * (e.deltaY<0?1.08:0.925), .15, 3); if resting (p[1]===oldR) p[1]=s.r; syncScene(); } — note controls zoom also listens wheel on same element; need stopPropagation + preventDefault BEFORE controls handler: OrbitControls adds its wheel listener on the canvas (domElement). My listener added after → runs after. Add with capture:true and stopPropagation to preempt. OrbitControls wheel is on domElement too; capture phase listener on canvas runs first ✓ canvas.addEventListener('wheel', fn, {passive:false, capture:true}) then e.stopPropagation() prevents OrbitControls' (bubble-phase) handler ✓. Only stop when hovering a sphere; else let zoom.

pointerup: if drag && !moved → nothing (selection stays); if !drag && !moved && hit<0 → deselect. Actually if pointerdown missed sphere → drag=null; on up: if !moved (click on empty) → selected=-1.

Set pointer capture on canvas during drag ✓ controls.enabled=false during drag.

Also disable controls when shift+drag? controls handles left-drag rotate; shift+left-drag is pan in OrbitControls? Default: shift doesn't change mouse buttons mapping; left always rotate. When sphere hit we disable. OK.

syncScene also called during drag move → resets accumulation each move ✓ (syncScene calls resetAccum).

Preset apply function:

Give presets optional exposure/aperture overrides. Set sliders UI refresh: function refreshSliders().

camera.position.set(...P.cam.pos); controls.target.set(...P.cam.tgt); controls.update(); selected=-1; syncScene(); updateSun(); refreshUI(); sfx.whoosh();

Keyboard:

Buttons wired similarly.

Audio engine:

blip for add (520Hz), delete (180Hz), material (660), snapshot shutter.

Noise:

OK. Autoplay: ensure on first pointerdown; setOn(true) also then (default audio on? previous demos: M mute; I'll default ON after first gesture, button shows 🔊).

Snapshot:

canvas.toBlob after composer.render in same synchronous stack — backbuffer still valid ✓ (usually; add preserveDrawingBuffer:true to be safe; minor perf cost acceptable). I'll set preserveDrawingBuffer:true.

Help overlay HTML with rows.

Sun sliders: elev(-4..85), azim(-180..180), size(0.5..10), intensity(0..600 log? linear fine), aperture(0..0.35 step .005), focus(1..30 step .1; manual sets focusAuto=false; plus auto chip), exposure(0.25..4 step .05).

That's 7 sliders → 7 .sl divs. Readouts updated.

Also a quality note: spp high tier=2 → heavy on big screens; adaptive will handle.

Bloom toggle button? B key only; fine.

Grain default 0.035; toggle.

CA default 0.0012.

Vignette 0.42? my formula: col = 1 - uVigdot(q,q)(1+dot(q,q)); q range ±0.5 → dot max 0.5 → factor 1-0.420.5*1.5=0.685 edges. ok uVig=0.36.

Exposure default 1.0.

Now — assemble the entire file. Also add subtle CSS scrollbars none, all good.

One more check: UnrealBloomPass constructor (resolution, strength, radius, threshold) ✓.

Grade shader tDiffuse uniform — ShaderPass handles if uniforms has tDiffuse; include tDiffuse:{value:null} ✓.

Present pass: RenderPass renders presentScene (fullscreen quad with presentMat). presentMat uniforms: tAccum (set each frame), uExposure, uCA. ✓

renderer autoClear default true; PT pass setRenderTarget then render clears ✓.

DPR: renderer.setPixelRatio(min(dpr,1.75)); composer.setPixelRatio same.

accum RT sized at CSS*scale (not dpr) — deliberate (internal compute res) ✓.

Note: converged state + grain: composer.render() each rAF keeps grain animated ✓ cheap.

Turntable: controls.autoRotate=true; controls.update() triggers 'change' → resetAccum each frame ✓ blend=1 → 1-2 spp realtime preview ✓ nice.

Let me also handle page visibility (clock delta clamp already).

WebGL2 check: if(!renderer.capabilities.isWebGL2){ show fallback message } — half float RT requires WebGL2; message div.

Let me also double check renderer.outputColorSpace: With composer + ShaderPass last, three r152+ applies OutputPass normally; here final ShaderPass writes directly to canvas framebuffer. Three sets the drawing buffer colorspace? ShaderMaterial fragment output raw → canvas displayed as-is. Our grade shader outputs sRGB-encoded → matches canvas expectation (assume sRGB). Set renderer.outputColorSpace = THREE.LinearSRGBColorSpace to prevent three from injecting colorspace_fragment conversions into built-in materials (we barely use built-ins; OrbitControls none). Actually three only auto-appends encoding for built-in materials when rendering to screen; ShaderMaterial untouched. Fine either way — set LinearSRGBColorSpace.

UnrealBloomPass internal materials: it does its own thing; fine.

One subtle thing: THREE.MathUtils.smoothstep(x, min, max) signature (x, min, max) ✓.

Preset camera target y ~1.

Sphere count cap: addSphere if length>=MAXS → flash label? just return.

Cornell preset skyStrength=0 → sky black; sun inten irrelevant; keep sliders still adjustable (sun does nothing visible inside box except through open front... lightVisible sun rays from inside toward sky exit front opening? Sun NEE requires dot(n,sd)>0 & visible — rays can exit through open front → small contribution, fine).

Also planes count cornell = 5 ✓ ≤8.

For "Ember Ring" preset skyStrength 0.12 & sun inten low 40.

Now camera near/far fine.

Potential precision: uSeedBase float increments unbounded per frame; after hours float precision ok (frame counts < 1e6 fine).

Reset accum on slider input of aperture/focus/sun ✓; exposure only present → no reset needed (nice instant feedback).

Focus slider event: focusAuto=false on manual input.

Also focusAuto default true → uFocusDist set from camera dist each frame in syncCamera.

Aperture default 0.045.

Time to write files. Also stats: "spp" label shows accumulated samples count — rename "samples".

Let me now write the complete file text. I'll write to /tmp/photon.html via write tool in one call (content ~45KB). Risk: tool payload limits; I'll split into 3 sequential writes: first write full=false... The tool only does full-file writes or line-range. I'll do: write part1; then execute_shell_command heredoc appends for part2/part3. Heredoc with 'PHOTON_EOF' quoted — content includes backticks and ${} (JS template literals) — quoted heredoc passes them literally ✓. Ensure delimiter string never appears in content.

Alternatively write 3 files and cat them together — cleaner: /tmp/p1.html /tmp/p2.js /tmp/p3.html then cat. I'll just do sequential heredocs.

Let me compose the FULL content now, carefully, part by part.

Part 1: DOCTYPE→style→body DOM→importmap→<script type="module"> imports + constants + renderer + scene data + presets.

Part 2: shader strings (passVert, PT_FRAG, PRESENT_FRAG, GRADE_FRAG).

Part 3: uniforms, targets, passes, sync functions, interaction, audio, UI wiring, main loop, init; closing script/body/html.

Preset details finalized:

mulberry:

Sphere y=r → resting ✓. Ember ring spheres r=0.62 y=0.62 ✓.

sph() signature: sph(x,y,z,r,albedo,type,fuzz=0,ior=1.5,emission=[0,0,0]) ✓ used consistently (MATTE calls omit fuzz/ior → default fine since type 0 ignores).

UI preset buttons: PRESETS.forEach create button with name, click → loadPreset(i), toggle .on.

Now HUD ids: st-spp→samples count; rename label "samples". v-elev etc spans.

Sliders markup: 7 sliders (elev, azim, size, inten, aperture, focus, exposure).

Focus auto button: small button in focus slider label? Make a separate tiny button row: [auto-focus ✓] toggling focusAuto. Put in .sl for focus: label clickable? Keep key F + a button 'btn-focus' in mat panel? Simpler: clicking the focus slider's toggles auto. I'll add a small button inside focus .sl: <button id="btn-fauto" class="mini on">auto</button>. Style .mini{padding:.1rem .4rem;font-size:.6rem}.

Help content table rows:

• drag / wheel / right-drag: orbit · zoom · pan
• click sphere: select (glows white)
• drag sphere / ⇧ drag: move on ground / in view plane
• wheel over sphere: resize
• 1 2 3 4: matte · metal · glass · light
• A / X: add · delete sphere
• C: next scene preset
• T: turntable preview
• F: auto-focus on/off
• B / G: bloom · film grain
• R: restart accumulation
• M: audio
• P: save PNG
• H: this panel Note about convergence: "Hold still and the image refines itself — noise melts into caustics, soft shadows and true depth of field."

Hint bar text: "drag to orbit · click a sphere · keys 1–4 change material · hold still to converge"

Audio default ON after first gesture.

Main loop + init:

fpsEMA init 60; lastTierCheck time; tierStable.

Loop pseudocode finalized above. Also ptU.uSeedBase.value++ each PT render.

Potential issue: When converged and user drags exposure slider → composer re-renders with new exposure instantly ✓ (present reads accumRead texture which persists).

Now write everything. Also remember renderer.setAnimationLoop? Use rAF loop fine.

Also handle context: OrbitControls listens on canvas; my pointerdown listener also on canvas — both coexist; when sphere hit we set controls.enabled=false BEFORE controls' pointerdown handler? Order: my listener added after controls constructor → controls' handler runs FIRST (already started rotate). To preempt, add my pointerdown with capture:true → capture listeners on same element run before bubble listeners? For listeners on the SAME element, they run in registration order regardless of capture flag? No — at the target itself, capture and bubble listeners all run in the "at target" phase in registration order (modern spec: capture listeners at target run in registration order mixed... actually DOM spec: at-target phase invokes listeners in registration order, capture flag ignored). Hmm — historically capture listeners fire first at target? Per DOM standard, at target both capturing and non-capturing listeners are called in registration order. So capture:true at same element doesn't guarantee preempt.

Solution: attach my pointerdown to a parent (window) with capture:true → runs before canvas handlers ✓. Use window.addEventListener('pointerdown', handler, {capture:true}), check e.target===canvas. If sphere hit → e.stopPropagation() (prevents OrbitControls handler) + e.preventDefault(). Then manage drag via window pointermove/pointerup. Clean.

Similarly wheel: window capture, if target===canvas && hover/selected sphere → preventDefault+stopPropagation.

pointermove for hover: window bubble ok (no conflict).

Drag deltas: use movement via pointermove on window while drag active; setPointerCapture not needed since window-level.

Edge: right-click drag → OrbitControls pan; pointerdown button check: only handle button===0 for sphere pick.

contextmenu prevent on canvas? OrbitControls handles.

Also touch: single-finger rotate (controls), my pointer events also fire for touch — sphere picking then dragging on touch: pointerdown capture preempts controls → sphere drag works on touch ✓. Two-finger → first pointer already... acceptable.

Sun slider input handlers update sun + updateSun() + resetAccum + readouts.

Exposure input → presentU.uExposure.value.

Aperture/focus → resetAccum.

Btn wiring & initial UI text.

updateMatLabel(): mat-target shows selected/hover sphere type name.

applyMat(t):

addSphere():

lastPointer tracked on pointermove (clientX/Y) — init center.

delSphere():

toggleOrbit: autoOrbit=!autoOrbit; controls.autoRotate=autoOrbit; controls.autoRotateSpeed=0.9; button class.

snapshot as planned.

Stats interval.

Sizes/resize listener.

updateSun with sky lerp.

Init sequence:

Careful: loadPreset references slider DOM (refreshSliders) — define after DOM exists (script at end anyway).

sizes() uses TIERS[tierIdx].scale.

loop:

Wait if(converged && samples>0) — converged implies samples≥cap ✓; but when converged and converged... just if(!converged){...}.

But turntable: autoRotate → change events → resetAccum each frame → converged false, samples ~spp → realtime preview ✓.

applyTier(): resize accum (call sizes()) + resetAccum. sizes() recreates composer sizes too — fine.

resetAccum also on any controls 'change'.

Edge: converged true but window blurred... fine.

Also bloom toggle key B → bloom.enabled.

Grain toggle → gradeU.uGrain.value = grainOn?0.05:0.

Now finalize present pass & grade pass uniform names: presentU = {tAccum:{value:null}, uExposure:{value:1.0}, uCA:{value:0.0012}}; gradeU = {tDiffuse:{value:null}, uTime:{value:0}, uGrain:{value:0.05}, uVig:{value:0.36}}.

ShaderPass for grade: new ShaderPass({uniforms:gradeU, vertexShader:passVert, fragmentShader:GRADE_FRAG}) — ShaderPass accepts a shader object ✓ (it clones uniforms? ShaderPass uses UniformsUtils.clone(shader.uniforms) — cloning Vector colors etc fine; but then my gradeU references original, and pass uses cloned! I must reference pass.uniforms after creation. Let me create passes then use gradePass.uniforms.uTime etc. Or set values through pass.uniforms in loop. I'll do: const gradePass=new ShaderPass(GradeShader); and in loop set gradePass.uniforms.uTime.value. Same for toggles: gradePass.uniforms.uGrain.value. OK — reference via pass objects.

Similarly present material is my own ShaderMaterial (no clone) ✓.

Double-check ShaderPass clone: constructor does this.uniforms = UniformsUtils.clone(shader.uniforms) if shader.uniforms ✓. So use gradePass.uniforms.

Write PT material with glslVersion default null → three auto prefixes #version 300 es and compatibility defines ✓.

One more: PT fragment uses texture2D — converted to texture ✓. Uses varying → converted ✓.

uLightIdx int array uniform: value as plain JS array of numbers — three setValueV1iv: for PureArrayUniform with type int, uses gl.uniform1iv(addr, v) — accepts number[] ✓.

Also update uNumLights etc as numbers ✓.

Now — the help/hint CSS on mobile hidden ✓.

Let me also add small crosshair-selected info in stats? skip.

Write the files now. After writing, run node --check on extracted module JS: extract between and → check syntax (imports of 'three' bare — node --check just parses ✓).

Also quickly grep for GLSL obvious issues (balanced braces) via a small node script counting braces/parens in shader strings. I can write a quick sanity script that extracts template literals PT_FRAG etc and counts. Might do minimal.

Let me write part 1 now.

Also include <meta name="description">? optional.

For the index page card:

Check existing card format: let me look at one card's exact markup to replicate (num div?). From earlier grep I saw <h2> and <p>; need to check if there's a num div. Let me grep.

Now I'll write the demo. Plan: create /tmp/photon/ parts and assemble, then copy to /space/demos/044-photon-garden/index.html.

Demo 044: Photon Garden — a progressive Monte-Carlo path tracer playground.

Write part 1 (HTML + CSS + DOM + importmap + module start).

Now part 2: the shaders.

***********************************************************************************************************************************************ly.

Assemble the parts and validate. Check JS syntax with node --check (extract module script), and do a quick GLSL sanity (balanced braces/parens, and check that ${MAXS} template interpolation worked — since the shader strings use ${MAXS} inside a JS template literal in part2 — wait! The PT_FRAG is a template literal containing ${MAXS} — that's intentional JS interpolation. But in my heredoc I wrote ${MAXS} — with quoted heredoc, it's preserved literally in the file ✓, and JS will interpolate at runtime since MAXS=20 is defined ✓.

But wait — in part2, PASS_VERT is a template literal with no interpolation, fine. PT_FRAG has ${MAXS} and ${MAXP} — those are JS interpolations, good.

However — one bug: in main() of PT_FRAG, uint(uSeedBase) — uSeedBase is float uniform; value cycles 1..4096 ✓.

Let me now assemble and run checks:

1. Concatenate parts into final file.
2. Extract module JS → node --check.
3. Extract PT_FRAG after JS interpolation — can't easily without running; instead simulate: use node to evaluate the file's script portion with mocked imports? Too heavy. Alternative: write a small node script that reads the file, extracts the template literal PT_FRAG text, replaces ${MAXS}/${MAXP}, then checks balanced braces/parens and maybe basic token sanity.

Also verify GLSL for reserved words or type errors manually once more by reading the final assembled shader.

Let me assemble first.

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

Checkpoint: 50% time used. Continue efficiently. Next: GLSL validation. Let me simulate the shader generation in node (replace imports with stubs) to get the interpolated PT_FRAG string, then do basic sanity checks (balanced braces/parens, no leftover ${}, etc.). Even better — check if a GLSL validator is available (glslangValidator). Probably not. Quick check + custom checks.

All shaders balanced. No glslangValidator available. Let me try to actually compile the shaders — maybe I can install headless-gl quickly? Risky and slow. Alternative: use a pure-JS GLSL parser? There's glsl-parser on npm... Network is available (unpkg). Let me check if npm is available and try installing a lightweight GLSL validator. @shaderfrog/glsl-parser is a pure JS GLSL parser — could catch syntax errors. Let me try.

Actually first, let me manually review the interpolated PT_FRAG carefully for GLSL errors by reading it. Then optionally try the parser.

All four shaders parse successfully as GLSL ES 3.00 (the stderr warnings are from my crude prefix shim — the parser processes my #define before parsing so gl_FragColor usage was still flagged as undefined semantic analysis, but the parse itself succeeded; the "duplicate vUv" is because my vert prefix declared out vec2 vUv while the shader declares varying vec2 vUv which my shim defines as out → duplicate. That's a shim artifact, not a real issue since three.js converts properly).

Now, deeper semantic review — let me re-read the assembled PT_FRAG once fully to double-check subtle GLSL issues:

1. Hit h; h.t = 1e30; ... — struct default initialization then field assignment ✓.
2. Dynamic indexing uSpheres[h.id] with h.id int — uniform array dynamic indexing is allowed in ES 3.00 fragment shaders ✓.
3. uLightIdx[pick] ✓.
4. if(i == allowId) continue; in loop with uniform comparisons ✓.
5. Ternary returning vec3 in mkBasis ✓.
6. texture2D — three converts ✓.
7. uint(frag.x) frag is vec2 float — components up to ~4000, fine.
8. uint(uSeedBase) ✓.

One real concern: in three.js r170, ShaderMaterial with WebGL2 — three prepends #version 300 es ONLY if material.glslVersion === THREE.GLSL3? Let me recall precisely: WebGLProgram builds prefix. For WebGL2, the prefix includes:

only when parameters.isWebGL2 && parameters.glslVersion === GLSL3? Hmm. Actually I recall:

and then in the prefix for WebGL2:

Wait, but #define attribute in without #version 300 es would be invalid GLSL ES 1.00 (in/out don't exist in ES 1.00 shaders... actually 'in'/'out' as macro replacements of attribute/varying → the shader compiles as ES 1.00 where 'in' is... hmm, GLSL ES 1.00 does have 'in' as a reserved keyword but not usable for global declarations).

Let me actually check three r170 source of WebGLProgram to be sure. From memory of three r150+:

Hmm — I genuinely recall that for WebGL2 three ALWAYS emits #version 300 es with compatibility defines for non-raw ShaderMaterials (since r118 or so). Yes — in WebGL2 mode, all shaders are compiled as GLSL ES 3.00 with auto-conversion defines. That's why my earlier demos (r160) used texture2D/gl_FragColor style with uint arithmetic? Did 043-hyperfold use uint ops in shaders? Not sure. My current parser test assumed #version 300 es and it parsed.

To be safe, let me verify with the actual three@0.170.0 source — fetch WebGLProgram.js from unpkg and grep for 'version 300'.

***************************************************************************************************************************************L2.

Confirmed: three.js r170 emits #version 300 es with gl_FragColor/texture2D/varying compatibility defines for non-raw ShaderMaterials. My shader style is fully compatible. uint arithmetic, inout uint params, dynamic uniform indexing — all valid GLSL ES 3.00.

One thing to note: unrollLoops — three's WebGLProgram unrolls loops matching a specific regex pattern (for ( int i = X; i < Y; i ++ ) with #pragma unroll_loop_start markers only). My loops like for(int i=0;i<20;i++) — the unroll regex looks for #pragma unroll_loop_start ... for ( int i = 0; i < 20; i ++ ) format? The unrollLoops function only processes loops between #pragma unroll_loop_start and #pragma unroll_loop_end. My loops don't have those pragmas → left as-is ✓.

Also filterEmptyLine — fine.

Now let me do a full runtime smoke test. Best option: run the actual page in a headless browser. Is there a headless chrome/puppeteer available? Probably not installed. Check quickly: which chromium google-chrome chromium-browser. If not, try npx playwright? That downloads browsers (~100MB) — network is available; time budget ~25 min left. Could be feasible but risky.

Alternative: write a small node test harness that mocks just enough of three.js? Too complex.

Alternative: use three from npm in node with a software GL context (gl package = headless-gl). headless-gl supports WebGL1 only! My demo needs WebGL2. So headless-gl can't test it.

Check for chrome availability.

No browser available. Installing playwright + chromium would take significant time (~150MB download) and might exceed remaining budget. Given:

1. JS syntax validated with node --check.
2. All shaders parse as GLSL ES 3.00 with a real GLSL parser.
3. three.js shader prefixing behavior confirmed from source.

Let me do a final careful manual review of the assembled file — particularly the JS logic for bugs (uniform naming consistency, DOM ids, event flow). Let me re-read the full assembled index.html critically.

This section looks fine. A few things to double-check in a runtime sense:

1. ShaderPass clones uniforms — I reference gradePass.uniforms.uGrain.value and gradePass.uniforms.uTime.value — correct.

2. EffectComposer + RenderPass with clear — fine.

3. bloom.enabled — Pass.enabled is supported ✓.

4. Potential issue: RenderPass(presentScene, quadCam) — RenderPass renders scene; presentMat samples tAccum which is a render target texture — feedback? tAccum is accumRead, not being written while composer runs ✓.

5. The PT pass writes to accumWrite while reading accumRead ✓ no feedback.

6. First frame: tPrev = accumRead (2x2 uninitialized → black) with blend=1 → overwritten ✓.

7. controls.addEventListener('change', resetAccum) ✓.

8. PlaneGeometry(2,2) with quadCam ortho — covers NDC fully ✓. But wait: the PT material renders PlaneGeometry(2,2) at z=0 with gl_Position = vec4(position.xy, 0, 1) — ignores camera ✓.

9. window.addEventListener('pointerdown', ...) with AudioSys.ensure() — creates AudioContext on any pointerdown (even on UI buttons) — that's a user gesture ✓ good. But audio starts muted (master.gain=0, on=false) until toggled via M/button. Good default: many demos auto-start on first gesture. Should audio default to ON after first gesture? The button shows 🔇 initially. Let me keep opt-in (muted by default) — actually previous demos had audio ON after first interaction with a mute toggle. Hmm, mixed. To avoid annoyance but match collection: I'll auto-enable audio on FIRST canvas pointerdown (since it's a strong gesture), button reflects state. Let me adjust: in pointerdown capture handler, after ensure(), if never toggled → setOn(true). Add flag audioTouched. Simpler: make the M button reflect; auto-enable on first gesture. I'll add that.

10. syncScene() called during drag every pointermove — uploads arrays each move, fine.

11. In pointermove handler when dragging: drag.mode = e.shiftKey ? 'view' : 'ground' — updates live ✓.

12. Bug check — window.pointerup handler: after dragging, controls.enabled = true. But if pointerdown hit sphere → we stopped propagation → OrbitControls never saw pointerdown → its internal state is idle ✓ no stuck drag. If pointerdown missed sphere → OrbitControls started a rotate drag → on pointerup my handler runs: drag===null → checks click-on-empty → pickSphere... during an orbit drag release, e.target is canvas and pickSphere(ray) might be <0 → selection cleared after every orbit! Bug: orbiting then releasing over empty sky would clear selection. Minor but annoying. Fix: track whether the pointer moved between down and up (only treat as click if small movement). Add downPos recorded on every canvas pointerdown (in the capture handler, before sphere check) and in pointerup only deselect if moved < 4px.

13. ui.focus(focusVal) in refreshUI sets slider; focusVal init 8 ✓.

14. bindSlider — get param unused; fine.

15. loadPreset calls controls.update() which fires 'change' → resetAccum (fine, already resetting).

16. Cornell sun inten 0 → uSunColor = 0 → NEE adds 0 ✓; uSunCos < 0.9999999 still true → wasted shadow rays, fine. Sky strength 0 → black outside ✓.

17. Adaptive tier on resize: sizes() disposes and recreates RTs ✓.

18. fpsEMA init 60, dt from clock ✓.

19. Snapshot: composer.render() then toBlob ✓ (preserveDrawingBuffer true also set).

20. uSeedBase modulo 4096 — with spp loop using same rng stream per frame; decorrelated across frames via seed ✓.

21. mat-target update on hover — pointermove when not dragging ✓.

22. iOS/touch: pointerdown capture works for touch ✓; shiftKey n/a → ground drag ✓. HUD sliders hidden on small screens ✓.

23. Present pass CA sampling — texture2D(tAccum, vUv + d) fine.

24. A subtle one: In radiance() for planes with emission — cornell ceiling? No emission planes used; fine.

25. if(!fromDiffuse) L += T * emi; for matte spheres with emission 0 ✓.

26. Light spheres as NEE targets: sinA2 < 1.0 guard when surface point outside sphere ✓.

27. ptU.uLightIdx int array: value new Array(MAXS).fill(0) — plain array of numbers ✓ (three uploads via uniform1iv — number array accepted? For PureArrayUniform int type, setValueV1iv does gl.uniform1iv(addr, v) — v must be Int32Array or sequence? WebGL uniform1iv accepts sequence — a plain JS array works ✓.

28. UnrealBloomPass resolution Vector2(640,360) — composer.setSize updates it ✓.

29. renderer.outputColorSpace = LinearSRGBColorSpace ✓ avoids double conversion (grade does its own gamma).

30. Bloom threshold 1.0 on HDR values ✓.

Now fix issue #12 (selection clearing after orbit) and #9 (auto-enable audio on first canvas gesture). Also one more: in pointerdown capture handler — AudioSys.ensure() runs for ANY pointerdown including on buttons/sliders ✓ good (gesture). But then auto-enable: do it in ensure? No — enable on first gesture via flag.

Also #hud-mat at top:196px right — might overlap #hud-right if window short; acceptable.

Another check — e.target !== canvas in wheel handler: slider inputs... wheel over panels targets panel elements → passes through ✓.

Keyboard 'c' when typing in input guarded ✓.

Also escape closes help ✓.

Potential improvement: prevent context menu on canvas for right-drag pan? OrbitControls calls preventDefault on contextmenu itself ✓.

Let me apply the two fixes now:

Fix 1: track downX/downY in capture pointerdown (always, when target===canvas); in pointerup, only deselect if moved ≤4px total.

Fix 2: auto-enable audio on first canvas pointerdown:

Add helper updateAudioBtn() to sync button label/class; use in toggleAudio too.

Let me edit part3 in the assembled file directly.

Also update toggleAudio to use updateAudioBtn:

Wait — updateAudioBtn uses $ which is defined later in the UI wiring section (const $ = id => document.getElementById(id);). updateAudioBtn is called only at runtime (after script fully evaluated), so $ const will be initialized by then (calls happen from event handlers after init). But careful: $ is declared with const at line ~1040 area; updateAudioBtn is defined ~line 879. Temporal dead zone only matters at call time, not definition time ✓. Calls happen after script evaluation completes ✓.

But there's one more issue: $('btn-fauto') used inside bindSlider for focus set handler — again runtime ✓.

Also loadPreset calls refreshUI() which calls ui.focus(focusVal) — ui.focus setter writes el.value and label ✓ (doesn't trigger input event → focusAuto stays as-is ✓ good).

One more check — in loadPreset, presentU.uExposure.value = exposureVal and ptU.uAperture.value = apertureVal ✓.

sizes() is called before loadPreset(0) at init; loadPreset → syncScene → resetAccum ✓. camera aspect set in sizes ✓.

Also initial presentU.tAccum.value set in loop before composer.render ✓.

Now re-extract and re-validate JS syntax after edits.

************************************************************************************************************************************************************ML.

All DOM ids present. Now one more critical review pass over the GLSL logic itself — I want to simulate the PT shader logic in plain JS to make sure the math produces sensible images (sanity test the ray tracing: does a ray from the camera through center hit the glass sphere? does sky gradient work? etc.). A quicker approach: port the core math to a tiny JS replica? That duplicates code and risks divergence.

Better idea: use the @shaderfrog parser already done; for semantics, carefully re-read PT_FRAG once more from the generated file.

This all looks correct. A few remaining subtle points to verify:

1. Checkerboard on back-facing plane normal flip: planes use xz-checker regardless of orientation — only floors use checkers, fine.

2. Cornell camera inside box? Camera at (0,1.5,5.8), box spans x∈[-2.4,2.4], y∈[0,3], z∈[-2.4,∞ front open]. Camera z=5.8 is outside the box (front open). Rays enter through the open front ✓. But rays might hit... the box planes are infinite! The left wall plane x=-2.4 extends infinitely in all directions — rays from camera at (0,1.5,5.8) going forward: floor plane y=0 extends infinitely → visible around the box, but albedo is white 0.73 and skyStrength=0 (black sky) → the scene outside the box is white floor fading to black sky — acceptable visually (looks like infinite white floor with a box). Actually the floor will be unlit outside the box (light inside) except sun inten 0 → floor outside box is black, lit slightly near opening... The visible image: the box interior lit, surrounded by black void + faint floor. Acceptable. The infinite walls will block some sky — fine.

But wait — for other presets (open ground plane), cornell's 5 planes aren't present; plane list is rebuilt per preset ✓.

3. Cornell light sphere at y=2.52, r=0.42, ceiling at y=3 → light top = 2.94 < 3 ✓.

4. Ember Ring big softbox light at y=6.5 r=1.7 ✓ above glass sphere center.

5. NEE toward sun when sun.inten=0 → uSunColor=(0,0,0) → contributes 0, still costs a shadow ray — fine.

6. h.n for spheres not normalized? (h.p - c)/r → unit length ✓ (h.p on surface within fp error).

7. lightVisible for the sun when cornell: shadow rays from inside box toward sun direction: will hit ceiling/walls → blocked ✓.

8. Cone-sampled light rays guaranteed to hit light sphere? Cone with half-angle asin(r/d) from h.p — but toC measured from h.p while ray origin is h.p + n*1e-3 — tiny offset could cause edge misses → counted as lit when missing (rare, sub-pixel effect) ✓ acceptable.

9. uint(uSeedBase) — uSeedBase float 1..4096 ✓.

10. presentU.uCA = 0.0012 — subtle ✓.

11. Grade: hash13(vUv*913.0 + fract(uTime)*7.13) — vec2 + float → adds float to both components ✓ (GLSL allows vec+scalar). ✓

12. PASS_VERT: varying vec2 vUv; void main(){ vUv = uv; ... } — uv attribute from PlaneGeometry ✓. ShaderMaterial declares attribute vec2 uv; in prefix ✓.

13. UnrealBloomPass with HDR halffloat buffers ✓ composer default UnsignedByte? EffectComposer default rendertarget type is HalfFloatType since r152 ✓.

14. composer.setPixelRatio exists ✓.

15. In sizes(): camera.updateProjectionMatrix() ✓; resetAccum() ✓.

16. First frame order: sizes() → loadPreset(0) → loop ✓.

One more potential runtime snag: new UnrealBloomPass(new THREE.Vector2(640,360), 0.5, 0.55, 1.0) — strength 0.5, radius 0.55, threshold 1.0 ✓.

Also RenderPass will call renderer.setRenderTarget(readBuffer) etc — fine.

Output to screen: gradePass is last → composer sets renderToScreen on last pass automatically? EffectComposer: in render(), for each pass: pass.renderToScreen = (this.renderToScreen && i === lastEnabledPassIndex)? Actually EffectComposer sets pass.renderToScreen only if pass.renderToScreen property... Let me recall: EffectComposer.render() does:

Yes, modern EffectComposer does that ✓. Grade pass (ShaderPass) renders to screen when last ✓.

But careful: bloom.enabled=false (B toggle) — grade is still last enabled ✓ fine since isLastEnabledPass computed over enabled passes ✓.

17. renderer.autoClear = true — PT pass render clears accumWrite before drawing quad — quad covers everything anyway ✓.

18. On WebGL1-only browsers: we throw with message ✓.

19. Hmm — one more: ptU.uLightIdx uniform type inference: array of numbers → three infers "int" array? Uniform type detection for arrays: SingularUniform vs PureArrayUniform determined by GLSL declaration int uLightIdx[20] → activeInfo type INT, size 20 → setValueV1iv → gl.uniform1iv with number[] — WebGL accepts number[] for uniform1iv? The spec: uniform1iv(GLint location, Int32List v) where Int32List = Int32Array or sequence — plain array of numbers works ✓.

20. Uniform upload of Vector4 arrays ✓ standard.

21. controls.autoRotateSpeed = 0.9 ✓.

22. During turntable: 'change' fires → resetAccum → samples never converge ✓ stats show ~2 samples, label shows turntable preview ✓.

Everything looks solid. One aesthetic concern: uClamp=48 with sun inten up to 600 — sun disk viewed directly clamps to 48 → still hot ✓.

Studio Trio initial view: camera (6.4,3.1,7.6) target (0,1,0) — glass sphere center at origin r=1.05, gold left, red right, blue small behind, light overhead. Ground checker 0.5 scale. Sun elev 46 azim -38 inten 260. Should look great.

Now — deploy: copy to /space/demos/044-photon-garden/index.html, then update /space/demos/index.html with the new card at the top of the list.

Card description (matching style, rich): "A real-time progressive Monte-Carlo path tracer living in a fragment shader..."

Write it:

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

*************************************************************************************************************or.

The anchor comment line has 14 spaces of indentation (" \n `.

Still not matching. The cat -A output shows the line ends with $ (LF, no CR). The grep output earlier shows:

So the comment line has 14 spaces then <!-- New demos are added here -->. In my replace I used 14 spaces? Let me count what I typed: <!-- New demos — I typed 14 spaces. Hmm, but the tool reported 0 replacements. Maybe the issue is trailing whitespace at line end, or there might be multiple spaces differences. Let me use a more targeted approach with sed via shell.

The od output shows the comment line starts with spaces: counting from od -c: first line 0000000 row shows 16 chars per row: the first row shows spaces then < !. Rows of 16 bytes: positions 0-15 are: spaces... let me count: the first row displays 14 columns of spaces (each space takes one column of 4 chars width)... hard to count from od visually.

Easier: just insert the new card after line 99 using sed. Line 99 is the anchor comment line. Use sed -i '99r cardfile' index.html — reads cardfile content after line 99. Let me create the card snippet file then sed -i with r command. Since /space is s3fs, sed -i should still work.

The index is updated with the new card at the top of the list. Now final verification:

1. Verify the demo file at /space/demos/044-photon-garden/index.html is complete and valid (it was validated pre-copy).
2. Verify index.html structure is still valid HTML (card inserted cleanly ✓ from output above).

Let me do a final check of the deployed demo file (checksum / quick HTML sanity: closing tags present).