Create Abyssal Bloom Demo

Let me understand the current state. The task is "Wake up and do as you please." The last execution was creating the "Abyssal Bloom" demo, which completed but with a note that the final file was at /tmp/ab/index.html and needed to be deployed to /space/demos/010-abyssal-bloom/index.html and the main index updated.

However, the summary says the last execution's outcome was "success". The next steps mentioned were to deploy the file. Let me check whether the demo was actually deployed. Since /tmp may not persist, I should check the state of /space/demos/.

Let me start by installing shell tools and exploring the current state.

Let me check the current state of the demos folder and see if the last demo was deployed.

So the previous run created the Abyssal Bloom demo at /tmp/ab/index.html but the /tmp folder is not persistent — it's gone. The demo was never deployed to /space/demos/010-abyssal-bloom/. The last execution summary said the file was fully developed and validated at /tmp/ab/index.html, but /tmp/ab doesn't exist anymore.

So my task now: "Wake up and do as you please." I should continue my purpose — create cool Three.js demos. The natural thing is to recreate the Abyssal Bloom demo (since it was lost) and deploy it as /space/demos/010-abyssal-bloom/, then update the index.

Let me first look at the existing index.html and one or two existing demos to understand the style/format used.

Now let me check what Three.js version the existing demos use (import map) so I stay consistent.

The demos use Three.js 0.160.0 from jsdelivr with ES modules and import maps. Now I'll build the Abyssal Bloom demo. I'll write it in parts to a local temp directory (in the shell environment — note the shell environment seems to be separate from /space which is s3fs-mounted persistent storage; writing to /space should persist).

Wait — important: the shell environment — is /space accessible from the shell? Yes, the previous ls -la /space/demos/ worked and showed the storage info. So I can write directly to /space/demos/010-abyssal-bloom/index.html. But the hint says /space may be slow (s3fs), so prefer batch operations. I'll write the file locally first (e.g., /tmp/ab/) then copy to /space in one operation. Actually the previous run wrote to /tmp/ab and validated, but then /tmp got wiped between runs. This time I'll write locally and deploy within the same run.

Let me design the demo carefully, in parts:

Part 1: HTML head + CSS + body HUD elements + import map. Part 2: JS module start: imports, config/state, renderer, scene, camera, controls, lights, post-processing. Part 3: Environment: seabed (procedural noise), rocks, anemone glow dots, caustics shader plane, god-ray shafts, marine snow particles. Part 4: GPGPU boids: GPUComputationRenderer setup, velocity/position shaders, fish geometry (procedural low-poly), instanced rendering with custom shader material. Part 5: Jellyfish: instanced bells with shader, tentacles as LineSegments with shader, CPU update logic. Part 6: Lure (pointer-controlled light + glow), sonar pulse visuals. Part 7: Web Audio engine: drone, whale calls, bubbles, sonar ping. Part 8: Input handling, GUI (lil-gui), HUD updates, main loop, resize.

Key technical details to get right:

1. GPUComputationRenderer from three/addons/misc/GPUComputationRenderer.js. Usage:

For boids, each fish needs a unique "index" — stored in the position texture's w or via uv. Standard approach: WIDTH×WIDTH texture where WIDTH = ceil(sqrt(count)).

Boids neighborhood search: checking ALL other boids per boid is O(N²) — with 4096 boids (64×64), that's 4096 checks per fragment × 4096 fragments = 16.7M ops — fine on GPU. The classic three.js example does this. To keep the shader cost reasonable I'll cap fish texture at 64×64 = 4096 max, default 2048 (48×48=2304? no — texture is square; I'll use WIDTH=64 and use only fishCount of them via uniform, or just fix texture at 64×64 and scale active count by clamping initial positions + using fishCount uniform with early-out). Simpler: fixed WIDTH=64 → 4096 fish, and GUI fishCount adjusts how many are "active" — inactive ones are hidden (scaled to 0 in vertex shader). But the boids simulation would still compute neighbors among all 4096 including inactive... The standard three.js webgl_gpgpu_birds example fixes BIRDS = WIDTH*WIDTH. I'll do: WIDTH chosen at build = 64, and fishCount uniform controls the neighbor loop bound? A loop bound must be constant-ish in GLSL ES 1.0... WebGL2 allows dynamic loop bounds. Three r160 uses WebGL2 by default. GLSL ES 3.00 allows dynamic loop conditions. GPUComputationRenderer shaders compile as fragment shaders; with WebGL2, three injects #version 300 es? Actually RawShaderMaterial vs ShaderMaterial... GPUComputationRenderer uses ShaderMaterial with its own prefix. In WebGL2, three's ShaderMaterial gets compiled with GLSL3 only if material.glslVersion set. Default ShaderMaterial in WebGL2 uses GLSL1-style shaders (three transpiles texture2D → texture). Dynamic loop bounds: for (int i = 0; i < WIDTH*WIDTH; i++) with constant is safest.

Simpler and safe: fixed 64×64 = 4096 fish maximum, loop over all 4096 always, but multiply effect by step(float(i), fishCount). And in vertex shader, hide fish beyond fishCount by scaling to zero. Cost: 4096 × 4096 = 16.7M texture fetches per frame for velocity — that's heavy but GPUs handle the three.js birds example (which uses 32×32=1024 birds and loops over all). Let me use WIDTH=48 → 2304 fish, 5.3M fetches — okay. Or 64×64 with default count 2000. Hmm, the loop still runs 4096 iterations regardless. Let me just use WIDTH=48 (2304 max), default 1600. That's a good balance. Actually, the neighbor loop with early continue on distance check still fetches texture each iteration. 5.3M fetches/frame at 60fps = 320M/s — fine for modern GPUs.

Actually let me reconsider: three.js birds example uses WIDTH=32 (1024 birds). I'll use WIDTH=48, giving 2304 — double the example, still reasonable.

2. Fish rendering: InstancedBufferGeometry from a procedural low-poly fish. Each instance references its GPGPU uv via attribute vec2 reference. Vertex shader fetches position (xyz) and velocity (xyz) from textures, orients the fish along velocity, adds tail wag based on time + speed.

Procedural fish geometry: build with BufferGeometry manually — body as elongated diamond, tail fin. Let me write a small helper that creates vertices: a simple bipyramid stretched along +Z or +X... I'll make fish face +Z. Vertices: nose (0,0,L), tail base (0,0,-L*0.6), plus ring of 4 points at mid. Then tail fin triangle. Keep ~14 triangles. Add per-vertex "side" info for tail wag: wag amplitude increases toward tail (based on z coordinate — vertices with z<0 wag). I can compute wag in shader from local position z directly: float wag = sin(time*speedFreq + phase) * smoothstep(0.0, -bodyLen, pos.z). Simpler: wag = sin(...) * (-pos.z / bodyLen) clamped.

Orientation: build a basis from velocity: forward = normalize(velocity), up ~ (0,1,0), right = cross(up, forward), then transform local vertex. Standard lookAt-style matrix in shader.

Color: bioluminescent gradient along body + per-instance hue variation via reference uv. Add fresnel-ish glow. Use additive-ish emissive material — fish are small; render with ShaderMaterial, depthWrite true, transparent false, and let bloom do the glow.

3. Jellyfish:

• Bells: InstancedMesh or InstancedBufferGeometry of a hemisphere cap (SphereGeometry with phiLength/thetaStart..thetaLength). Custom ShaderMaterial: per-instance attributes (offset position updated per frame on CPU? or static attributes updated via attribute array each frame — 24 jellies, cheap). I'll update instanceMatrix per frame for position/scale pulse, and pass pulse phase as instanced attribute. Shader does: bell glow gradient (rim bright), internal "organs" glow via fresnel, transparency additive blending.
• Tentacles: For N jellies × K tentacles × M segments LineSegments. CPU updates per frame would be fine (24×6×12×2 = 3456 vertices) but shader-based is cooler: static geometry where each vertex carries attributes: jellyIndex, tentacleAngle, t (0..1 along tentacle), segmentEnd flag. In vertex shader: compute jelly base position from a uniform array (vec3 array of 24) + pulse phase uniform array, then tentacle hangs down with sinusoidal sway that increases with t, plus lag behind jelly motion using jelly velocity uniform. All in shader — one draw call. Uniform arrays of 24 vec3s — fine.

Bell pulse: scale = 1 + 0.18*sin(phase); jelly propulsion: velocity += up * pulse impulse on CPU.

4. Caustics: plane above? No — caustics light patterns on the seabed. I'll add a second plane slightly above the seabed with additive ShaderMaterial computing voronoi-ish caustics: caustic(uv, t) using two layered voronoi. Additive blending, fade with depth/distance. But seabed is heightfield — a flat plane would clip. Alternative: apply caustics directly in the seabed material via onBeforeCompile injecting emissive caustic pattern using world xz. That's cleaner! I'll use MeshStandardMaterial for seabed with onBeforeCompile to add caustic glow modulated by time.

5. God rays: several tall planes with gradient alpha, billboarded around Y towards camera, additive. Slow sway.

6. Marine snow: THREE.Points with custom shader: positions random in a box around camera; in vertex shader, wrap position modulo box size relative to a slowly drifting offset; size attenuation; soft round sprite in fragment via distance from gl_PointCoord center.

7. Sonar pulse: uniform vec3 pulseOrigin + float pulseTime in fish velocity shader → radial fright force. Visual: expanding ring sphere shader, additive, fades.

8. Lure: pointer move → raycast onto a plane at camera-facing depth → target position; lure lerps there. PointLight cyan at lure, plus glow sprite. Hold pointer down → "attract mode" stronger (uniform attractStrength 1 vs 0.25 idle). Fish velocity shader: force toward lure within radius.

9. Audio: WebAudio:

• Drone: two detuned triangle/sine oscillators at ~55Hz & 82.5Hz through lowpass, slow LFO on gain.
• Whale call: sine with pitch envelope gliding up-down + vibrato, through delay; schedule every 9–20s random.
• Bubbles: short filtered noise bursts with quick pitch rise, random intervals.
• Sonar ping: sine 880Hz with exponential decay + delay feedback echo.
• Master gain, mute toggle (M). Start on first user gesture (pointerdown/keydown) to satisfy autoplay policies. Also a "sound" toggle button.

10. Post: EffectComposer + RenderPass + UnrealBloomPass + custom vignette/grain ShaderPass + OutputPass. In r160, OutputPass handles tone mapping/color space.

11. GUI: lil-gui from CDN. The other demos likely import lil-gui — let me check what 009 imports. Let me grep. Actually, the import map in 009 only showed three & three/addons. lil-gui might be imported from unpkg directly in the module. Let me check quickly.

Also camera auto-orbit, pause, snapshot (toDataURL → download link). HUD with FPS, fish count, depth readout. Loading overlay that fades after init.

Let me check how 009 imports lil-gui and does snapshot, for consistency.

The demos import lil-gui from three/addons/libs/lil-gui.module.min.js.

Now I'll write the Abyssal Bloom demo. I'll build it in parts locally at /tmp/ab2/ (within this run — it persists during the run) and then deploy to /space/demos/010-abyssal-bloom/index.html and update the index, all in this run.

Let me write the code carefully. I'll create the file in ~8 parts using write operations, then validate the JS with node --check.

Let me draft the full code mentally with care for correctness:

Import map (same as 009):

Imports:

State/config:

Renderer/scene/camera:

Lights: dim ambient (0x1a2f4a, 0.6), directional from above (0x2e6f8e, 0.5) — deep blue; lure point light.

Composer:

Custom grade shader: uniforms tDiffuse, time, vignette strength; grain via hash(uv*seed+time).

Seabed: CircleGeometry(150, 128) rotated -PI/2, displaced on CPU with value noise:

Position y = fbm → smooth hills; flatten near center a bit. MeshStandardMaterial({ color: 0x0d2733, roughness: 1, metalness: 0 }) with onBeforeCompile adding caustics: inject uniforms uTime, uCaustic, and in fragment after lighting, add emissive term: totalEmissiveRadiance? MeshStandardMaterial has emissive. I'll patch #include <emissivemap_fragment> to add caustic color into totalEmissiveRadiance based on vWorldPosition — need world position varying: add varying vec3 vWorldPos; in vertex via #include <worldpos_vertex> patch or begin_vertex. I'll add custom varying in vertex shader patch:

• vertex: replace #include <begin_vertex> with itself + vWorldPos = (modelMatrix * vec4(position,1.0)).xyz; (position before displacement? begin_vertex gives transformed = position; modelMatrix * vec4(transformed,1) works after begin_vertex; but at begin_vertex point, transformed is just defined. I'll patch #include <worldpos_vertex> — it computes worldPosition when needed... simpler to patch begin_vertex: vec3 transformed = vec3( position );\n vWorldPos = ( modelMatrix * vec4( position, 1.0 ) ).xyz;
• fragment: replace #include <emissivemap_fragment> with itself + caustic calc:

Caustic function (classic "shadertoy caustics"):

That's the famous water caustics.

Rocks: InstancedMesh(IcosahedronGeometry(1,1), standard mat, 120), random scale/pos on seabed height fn; color variation via instanceColor.

Anemone glow dots: InstancedMesh(SphereGeometry(0.14, 6, 6), MeshBasicMaterial vertexColors? Use instanceColor with basic material — instanceColor works with MeshBasicMaterial. Additive? Basic material + bloom will glow nicely. ~180 dots clustered into groups.

God-ray shafts: geometry PlaneGeometry(6, 70); material ShaderMaterial additive transparent depthWrite false:

Actually plane: y from -35..35. Top (vUv.y=1) near surface bright, fading down. alpha = (0.5+0.5sin(uTime*0.3+uSeed))*0.10. Billboard: in JS, for each shaft, rotation.y = atan2(cam.x - shaft.x, cam.z - shaft.z). 9 shafts tilted slightly.

Marine snow: BufferGeometry with position attr (N=CFG.snow, max 2000), aScale attr. ShaderMaterial:

Note: mod of negative → in GLSL mod(x,y) = x - y*floor(x/y) → always positive for positive y. Good.

uCam updated per frame.

GPGPU boids:

WIDTH=48, COUNT=2304.

Position texture: xyz = pos, w = phase (random) — or store nothing. Velocity texture: xyz = vel, w = unused (store speed?). I'll store in pos.w a per-fish random "seed" used for wag phase & color; it must persist — position shader writes it back.

fill:

Velocity fragment shader (GLSL1 style for GPUComputationRenderer):

Index of self: float idx = floor(gl_FragCoord.x) + floor(gl_FragCoord.y) * resolution.x; — gl_FragCoord.x is pixel center 0.5..47.5, floor gives 0..47. Good.

Neighbor loop:

Wander:

Lure attraction:

Sonar fright:

Jelly avoidance:

Bounds (cylinder radius 60, y in [-20, 24]):

Integrate:

Hmm — if idx >= uCount (inactive fish), park them far away? They should not render anyway (vertex shader scales 0). Their sim continues — fine, but their neighbors inclusion excluded by loop break. Park inactive fish at y = -999? If inactive fish drift normally that's fine since hidden. But careful: position shader also must keep seed w.

Position shader:

Fish geometry: procedural. Build arrays:

Let me define with 4-sided rings (diamond): ring points (±r, 0, z) and (0, ±r*0.55, z) — vertically squashed diamond.

• nose: (0,0,0.7)
• ring A at z=0.25, r=0.17
• ring B at z=-0.28, r=0.10
• tail base: (0,0,-0.52)
• tail fin: two triangles in vertical plane: verts (0, 0.16, -0.78), (0, -0.02, -0.5), (0, -0.20, -0.72) — a fan from tail base. Use double-sided material (side: THREE.DoubleSide) so fin planes show.

Indices: nose→ringA (4 tris), ringA→ringB (8 tris? 4 quads = 8 tris but with 4-sided rings it's 4 quads → 8 tris), ringB→tailbase (4 tris), fin (2-3 tris). Total ~19 tris.

Normals: compute via computeVertexNormals after indexing.

Attributes for instancing: after building base BufferGeometry:

Fish material ShaderMaterial:

Note: wag rotates the body? For simplicity, offset applied in local x before basis transform — fine.

fragment:

Hmm, stripes need local coordinate — pass local z as varying vLocalZ. Then stripe = smoothstep(0.6,1.0,sin(vLocalZ*14.0 + vSeed*9.0)) → glowing bands along body. Color palette: mix between cyan (0.2,0.9,1.0), violet (0.6,0.3,1.0), teal-green (0.2,1.0,0.7) by vSeed fract steps: hue = fract(vSeed*7.0) → col = palette(hue) with a cosine palette:

Final color: body dark base (0.02,0.05,0.09) lit simple (n.y*0.5+0.5) + glow stripes * stripeIntensity + fresnel rim * pal. Plus distance fade into fog color? Fog: ShaderMaterial doesn't auto-fog unless material.fog = true and shader includes fog chunks. For custom shader, add manual fog:

I'll implement manual fog in fish/jelly shaders.

gl_FragColor = vec4(col, 1.0). No transparency.

Jellyfish system:

JELLY_MAX = 26. Data on CPU: array of {pos: Vector3, vel: Vector3, phase, freq, size, seed}.

Bell geometry: SphereGeometry(1, 24, 12, 0, Math.PI2, 0, Math.PI0.55) → cap opening downward (theta from top). Actually thetaStart=0 gives top cap. The opening faces -Y. Good — bell dome up.

InstancedBufferGeometry copy + attributes:

• aJelly (float index) — fetch from uniforms? Could also update instanceMatrix per frame. I'll do uniform-array approach for both bells and tentacles: uniform vec3 uJPos[MAX]; uniform vec3 uJVel[MAX]; uniform vec4 uJParam[MAX]; // x: size, y: pulsePhase, z: seed, w: active
• bells: attribute float aJelly; vertex shader:

fragment bell: translucent glow: fresnel rim strong, top brighter; color per-seed palette (cyan/violet/pink). Additive blending (THREE.AdditiveBlending, transparent, depthWrite false). Manual fog fade.

• Tentacles: build BufferGeometry (not instanced) — all tentacles of all jellies in one geometry: for jelly j (MAX), tentacle k (6), segments s (10): two vertices per segment. Vertex attributes:
  • aData: vec4 = (jellyIndex, angleAround, t0, 0) for start vertex, (…, t1,1) end. Actually each vertex needs: jellyIndex (float), angle (float), t (0..1). Plus maybe radial offset per tentacle (0.45*size radius).
  • vertex shader:

LineSegments with linewidth 1. Fragment: color = palette(seed) with alpha (1-t)*0.55, additive. Thin but with bloom will look nice. Maybe render tentacles twice (two line systems offset) for richness. K=7 tentacles × 12 segments × 26 jellies = 2184 segments, 4368 verts — trivial.

Uniform arrays in three.js: uJPos: { value: [new Vector3(), ...] } — three handles vec3 arrays from Vector3 arrays. For uJParam vec4 array: array of THREE.Vector4. GLSL declaration uniform vec3 uJPos[26];. Indexing with non-constant int in GLSL1 vertex shader — WebGL2 supports dynamic indexing of uniforms in vertex shaders; fragment shaders in GLSL1 ES 1.0 have restrictions (appendix A) but three with WebGL2 → but ShaderMaterial compiles as GLSL1 (ES 1.00) even on WebGL2 unless glslVersion: THREE.GLSL3. In ES 1.00, uniform array indexing with a variable IS allowed in vertex shaders (only loop-index restrictions apply in fragment). For the fish velocity fragment shader (GPUComputationRenderer), uniform array indexing in fragment shader with a loop index uJellies[j] where loop is constant-bounded (for j<24 constant) — appendix A allows indexing with loop indices in fragment shaders.

But wait — GPUComputationRenderer shaders: three compiles them with its own material? GPUComputationRenderer creates a ShaderMaterial with the fragment shader as given. On WebGL2 with GLSL1 shaders, dynamic indexing in fragment is limited to loop indices — my jelly loop uses constant loop for (int j = 0; j < 24; j++) indexing uJellies[j] — allowed (loop index). Good. In tentacle vertex shader, uJPos[j] with j from attribute — vertex shader dynamic indexing of uniforms is allowed in ES 1.00. Good.

Also int j = int(aTent.x + 0.5) — fine.

One catch: uniform array sizes must match declaration. I'll use MAXJ=26 everywhere.

In the velocity shader, I'll declare uniform vec3 uJellies[26];.

Lure:

Lure target from pointer: ray from camera through NDC, intersect with sphere of radius ~30 around scene center? Better: intersect a plane perpendicular to camera at distance 30 from camera. plane.setFromNormalAndCoplanarPoint(camDir, camPos + camDir*30). Lure lerps to target. Idle: gentle lissajous auto-motion when no pointer for 5s.

Sonar pulse visuals: SphereGeometry(1, 48, 24) with shader:

Audio: as planned. Implement compact engine:

Also a low rumble: brown noise loop through lowpass 80Hz gain 0.05.

HUD: title, stats (FPS, fish, depth = -camera.y * 10 m?), hints bar, toast for pulse, action buttons (sound, auto-orbit, snapshot, pulse). Loading overlay with progress faked over init steps.

GUI (lil-gui): folders:

• Fish: count (100..2304 step 1 → set instanceCount & uCount), cohesion, alignment, separation, neighborDist, maxSpeed, lureStrength
• Jellies: count (0..26), drift speed
• Environment: fogDensity, caustics, shafts toggle, snow count (rebuild points), bloom strength/radius/threshold
• Camera: autoOrbit, fov?
• Actions: pulse(), pause, mute, snapshot

Main loop:

Careful with pause: when paused, GPGPU compute skipped and jelly updates skipped, but time-based shader uniforms frozen at t. Good.

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

Depth HUD: depth = max(0, -camera.position.y * 12) meters — playful.

FPS: exponential moving average.

Boot/loader: after building everything, hide loader with .done class. Use small async steps with progress bar updates (await new Promise(r=>setTimeout(r))) between heavy steps to let UI paint.

Snapshot:

Need preserveDrawingBuffer? toDataURL right after render in same tick works without preserveDrawingBuffer:true. I'll render then capture synchronously.

Toast for sonar pulse & mute etc.

Edge cases:

• texture2D in shaders: three injects #define texture2D texture for WebGL2 GLSL1. For GPUComputationRenderer fragment shaders, the standard examples use texture2D — fine.
• resolution uniform is auto-provided by GPUComputationRenderer (uniform vec2 resolution). Yes, GPUComputationRenderer adds resolution uniform to each variable's material.
• In fish vertex shader, sampling textures in vertex shader: fine on WebGL2.
• InstancedBufferGeometry with instanceCount updated live.
• THREE.Points frustumCulled = false for snow (positions wrap in shader — bounding sphere wrong). Also set frustumCulled false for fish mesh & tentacles & jellies (all computed in shader). Bells: InstancedBufferGeometry — set frustumCulled false.

For fish mesh: const fishMesh = new THREE.Mesh(fishIGeo, fishMat); fishMesh.frustumCulled = false;

• renderer.setPixelRatio min(dpr, 2).

• The pulse uniform uPulse (vec4): xyz origin, w elapsed; set w=-1 inactive. Update each frame while active: w = t - pulseStart. When > 6 → deactivate (w=-1).

• Double-click detection: on 'dblclick' event → pulse at lure position. Also 'KeyG'? Let me map: Space → pulse? Space might conflict; I'll use double-click AND button AND GUI. Also keyboard 'P' for pulse, 'M' mute, 'H' toggle UI, 'A' auto-orbit, 'Space' pause.

Wait, 'P' also snapshot in 009... I'll use 'S' snapshot? Let me define:

• H: toggle HUD/GUI
• A: auto-orbit toggle
• M: mute
• Space: pause
• G or P: sonar pulse — I'll use 'P' = pulse, 'C' = capture snapshot. Double-click: pulse at lure.

Colors/atmosphere: background #01060d, fog #020a14 density 0.026. Bloom threshold 0.12 strength 0.95.

Let me also add subtle "whale" silhouette? No — scope is big already.

Let me also double check UnrealBloomPass constructor: (resolution: Vector2, strength, radius, threshold). Yes.

OutputPass: new OutputPass() — handles tonemapping+srgb in r160. With OutputPass, renderer.toneMapping applied in output pass automatically. Set renderer.toneMapping = ACESFilmic; outputPass reads renderer settings. Good.

Custom grade ShaderPass before OutputPass: operates in linear HDR space — vignette multiply fine, grain add fine.

ShaderPass shader object: { uniforms: {tDiffuse, uTime, ...}, vertexShader, fragmentShader }.

Caustics on seabed through onBeforeCompile: need material.customProgramCacheKey or just set onBeforeCompile and it's fine. Add uniforms through closure:

caustic function with 5 iterations — note loop for (int n = 0; n < 5; n++) fine.

The caustic classic:

Famous one (by David Hoskins style "Seascape caustics"? The commonly used:)

This is the classic. uv scale: pass worldPos.xz * 0.05.

Value noise for terrain (CPU):

Terrain height: h = fbm2(x0.02, z0.02) * 10 - 3, plus rim raise at edges? Keep gentle. Also store function groundH(x,z) to place rocks/anemones.

CircleGeometry(150, 140, 12?) — CircleGeometry(radius, segments) has radial segments only 1 ring? CircleGeometry(radius, segments, thetaStart, thetaLength) — it's a fan: center + ring. Not good for displacement. Use PlaneGeometry(300, 300, 128, 128) rotated flat, and fade edges via fog. PlaneGeometry has grid — good. 128×128 = 16k verts fine.

Rocks: sample x,z in radius 20..95, y = groundH. Scale 0.5..3.5, random rotation; slight sink into ground.

Anemones: clusters: pick 14 cluster centers radius 8..70; per cluster 8-16 dots within 2.5 radius; color from palette (cyan/green/violet/pink), y = groundH + 0.15. instanceColor.

InstancedMesh with MeshBasicMaterial + instanceColor: need material.vertexColors? For instanceColor, set mesh.instanceColor; material must have vertexColors = false but three injects instance color when instanceColor present — works with MeshBasicMaterial (uses USE_INSTANCING_COLOR). Yes, works.

God-ray shafts: 10 planes at random pos radius<50, rotation.z tilt 0.1-0.25, heights 80, widths 4-10. Billboard around Y each frame. Color #2e7f9e-ish additive alpha up to 0.10.

Uniform per material shared with uSeed per mesh — need separate materials or onBeforeRender setting uniform. Use one ShaderMaterial cloned per shaft (10 materials) with different uSeed uniforms — fine.

Snow: max 2200; CFG.snow default 1300 → control via drawRange: geometry.setDrawRange(0, CFG.snow).

Jelly CPU update:

Let me make wander smooth: J.vel.x += sin(t0.13 + seed20)0.25dt; similarly z. Damping: J.vel.multiplyScalar(1 - 0.6dt)? Use exp damping: vel = Math.exp(-0.5dt). Clamp speed. pos += veldt. Bounds soft: if pos.y > 18 → vel.y -= ; if < -14 → vel.y += ; radial > 48 → push in.

Update uniform arrays: uJPos[j].copy(J.pos); uJVel[j].copy(J.vel); uJParam[j].set(J.size, J.phase, J.seed, active?1:0).

Also GPGPU uJellies array update (same positions) — share the same Vector3 array! Use one array jellyPosUniform of Vector3(MAXJ) referenced by both velocityVariable uniform and... but bells use uJPos too — share same array reference across materials: fishVelUniforms.uJellies = { value: jellyPosArr } and bellMat.uniforms.uJPos = { value: jellyPosArr }. Three uploads each frame from the array — fine (26 vec3s).

Inactive jellies: park position at (0, -999, 0) so fish ignore & shaders scale? Bell vertex: if (uJParam[j].w < 0.5) world = vec3(0.0) → collapse. Also set jellyPosArr[j] to (0,-999,0) when inactive so avoidance loop harmless (d2 huge).

Fish count changes: uCount uniform + igeo.instanceCount = CFG.fishCount. When increasing count, fish that were "inactive" had positions continuing to simulate — fine, they appear wherever they are. OK.

Double-check fish vertex shader texture sample: texture2D(texturePosition, ref) — in vertex shader, texture2D with implicit LOD... vertex shaders don't have derivatives; GLSL ES 1.00 vertex shader texture2D allowed (bias optional). Three injects #define texture2D texture for WebGL2? In WebGL2 GLSL1 (100 es)... wait: with WebGL2, three compiles shaders with #version 300 es ALWAYS? No — three's WebGLProgram: if capabilities.isWebGL2 and material.glslVersion !== GLSL3, it still prefixes with #version 300 es and adds compatibility defines: #define attribute in, #define varying out/in, #define texture2D texture. Yes! Three.js WebGL2 always compiles with GLSL 300 es and provides compat macros (that's why texture2D works in examples). So all fine, dynamic loops allowed (300 es).

GPUComputationRenderer also uses ShaderMaterial → same treatment. Its examples use texture2D — fine.

gl_FragColor in WebGL2: three adds out highp vec4 pc_fragColor; #define gl_FragColor pc_fragColor. Fine.

gl_PointSize / gl_PointCoord: fine.

Points snow shader: gl_PointCoord available. Soft circle: float d = length(gl_PointCoord - 0.5); alpha = smoothstep(0.5, 0.1, d).

Sprite halo texture: create via canvas 2D radial gradient — small helper makeGlowTexture().

Numbers check for neighbor loop cost: 2304 iterations × texture2D fetches (2 per iter) ≈ 5.3M per fragment × 2304 fragments = wait no. Each fragment loops 2304 iterations → 2304 fragments × 2304 iters = 5.3M iterations total per frame. That's OK (the three.js example does 1024×1024=1M at 60fps easily; 5.3M still fine for most GPUs). WIDTH=48 → mod(float(i), 48.0) etc.

Actually let me reconsider: default fishCount 1600 — but loop always runs 2304 (break at uCount → breaks at 1600 for active). if (float(i) >= uCount) break; — dynamic break in loop allowed in 300 es. Good.

Velocity shader uniforms updated per frame: uDelta, uTime, uLure, uLureStr, uPulse, uCohesion etc.

Order of passes: bloom over mostly-dark scene with additive glows — nice.

Grade pass shader:

Loading overlay: steps: renderer → environment → fish → jellies → audio → done. Use async function boot() with progress updates.

Failure fallback: if WebGL2 unavailable or float textures unsupported, show message. GPUComputationRenderer.init returns error if float render targets unsupported — check and toast. Modern browsers fine.

Now — write the file. It's going to be ~1400-1700 lines. I'll write in parts using the write tool (create with part 1, then append parts via shell cat >>? The read_write tool overwrites whole file or line-range. Safer: write parts to separate files part1.html, part2.js... then cat them together. That's what the previous run did per the summary ("Concatenated all parts into /tmp/ab/index.html"). I'll do the same: write /tmp/ab2/p01 ... p08, then concat, then extract the module JS and run node --check.

Actually simpler: use execute_shell_command with heredocs? Heredocs in JSON strings with GLSL containing $? GLSL has no $... but JS template literals contain ${} — heredoc with quoted delimiter ('EOF') prevents expansion. Writing via read_write_file_in_shell_environment is cleaner (no escaping issues). I'll use that tool per part, then concat via shell.

Let me now write each part carefully.

PART 1 — HTML head/CSS/body:

Include: loader, hud (title + stats), pill (top-center: fish, jellies, depth, fps), toast, hints, action buttons (🔊/🔇 mute, 🛰 pulse, 🎥 orbit, 📷 snap), importmap.

Title: "Abyssal Bloom". Emoji: 🪼 (jellyfish) — nice favicon.

Colors theme: deep teal/cyan: #46e6ff, #7c9dff, #c084fc.

PART 2 — JS: imports, CFG, boot, renderer/scene/camera/controls/lights/composer.

PART 3 — environment (seabed+caustics, rocks, anemones, shafts, snow).

PART 4 — GPGPU boids + fish geometry/material.

PART 5 — jellyfish (bells+tentacles+CPU).

PART 6 — lure + pulse + glow texture.

PART 7 — audio engine.

PART 8 — input, GUI, HUD, loop, resize, boot call.

Careful details:

• const $ = id => document.getElementById(id);
• Toast helper with timer.
• Buttons update icons.

Let me write the GLSL strings with template literals — inside template literals, GLSL ${...} must be escaped or avoided. I'll use ${MAXJ} interpolation deliberately where needed (uniform array sizes) — that's valid JS template usage. For constants in GLSL like WIDTH=48: interpolate ${WIDTH}.0 etc. Watch out for any other $ — none in GLSL.

In velocity shader loop: for (int i = 0; i < ${COUNT}; i++) with COUNT=2304, and uv2 computed as (vec2(col, row) + 0.5) / ${WIDTH}.0.

One more consideration — GPUComputationRenderer: gpuCompute.addVariable('texturePosition', shader, tex); variable name used as sampler uniform in other variable shaders automatically. In fish material I need samplers named differently (uPosTex/uVelTex) — assign per frame: fishMat.uniforms.uPosTex.value = gpuCompute.getCurrentRenderTarget(posVar).texture;

getCurrentRenderTarget(variable) — correct API.

• gpuCompute.setVariableDependencies(velVar, [posVar, velVar]); etc.

• After init, gpuCompute.compute() each frame before render.

Delta uniform name: I'll add uniforms after addVariable:

GPUComputationRenderer keeps material.uniforms accessible. Yes.

Also note: GPUComputationRenderer adds uniforms resolution automatically in passShader? It defines uniform vec2 resolution; via its own prefix? Looking at GPUComputationRenderer source: it creates ShaderMaterial with fragmentShader = variable.material.fragmentShader as provided, but addVariableResolution? In three's GPUComputationRenderer, there's addResolutionDefine( material ) — it adds #define resolution resolution? Actually: the example shaders use uniform vec2 resolution;? The webgl_gpgpu_birds velocity shader starts with... I recall the boids example's shaders don't declare resolution themselves; GPUComputationRenderer's createShaderMaterial does: new ShaderMaterial({ uniforms, vertexShader: passThrough, fragmentShader }) and there is a function addResolutionDefine which injects #define resolution vec2( ... )? Let me recall the actual source (r160):

Yes! It adds a define resolution = vec2(W,H). So in fragment shaders I can use resolution directly WITHOUT declaring uniform. The birds example uses gl_FragCoord.xy / resolution.xy.

getPassThroughVertexShader:

Good.

Also GPUComputationRenderer creates textures as FloatType? createTexture: DataTexture with FloatType. Render targets type: new WebGLRenderTarget(sizeX, sizeY, { wrapS/T ClampToEdge, minFilter Nearest, magFilter Nearest, format RGBAFormat, type (isWebGL2 ? FloatType : HalfFloatType), ... }) — r160 uses FloatType on WebGL2. Good.

• Position texture w = seed: fine with FloatType.

Now the fish geometry normals: computeVertexNormals works with indexed geometry.

InstancedBufferGeometry copying attributes:

Fish shader: declare attribute vec2 ref; — with ShaderMaterial, position & normal & uv attributes auto-declared by three prefix. Custom attributes must be declared manually — yes declare attribute vec2 ref;.

Uniform cameraPosition is auto-provided in ShaderMaterial (three injects uniform vec3 cameraPosition; in vertex AND fragment? It's injected in the standard prefix for both vertex and fragment). Yes, prefixFragment includes cameraPosition when material.isShaderMaterial? prefixFragment includes uniform vec3 cameraPosition; always. Good.

Manual fog in custom shaders: add uniforms uFogColor (shared object), uFogDensity (shared CFG-driven object). I'll create shared uniform objects:

Share across materials. Scene.fog color/density synced from same values via GUI.

Bell shader details:

vertex:

Normal transform approx ok for glow shader.

fragment:

Additive blending: color adds; alpha less relevant but keep. With AdditiveBlending, gl_FragColor.rgb * a? Additive uses SRC_ALPHA, ONE by default when transparent... THREE.AdditiveBlending = src alpha, dst one. So multiply rgb by alpha for control: gl_FragColor = vec4(col, a) → final add = col * a. Good, so compute col then output with a as master intensity.

pal() — cosine palette shared GLSL snippet; define in both shaders.

Tentacle fragment:

Additive.

Tentacle geometry construction:

LineSegments geometry with position attr zeros (must exist; three requires 'position'). material attribute name aTent declared in shader. frustumCulled=false. Note: position attribute all zeros is fine since vertex shader ignores it.

Hmm — three checks boundingSphere for draw? With frustumCulled=false, no bounding computation. Good.

Snow points: positions random in box 90×80×90 centered origin, wrapped around camera in shader. aScale 0.4..1.4.

PointsMaterial? Custom ShaderMaterial. transparent, depthWrite false, blending Normal (or additive at low alpha — additive over dark bg nicer). Use additive with low alpha.

Rocks shader: plain standard material, fine.

Lure behavior:

OrbitControls and pointer attract conflict: dragging rotates camera AND attracts. That's acceptable (hold = attract). Fine.

Pulse origin: lure position.

Auto-orbit: controls.autoRotate = CFG.autoOrbit.

Pause: freeze simTime & skip compute; also controls.update still.

Depth HUD: depth = Math.max(0, Math.round(-camera.position.y * 14 + 320)) — start "320 m" playful. Just show -y*14+320? Eh: show camera "depth" as (floorY - camera.y)... simpler: depth m = Math.round(380 - camera.position.y * 12). Whatever — cosmetic: I'll display Math.max(0, Math.round((0 - camera.position.y) * 12 + 340)).

FPS: ema.

Pill cells: FISH count (active), JELLIES, DEPTH, FPS.

Buttons: 🔊 toggle → 🔇; 🛰️ pulse; 🌀 orbit toggle; 📷 snapshot.

Now, GUI fields (lil-gui):

Store controllers that need syncing from CFG each frame? Cheap: use controller.updateDisplay()? lil-gui has gui.controllersRecursive().forEach(c=>c.updateDisplay()) — call every 500ms to sync pause/mute states. Fine.

Also note lil-gui .listen() exists on controllers — simpler: mark pause/mute controllers .listen().

Keyboard: as planned.

Now write everything. Also mind: pointer events on renderer.domElement with OrbitControls; use window pointermove. For pointerdown → audio init + attract on; pointerup → attract off. dblclick → pulse.

Prevent pulse while clicking GUI: check event.target closest('.lil-gui') — pointer events on canvas only: attach pointer handlers to renderer.domElement so GUI clicks excluded automatically. dblclick also on canvas.

For touch: pointerdown/move works.

Order of JS definitions to avoid use-before-define in module top-level flow: I'll wrap in functions and call boot() at end; animate loop starts at boot end.

Loader progress:

tick = () => new Promise(r => requestAnimationFrame(r)).

Also handle GPUComputationRenderer.init() error → display message in loader.

Let me now also think about the velocity shader pulse fright normalization: normalize(dp + 0.0001) — vec3 + float adds to each component — works but sloppy; use dp / max(length(dp), 0.001). Fine.

Whale schedule with setTimeout chains — start only after audio init. Also when muted keep scheduling (silent) fine.

Bubble buffer: create noise buffer once: 0.2s buffer of white noise.

Ping: osc sine freq.setValueAtTime(950, t); freq.exponentialRampToValueAtTime(600, t+0.9); gain env 0.3→0.0001 over 1.4s; connect to delay & master.

Delay: delay 0.42s, feedback 0.4, wet 0.35.

Drone: osc A sine 55, osc B sine 55.8, osc C sine 110.2 gain lower; → droneFilter lowpass 200 Q 0.7 → droneGain 0.14 → master. LFO 0.05Hz modulating filter freq 120..320.

Rumble: noise buffer loop → lowpass 70 → gain 0.06 → master.

Master: gain 0.9 → compressor? Add DynamicsCompressor for safety. Good.

Volume guard: resume ctx on gesture.

Mute button: CFG.muted → master.gain.linearRampToValueAtTime(0 or 0.9).

If audio never initialized (no gesture yet), mute toggle inits? Just return.

Snapshot naming: abyssal-bloom-${Date.now()}.png.

HUD hints: "move pointer — steer the lure · hold — attract school · double-click — sonar pulse · drag — orbit · wheel — zoom · H — hide UI".

Alright — also the pill updates: fish count, jellies count, depth, fps. Update every 250ms.

Toggle UI (H): hide .lil-gui, hud, pill, hints, actions → body class 'ui-hidden' with CSS rules.

Now, potential perf: fish vertex shader per-instance texture fetches — fine.

Fish fragment stripes: pass vLocalZ varying from vertex (position.z before transform) plus vSeed. stripe = smoothstep(0.75, 0.95, sin(vLocalZ * 16.0 + vSeed * 40.0)) — only on body not tail... fine everywhere.

Color: vec3 glow = pal(fract(vSeed * 3.7)); col = bodyBaselambert + glowstripe1.6 + glowfres*0.8; fog mix. Also lure proximity lights fish: float lureGlow = 1.0/(1.0+0.08*ld*ld); add cyan * lureGlow * 0.6 — nice touch: fish sparkle near lure.

Fish size: geometry ~1.4 long × scale (1.4 + seed0.9) → ~2-3.2 units long fish in a 120-unit world. From camera distance 64, fish ~visible. OK maybe scale 1.8+seed1.1.

Check fish basis when vel≈0: vel min speed enforced (minSpeed) so never zero. Good.

Anemone clusters also could pulse — keep static (bloom glows enough). Simple.

Alright, also seabed receiveShadow? No shadows (deep sea) — skip shadow maps entirely; cheaper.

Let me also include OrbitControls target at (0, -2, 0), enablePan true.

One more check — UnrealBloomPass with OutputPass order: [RenderPass, bloomPass, gradePass, outputPass] — gradePass operates pre-tonemap in linear space; grain added in linear might be too subtle/strong — fine at 0.03.

Now — the index.html card for demo 010:

Inserted before 009 card (newest first, after the "" comment).

Description: "A bioluminescent deep-sea trench — steer a glowing lure with your pointer and hold to attract a GPGPU boids school of 2,300+ procedural fish, fire sonar pulses that ripple fright through the school, and drift among pulsing shader jellyfish with trailing tentacles. Featuring voronoi caustics on a procedural seabed, god-ray shafts, marine snow, synthesized whale-song & drone WebAudio ambience, bloom post-processing, snapshots and full live controls."

Now write all parts. Let me be extra careful about GLSL + JS syntax since I can only validate JS syntax with node --check (GLSL validated mentally).

Let me write Part 1 (HTML/CSS).

Actually — one important thing: node --check on the extracted module: import statements at top are fine in .mjs. The GLSL template literals with ${WIDTH} etc are JS — fine.

Also ensure no stray backticks inside GLSL comments. Avoid ` character.

Let me draft Part 4's velocity shader fully:

Wait — continue in GLSL ES 3.0 fine.

Separation normalize(sepSum/sepN) — sepSum is sum of -d/d2 — points away; ok.

Position shader:

Fish vertex shader (full):

fragment:

FogExp2 factor: 1 - exp(-d²·density²) — matches three's exp2 fog (factor = 1 - exp(-density²·depth²)). Yes three uses fogFactor = 1.0 - exp( - fogDensity * fogDensity * vFogDepth * vFogDepth ). Good.

Jelly bell & tentacle shaders as drafted.

Now writing. Also caustics uniform: causticUniforms = { uTime: uTimeShared, uCaustic: {value: CFG.caustics} }.

Note onBeforeCompile uniforms must reference objects I update — assign same objects:

where uCausticAmt = { value: 1 } shared. Good.

Marine snow shader:

vertex:

fragment:

Additive blending. Points frustumCulled false.

Shaft shader:

vertex: standard pass uv + world. fragment:

Additive. Need uFogDensity uniform & cameraPosition (available). varying vWorld from vertex: (modelMatrix * vec4(position,1)).xyz.

Shaft geometry: PlaneGeometry(w, h) per shaft? Share one PlaneGeometry(1,1) and scale per mesh. rotation.z tilt ~0.15; position y ~ 8.

Billboard in loop:

But rotation.z tilt must be preserved: set rotation order default XYZ; rotation.y then z applied in local? With Euler XYZ order, applies X then Y then Z? THREE Euler 'XYZ' means R = Rx * Ry * Rz? Actually applies as intrinsic rotations in order X,Y,Z: R = Rx·Ry·Rz. rotation.z applied first then y... The tilt would rotate around world-ish... Simpler: put tilt on a child mesh: shaftPivot (billboard y) → child mesh with rotation.z tilt. Or accept combined euler — visually fine either way. I'll do pivot+child to be clean: actually simpler: set mesh.rotation.set(0, angle, tiltZ, 'YXZ') — with 'YXZ' order, yaw applied... R = Ry·Rx·Rz → local z-tilt then yaw — that's what I want (tilt in local frame, then yaw). Euler order 'YXZ'.

mesh.rotation.order = 'YXZ'; per frame set rotation.y = angle, rotation.z = tilt (const per shaft stored in userData).

Pulse mesh shader:

Additive, side: DoubleSide? FrontSide fine with BackSide for depth? Use BackSide so it looks like expanding shell from inside? FrontSide ok.

JS: when pulse fires: pulseStart = simTime; uPulse.value.set(lure.x, lure.y, lure.z, 0) then per frame w = simTime - pulseStart; mesh.scale = w*28; mesh.position = origin; uAlpha = max(0, 1 - w/5)^2 * 0.8; when w > 6 deactivate.

Time uniforms: single shared uTime = {value: 0} used by fish vertex (wag), bells (unused? inner glow uses uTime — yes include), tentacles (sway), shafts (flicker), snow (drift), caustics (via onBeforeCompile), grade pass (grain). All share object → one update per frame. But pause: snow uses uTime → frozen when paused. That's fine (paused).

For fish material I named uniform uTime too — same shared object.

GPGPU time uniform separate (vel shader) — its own object updated per frame: uniforms on velVar.material.

Now — anemone instanced colors: palette pick: [cyan #46ffd9, violet #b46bff, pink #ff6bd5, teal #4be1ff]. instanceColor set at init.

Rocks: MeshStandardMaterial color 0x12242e roughness 1. With instanceColor tint darker variants 0x0b1a22 etc.

Ambient light 0x2a4a66 intensity 0.7; directional (from up) 0x3d7a99 0.8 position (20, 60, 10). Lure point light does local lighting on seabed/rocks. Good.

Check: MeshStandardMaterial + PointLight physical falloff decay 2 default, intensity in candela... r160 default useLegacyLights = false → lights use physical units; PointLight intensity 60 with dec

**************************************************ap.

**********************************************************************************************************************s).

The status shows timeProgress 0.54 — I'm at 54% of the time budget already. I need to speed up. Let me write the remaining parts quickly, batching independent writes together in single blocks. Parts 3-8 remain. I'll write them all in parallel-ish (independent writes can go in one block). But they're all independent file writes — I can batch them in one tool call block.

Let me prepare parts 3, 4, 5, 6, 7, 8 now, carefully but swiftly. I'll write them in two batches of three.

Part 3 — environment.

Wait — I used ${FOG_GLSL} and ${PALETTE_GLSL} inside the fragment shader template literal, but placed ${FOG_GLSL} between uniforms and varyings — order: uniform vec3 uLurePos; then FOG_GLSL declares uniform vec3 uFogColor; uniform float uFogDensity; float fogFactor(...); then varyings, then PALETTE_GLSL (pal function) then main. That's valid GLSL — functions declared before main. Good.

Note in fish fragment shader I named uniform uLurePos AND the fish vertex shader doesn't declare it — fine.

Now part 5: jellyfish.

Wait — in updateJellies I initialize jellyPrmArr z (seed) every frame, but the constructor already set random seeds at creation; and J.seed equals a different random than jellyPrmArr initial z. Setting x,y,z each frame from J is correct and consistent. Fine.

One issue: jellyPrmArr[j].w = active ? 1 : 0; — Vector4 w — fine.

Now part 6: lure + sonar pulse + glow texture.

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

83% of time budget used. I must move very fast now. Remaining steps:

1. Concat parts → validate JS with node --check
2. Deploy to /space/demos/010-abyssal-bloom/index.html
3. Update /space/demos/index.html
4. Done

Let me do the concat + validation in one command, then deploy + index update in another, batched where possible.

JS syntax validated. Now deploy to /space/demos/010-abyssal-bloom/index.html and update the main index. Batch: mkdir + cp, then edit index with replace tool. These are dependent? The index update is independent of the deploy. I can do the cp via shell and the index update via replace tool in the same block.

****************************************************************************************************************le.

****************************************************************************************************************************************************xt.

************************************************************************************************************************************************************ck.

Everything is in place:

• /space/demos/010-abyssal-bloom/index.html — 64KB, complete HTML file ending properly with </html>
• /space/demos/index.html — contains the new card linking to 010-abyssal-bloom

The demo was fully recreated (the previous run's work was lost with /tmp) and deployed. Task complete. Call _success.