Create Physarum Garden Demo

The task is "Wake up and do as you please." There's no specific instruction beyond that. Given my purpose — create cool Three.js demos in /space/demos/ — the natural thing to do is create a new advanced demo. The last one was 010-abyssal-bloom. So I should create demo 011-something.

Let me first install shell tools, then check the current state of /space/demos/ to see what's there, then create a new advanced demo.

Ideas for a new advanced demo (must be impressive, not basic):

• A ray-marched scene with SDFs (fractals, mandelbulb) — interactive flythrough with post-processing.
• A physics playground with soft bodies or verlet cloth.
• An orbital mechanics simulator / gravity sandbox with trails (n-body simulation).
• A procedural city / endless runner.
• A black hole with gravitational lensing shader.
• A wireframe terrain flyover with synthwave aesthetic.
• A "sunset drive" endless synthwave runner game.
• An audio visualizer.
• A playable game: asteroids 3D, snake 3D.

Given last demos included galaxies, terrains, abyssal bloom (underwater), maybe do something different: gravity sandbox / n-body orbital simulator with GPGPU, trails, bloom, collision/merging, black holes — that'd be cool. Or a ray-marched fractal flythrough.

Let me do something with strong wow factor: a black hole gravitational lensing demo with an accretion disk, ray-bending shader (post-process full-screen shader computing light bending), star field background, Doppler beaming, plus GPGPU particle jets. That's advanced and visually striking. Interactivity: change black hole spin/mass, move camera, spawn photon ring parameters.

Alternatively n-body gravity sandbox: spawn stars/planets, GPGPU n-body, additive trails, bloom, click to spawn mass, play/pause, velocity mode. This is interactive gameplay-ish and educational. Trails look amazing with bloom.

I could combine: "Supermassive" — an interactive relativistic black hole demo:

• Full-screen ray-bent skybox shader (gravitational lensing approximation) — do a simplified geodesic integration in fragment shader with accretion disk.
• Actually a proper ray-traced Schwarzschild black hole in a fragment shader is very doable and looks stunning (like Interstellar's Gargantua). Steps: for each pixel, shoot ray from camera, integrate null geodesic in Schwarzschild metric (or use weak-field bending approximation), check intersection with accretion disk plane (with texture, temperature gradient, Doppler beaming), otherwise sample starfield cubemap/background.
• Plus HUD, lil-gui params (mass, disk temp, rotation), orbit controls, time dilation readout, "photon orbit" marker.

That's a well-known impressive demo. Let me write it carefully.

Fragment shader approach (Schwarzschild ray tracing, standard technique):

• Use spherical coordinates, integrate using the standard "impact parameter" trick: In the equatorial-plane-reduced form, geodesics in Schwarzschild are planar, so one can rotate each ray's plane to 2D and integrate dφ with du/dφ equation: u'' + u = (3/2) r_s u² where u = 1/r. Many shadertoy demos do full 3D integration with force = -1.5 * h² * r_vec / r^5 (in geometric units with c=1, rs=1). That's the common approach:

where h2 = length(cross(pos, vel))². Integrate with leapfrog/verlet. Disk intersection: check when crossing y=0 plane within disk radii. Background: procedural starfield via hash on ray direction + nebula fbm. Doppler beaming based on disk velocity direction. Gravitational redshift factor.

I'll implement this as a full-screen quad pass with camera from OrbitControls (camera position + lookAt matrix uniforms). Render at reduced resolution scale (e.g., 0.75) for perf, plus bloom? Bloom over ray-traced image could be via UnrealBloomPass. But full-screen shader + EffectComposer is fine.

Also add: photon sphere glow, ergosphere-ish spin effect (frame dragging approximation when spin > 0? That complicates; keep Schwarzschild but fake "spin" by disk rotation speed and maybe lensing asymmetry skip).

Extras:

• GPGPU or simple particle jets? Could add relativistic jets: two cones of particles along the poles with additive shader. Simple CPU-updated points are fine (a few thousand).
• Starfield background handled in shader (procedural), plus nebula.
• HUD: FPS, distance in Schwarzschild radii, time dilation factor at camera radius, integration steps.
• lil-gui: disk brightness/temp, spin (disk speed), quality/steps, exposure, jets on/off, camera FOV, wormhole? no.
• Click-drag orbits via OrbitControls on a "proxy" — actually we render full-screen, so OrbitControls updates camera pos/uniforms.

Snapshots, pause. Audio: deep drone like previous? Could add subtle rumble + Geiger-like clicks near horizon? Keep audio optional but nice: low rumble with LFO, and a "whoosh" when crossing photon sphere. Keep it simple: ambient drone activated on gesture.

Naming: 011-event-horizon or 011-supermassive. "Event Horizon" is evocative. Let's go with /space/demos/011-event-horizon/.

Let me check the existing demos and index page first. I need to:

1. install_shell_tools
2. ls /space/demos, cat index.html
3. Write the new demo file (big HTML). Validate JS syntax with node --check by extracting module script.
4. Update index.
5. Success.

Careful with writing big file via heredoc — use cat > file << 'EOF' with quoted EOF to avoid shell interpolation. The HTML contains backticks and ${} template literals in JS — with quoted heredoc delimiter, no interpolation occurs.

Let me design the shader properly.

Black hole ray tracing (Schwarzschild), fragment shader:

Uniforms:

• uCamPos (vec3), uCamMatrix (mat3: right, up, forward)
• uFov, uAspect, uTime
• uSteps (int/float), uStepSize
• uDiskInner (in rs units, e.g., 3.0 ~ ISCO is 3rs... ISCO = 3 r_s for Schwarzschild (r_isco = 6 GM/c² = 3 rs). Photon sphere at 1.5 rs.)
• uDiskOuter (e.g., 12)
• uDiskTemp (color multiplier), uBrightness, uSpin (disk angular speed)
• uJetsOn maybe handled by separate mesh
• uExposure

Algorithm per pixel:

Actually construct ray dir: rd = normalize(uv.x * right + uv.y * up + fov * forward) with fov controlling zoom.

Integrate:

Adaptive step: dt scaled by r (smaller near BH): dt = uStep * clamp(r*0.5, 0.2, 2.0) or similar. Common trick: dt = uStep * mix(0.3, 1.0, smoothstep(0., 10., r)). Keep simpler: fixed small step with enough steps (e.g., 300 steps * dt 0.06). For perf, scale resolution down (renderer pixel ratio 0.8, plus adjustable quality that lowers internal render scale).

Disk color: temperature gradient from inner (hot white/blue) to outer (orange/red), procedural noise texture via fbm for swirls, rotating with uTime*uSpin / pow(r,1.5) (Keplerian). Doppler beaming: compute disk tangential velocity dir, dot with view ray; brighten approaching side, blueshift. Gravitational redshift dimming near inner edge: factor sqrt(1 - 1/r).

Background: if ray escapes (r > maxDist like 40), sample procedural starfield: hash grid stars on direction + fbm nebula (dark, subtle blue/purple). Also faint milky-way band.

Accumulation: front-to-back with transmittance; disk is mostly opaque with soft edges.

Also glow: add slight emissive haze around photon sphere: accumulate glow += exp(-abs(r-1.5)*k) * dt * color.

Time step & steps: GUI quality presets: Low (160), Med (260), High (400).

Camera default at (0, 2.2, 9) looking at origin-ish. OrbitControls target (0,0,0). Pass camera basis each frame.

Tone map: ACES-ish approximation + exposure, then gamma. Do it in-shader (no composer needed) — but bloom would help the disk. I can add UnrealBloomPass via EffectComposer over the full-screen shader output; resolution scaled. That's fine and adds wow. But full-screen ray trace + bloom at 60fps... bloom is cheap relative. OK, include bloom with modest strength, GUI-toggleable.

Wait — with EffectComposer, my shader pass writes HDR values >1, bloom threshold picks up bright disk. Render target type: HalfFloat to allow HDR for bloom. Set new WebGLRenderTarget default composer uses UnsignedByte; EffectComposer creates HalfFloat by default in newer three versions? In r155+, EffectComposer defaults to HalfFloatType. Yes — since r152-ish, EffectComposer default renderTarget type is HalfFloatType. Good, r160+ fine.

Then final output pass (OutputPass) handles tone mapping/sRGB. With HDR buffer, bloom threshold 1.0 works. Use OutputPass from addons.

Jets: two narrow cones of Points along ±Y axis, particles streaming outward, additive, cyan/blue. Updated on CPU (positions in shader from attribute + time — do shader-based: attribute seed; position computed in vertex shader as function of time: y = mod(seed*speed + time, height), radius grows with y). Additive blending, small. Toggle via GUI.

Accretion "photon ring" sparkle: skip; glow band in shader suffices.

Star background also visible through lensing — yes since background sampled at the end from final ray dir, lensing happens naturally.

HUD: FPS, camera distance in rs, gravitational time dilation at camera: sqrt(1-1/r) shown as "local time rate". Integration quality. Also crosshair? no.

Audio: WebAudio — deep rumble drone (two detuned low oscillators + noise through lowpass), and occasional distant "thump". Also rising pitch when approaching horizon? Keep: drone + subtle shimmer. Start on first pointerdown; mute button. Keep audio code compact.

Interactions:

• OrbitControls (rotate/zoom/pan-limited)
• Double-click to cycle cinematic camera? Maybe "Auto-orbit" toggle (controls.autoRotate).
• Spacebar: pause time (disk swirl + jets)
• Keybind H: toggle HUD/UI
• S: snapshot (download PNG)

GUI (lil-gui): BlackHole folder: quality steps (dropdown Low/Medium/High/Ultra), step size, disk inner/outer radius, disk brightness, temperature hue shift, spin speed, glow intensity, background stars density, nebula amount, exposure, bloom on/off + strength, render scale (0.5–1.0), jets toggle. Camera folder: FOV, auto-orbit speed. Actions: pause, mute, snapshot, reset view.

That's rich. Now write the code. Single file, import map with three@0.164.x? Use 0.165.0 or 0.166. Let me pick a recent stable: three@0.166.1 or 0.170.0. Addons paths: three/addons/. Use unpkg: https://unpkg.com/three@0.170.0/build/three.module.js and https://unpkg.com/three@0.170.0/examples/jsm/. I'll use 0.170.0.

Imports: OrbitControls, EffectComposer, RenderPass? Actually full-screen shader: simplest is a ShaderPass as first pass with my fragment shader (it doesn't need tDiffuse). ShaderPass with a shader that ignores tDiffuse. Then UnrealBloomPass, then OutputPass.

But ShaderPass uses its own uniforms cloned — careful: ShaderPass clones uniforms via UniformsUtils.clone, which would clone my uniform objects... In constructor: this.uniforms = UniformsUtils.clone(shader.uniforms). Cloned uniforms lose reference to my original objects. To update per-frame, I should keep a reference: shaderPass.uniforms after creation and update those values. clone creates new value holders; for Vector3 uniforms, clone deep-copies. So update via pass.uniforms.uCamPos.value.copy(camera.position) — fine. Alternatively use textureID etc. Just use pass.uniforms after creation. Good.

Resolution uniform must update on resize and render scale: since we render at full res and the shader is per-pixel, render scale affects composer size: composer.setSize(w*scale, h*scale)? EffectComposer has setPixelRatio and setSize. To do render scale: composer.setPixelRatio(min(devicePixelRatio,2) * renderScale) then composer.setSize(w,h). That gives lower internal buffers. And bloom pass resolution adapts. OutputPass upscales via renderer to canvas size? Composer's final pass renders to screen at renderer's size... EffectComposer setSize sets render targets' sizes; final OutputPass renders fullscreen quad to canvas (drawingbuffer size = renderer size). If renderer pixel ratio is full but composer buffers smaller, final quad upscales — acceptable (slight blur). Actually to upscale, the final pass samples buffer and writes to canvas covering full screen — yes, bilinear upscale. OK.

Set renderer size = full; composer pixelRatio = dpr*scale; composer.setSize(w,h) — internally multiplies by its pixel ratio. Good.

Star field in fragment shader:

Better star approach: use 3D grid on direction: vec3 d = dir; vec3 cell = floor(d * 60.0); — distort near poles, fine. Star brightness = pow(hash, 40) etc. Two layers with different scales. Twinkle subtle with time.

Nebula: fbm(dir * 3 + offsets) masked, dark blue/purple, plus band along galaxy plane (dot with normal).

Disk shading:

Simpler: build 2D coords vec2 dUV = vec2(cos(ang), sin(ang)) * rr; sample fbm → streaks. Temperature color: t = (rr - inner)/(outer-inner); color = mix(hot(white-cyan), cool(orange-red), t^0.7); multiply by (1-t)^1.5 falloff for brightness inward hot. Soft edges: alpha *= smoothstep(inner, inner+0.4, rr) * (1 - smoothstep(outer-1.5, outer, rr)).

Doppler: velocity dir at p: vec3 velDir = normalize(vec3(-p.z, 0., p.x)); doppler factor d = 1 + uDoppler * dot(velDir, normalize(rd_final?)) — use ray direction at hit (vel vector). beam = pow(clamp(1.0 + dot(velDir, rayDir), 0.3, 2.0), 3.0) brighten approaching side where dot sign convention: approaching when disk vel toward camera: dot(velDir, -rayDir)? Photons emitted toward camera: direction of photon travel ≈ normalize(camPos - p). Approaching fluid moves along photon dir → dot(velDir, photonDir) > 0 → blueshift brighten. Use that with the initial ray direction reversed... photonDir from disk to camera is roughly opposite of incoming ray direction vel at hit. So d = dot(velDir, -normalize(vel)). beam = clamp(1.0 + d*uBeam, 0.25, 3.0)^2. Also color shift: mix toward blue when d>0, red when <0.

Gravitational redshift: gr = sqrt(max(0.0, 1.0 - 1.0/rr)); multiply intensity (photons lose energy climbing out) — at rr=1 it's zero. Apply mildly.

Integration loop in GLSL ES 3.0 (WebGL2) allows dynamic loop with uniform int? Three r160 uses WebGL2; loops for(int i=0;i<500;i++){ if(i>=uSteps) break; } — fine.

Precision: use highp.

Escape: if r > uEscape (e.g., 30 or based on camera dist*2) break and add background. Capture: if r < 1.0 (horizon) break (black). Actually with rs=1 units. Camera at distance ~9.

Also add faint background disk image second crossing (light from disk behind bending around): the integration naturally allows ray to cross plane multiple times (front and back images) — accumulate with alpha compositing front-to-back:

Add glow accumulation along path near photon sphere: glow += exp(-abs(r-1.5)*4.0)*dt*uGlow;

Background sampled after loop from normalize(vel) (final direction) — gives lensing. Compose: final = col + (1-alphaAcc) * background(dir) + glowCol.

Then tonemap in OutputPass (ACES? OutputPass uses renderer.toneMapping; set renderer.toneMapping = ACESFilmicToneMapping; toneMappingExposure = exposure). Actually OutputPass reads renderer settings. Set renderer.toneMapping = ACESFilmic and outputColorSpace default SRGB. Then my shader outputs linear HDR.

Bloom threshold ~0.85, strength 0.7, radius 0.6.

HUD DOM overlay: top-left stats, title "EVENT HORIZON — Schwarzschild Black Hole", controls hint bottom. Loading not needed (compiles fast).

Snapshot: render then canvas.toBlob download. With preserveDrawingBuffer false, must render right before toBlob in same frame — do composer.render(); renderer.domElement.toBlob(...) synchronously in handler. Good.

Audio: minimal engine:

• ctx on first gesture; master gain.
• Drone: 2 oscillators (sine 36Hz & 54.3Hz) + filtered noise loop (buffer noise) with slow LFO on filter cutoff.
• Doppler-ish: map camera distance to filter cutoff/gain (closer → brighter/louder). In animate: if audio on, set filter freq = 60 + 400*smoothstep(20,2,dist)? nice touch: rumble intensifies near horizon.
• Mute toggle 'M'.

Jets: Points count 1500, additive ShaderMaterial: attribute aSeed(vec4: rand). Vertex:

Alpha fade with t, size attenuation; color mix cyan→transparent. Discard when toggled (visible=false). Start just above horizon y=±1.2. Nice.

Time dilation readout: tau = sqrt(1 - 1/r).

Camera: FOV default 55, min distance 1.6 (avoid entering horizon: controls.minDistance = 1.8), maxDistance 60. Auto-rotate optional.

Also add subtle camera "shake" when close? Skip.

Now the index page update: read existing /space/demos/index.html, add card for 011. Let me check the file structure first.

Plan of commands:

1. install_shell_tools
2. ls -la /space/demos/ && sed -n '1,200p' /space/demos/index.html (see format)
3. Write file via heredoc (long). Maybe split into 2-3 parts to be safe: part1 > file, part2 >> file, etc. Heredoc with 'EOF' quoted.
4. Extract module JS and node --check: The HTML has one <script type="module">. Extract with sed between markers. I'll add unique comment markers //__JS_START__? Simpler: use awk to extract lines between <script type="module"> and </script>. Since import map script is <script type="importmap">, distinguish. I'll place the module script tag exactly <script type="module"> on its own line. awk '/<script type="module">/{flag=1;next}/<\/script>/{if(flag){flag=0}}flag' file > /tmp/app.js then node --check /tmp/app.js. Node check with ES modules: node --check assumes CommonJS unless .mjs. Save as app.mjs → node --check supports ESM for .mjs. Good.
5. Update index.html: it's easier to regenerate? No — must preserve other entries. I'll read it and insert a new card before a marker (like </main> or grid end). Use python3 for safe insertion. Python available? Likely. Or node script. I'll use node one-liner or python3 with a heredoc script.
6. Verify with grep.

Let me write the full HTML now. I'll be careful about GLSL string escaping: backticks inside JS template literal for shader — fine, but avoid nested backticks. Avoid ${ in GLSL (no template interpolation issues since using plain strings with concatenation or template literals without ${}). If using template literals, ensure no stray ${. I'll write shaders as template literals; GLSL has no ${. Good.

lil-gui import: https://unpkg.com/lil-gui@0.19.2/dist/lil-gui.esm.min.js? The esm build: dist/lil-gui.esm.js. For 0.19: https://unpkg.com/lil-gui@0.19.2/dist/lil-gui.esm.min.js exists? There's dist/lil-gui.esm.js and .min.js? Previous demo used lil-gui — presumably via unpkg esm. I'll use https://unpkg.com/lil-gui@0.19.2/dist/lil-gui.esm.min.js. To be safe, use non-min: dist/lil-gui.esm.js definitely exists for 0.19.x. Hmm, both exist I believe (lil-gui.esm.js, lil-gui.esm.min.js? package files: dist/lil-gui.cjs.js? Actually lil-gui dist contains: lil-gui.esm.js, lil-gui.esm.min.js, lil-gui.umd.js, lil-gui.umd.min.js, lil-gui.css). Yes esm.min exists in recent versions. Use esm.js non-min to be safest.

Font: use system fonts + a Google font? Keep system to avoid external deps beyond CDNs. Use monospace stack for HUD.

Now, fragment shader details — write carefully to compile.

But ShaderPass fullscreen quad (FullScreenQuad with varying vec2 vUv from its vertex shader) — ShaderPass's default vertex shader outputs varying vec2 vUv; yes (three's ShaderPass default vertex: varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}). Since r152ish the CopyShader vertex uses that. If I provide custom vertex shader I must declare varying myself. I'll provide both vertex and fragment to be explicit. Note: WebGL2/GLSL3? Three's ShaderMaterial defaults to GLSL1 (auto-converted). Write GLSL1-style: varying, texture2D not needed. Loops fine.

gl_FragCoord available. I'll compute uv from vUv (0..1): vec2 uv = vUv*2.-1.; uv.x *= uAspect; need uAspect uniform.

Hash/noise functions:

Starfield:

A cheap effective star: float s = smoothstep(0.995, 1.0, h)? With grid 40 across direction space, cells vary in angular size. Alternative standard: compute local coords within cell and distance to random star position:

Two layers scale 30 & 80. Multiply by uStars.

Nebula:

Background = stars + nebula + faint base.

Disk function:

Fine — will tune constants reasonably.

Main loop:

Note: rays that never escape nor captured (orbiting) just end with whatever accumulated — with max steps they'll be near photon sphere; add small background anyway? If loop ends due to steps, add trans*background(normalize(vel)) too — captured flag only for horizon. OK: always add background*trans unless captured.

Wait, subtle: rays that will hit horizon — when r2<1 we break without background. But disk may have been accumulated (the disk behind/above). Good.

uEscape: default 40, maybe camera-dist adaptive: set uniform = max(30, camDist*2).

Camera basis: forward = normalize(target - pos) but OrbitControls camera looks at target; compute:

FOV: ray dir normalize(vec3(uv, uFov)) where uFov = 1/tan(fovY/2). Larger uFov = narrower. Set uFov = 1/Math.tan(THREE.MathUtils.degToRad(fov*0.5)).

Note camera.up default (0,1,0); after OrbitControls it's still (0,1,0) (roll not changed). Fine.

Disk tilt: currently disk in XZ plane. Could tilt whole system by rotating positions with a uniform mat3 uTilt? Nice: slight tilt (e.g., disk normal tilted 10°) adds drama. Instead, allow "inclination" by rotating camera start position. Skip tilt transform; camera orbit handles views.

Jets align with Y axis. OK.

HUD: absolutely positioned divs, styled. Show: FPS (EMA), dist (rs), time dilation %, steps, render scale, status (orbiting/captured? fun: if camDist<1.5 show "INSIDE PHOTON SPHERE").

GUI params object with onChange updating uniforms.

Also auto-quality: if FPS < 45 for a while, reduce render scale step. Simple adaptive: every 2s check; adjust scale between 0.5 and 1.0. Toggle "adaptive quality" on by default. Nice touch.

Snapshot key 'S' & button. Pause 'Space' — pauses uTime advance & jets & disk swirl (freeze time uniform), physics integration is static so image unchanged when paused (unless camera moves). Mute 'M'. UI 'H'.

Loading overlay: since shader compile may take a moment, show simple overlay, fade out after first frame. Use renderer.compileAsync? Not necessary; just fade after first render via requestAnimationFrame.

Now sizes: whole file maybe 700-900 lines. Fine.

Index page: let me look at its structure first.

Also check number: last demo 010-abyssal-bloom → new: 011-event-horizon.

Let me now run commands. First install shell tools.

Let me inspect the demos folder and the index page structure.

Interesting — demo 006-event-horizon already exists. So I shouldn't do a black hole demo named event-horizon. Let me check what 006-event-horizon is, to avoid duplicating. Let me see its description in the index, and the remaining index entries.

Existing demos:

1. 001-spinning-cube
2. 002-nebula-galaxy
3. 003-mandelbulb-explorer (ray-marched fractal already done)
4. 004-fluid-dynamics
5. 005-gravity-sandbox (n-body done)
6. 006-event-horizon (black hole likely already done!)
7. 007-sonic-reactor (audio visualizer)
8. 008-void-runner (endless runner game)
9. 009-azure-odyssey (sailing/ocean)
10. 010-abyssal-bloom (deep sea boids)

So my black hole idea overlaps with 006-event-horizon. Need a fresh concept. Let me view the rest of the index to see 006's description and full list.

New demo ideas not yet covered:

• Cloth/soft-body physics playground (verlet) with wind, tearing — interactive.
• Procedural planet with atmosphere scattering, terrain, clouds — "planet forge" (but 009 ocean/planets maybe covered partially; a full procedural planet with live GUI terraforming could be cool but terrain-ish similar to existing?).
• Volumetric clouds / weather simulator.
• Fireworks / particle choreography.
• Portal / non-euclidean scene.
• Crowd simulation.
• Snow/avalanche sim.
• Lava lamp metaballs ray-marched.
• "Circuit board" infinite zoom.
• Rainy city street with reflections, neon, procedural buildings — "neon rain" cyberpunk city flythrough/drive. That's visually distinct from existing demos (no city yet). Could be: procedural city generation (buildings with emissive windows instancing), wet asphalt reflections (planar reflection or cheap SSR fake), rain particles with splashes, lightning, volumetric-ish fog, car with headlights driven via WASD or autopilot, bloom. Synthwave but city — 008 was synthwave desert. City with rain + neon + lightning + puddle reflections is different enough and impressive.
• Cloth + wrecking ball physics demo.
• "Aurora borealis" procedural sky with day-night, stars, shooting stars + snowy terrain + cabin?
• Volumetric nebula flythrough (ray-marched volumetric) — overlaps 002 galaxy.
• Ant colony / slime mold simulation (physarum) — GPU compute, fascinating and gorgeous: Physarum polycephalum slime mold with millions of agents, trails, bloom, color, interactive food placement. That's a strong wow demo and distinct. Interactive: click to spawn food, agents swarm, tunable parameters, color palettes, audio-reactive optional.
• Fire/smoke fluid — 004 fluid dynamics done.
• "Terra" — procedural earth-like planet from space with atmosphere, city lights at night, clouds, terminator line — beautiful and different. Could add time controls, seasons, camera orbit, moon, ISS? Hmm.

Physarum slime mold is a great pick: GPGPU via GPUComputationRenderer (position/heading texture + trail texture with diffuse/decay), classic paper. Interactive: paint food/attractors with mouse, multiple species with different colors/params, bloom, palettes, presets, time-lapse feel. Very organic and mesmerizing. Audio: ambient generative pad. HUD: agent count, FPS. GUI: sensor angle/distance, turn speed, speed, decay, diffusion, species count, deposit, presets (networks, blobs, labyrinth), brush size, add food, clear.

Implementation details for Physarum with three.js:

• Agent state: pos (x,y) + heading angle. Pack into one float texture RGBA: x, y, heading, unused. Use GPUComputationRenderer with one variable "agentData"? GPUComputationRenderer supports multiple variables; update shader reads trail texture (sampler uniform) for sensing. Trail is a separate ping-pong render target pair updated by a fragment shader (diffuse + decay + deposit).
• Deposit: render agents as points into trail texture each frame (additive), or do deposit inside agent shader? Standard approach: agent pass writes new pos/heading; then a Points draw into trail RT deposits; then blur/decay pass on trail (ping-pong); then display pass renders trail with colormap.
• With GPUComputationRenderer: variable texture e.g., 1024x512 = 524k agents. Could do 1024x1024 = 1M agents. Points rendering of 1M for deposit is heavy but GPUs handle it; keep default 512x512=262k, GUI up to 1M.

Sensing in agent update shader: sample trail at pos + dir offsets (sensor angle ±, distance) → turn toward strongest. Movement with wrap-around edges (toroidal) — wrap makes nice endless networks.

Species: 3 species with color tint and slightly different params: encode species id in agentData.w. Display pass colors by... display pass only sees trail texture (single channel). For colored species: deposit into RGB channels! Species 0→R, 1→G, 2→B. Trail RT holds RGB trails. Sensor weights: each species attracted to own channel, maybe repelled by others (cross-channel weight). Display: color = palette mapping of RGB sums. Beautiful multi-color networks.

Trail pass: new = blur(old)*decay; plus deposit handled by drawing points additively into trail RT after blur? Order per frame:

1. agentUpdate (GCR compute) — reads trailTex (from previous frame), writes agent positions.
2. trailPass: diffuse+decay old trail into other ping-pong target.
3. deposit: render agents as GL points (size 1) into the fresh trail target with additive blending, color = species channel * depositAmount. Points positions from agent texture in vertex shader (texture fetch in VS — WebGL2 fine).
4. display: full-screen quad samples trail, tone map with palette.

All doable with raw WebGL via three render targets + custom shaders. Use GPUComputationRenderer for agents only; trail ping-pong manual with two WebGLRenderTargets (float type) and a fullscreen quad scene. Deposit: separate scene with Points + ShaderMaterial (blending additive, depth off), rendered into trail target.

Interactivity: mouse click/drag paints food/attractor: a "paint" uniform — easiest: paint into trail texture channels (deposit white at brush) — painting directly into all channels or selected channel. Also "repel" mode (right-click erases). Obstacles? Could add walls texture? Skip obstacles; wrap toroidal.

Also moving attractor (like abyssal lure)? Painting is enough, plus presets spawn patterns (random, ring, grid, center blob, uniform noise).

Colormap display: col = pal(r)*R + pal(g)*G + pal(b)*B with palettes (e.g., "Bio" (green/cyan/magenta), "Inferno", "Neon", "Mono"). Add subtle vignette+grain via composer? Bloom composer: render display to screen with UnrealBloom — do composer with RenderPass of display quad scene? Simpler: display pass writes HDR trail colors; composer bloom then output. Use EffectComposer with ShaderPass(display) — same pattern as planned before.

Audio: generative ambient — slow pad chords + soft plucks triggered by "activity" (trail mass)? Simpler: ambient drone + gentle arpeggio. Keep modest: pad + filtered noise wash; intensity linked to average trail brightness (read back a tiny mipmap? expensive). Skip linkage; just ambience + mute.

HUD + lil-gui + presets + pause + snapshot + H hide. Keys: Space pause, C clear, 1-3 presets, F add food burst? Keep simple.

Title: "Mycelium" or "Slime Punk"? Name: 011-physarum-garden — "Physarum Garden: a multi-species slime-mold colony".

Alternatively city rain... Physarum is more uniquely generative-art wow and performs well. I'll go with Physarum.

Number: 011. Folder: /space/demos/011-physarum-garden/.

Let me now check the rest of index.html to know exact format of remaining entries (especially 006 description to ensure I'm not overlapping too much and the insertion marker). The insert marker: <!-- New demos are added here --> right after <div class="demo-list">. New card inserted right after the marker (newest first).

Now write the demo. Careful GLSL for WebGL2 via three ShaderMaterial (GLSL1 style auto-upgraded). GPUComputationRenderer from addons.

Details of agent compute shader (GPUComputationRenderer):

Simplify: world space = [0,1]x[0,1] toroidal mapped directly to trail texture UVs. Sensor dist in uv units (e.g., 0.01 ~ scaled by resolution). Display stretches to screen; use square-ish fine. To avoid anisotropy, sense offsets in uv but multiply x by aspect? Eh — make trail RT aspect match canvas aspect; uv-based sensing isotropic if world treated as aspect-corrected: define world width W=1.0*aspect, height=1.0; uv = pos / world. Let agent pos be in world units, convert to uv for sampling. Keep world = (aspect, 1).

Agent data texture (width W x height H of GCR variable): texel = (posX, posY, heading, species). Species stored at init (0,1,2 cycling or random). Init shader writes random pos/heading/species; also reinit via GUI (reset simulation: call gpuCompute.init()? There's a way: re-create variables; simplest: re-run the initialization function provided by GPUComputationRenderer? It doesn't expose re-init; but we can add uniform uReset that when set, shader outputs random state for one frame. Common trick. Implement uReset flag with hash(time) seeds.)

Agent update:

sense(uv, species): sample trail texture: vec3 t = texture2D(trailTex, fract(uv)).rgb; weight own channel positive, others * uCross (can be negative). return dot(t, weights) where weights per species: e.g., sp0: (1, uCross, uCross). Compute channel by sp<0.5?0:sp<1.5?1:2. In GLSL1 dynamic indexing into vec3 is allowed? t[int(sp)] dynamic index of vector is allowed in GLSL ES 3.0; three targets WebGL2 with GLSL ES 3.00 after auto-conversion — dynamic component indexing of vectors is allowed in ES 3.0. To be safe compute via mix:

Clean.

GPUComputationRenderer variable dependency: it auto-passes its own previous texture as agentData sampler (variable name = sampler name). Add trailTex uniform via agentVariable.material.uniforms.trailTex = {value: trailRT.texture} and declare in shader uniform sampler2D trailTex; — GCR wraps shader with its own uniforms (resolution etc.) plus dependencies; adding custom uniforms works if we also declare them in the shader string. GCR prepends uniform sampler2D agentData; for dependencies. Custom uniforms must be declared manually in the shader code. Also GCR defines resolution? It doesn't auto-declare; it adds #define resolution vec2(W,H)? Actually GPUComputationRenderer adds uniform vec2 resolution;? Let me recall: GCR's createShaderMaterial includes uniforms: { resolution: {value: new Vector2(sizeX,sizeY)}, ...passThru uniforms }? In the official gpgpu birds example, the shaders reference uniform float time; uniform float delta; declared manually and set via material.uniforms. And they use vec2 uv = gl_FragCoord.xy / resolution.xy; — GCR defines resolution uniform automatically (yes: it creates material with resolution uniform; see GPUComputationRenderer source: this.createShaderMaterial = ... uniforms: { resolution: { value: new Vector2( sizeX, sizeY ) } }? Hmm, I recall the birds example defines resolution via GCR automatically — yes, GPUComputationRenderer adds a resolution uniform (Vector2 of texture size) to each variable material automatically. In three r160 source: createShaderMaterial( computeFragmentShader, uniforms ) includes uniforms.resolution = { value: new Vector2( sizeX, sizeY ) }? I'm fairly confident GCR handles resolution. In the birds example shaders, resolution is used without being added manually, confirming GCR provides it. Good — use resolution for own uv.

Then add dependencies: gpuCompute.setVariableDependencies(agentVar, [agentVar]).

Trail ping-pong: two WebGLRenderTargets type FloatType (or HalfFloat for perf; HalfFloat fine, better perf; values < ~10 ok). size = canvas size * trailScale (e.g., 1.0). Use HalfFloatType, LinearFilter, ClampToEdge, no depth.

Decay/diffuse shader (fullscreen):

9-tap (3x3) for nicer diffusion.

Deposit pass: Points geometry with N verts; each vertex has attribute ref (uv into agent texture). Vertex shader:

Fragment:

Additive blending, depthTest false. Render into trail write target (after decay pass already rendered into it? Need combine: decay pass renders into target B; then deposit adds into B; then B becomes current for display + next sensing. Yes: render fullscreen decay into B (autoClear), then render points scene into B with autoClear=false and additive blending. Then swap A/B.)

Order per frame:

1. compute agents (senses trail A current).
2. decay/diffuse A → B.
3. deposit agents into B (additive).
4. paint brush into B (if pointer down): a quad at brush pos with radial gradient, color channel(s) by selected species or all; additive for attract, subtract for erase (blending: SubtractiveBlending for erase). Implement as small mesh in paint scene rendered into B.
5. composer: display pass (samples B) → bloom → output.

Display shader:

Grain: hash(vUv*time) small. Vignette.

Paint brush shader: uniform uBrushPos (world uv 0..1 aspect-corrected), uBrushRadius, uChannelMask (vec3), uStrength. Draw fullscreen? Use fullscreen quad computing distance in aspect space; alpha = smoothstep(r, 0, d). Simpler to render as fullscreen pass with additive blending when active. Also add "food burst" button: spawn random blobs (paint N random circles over a few frames) — implement by painting at random pos each frame for K frames when triggered.

Agent count: texture sizes: default 512x512 (262,144). Options: 128k (512x256), 262k (512x512), 524k (1024x512), 1M (1024x1024). Changing requires re-creating GCR & points geometry. Implement setAgentCount(n) rebuilding. Manageable but adds code; alternatively fixed 1024x512 (524k) — heavy? Deposit points 524k additive + sense pass fullscreen: fine on most GPUs. But integrated GPUs may struggle; renderScale + trailScale help. I'll implement count presets with rebuild — worth it.

Rebuild GCR: need fresh GPUComputationRenderer each time (dispose old: GCR has dispose? It has dispose() in recent versions — r160+ yes). Points geometry recreate with ref attributes.

Reset patterns (init via uResetMode uniform in compute shader for one frame): mode 0: uniform random everywhere. mode 1: central blob (agents within radius 0.25 center, headings outward? headings random). mode 2: ring. mode 3: grid of blobs (e.g., 5x5 clusters). mode 4: "spokes"? Keep 4 patterns. Implement in compute shader with hash functions: when uReset >= 0: compute target based on mode using texel index hash, output it, then set uReset=-1.

Also clear trails button (clear both RTs via renderer.setRenderTarget + clear).

Presets (slime parameter presets):

• "Labyrinth": sensorAng 0.4, turn 0.45... Classic params: SA=22.5°, RA=45°, SO=9px etc. Provide presets: Networks, Labyrinth, Blobs, Chaos, Coral. Each sets sensorAngle, sensorDist, turnSpeed, speed, decay, diffuse, deposit, jitter, cross. I'll pick plausible values; exact aesthetics can be tuned.

Parameter ranges (world = aspect x 1.0, trail tex height = canvasHeight*trailScale):

• speed: 0.02–0.2 units/s (default 0.06)
• sensorDist: 0.002–0.03 (default 0.012)
• sensorAngle: 0.1–1.4 rad (default 0.45 ~ 26°)
• turnSpeed: 0.5–8 rad/s (default 2.6)
• jitter: 0–2 (default 0.3)
• decay: 0.9–0.999 (default 0.965)
• diffuse: 0–1 (default 0.35)
• deposit: 0.05–1 (default 0.35)
• cross: -0.5–0.5 (default -0.05)

Wait — decay applied per frame: at 60fps 0.965^60 ≈ 0.12/s — fast fade; typical. fine.

Units check: uSensorDist in world units (world height 1.0). At 900px trail height, 0.012 ≈ 11px. Good.

Aspect handling: world = vec2(aspect, 1). On resize, world changes — agent positions still in old range; wrap with new world handles gracefully (mod). Trail RT resized. OK.

HUD: FPS, agents count, species colors legend, brush mode, hints. Title: "PHYSARUM GARDEN — multi-species slime mold".

Audio ambience: gentle generative pad: two detuned saws through lowpass + slow chord changes from minor pentatonic + reverb (ConvolverNode with generated impulse) — a bit of code; keep simpler: use delay feedback as space. I'll do: masterGain → (lowpass) → destination; pad = 3 oscillators chord, chord changes every 8s from progression; plus soft noise wash. Activation on first gesture; 'M' mute. Compact implementation.

Also idle attract mode? skip.

Snapshot 'S'. Pause 'Space' (stops agent compute & time; display still renders). Clear 'C'. Brush: left-drag attract (paint all channels equally? Paint selected species channel — GUI "Brush species: All/1/2/3"). Right-drag erase (subtract all). Middle? no.

Bloom: UnrealBloomPass strength 0.55, radius 0.5, threshold 0.15. Display outputs HDR-ish (values up to ~3 before tonemap?) — tonemap in display to 0..1 then bloom threshold 0.2 fine. Or display outputs pre-tonemap HDR and rely on OutputPass ACES; bloom threshold 0.6. I'll do: display outputs col = 1-exp(-t*exposure) scaled slightly >1 for bright cores? Simpler: output HDR (tpaletteColorsexposure) and let ACES tonemap in OutputPass; bloom threshold 0.7 picks bright trail cores. Trail values after accumulation could reach 2-6 in dense areas. Set exposure ~0.8. OK.

Composer passes: ShaderPass(displayShader, tTrail) → UnrealBloomPass → OutputPass. Render scale: renderer full res; trailScale default 0.75 for perf; composer at full res (display upscales trail — linear filter smooth). Actually rendering trail at lower res than screen is fine & looks soft/organic. Default trailScale 0.8, GUI 0.4–1.0. devicePixelRatio: cap 1.5 for perf, GUI? keep fixed cap 1.75.

FPS adaptive: if fps<40 for 3s and trailScale>0.5, lower trailScale 0.1. Optional toggle. Include simple.

Points ref attribute: Float32Array(N*2): (i+0.5)/texW, (j+0.5)/texH.

Deposit point size: trailScale dependent: size = max(1, trailHeight/900 * 1.5)? Use uPointSize uniform = 1.5*trailScale-ish. Fine tune: pointSize = Math.max(1, Math.round(trailH/600)).

GLSL note: texture2D in WebGL2 with three auto-converts to texture. In raw ShaderMaterial three prepends #version 300 es and defines texture2D → texture when GLSL1 style? For WebGL2, three.js does convert GLSL1 shaders: it defines texture2D as texture via #define texture2D texture? Actually for WebGL2, three injects compatibility defines: in vertex shaders #define attribute in, texture2D etc. Yes, WebGLProgram adds those defines when isWebGL2... Since r163 WebGL1 removed; r160 era still had WebGL2 default with compat defines. To be safe, use texture2D (compat define exists in r160+ GLSL3 auto-conversion only when material.glslVersion not set — yes WebGLProgram prefixes #define texture2D texture for fragment shaders in WebGL2 when using GLSL1 style. This still holds in recent three. Safe.

GPUComputationRenderer handles its own shaders similarly (it uses RawShaderMaterial? It uses ShaderMaterial with custom prefix — its compute materials are created via createShaderMaterial which is a ShaderMaterial; compat applies.)

Now three version: pick 0.170.0. Import map:

Imports: OrbitControls — hmm, this is 2D fullscreen; camera orbit not needed! Interactions: paint, pan/zoom? Add pan/zoom of view? Could allow wheel zoom + drag pan (transform in display shader via uView offset/scale). Nice: right-drag = pan? conflicts with erase. Use: left-drag paint attract; shift+left or right-drag erase; wheel zoom; middle-drag or space+drag pan? Keep simple: wheel zooms view, drag with 'Alt' or middle button pans. Or skip pan/zoom entirely — toroidal world, no need. I'll add wheel zoom + two-finger... keep wheel zoom with uZoom & uOffset uniforms, drag with middle mouse or holding 'Z'? Hmm complexity. Decision: include zoom/pan via uniforms, wheel = zoom at cursor, drag with Space held or middle button = pan. Small code, nice utility. Actually to keep code robust, implement minimal: wheel zoom centered on cursor, reset on double-click, pan with pointer drag when e.button===1 (middle) or space+left. OK.

OrbitControls not needed then. Good — fewer moving parts.

Let me also handle context: HDR trail RT HalfFloat. Display ShaderPass uniforms update each frame (tTrail = current read RT).

GUI (lil-gui 0.19): folders: Colony (species count? fixed 3, cross-affinity, jitter), Movement (speed, sensor angle/dist, turn), Trail (decay, diffusion, deposit, exposure, palette), Brush (size, strength, species, erase with right-click note), View (zoom reset, trailScale, bloom), Audio (mute, volume), Actions (pause, reset pattern dropdown+apply, clear trails, food burst, snapshot). Agent count dropdown with rebuild warning.

HUD bottom hints. Top-left: title + fps + agents.

Edge cases: gpuCompute.compute() each frame when not paused. Set uniforms delta/time.

uDt: clamp 0.033.

Init flow:

Wait: createTexture gives zero-filled; initialization happens in compute shader's first frame via uReset default 0 (mode random). Set agentVar.material.uniforms.uReset = {value: 0} initially; after first compute set to -1. GPUComputationRenderer init: gpu.init() — validates. Also gpu.setVariableDependencies(agentVar, [agentVar]) before init.

First-frame reset: in animate, after gpu.compute(), if needsInit { uReset=-1 }.

Also on pattern apply: set uReset=mode for one frame + optionally clear trails.

Hash in compute shader: hash based on gl_FragCoord + time uniform uSeed.

Points geometry: BufferGeometry with 'position' dummy (required by three? For Points, position attribute required for draw count; provide zero positions) + 'ref'. Set drawRange full.

Deposit material vertex uses texture2D(agentTex) — vertex texture fetch supported WebGL2. agentTex = gpu.getCurrentRenderTarget(agentVar).texture — update each frame after compute (ping-pong changes): set pointsMat.uniforms.agentTex.value = gpu.getCurrentRenderTarget(agentVar).texture.

Render order per frame in animate:

Decay material: fullscreen triangle/quad via THREE.OrthographicCamera(-1,1,1,-1,0,1) + PlaneGeometry(2,2).

Paint material subtract mode: use blending: THREE.CustomBlending with blendSrc ONE blendDst ONE, equation for erase = ReverseSubtract? For erase: result = dst - src → blendEquation ReverseSubtract, src ONE dst ONE. Set material.blendEquation accordingly; or two materials (addMat, eraseMat). Use two meshes toggled visible. Simpler: one material, switch blending via needsUpdate — blending changes don't need needsUpdate (state only). Set mat.blending = CustomBlending; mat.blendEquation = AddEquation or ReverseSubtractEquation; mat.blendSrc=OneFactor; blendDst=OneFactor; switching blendEquation property directly works (it's render state). But transparent:true needed. OK.

Paint in world→uv coords: brush pos stored in world units; shader converts. Paint shader outputs mask color = uMask * strength * falloff * dt-independence (per-frame constant while held; fine).

Also "food burst": for next 20 frames paint at random pos with strength — implement via array of active bursts consumed each frame. Good.

Erase uses same shader with negative? With ReverseSubtract blending, src color subtracted. mask all channels.

Zoom/pan: display shader uniforms uZoom, uCenter (world uv center). uv_view = (vUv-0.5)*vec2(aspect,1)/uZoom + uCenter; sample tTrail at fract? Don't wrap view (show dark outside): clamp with border dark. Compute suv = uv_view/uWorldSize... Display samples trail tex at tuv = (vUv - 0.5)/uZoom + uCenter where uCenter in uv space 0..1. Simpler in uv space. Wheel: zoom = 1.1^delta, adjust center to keep cursor point stable: standard: center += (cursorUV - center)(1 - 1/zoomFactor). Then clamp center so view stays within [0,1] partially. Out-of-bounds → dark via checking tuv in [0,1]. Implement in display shader: if(any(lessThan(tuv,vec2(0)))||any(greaterThan(tuv,vec2(1)))) trail=0 and draw faint grid? Just dark.

When zoomed, painting maps: pointer uv → trail uv via same transform; brush radius scales /zoom. Convert in JS: worldBrush = center + (pointerUV-0.5)/zoom... consistent with shader transform: tuv = center + (vUv-0.5)/zoom. So brush trail-uv = center + (pointer-0.5)/zoom; radius_uv = base/zoom. Store brush in trail-uv space (0..1). Agent sensing uses full torus; paint converts uv→world: world = tuv*uWorld (uWorld=(aspect,1)). Hmm trail-uv space is (0..1)x(0..1) regardless of aspect; agent pos world (aspect,1); conversion pos/uWorld = uv. So paint shader can work in uv space directly for distance but must correct aspect for circular brush: d = (tuv - brushUV)*vec2(aspect,1); dist=length(d). Pass uAspect to paint shader. Good.

Pointer coordinates: from event over canvas: uv = (x/w, 1-y/h).

Keys: Space pause; C clear trails; M mute; H hud/gui; S snapshot; B food burst; 1-5 presets; R reset pattern cycle? Keep R = reseed random.

FPS meter: EMA + HUD update 4/s.

Snapshot: composer.render(); canvas.toBlob → a.download 'physarum-garden.png'.

Audio:

Compact.

Mute: master.gain to 0 / back.

Volume slider in GUI.

That's a full design. Now also verify the remaining index content (005-001 entries) — read rest of file to get full picture and the exact marker/format for insertion. Let me cat the rest.

Confirmed: 006 is already a black hole lenser. My Physarum slime mold idea is fresh — no GPGPU colony/simulation of that type exists (004 fluid is Navier–Stokes, 010 boids fish). "011-physarum-garden" it is.

Now write the demo file. I'll write it in parts using heredocs with quoted delimiters to avoid interpolation. The file is large (~800 lines). Let me carefully compose it.

Key components:

1. HTML head + CSS + HUD + import map.
2. Module JS:
   • imports (three, EffectComposer, ShaderPass, UnrealBloomPass, OutputPass, GPUComputationRenderer, lil-gui)
   • config/params
   • renderer setup
   • GCR agents
   • trail ping-pong + decay material + quad scene
   • deposit points scene
   • paint scene
   • composer (display shader pass, bloom, output)
   • pointer/keyboard handlers
   • audio
   • GUI
   • resize
   • animate loop
   • snapshot

Details to nail:

• Renderer: new THREE.WebGLRenderer({antialias:false, powerPreference:'high-performance'}); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.setPixelRatio(Math.min(devicePixelRatio,1.75)); renderer.setSize(w,h).

• Check float RT support: HalfFloatType RT with LinearFilter — universally supported in WebGL2 (EXT_color_buffer_float needed for render to float; HalfFloat render target requires EXT_color_buffer_half_float or EXT_color_buffer_float; WebGL2 + those extensions are nearly universal). Use HalfFloatType. GPUComputationRenderer: pass type? new GPUComputationRenderer(w,h,renderer) uses FloatType by default? It creates RT with FloatType? GCR createRenderTarget uses type FloatType? Its default: new WebGLRenderTarget(sizeX,sizeY,{...type: FloatType})? I recall GCR uses FloatType textures. Float32 renderable needs EXT_color_buffer_float — WebGL2 exposes it widely. Fine. To be safer, could set gpu.setDataType(THREE.HalfFloatType) — GCR has setDataType method. Use HalfFloat for perf; precision for positions (0..aspect) in half float: half has ~3 decimal digits; position 0..1.7 with 10-bit mantissa → step ~0.001 at 1.0. Movement per frame ~0.001-0.003. Precision marginal → jitter artifacts. Prefer FloatType for agent data; HalfFloat for trail (values 0..~8 fine). GCR default FloatType; keep Float. OK.

• Compute shader: needs uniform sampler2D trailTex; plus uniforms. GCR auto provides resolution uniform (Vector2). Wait — does GCR declare uniform vec2 resolution; in the shader prefix? Checking memory of GPUComputationRenderer.js: In createShaderMaterial, uniforms include resolution: { value: new Vector2( sizeX, sizeY ) }? Actually I remember the examples (gpgpu birds) shaders use:

and GPUComputationRenderer source has in addVariable: material.uniforms = { ...uniforms } hmm. Let me recall precisely: GPUComputationRenderer.createShaderMaterial(computeFragmentShader, uniforms) returns new ShaderMaterial({ name, uniforms, vertexShader: getPassThroughVertexShader() }). And in constructor it defines this.passThruUniforms = { passThruTexture: ... }. Where's resolution? In addVariable:

I believe GCR adds resolution define? In the birds example shaders (webgl_gpgpu_birds), velocity/position shaders reference resolution without declaring it, and I recall GCR source line:

with createShaderMaterial doing:

Hmm not sure. Let me check actual r1xx source from memory... GPUComputationRenderer constructor:

and addResolutionDefine:

Yes! It's a define, not a uniform: resolution is vec2(W,H) define. Good — use resolution directly in shader.

• getPassThroughVertexShader: void main() { gl_Position = vec4( position, 1.0 ); } with geometry being a full-screen triangle? GCR renders a Plane(2,2) with passthrough. So compute fragment has gl_FragCoord in pixels.

• Agent texture init: GCR's createTexture() returns DataTexture zeros. First-frame reset via uReset flag as planned.

• Sensing needs trail texture of current state. Set each frame before compute: agentUniforms.trailTex.value = trailRead.texture.

• GCR setVariableDependencies(variable, [variable]) — creates uniform sampler2D agentData declaration automatically (dependency name = variable name). So in shader I must NOT redeclare agentData; GCR prepends uniform sampler2D agentData;\n for each dependency. And my custom uniforms (trailTex etc.) must be declared by me. Good.

• Deposit points: geometry with two attributes: position (vec3 zeros) and aRef (vec2). Vertex shader ignores position, computes NDC from agent texture. Note: three requires 'position' attribute for Points? It computes bounding sphere maybe — set geometry.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 10) to skip compute. drawRange = N.

• The points material: ShaderMaterial, transparent true, blending Additive, depthTest false, depthWrite false.

• Render into trailWrite after decay: renderer.setRenderTarget(trailWrite); renderer.render(decayScene, cam); renderer.autoClear=false; renderer.render(pointsScene, cam); if paint render paintScene; renderer.autoClear=true; setRenderTarget(null);

decay material must write exact values — depthTest false.

• Swap: const t = trailRead; trailRead = trailWrite; trailWrite = t;

• Display pass via ShaderPass: shader { uniforms: { tDiffuse (unused), tTrail, uExposure, uPalette, uZoom, uCenter, uAspect, uTime, uGrain }, vertex, fragment }. ShaderPass clones uniforms → use displayPass.uniforms afterwards. ShaderPass constructor: new ShaderPass(shader, 'tDiffuse'). It renders FullScreenQuad. uniforms accessed as pass.uniforms. But ShaderPass clones shader.uniforms — my values passed initially are cloned; keep initial ones defaults then set via pass.uniforms. OK.

Note: ShaderPass sets this.textureID = textureID; in render sets this.uniforms[this.textureID].value = readBuffer.texture. Fine, tTrail extra.

• Composer: new EffectComposer(renderer) — default HalfFloat RT in modern three. composer.addPass(displayPass); bloom = new UnrealBloomPass(new THREE.Vector2(w,h), strength, radius, threshold); composer.addPass(bloom); composer.addPass(new OutputPass());

displayPass clear: true? ShaderPass doesn't clear by default? EffectComposer handles buffer swap; fine.

• OutputPass uses renderer.toneMapping (ACES) + outputColorSpace sRGB. Set renderer.toneMappingExposure.

• Sizes: trail RT: width = floor(wtrailScale), height = floor(htrailScale)? Trail resolution independent of DPR (composer handles DPR). Use CSS pixels * trailScale. On resize: trailRTs.setSize, uTexel uniform update. Also display uAspect = w/h; agent world aspect = w/h.

• Sensing aspect: agents move in world (aspect,1); sensor offsets are world-space isotropic. uv = pos/world. Sampling texture at uv with offsets dir*sd/world. In compute shader: vec2 uv = pos / uWorld; vec2 off = dir * uSensorDist / uWorld; then sample at uv+off. Since dir is unit world dir, off components differ per aspect — correct isotropy.

• Movement wrap: pos = mod(pos + dir*speed*dt, uWorld).

• Heading from hash: h*6.2831.

• Reset modes in compute shader:

Species assignment: mod(id,3.0) gives even mix. For mode 1 blob, species by angle sector? keep mod.

Note: return inside main before normal path; when uResetMode<0 normal sim. After compute set uniform to -1.

hash11:

• Sensing function:

call with fract(...) of uv. Note trail uv == pos/uWorld toroidal → fract fine.

Turn logic standard:

• dt uniform uDt and uTime, uSeed.

• Deposit color per species channel with deposit amount uniform. Point size uniform: uPointSize in pixels of trail RT: set ~max(1, trailH/540 * 1.0)? At 1:1 scale 1px deposits are fine (high agent density). Use 1.0 at trailScale .8: uPointSize = Math.max(1, 1.2*trailH/900).

Hmm deposit brightness: with 262k agents spread over ~800k texels, average ~0.3 agents/texel/frame → deposit 0.35 gives quick saturation in networks. OK; tune defaults: deposit 0.5, decay 0.94, diffuse 0.5? Classic look: strong diffusion small decay. I'll pick: decay 0.955, diffuse 0.45, deposit 0.55. exposure 1.1.

• Display shader palettes (int uPalette):

col = 1.0 - exp(-cmap * uExposure) → output SDR; then bloom threshold ~0.5? With tonemap in display, values ≤1; bloom threshold 0.4, strength 0.6. But then OutputPass ACES re-tonemaps — double tonemap washes colors. Alternative: display outputs HDR (cmaptuExposure pre-tonemap) and OutputPass ACES handles it; bloom threshold 0.6, strength 0.5. I'll output HDR scaled ~ up to 4 in cores. Add background subtle: bg = vec3(0.008,0.01,0.016) * vignette-ish; plus grain + (hash-0.5)*0.012. Zoom transform here.

Display vertex: standard passthrough with vUv.

• Zoom/pan uniforms: uZoom (1..8), uCenter (vec2 in trail uv, default 0.5,0.5). tuv = (vUv-0.5)/uZoom + uCenter. Out-of-range → just bg color.

Wheel handler:

Standard cursor-anchored: cursor uv c; world point before: p = (c-0.5)/old + center; after: center = p - (c-0.5)/zoom. Implement. Pan: pointer drag with middle button (button 1) or when Space held with left. Track movement dx,dy → center -= (dx/w, -dy/h)/zoom. Clamp center within [0.05,0.95]? Keep clamp to [0,1] each axis when zoom=1 center=0.5. Fine loose clamp [-0.5,1.5] to avoid losing; I'll clamp to [0,1].

Double-click: reset view.

• Brush: pointerdown left (button 0, no space) → painting add (mask by brushSpecies: All → (1,1,1), else unit). Right (button 2) → erase (ReverseSubtract, mask (1,1,1)). contextmenu preventDefault. pointermove updates pos. pointerup stops. Paint each frame while active (and on pointerdown immediately).

Paint shader (fullscreen quad):

Material: transparent, depthTest false, blending Custom:

For erase set paintMat.blendEquation = THREE.ReverseSubtractEquation. Note with CustomBlending, transparent:true required to enable blending.

Radius in uv units (y-based): 0.04 default; scales with 1/zoom for world-constant size: radius_uv = base/zoom? base defined in uv at zoom1. OK: radiusUv = P.brushSize / view.zoom.

• Food burst: bursts.push({x,y,ttl:30}) — each frame consume: paint at burst pos (with jitter), ttl--. Add via button and key B at random or at brush? "Scatter food" button → 12 random bursts. Mask all channels *0.6.

Actually paint strength per frame 0.5 → saturates fast. ok.

• HUD:

Hints: "Drag: feed · Right-drag: erase · Wheel: zoom · Space+drag: pan · B: food burst · Space: pause · H: hide UI · M: mute · S: snapshot". Wait Space conflicts pause vs pan-modifier. Use: Space = pause (toggle), pan via middle-drag or Shift+drag. Shift+left = pan. Adjust hints.

• GUI folders as planned. lil-gui import from unpkg. Also its CSS is injected by the lib automatically (lil-gui injects styles). Good.

• Audio: implement compact synth (pad + noise wash + occasional pluck). Toggle via button/M. Autostart on first pointerdown (start muted fade-in).

Pluck scheduler maybe skip; pad chord crossfade every 8s enough + gentle filter LFO.

• Adaptive quality: if avg fps < 38 over last 3s and trailScale > 0.5: trailScale -= 0.1 → resize trails. Toggle via params.adaptive=true.

• Pause: stop compute & time; still render composer (for zoom/pan viewing), HUD shows PAUSED badge.

• Snapshot: button + S: composer.render(); canvas.toBlob(...) download physarum-garden-${Date.now()}.png.

• Handle WebGL2 float support: try creating; if fail alert overlay. Skip elaborate fallback; assume fine.

Also color-code HUD legend dots for species.

Edge: composer render when paused — displayPass reads trailRead which persists. OK.

resize: camera? No cameras except ortho quadCam (fixed). composer.setSize, bloom resolution, trail sizes, uAspect uniforms (agent uWorld, paint uAspect, display uAspect), renderer.setSize.

Now also devicePixelRatio: setPixelRatio(min(dpr,1.75)). trailScale default 0.85. agentCount default '262k' (512×512). Rebuild function:

Simpler mapping: options {'128k': [512,256], '262k':[512,512], '524k':[1024,512], '1M':[1024,1024]}.

build: dispose old gpu (call gpu.dispose?.() if exists — r170 GCR has dispose? It has dispose() since r150-ish. Guard with if). Recreate points geometry & material uniforms refs. Set uResetMode = 0.

Points material recreation: rebuild geometry only; material same but uniforms.agentTex updated next frame anyway.

Compute shader uniform objects shared across rebuild? Recreate each build for cleanliness.

GCR init error check: const err = gpu.init(); if(err) console.error.

For deposit vertex shader, need uv attribute 'aRef' and sampling agentDataTex. Also uniforms uWorld? No—NDC: ndc = pos/uWorld*2-1. Provide uWorld uniform (aspect,1). Update on resize.

Also point size uniform update on trail resize.

gl_PointSize must be ≥1; some GPUs cap at... fine.

One more consideration: deposit into trailWrite AFTER decay pass rendered into it. decayScene renders full quad with autoClear true first (clears then draws). Then autoClear false for points & paint. Ensure points scene has no background. scene.background = null default.

Also renderer.setClearColor black alpha 0 for RTs.

Trail RT params:

Wrapping: sensing uses fract() manually → RepeatWrapping not needed for sense (fract makes 0..1 anyway). Diffusion blur at edges with ClampToEdge causes edge darkening — with toroidal world better to wrap blur too: set wrapS/T = RepeatWrapping → blur samples wrap seamlessly. Deposit points near edge deposit only at their texel (no wrap splat) — minor; acceptable. Use RepeatWrapping for trail RTs. depthBuffer false, stencilBuffer false.

Display: tTrail sampled with vUv within [0,1] when zoom=1. OK.

Now compute shader full text:

ang = ang; fine (no-op). GLSL int uniform compare ok.

Init block (mode>=0) — write full code with hash-based placement as sketched. Species: float sp = mod(id, 3.0);

Decay shader:

Note nested loops need braces in GLSL1? Single statement without braces OK but two loops + statement needs care — write with braces.

Display shader:

HDR output preserved (col can exceed 1) — bloom then ACES.

Paint shader as sketched; varying vUv.

Deposit shaders as sketched.

Vertex shared:

For PlaneGeometry(2,2) positions range -1..1, uv 0..1. gl_Position z=0. Good for all quad passes.

Now JS assembly. Also note ShaderPass import path 'three/addons/postprocessing/ShaderPass.js', UnrealBloomPass, OutputPass, EffectComposer. GPUComputationRenderer 'three/addons/misc/GPUComputationRenderer.js'. lil-gui via URL.

Audio synth implementation (compact but real):

Start on first pointerdown (also on keydown).

GUI setup with lil-gui:

folders... implement with onChange updating P and uniforms where needed (uniforms read P each frame mostly — simplest: in animate copy P → uniforms every frame; cheap. Then GUI onChange only needed for structural things (agent count, palette int, trailScale, bloom, zoom). I'll sync per-frame: speed, sensorDist, sensorAngle, turnSpeed, jitter, cross, decay, diffuse, deposit, exposure, brushSize, brushStrength, grain.)

Presets object:

applyPreset(name): Object.assign(P, ...); gui.controllersRecursive().forEach(c=>c.updateDisplay()).

Patterns: {'Random':0,'Central bloom':1,'Ring':2,'Clusters':3} → uResetMode = v one frame; plus optional clear trails.

Food burst & clear & snapshot & pause buttons.

Keys handler.

HUD update: fps EMA, agent count label, zoom %, paused badge. Species legend colored dots: species colors from palette? just static 3 dots (green/cyan/pink).

Alright — also the canvas container + loading overlay that fades after first frame; plus WebGL fail message.

One more: renderer.setAnimationLoop vs rAF — use rAF with clock.

Contextmenu prevention on canvas.

Pointer events with setPointerCapture for smooth drag.

Also prevent GUI pointer events from painting (check event target is canvas).

Time to write files. I'll write the file in ~4 chunks via heredocs appended. Then extract module JS → node --check as .mjs. Also quick sanity greps (balanced tags). Then update index.html with new card via python3/node insertion after the marker comment. Then final verify.

Marker: <!-- New demos are added here --> — insert new card right after it (newest first).

Card HTML:

Note 010 used <span class="num">010</span> while older ones "Demo 008". I'll use 011 style like 010.

Description: "A multi-species slime-mold colony simulated on the GPU — up to a million virtual physarum agents sense, deposit and follow pheromone trails in real time, weaving living networks you can feed, erase and reshape. Featuring GPGPU agent compute, ping-pong diffusion/decay trail buffers, three color species with cross-affinity, five behavior presets & four seeding patterns, food painting, zoom/pan, bloom & grain post-processing, a generative ambient WebAudio score, snapshots and full live controls."

Now write the demo file. Chunk sizes manageable (~200 lines each). Let me carefully draft the entire file content here mentally and then emit.

Also careful: in heredoc with 'EOF' quoted, $ and backticks safe.

GLSL template literals in JS contain ${...}? Avoid entirely.

Let me write part 1 (HTML head, CSS, body, import map, start of module script: imports, params, renderer, scenes setup).

CSS: dark, HUD top-left, hints bottom, pause badge, species legend, loading overlay, canvas fullscreen, lil-gui override z-index.

Let me be careful with the compute shader string and resolution define (GCR provides resolution define — yes as defined earlier; it's a define so resolution.x works as vec2 member access? #define resolution vec2(512.0, 512.0) — then gl_FragCoord.xy / resolution → division by vec2 literal OK; resolution.x → vec2(...).x valid GLSL? Swizzle on constructor expression: vec2(512.0,512.0).x — yes valid.

Deposit vertex shader: attributes declared automatically for built-in? Raw ShaderMaterial: declare attribute vec2 aRef;? In WebGL2 three converts attribute → in. Since we write GLSL1-style, declare attribute vec2 aRef; and attribute vec3 position; — three's WebGLProgram auto-prepends declarations for standard attributes (position, normal, uv) in ShaderMaterial! Yes: for ShaderMaterial, three prepends #define, precision, and standard attribute declarations (position, normal, uv) automatically. So do NOT redeclare position/uv (would conflict? Actually three prepends attribute vec3 position; attribute vec3 normal; attribute vec2 uv; — redeclaring would error "redefinition"). Custom attribute aRef must be declared. Varyings declare myself.

For compute pass, GCR uses its own passthrough vertex shader; fragment: don't declare resolution; custom uniforms declare; agentData declared by GCR dependency mechanism. Good.

For fullscreen quad materials (decay, paint, display via ShaderPass): vertex shader I provide: three prepends attribute position/uv — use them. Don't redeclare. Varying vUv declared in both vertex & fragment.

ShaderPass: I pass shader object {uniforms, vertexShader, fragmentShader}; ShaderPass clones uniforms; creates ShaderMaterial with my vertex/fragment. vUv from uv attribute. Good.

Deposit points: geometry attributes: position (N,3 zeros), aRef (N,2). Material ShaderMaterial with attribute declaration attribute vec2 aRef; only (position auto). Vertex:

Vertex texture fetch: texture2D in vertex — compat define maps to texture; vertex units support guaranteed in WebGL2. Good.

Fragment:

Paint scene: same quad mesh geometry reused with paint material (separate mesh in own scene or same mesh swapped material — separate scene + mesh).

Now the animate order + frame uniforms sync.

Snapshot needs renderer not clearing... fine.

Reset trails: for (rt of [trailA, trailB]) { renderer.setRenderTarget(rt); renderer.setClearColor(0x000000, 0); renderer.clear(true,false,false);} renderer.setRenderTarget(null);

Adaptive: every 120 frames compute avg fps; if <38 && P.trailScale>0.55: P.trailScale=round((P.trailScale-0.1)*10)/10; applyTrailSize(); gui update.

Also cap delta dt.

HUD elements ids: #stat-fps, #stat-agents, #stat-zoom, #badge-pause.

Loading overlay fade: after first composer.render, add class hidden → CSS opacity transition, remove after.

WebGL check: try creating renderer in try/catch → overlay error text.

Let me now also define initial camera-ish defaults: none needed.

Food burst implementation:

In loop when !paused: take up to e.g. all bursts: paint each at (x + jitter) with radius P.brushSize*0.8/zoom? Food in trail-uv space (zoom-independent). radius fixed 0.03. Use paintScene rendering once per burst per frame (multiple renders fine, small count ~14). Or combine: loop render paint mesh per burst. OK.

Paint uses uBrush (uv), uRadius, uMask, uStrength.

Also pointer paint while paused? Allow painting even when paused (fun). Compute skipped; decay skipped; deposit skipped; but paint applies. So move paint application outside if(!paused) block: apply after deposit regardless (needs trailWrite target though — when paused, no decay pass... simplest: when paused, render paint directly into trailRead (current) and skip swap. Implement: if paused && painting: setRenderTarget(trailRead), autoClear false, render paintScene, restore, no swap.

Structure:

renderPaint sets uniforms & blendEquation (add/subtract) then renderer.render(paintScene, quadCam).

Keyboard 'Space': toggle pause; preventDefault to avoid page scroll.

Double-click resets view; also stop dblclick from painting twice — harmless.

Zoom wheel: passive:false preventDefault.

GUI controllers: use options/sliders; store gui globally for updateDisplay after presets/adaptive changes.

Palette dropdown: {'Neon Bio':0,'Ember':1,'Frost':2,'Mono':3}.

Pattern: {'Random scatter':0,'Central bloom':1,'Ring':2,'Cluster grid':3} + "Apply pattern" action? Use dropdown then button, or dropdown onChange immediately applies (set uResetMode). I'll make dropdown onChange apply immediately + clear trails.

Agent count dropdown onChange → buildAgents(tex dims). Show note.

trailScale slider 0.4–1.0 step 0.05 onChange → resizeTrails.

bloom toggle & strength slider.

zoom display-only? add "Reset view" button.

Audio: volume slider 0..0.8, mute checkbox, note "starts on first click".

OK — writing now. Also remember meta viewport, title, favicon? add emoji favicon via data URI 🦠? nice: <link rel="icon" href="data:image/svg+xml,...🧫"> simple text emoji svg. Keep simple.

Let me count N agents for HUD: texW*texH formatted k/M.

One risk: UnrealBloomPass at big canvas with half res... fine.

Another risk: gpu.compute() inside paused skip — but uniforms.trailTex still set once. ok.

Edge: on resize, uWorld aspect changes → agents get redistributed via mod. Fine.

Write the file now in 4 chunks. I'll aim for correctness over brevity. After writing, extract & node --check.

Chunk plan:

1. Head+CSS+body+importmap+<script type="module"> imports + params + presets + renderer + quad scaffolding + trail RTs + decay/paint materials.
2. Agents (compute shader, buildAgents), deposit points.
3. Composer/display, GUI, events (pointer/keys/resize), audio.
4. Loop + HUD + snapshot + init + closing tags.

Ensure </script> and </body></html> at end.

Let me draft each carefully.

Part 1 content:

Then JS body. Let me write all of it.

Presets, patterns, AGENT_SIZES maps.

Renderer setup with try/catch.

Quad cam & geometry shared.

Trail RT creation function makeTrail(w,h) & resizeTrails.

Decay material/scene; paint material/scene.

I'll write it all in the shell heredocs now. To reduce risk of a single massive command failing, write 4 appends. Use set -e? Just sequential commands.

Also add index.html closed properly.

Also GLSL strings: define as JS template literals with backticks — inside heredoc quoted 'EOF' fine.

Compute shader (with init modes):

Careful: vec2 sd = vec2(uSensorDist) / uWorld; ok.

cell / resolution — resolution is define vec2 → fine.

uTime grows; fract keeps hash stable-ish. Note: uTime0.317 fract changes every frame (time increments 0.0160.317≈0.005) — hash varies per frame → good randomness.

Ring radius 0.30 in world units (world height 1) — radius in both axes equal in world units → visually ellipse when aspect wide? World (aspect,1): radius 0.3 x-world-units = 0.3/aspect in uv-x vs 0.3 in uv-y → circle in world space appears as circle only if screen pixels square — yes world units are square by design (aspect,1 maps to w×h screen). Good.

buildAgents:

Hmm — GCR addVariable creates material with uniforms = {} then we assign agentU props — but GCR's addVariable signature: addVariable(name, computeShader, initialTexture) returns variable; variable.material.uniforms initially empty object; adding keys after is fine (before gpu.init()? init creates render targets & checks — uniform additions after init also fine since material compiled at first render. Order: assign then init, safe.)

Also gpu.setDataType exists (r1xx). Fine guarded.

needsReset flag: after first compute with uResetMode>=0 set it to -1. Actually set agentU.uResetMode.value = P.pattern? 0 default and in loop:

queueReset(mode) { resetQueued = mode; agentU.uSeed.value = Math.random()*100; }

Trail & decay:

Decay scene:

decayU referenced in resizeTrails — define decay before calling resizeTrails. Order code accordingly.

Paint:

Note: sharing quadGeo across scenes fine.

CustomBlending with premultiplied? blendSrcAlpha etc default fine. Also need blendDstAlpha? defaults OneFactor? Three defaults blendDstAlpha = null → uses blendDst. OK.

renderPaint(x, y, radius, mask, strength, subtract):

Display/composer:

ShaderPass clones uniforms; so access displayPass.uniforms.uZoom etc. Initial clone copies values fine.

DISPLAY_FRAG with palettes — write as earlier.

View state: const view = { zoom: 1, center: new THREE.Vector2(0.5, 0.5) }; display uniforms synced from view each frame.

GUI + events + audio + loop as planned.

aspect() helper: const aspect = () => innerWidth / innerHeight;

World uniform update on resize: agentU.uWorld.value.set(aspect(),1); pointsMat uWorld too; paint uAspect; display uAspect.

Per-frame uniform sync from P:

Pointer logic:

updatePointerUV: screen uv → trail uv via inverse of display transform: tuv = (suv - 0.5)/zoom + center.

Wheel:

Attach wheel to canvas.

Brush mask from P.brushSpecies: 'all' (1,1,1), 'green' (1,0,0), 'cyan' (0,1,0), 'magenta' (0,0,1).

In loop painting (even paused): mask & strength P.brushStrength (erase fixed 0.8), radius P.brushSize / view.zoom.

Note paint coordinates in trail-uv space, radius uv — radius constant on screen? P.brushSize/zoom keeps world-size constant. ok.

Bursts: const bursts = []; scatterFood(n) pushes {x,y,ttl,str}. In trail pass (unpaused): for each burst: renderPaint(bx + rand jitter small, y..., 0.035, white*str...) ttl--, remove expired. Also when paused ignore bursts.

Loop:

paintBrush():

applyBursts:

adaptQuality:

updateHUD: fps, agents label, zoom %, cross value.

Audio as designed. Key handler:

snapshot:

Backtick template ok.

GUI:

Presets folder:

applyPreset assigns params & refreshGUI().

refreshGUI: gui.controllersRecursive().forEach(c => c.updateDisplay());

Hide UI H: toggle style display of hud/hints and gui.domElement.

AudioEngine as sketched, with P.muted/P.volume defaults.

Boot sequence order:

onResize: renderer.setSize, composer.setSize, bloom.setSize? UnrealBloomPass has setSize handled by composer. display uAspect, agent uWorld, points uWorld, paint uAspect, resizeTrails.

renderer.setPixelRatio(min(devicePixelRatio, 1.75)); composer.setPixelRatio same.

Also initial clearTrails().

uSeed random at boot.

updateHUD cross text = P.cross.

One caveat: GCR requires WebGL2? It works with WebGL1 + float ext historically; three r170 is WebGL2-only. Fine.

Another caveat: renderer.capabilities.isWebGL2 === false check — r170 always WebGL2. Drop guard or keep harmless. Keep simple: no guard.

Overlay: hide after frame 3.

Also make sure the ShaderPass display gets tDiffuse bound (readBuffer) even though unused — fine.

Potential pitfall: UnrealBloomPass with HalfFloat composer + OutputPass: standard.

Potential pitfall: texture2D in fragment shaders — three r170 WebGLProgram prepends for fragment: #define texture2D texture when isWebGL2? In newer three (r163+), WebGL1 removed; shaders compiled as GLSL3 with automatic conversions: WebGLProgram adds:

for vertex; fragment:

Yes these compatibility defines still exist in r17x for built-in conversion (they're in WebGLProgram under parameters.glslVersion !== GLSL3 path? Actually they add #version 300 es prefix with those defines when... hmm. In r152+: versionString = parameters.glslVersion ? ... : '#version 300 es\n'? Historically: when isWebGL2 (now always), three prepends "#version 300 es" plus compatibility defines UNLESS material.glslVersion === THREE.GLSL3. The compat defines include texture2D → texture. This was true through r16x and remains in r170. I'm confident enough; the abyssal demo used texture2D similarly per its summary (custom ShaderMaterials) — presumably worked. Also GCR example shaders use texture2D. Good.

One more: my DISPLAY/QUAD vertex uses uv and position — auto-declared. GCR compute fragment: uses gl_FragCoord — fine.

Deposit vertex uses texture2D — vertex compat define exists.

lil-gui 0.19.2 esm.js — exists.

Now index.html update via python3 script (check python3 availability — likely). Alternative: node. I'll use node since guaranteed-ish? Both probably present; use python3 first fallback node. Actually simplest robust: use node with a small script reading file, replacing marker with marker+card, writing back. Node exists (used for --check previously). Use node.

Write everything now. I'll create the file in 4 heredoc appends. Watch out: heredoc content includes EOF? No. Use unique delimiter 'HTMLEOF1' etc.

Also: avoid $(...) etc — quoted heredoc so fine.

Let me also double check DECAY_FRAG braces and display shader code.

DISPLAY_FRAG: