Koi Pond Demo Creation

The task says "Wake up and do as you please." This is a free-form task. My purpose is to create cool Three.js demos in my space under the demos/ folder. The last execution created "Frostline" (demo 023). Let me check the current state of the demos folder and create a new impressive demo.

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

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

I have 23 demos already. The task is "Wake up and do as you please." — so I should create a new cool demo (024). Let me look at the existing index.html to understand the format, and check a couple of recent demos for style reference.

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

1. Spinning cube
2. Nebula galaxy
3. Mandelbulb explorer
4. Fluid dynamics
5. Gravity sandbox
6. Event horizon (black hole)
7. Sonic reactor (audio)
8. Void runner (game)
9. Azure odyssey
10. Abyssal bloom
11. Physarum garden
12. Powder alchemy (falling sand)
13. Clockwork nebula
14. Neon rain
15. Aurora borealis
16. Skitter
17. Coral resonance
18. Threshold
19. Attractorium (strange attractors)
20. Murmuration (flocking)
21. Terraforge (terrain)
22. Cloudsea (clouds)
23. Frostline (frost simulation)

What could be a cool new one? Ideas:

• Ember storm / fire simulation — GPU fire with particles
• Origami / paper folding
• Koi pond — water caustics, koi fish swimming with flocking, ripples
• Sakura / cherry blossom — petals falling
• Black hole already done
• Tornado / storm chaser — volumetric tornado
• Bioluminescent tide — ocean waves at night with glowing plankton
• Solar system / orbital mechanics — done gravity sandbox
• Crystal cavern — raymarched crystals
• Ink diffusion / sumi-e painting — GPU ink in water
• Lightning storm — procedural lightning bolts with glow, thunder audio
• Jellyfish drift — procedural jellyfish with tentacles
• Quantum wavefunction visualizer
• Firefly forest — fireflies with light trails
• Sand mandala / kaleidoscope
• Paper planes / wind
• Lumen reef — done coral
• Mirror maze / reflections
• A "rainy window" already kind of done with frost
• Desert dunes with sand ripples and wind
• Koi pond sounds really nice: top-down water with ripples (GPU ripple sim), procedural koi fish swimming (vertex shader animated), caustics, lily pads, floating petals, interactions (click to drop food, fish gather), bloom. That's visually impressive and interactive.
• Ember & smoke: a campfire with sparks
• Thunderstorm: lightning flashes illuminating volumetric clouds, rain, thunder audio. "Neon rain" already rain, cloudsea clouds.

I think "Koi Pond" (024-koi-pond or a fancier name like "Kōyō" / "Moonlit Koi") is a great pick:

• GPU water ripple simulation (ping-pong height field) with interactive splashes
• Procedurally generated koi (body shader with spots via noise, flowing tail animation in vertex shader)
• Steering behavior on CPU for ~20-30 koi (wander, avoid, food-seek)
• Water surface shader: refraction of pond bottom (procedural caustics + pebbles), reflections, fresnel
• Lily pads (instanced, bobbing with ripples), lotus flowers, falling sakura petals drifting
• Click to drop food pellets → fish swim to it, ripples
• Drag to stir water
• Fireflies above water at dusk, subtle fog
• Post-processing: bloom, vignette
• Audio: gentle water, plucks (pentatonic chimes when fish eat), optional mute
• Day/dusk/night slider maybe

That's a strong demo. Alternative names: "Koi Garden", "Tsukimi Pond". Let me call it "024-koi-pond" with title "Koi Pond — interactive water garden". Actually maybe more poetic: "Gilded Pond" or "Koi no Ma". Keep simple: 024-koi-pond.

Let me check the current index.html format first, and maybe glance at a recent demo to match code conventions (CDN versions, import maps).

Good — demos use Three.js 0.170.0 via unpkg with ES modules. Now I'll create demo 024: Koi Pond — an interactive twilight water garden.

Plan for "Koi Pond" demo (/space/demos/024-koi-pond/index.html):

Scene & Camera

• Top-down-ish perspective (slightly angled for depth) over a pond; OrbitControls optional but constrained (allow slight rotate/zoom).
• Actually, a slightly tilted camera looking down at ~50° gives nice depth with reflections.

Water surface

• GPU ripple simulation: ping-pong float texture (256×256) storing height + previous height (wave equation), with brush splashes from pointer and koi wakes.
• Water plane (highly subdivided or just use normal-from-height in fragment shader on a low-poly plane): fragment shader computes normal from height texture, refracts procedural pond bottom (pebbles + caustics + depth color), reflects sky/foliage color, fresnel specular from moon/sun.
• Vertex displacement slight by height for waves.

Koi

• ~24 koi, each: body as a custom geometry (extruded/loft along spine) animated in vertex shader (traveling sine wave along body, tail fin flutter). Body pattern via fragment shader noise (orange/white/black blotches) with per-fish random seed and palette (kohaku, sanke, ogon gold, black).
• CPU steering: wander + separation + boundary avoid + seek food. Fish slightly below surface; occasionally surface near food.
• Fish create small ripples in the sim when moving fast or near surface (write wakes into the ripple texture).
• Shadow blob under fish on pond floor (fake: dark blurred ellipse drawn into floor caustics pass, or just darken refraction under fish via a "fish mask" texture). Simpler: draw fish shadow as separate transparent plane under each fish.

Actually to keep it manageable: fish rendered as meshes slightly below the water plane; water shader refraction will distort them naturally since they're behind the refractive surface. But refraction is computed in the water shader using procedural bottom; the fish are actual 3D objects rendered after the water with transparency... Render order: bottom, fish (opaque, but underwater → apply fog/tint in their shader based on depth + caustic lighting), then water surface transparent on top with refraction of procedural bottom only. To have fish distorted by water, could render the scene (bottom + fish) into a texture, then water shader samples that with ripple distortion. That's the clean way:

• Render target A: "underwater scene" = pond floor (procedural shader on a plane) + koi + lily pad bottoms etc. Rendered with an orthographic-ish top camera? No — same camera, render scene without water into RT, then water plane samples RT with distortion + fresnel reflection of sky.

That's a classic approach and quite feasible. Water plane: sceneRT sampled with uv + normal.xz * strength * depthAtten. Reflections: procedural sky gradient + fireflies? Simpler: reflect a gradient + faint tree silhouettes + moon glint.

Above-surface elements

• Lily pads: instanced discs with notch, bobbing via ripple height sampled in vertex shader (need ripple texture readable in vertex shader — float texture vertex fetch, WebGL2 fine).
• Lotus flowers: a few, small glowing.
• Sakura petals drifting on surface (instanced quads, move with wind, leave tiny wakes).
• Fireflies above the water at dusk: points with pulsing glow (bloom picks them up).
• Reeds/grass at the edges? Maybe simple silhouette rocks around the pond border.
• Fog + vignette.

Interaction

• Click/tap: drop food pellet (small floating disc, koi swim to it, nibble → ripples + chime sound). Food sinks after a few seconds.
• Drag: stir water (big ripples), fish dart away.
• Sliders: time of day (sunset→night), number of koi? (fixed), ripple strength, feed mode toggle. Presets maybe: "Dusk", "Moonlit", "Dawn".
• Snapshot button, sound toggle.

Audio (WebAudio)

• Gentle water loop (filtered noise), plops when clicking, pentatonic plucks when koi nibble food, night crickets at dusk (chirp synth). Mute toggle.

Post

• UnrealBloomPass (subtle) + OutputPass.

UI

• Title, hint bar, sliders: Time of Day, Current/flow, Koi count (rebuild), buttons: Feed, Scatter petals, Snapshot, Sound. Coverage-like meter not needed. Keep HUD consistent with previous demos (glass panel style).

Let me check what 023's UI looks like quickly for style consistency (CSS classes). Actually, I have enough context. Let me be careful about time budget — I have ~13 minutes typical window based on previous runs (started 13:10, completed 13:23). This turn started 1:20 PM. I should aim to finish within ~10-12 minutes.

Let me write the demo now. Key technical decisions:

1. Ripple sim: 256×256 RG float ping-pong: R = height, G = previous height. Update: newH = (avg of 4 neighbors)*... classic wave equation: next = 2h - prev + c²∇²h, damped. Store in R, copy h to G... Standard trick: texture stores (h, hPrev) and shader computes next, writes (next, h). Add brush splashes: pass array of up to N splashes per frame as uniforms (pos, radius, strength).

Vertex texture fetch for water plane displacement + lily pads: sample ripple texture. WebGL2 supports it with float textures. OK.

2. Underwater scene RT: render at screen resolution (or half for perf with mip). Contains: pond floor plane with procedural pebbles+caustics shader (caustics animated via time uniform, voronoi-ish), koi meshes, food pellets. Camera renders scene B into RT each frame, then main render: floor not needed again... Actually simplest:

• Scene structure: underScene (floor + fish + food + pads' submerged parts) rendered to sceneRT with the same camera.

• mainScene contains water plane (shader samples sceneRT + ripple), lily pads, flowers, petals, fireflies, rocks, background. Plus we could just render underScene objects into the main scene too but hidden... no—render underScene to RT, then render mainScene to screen. Water shader does: vec3 refr = texture(sceneRT, uvDistorted). Fish appear refracted.

• Fish also need caustic light + depth tint in their material — implement custom ShaderMaterial for fish (vertex wave anim + fragment pattern + caustic lighting from an analytic function of position+time, tint by depth fog color).

• Water surface transparency: we want water surface mostly to show the refracted scene, plus fresnel reflection. Output alpha ~0.92 or just opaque with mixed refraction/reflection (opaque is easier: color = mix(refr, refl, fresnel) + spec). Opaque water avoids sorting issues with pads. But pads float ON the water — they should be above; render order with opaque water is fine as pads render after (they're above physically, depth test handles it). Petals float slightly above too. Fish food floats at surface — above water plane slightly. Good, opaque water plane it is.

Hmm, but the ripple displacement in vertex shader moves water plane up/down; pads sit at y≈0 sampling ripple height themselves; keep displacement small (few cm) so intersections look fine.

3. Fish geometry: build in code: a lofted body from cross-sections along length (say 24 segments × 10 radial), parameterized; vertex shader bends spine: lateral offset = sin(xfreq - tspeed + phase) * amplitude * tailGain(x). Tail fin: append a flattened fin via extra geometry or make cross-sections taper with a vertical tail paddle. Simpler: body loft + separate tail fin plane merged, with skin weight = smoothstep along x. Also pectoral fins: two small planes that flap. Merge into one geometry with an attribute aBend (0 at head → 1 at tail) and aFin flag. Manageable via BufferGeometryUtils.mergeGeometries with groups... need attributes on all parts. I'll construct manually with BufferGeometryUtils and add attributes per part before merge.

Fish colors: palette per fish via instance? Using individual meshes (24 draw calls fine) with per-mesh uniforms (seed, colors). Use one ShaderMaterial cloned per fish with uniforms {uSeed, uTime offset, uPhase}.

Fish pattern: kohaku style: base white with orange/red patches via fbm threshold; sanke: adds black spots; ogon: gold metallic. Choose 4 archetypes randomly. Scale 0.5–0.9m-ish relative to pond radius ~14 units.

4. Lily pads: InstancedMesh of disc-with-notch geometry, vertex shader bobs with ripple (sample texture) — instanced shader via onBeforeCompile or custom ShaderMaterial with instanceMatrix. I'll use MeshStandardMaterial? Main scene lighting: directional "moon" + ambient. With custom water shader anyway; pads can be MeshStandardMaterial with onBeforeCompile injecting ripple bob. Simpler: custom basic shader for pads too (they're stylized: green with radial veins, rim). Keep cohesive stylized look — custom shaders everywhere.

5. Fireflies: THREE.Points with custom shader, pulsing via time, positions wander (CPU update or GPU via noise in shader — GPU: pos = base + curl-ish sin offsets of time).

6. Sky/backdrop: big gradient dome or just background color + fog; plus a subtle "moon" sprite. Camera looks down mostly, background visible at edges — use scene.background gradient via large inverted sphere with gradient shader, or fog + clear color. I'll do a backdrop plane ring... Keep simple: clear color dark + fog + distant silhouette ring of trees (billboard triangles) around pond edge. Rocks ring around pond border (instanced dodecahedrons squashed, gray shader).

Camera: OrbitControls with min/max polar angle limits (0.15–1.1 rad), distance limits, target at center, auto gentle rotation off.

7. Post: EffectComposer: RenderPass(mainScene) — but underwater scene is rendered manually to RT before composer. Then UnrealBloom + OutputPass. Vignette+grain in a final shader pass.

8. Audio: as described. Sound toggle button + unlock on first gesture.

9. UI: consistent glass panel: title "Koi Pond", sliders: Time of Day (dusk slider controlling palette: sunset orange→deep night blue), Water flow (petal drift), Koi count? Changing count requires rebuild — allow 8–36, rebuild fish. Buttons: Drop Food (or just click), Petals burst, Snapshot, Sound on/off. Hint text: "Click to feed · Drag to stir · Scroll to zoom".

Time-of-day affects: sky/fog colors, water reflect color, caustics intensity, firefly visibility (more at night), moon glint.

Let me now write the code. It's big (~1100-1300 lines). Let me be efficient but complete. I'll write it in one go with careful GLSL.

Simulation details:

Ripple sim shaders (GLSL1 style via RawShaderMaterial? Use THREE.ShaderMaterial with WebGL2 auto-conversion like previous demo): I'll write GLSL with texture2D and let Three convert.

Ripple update shader:

Hmm aspect: pond is circular in world coords mapped to texture; keep square pond region: world [-R..R]² → uv [0..1]². Circular pond radius 13 inside square 28×28 region; water shader masks outside. Splash falloff: next += s.w * exp(-dist²/s.z²).

Boundary: at uv edges, damp to 0 (walls). Since pond circle is inside the sim square, set damping stronger near circle edge in water shader? Just damp near texture edges + also fade ripples near pond rim in water shader via mask. Fine.

Store as RG float (HalfFloat ok).

Water shader samples ripple height 4 taps to compute normal. Displacement in vertex: pos.y += h * uDispScale.

Water fragment:

sceneRT needs to include the fish+floor render from same camera with matching resolution. Render underScene into RT sized = drawingBufferSize (maybe 0.75 scale for perf).

gl_FragCoord in water frag is in device px; RT sampling uv = gl_FragCoord.xy * pixelRatio / (size*pixelRatio) — pass uResolution = RT size in device px and compute uv = gl_FragCoord.xy * ratio... If RT size == drawing buffer size exactly, uv = gl_FragCoord.xy / uResolution works.

Fish fragment lighting: floor caustics via analytic caustic function: sum of a few voronoi-ish wave functions:

I'll use the well-known "caustics" loop (David Hoskins style). Apply to floor shader and fish.

Floor shader: pebble pattern via voronoi F2-F1 rounded stones, sandy color, darkened in deep center, caustic light added, subtle fog tint with depth (distance from camera not needed; use radial depth). Also fake fish soft shadows: skip (fish are lit; fine).

Fish shadow: I'll add a "shadow" blob: each fish has a child plane at floor level? Fish are in underScene rendered to RT — adding shadow planes there too: plane with radial gradient dark, positioned under fish, rendered with depth write off, polygon offset. 24 extra draws, fine. Actually fish y ~ -0.6, floor at y=-2.2 — shadow plane at y=-2.19, following fish x,z with slight offset opposite light. Since underScene is rendered to texture with same camera, standard. Use MeshBasicMaterial with alpha map radial gradient texture generated via canvas. Simple and effective.

Fish movement: 2D position on pond, heading; speed ~1.2; steering:

• wander: heading += noise
• border: steer away if r > R-2
• separation from neighbors
• food: if active pellet, nearest fish (or all within radius) seek it; on arrival, nibble (pellet shrinks), small ripples + chime, dart.
• stir scare: if pointer dragging fast, fish flee pointer.

Fish y: base -0.55 + sin bob slight; surface to -0.15 when nibbling food (food floats at 0.02). Body orientation: heading → rotation.y; pitch from speed changes; roll on turns (bank). Integrate at fixed dt clamped.

Koi geometry: build with code:

Tail fin: triangle fan plane at s=0 extending back, vertical (caudal fin vertical in koi? Actually fish caudal fin is vertical — koi tails are vertical fins, undulate horizontally). Give it slight vertical extent (tall, flowing). Pectoral fins: two small angled planes near head sides. Dorsal fin: thin strip along top mid. Each part with aBend attribute: body aBend = (1-s) (tail=1), fins similar. Merge.

Vertex shader bend:

Keep simple: pos.z += sin(kaBendπ? ... Use: wave = sin((pos.x*-? )...) Let me define geometry along +X head at +X=+0.5len. aBend = 1 at tail(x=-len/2)... pos.z += uAmp * pow(aBend,1.5) * sin(uTimeuFreq - aBend3.5). Head slight counter-sway: pos.z += uAmp0.15sin(uTimeuFreq+1.2). Fins: pectoral flap rotation — encode via attribute aFin (0 body, 1 left fin, 2 right fin, 3 tail, 4 dorsal); in shader, fin flutter: extra z rotation for pectorals: rotate around their root x-axis by sin(t2freq)0.5. To keep manageable: pectoral fin vertices get aBend=0.2 and aFin flutter applied as z offset proportional to distance from root (use uv.y or local attribute aFlap). OK: add attribute aFlap (0..1) = distance from fin root; z += sin(uTimeuFreq*2.0 + side)uFlapAmpaFlap.

Fish frag:

Fish count slider rebuilds fish group.

Lily pads: 8-14 pads, InstancedMesh circle geometry with notch cut (shape geometry). Vertex: bob: sample ripple tex at world pos → y += h*scale, tilt normal-ish by gradient — approximate tilt via sampling two points. Custom ShaderMaterial with instanceMatrix support: when using InstancedMesh + ShaderMaterial, #ifdef USE_INSTANCING... ShaderMaterial doesn't define USE_INSTANCING automatically. Use onBeforeCompile on MeshLambertMaterial? Lambert with custom colors... Or write ShaderMaterial with #include <common> etc. Easier: use MeshStandardMaterial + onBeforeCompile injecting into begin_vertex: transformed.y += texture2D(uRipple, worldUV).r * s; but worldUV needs instanceMatrix applied... in begin_vertex, transformed is local; instancing applied later in project_vertex via instanceMatrix. Hmm — compute instance world pos: vec4 wp = modelMatrix * instanceMatrix * vec4(0.,0.,0.,1.); in vertex (instanceMatrix available when material used with InstancedMesh — define USE_INSTANCING is auto-added? For InstancedMesh, WebGLProgram sets USE_INSTANCING when object.isInstancedMesh — yes, three auto adds #define USE_INSTANCING for InstancedMesh even with built-in materials; with ShaderMaterial too? parameters.instancing set from object type regardless of material... yes material.isShaderMaterial fine — instancing is a render-object property; WebGLPrograms.getParameters includes instancing: object.isInstancedMesh !== undefined. And shader needs #ifdef USE_INSTANCING attribute mat4 instanceMatrix; — chunks handle declaration via #include <begininstance_vertex>? The attribute declaration for instanceMatrix comes from #include <batching_pars_vertex>/ instancing in common? In three r170, instanceMatrix attribute declared in #include <instanced_pars_vertex>? Actually it's in begin_vertex... no. It's declared in WebGLProgram prefix when parameters.instancing: prefixVertex includes attribute mat4 instanceMatrix; when USE_INSTANCING defined. Yes — the program prefix includes it. So in onBeforeCompile of MeshStandardMaterial I can reference instanceMatrix inside begin_vertex injection guarded by #ifdef USE_INSTANCING. Fine.

Simpler path for pads: not InstancedMesh — just 10 individual meshes sharing geometry/material with per-mesh time offset via onBeforeRender... per-mesh uniform hard with shared material. 10 clones of material is fine too. But instancing cleaner for petals (many). Petals: InstancedMesh ~80 with custom per-instance attribute (phase, speed) — ShaderMaterial with InstancedBufferAttribute; declare attributes manually, plus instanceMatrix (auto). Petals drift with flow field + wind, bob on ripples, slight spin. When petal leaves pond radius, respawn at upwind edge (CPU update per frame cheap for 80, or GPU wrap in shader using mod — GPU: pos = mod(base + t*vel, range) wrap — wrapping across pond: use world square [-R,R]², uv; wrap with mod in shader, then they pop at edges; mask pop by fading near edges via alpha. CPU simpler & allows ripple wakes: CPU update petals (80 iterations trivial), write into instanceMatrix each frame. OK CPU.

Petals leave tiny wakes: each frame, if petal speed>0, add small splash at its uv occasionally (every ~0.3s, strength tiny). Splashes queue shared.

Fireflies: 60 points, GPU wander: position = base + vec3(sin(ta+p), sin(tb+p2)0.5, sin(tc+p3)); brightness pulse: smoothstep(sin(t*d+p4)) → size & alpha; color warm green-yellow. Visibility factor by night uniform.

Rocks ring: instanced ~26 squashed dodecahedra around rim, gray with slight color variance; static. Behind them silhouette "pines": cone stacks dark. Add big soft moon sprite in sky + stars? Sky mostly out of view; reflection uses analytic sky function (gradient by reflect dir y + moon glow dot(refl, moonDir)).

Moon glint on water: spec streak — nice.

Background: scene.background = null; use a giant inverted sphere with vertical gradient shader (dusk palette mixed by uDayPhase). Fog: FogExp2 matched.

Food pellets: small cylinders floating, bob with ripple; shrink when nibbled; sink+dissolve after 8s. Max ~6 active; clicking adds (or replaces oldest). Chime on nibble: pentatonic scale pluck (Karplus-Strong-ish via short decay sine + harmonics).

Audio engine:

• master gain, toggle.
• water bed: filtered brown noise loop, lowpass 400Hz, gain slow LFO.
• plop on click: sine burst pitch drop + noise splash (bandpass noise).
• chime: two sine partials, decay 2s, pentatonic pick based on count.
• crickets: at night, high-freq pulsed noise chirps, random intervals, gain ∝ night.
• stir: noise whoosh gain while dragging.

Snapshot: render then toDataURL, download link.

HUD: top-left panel glass style (match previous): title "KOI POND 锦鲤" maybe just "Koi Pond". Subtitle. Stats line: fps · koi count · fed count. Sliders: Time of Day (0=sunset,1=midnight), Flow, Koi (4-32). Buttons: Feed (drops at random or center), Petals burst? maybe "Scatter Petals", Sound, Snapshot. Hint bottom: "Click water: drop food · Drag: stir · Wheel: zoom · Drag orbit with right-click?" — OrbitControls left-drag conflicts with stir: use left = stir/feed (custom), orbit via right-drag / two-finger. Set controls.mouseButtons = { LEFT: null?, ... } hmm OrbitControls with LEFT: ROTATE but we want left for water interaction. Assign LEFT: -1 (disable), MIDDLE: DOLLY, RIGHT: ROTATE. Touch: one-finger = water interact, two-finger = orbit/zoom: controls.touches = { ONE: -1, TWO: THREE.TOUCH.DOLLY_ROTATE }? OrbitControls supports TOUCH.DOLLY_ROTATE? It has TOUCH.ROTATE, TOUCH.PAN, TOUCH.DOLLY_PAN, TOUCH.DOLLY_ROTATE. Yes r170 supports DOLLY_ROTATE for TWO. Set ONE: -1? touches.ONE = -1 might break; maybe set controls.enabled toggling: on pointerdown with primary on water, disable controls while interacting; right-click drag: controls handles since we only disable on left button. Implementation: renderer.domElement pointerdown: if e.button===0 → controls.enabled=false; start water interaction; pointerup → controls.enabled=true. Right/middle drags go to controls. Touch: same: first touch → disable controls (so TWO gesture after disabling won't orbit... once disabled mid-gesture it's stuck until lift; acceptable: one finger interacts, to orbit user starts with two fingers? With controls.enabled=false at first touchstart, second finger won't trigger orbit. Hmm. Alternative: check e.isPrimary and pointerType touch: delay decision? Simpler: on touch, treat as water interact; orbit on touch = two-finger only via controls (set touches ONE: -1? ) OrbitControls: touches: { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN }. Setting ONE to null/-1: switch in onTouchStart uses touches.ONE; if -1 unknown → state NONE → does nothing, but it may still preventDefault... Actually OrbitControls checks if (this.enabled === false) return; at handlers start. If I disable controls on my pointerdown (capture phase, before controls' listener?) — controls listen on domElement too; order matters. Use capture: el.addEventListener('pointerdown', handler, true) → runs before controls bubble listener? Both on same element: capture listeners fire before bubble ones on the SAME element? Event targeting: at target phase, capture and bubble listeners both fire in registration order... At the target, listeners fire in registration order regardless of capture (mostly; spec: capture listeners at target fire during capture phase which includes target). OrbitControls adds its listener probably without capture. Register mine with capture:true → mine first → set controls.enabled=false → controls' handler returns early. On pointerup re-enable. For touch second-finger orbit: with controls disabled from first finger, no orbit. Compromise: touch users get interaction; orbit via... hmm. Alternative: enable controls always, and set controls.touches.ONE = -1 won't exist... Actually I can set controls.touches = { ONE: null, TWO: THREE.TOUCH.DOLLY_ROTATE }: in onTouchStart: switch (this.touches.ONE) null → default → state = STATE.NONE → returns without preventDefault? It tracks touches regardless... might still work for TWO. Risky.

Decision: keep it simple & robust: left mouse = interact, right mouse = orbit (set mouseButtons RIGHT: ROTATE, LEFT: null won't dispatch? mouseButtons.LEFT = -1 → onMouseDown switch hits default → returns, no preventDefault → fine). For touch: ONE = interact (my handler), TWO = orbit+zoom via controls.touches.TWO = THREE.TOUCH.DOLLY_ROTATE and ONE = -1. In r170 OrbitControls, onTouchStart: switch (this.touches.ONE) { case TOUCH.ROTATE ... case TOUCH.PAN ... default: this.state = STATE.NONE; } — with -1 → NONE, then TWO fingers: handleTouchStartDollyRotate if touches.TWO set. Let me check: onTouchStart tracks pointers; if state NONE after first, adding second pointer: if (this.pointers.length === 1) ONE switch else TWO switch → DOLLY_ROTATE works even if ONE was -1? Code: onPointerDown → if pointerType touch: onTouchStart. In r170 onTouchStart:

Yes independent. So ONE:-1, TWO:THREE.TOUCH.DOLLY_ROTATE works, and controls won't preventDefault single touch → my pointer handlers get it.

Mouse: mouseButtons = { LEFT: -1, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.ROTATE }. onMouseDown switch default → state NONE, returns... it does if (this.enabled === false) return; then switch mouseButtons.LEFT: -1 default → return before addPointer? It calls onPointerMove etc only if state set. And preventDefault not called → my handlers fine.

Stir detection: pointermove with primary down → splash along movement (strength ∝ speed), fish scare radius.

Click (no drag): drop food at point. Distinguish click vs drag by movement threshold/time.

Raycast pointer → water plane y=0: use THREE.Raycaster with Plane.

OK also adaptive quality: track fps; if low, reduce: RT scale, ripple steps, disable bloom. Simple implementation.

FPS meter display in HUD.

Alright — code size is large; let me write it now carefully. I'll aim ~1000-1200 lines. Time check: started 13:20, target done by ~13:31. Let me write the file in one big write, then syntax-check with node (extract module? just basic node --check won't work for HTML; I can extract script and check with node --check after removing import statements? Simpler: careful writing + quick grep for balanced braces. I could run a quick check by extracting the content and using node --input-type=module --check? node --check with --input-type=module reads stdin: node --input-type=module --check < file? Actually node --check works for files; for modules need .mjs extension or --input-type. I can do: sed -n '/<script type="module">/,/<\/script>/p' | sed '1d;$d' > /tmp/app.mjs && node --check /tmp/app.mjs. That validates syntax (imports won't resolve but --check only parses).

Let me also keep GLSL careful — Three r170 ShaderMaterial auto-prepends #version 300 es and defines texture2D → texture when rendering with WebGL2? Yes: WebGLProgram does that for ShaderMaterial (it prefixes with "#version 300 es" and defines when isWebGL2 && GLSL1). Confirmed by previous demos relying on it.

Now uniforms arrays: uniform vec4 uSplashes[12]; pass as array of THREE.Vector4 or flat Float32Array — use value: Array.from({length:12},()=>new THREE.Vector4()).

Ripple sim: run 1-2 substeps/frame.

Water plane geometry: PlaneGeometry(30,30, 128,128) rotated -90°; circle mask radius 13.5 in shader: discard outside? Water shader: if rWorld > pondR → discard (rocks ring covers edge). Floor plane bigger 32×32 with dark rock color outside pond... Floor visible outside pond edge? Camera angled down, orbit limited, pond rim + rocks surround; floor outside circle = dark ground — fine, it's in underScene → seen through refraction only... wait, floor is ONLY in underScene rendered to RT; mainScene shows water plane (discards outside pond) — outside pond you'd see background/fog + rocks. But looking at angle, beyond rocks you'd see void (background gradient sphere) — fine.

Hmm, one more: fish visible ABOVE water? Fish are in underScene, only visible through water refraction — perfect (they're underwater). Their fins never break surface — acceptable. Fish food floats — in mainScene above water. Shadows under fish — in underScene.

Caustics on fish + floor from same function.

Now color palettes for time-of-day: phase p ∈ [0,1]:

• p=0 (sunset): sky top #2a1b4a → horizon #ff9a5a/#e86a92; fog #3a2a4a; water deep #123; caustic warm #ffd9a0, intensity 0.9; moon dim; fireflies 0.3
• p=1 (midnight): sky #050914 → #0b1a33; fog #060a14; deep #04101e; caustic cool #9fc8ff intensity 0.5; moon bright; fireflies 1.0 Compute in JS as lerped uniforms (uSkyTop, uSkyHorizon, uDeep, uCausticColor, uMoonDir/Color, uNight).

Moon direction: fixed up-left direction; reflection spec uses it.

OK writing now. I'll structure:

HTML: canvas container, HUD panel (title, stats, sliders, buttons), hint, toast, sound. CSS glass style consistent w/ earlier demos (dark panel, blur, indigo accent — maybe teal accent for this one).

JS outline:

1. imports (three, OrbitControls, EffectComposer, RenderPass, ShaderPass, UnrealBloomPass, OutputPass)
2. Config/state
3. Renderer, scenes (underScene, mainScene), camera, controls
4. Ripple sim (RTs, materials, splash queue)
5. SceneRT
6. Sky dome, fog
7. Floor (underScene) shader
8. Fish: geometry builder, material factory, school state + steering
9. Food pellets
10. Lily pads (instanced, onBeforeCompile)
11. Lotus flowers (few small emissive-ish)
12. Petals (instanced CPU)
13. Rocks ring + pines silhouettes
14. Fireflies points
15. Water surface shader
16. Post chain
17. Audio engine
18. UI wiring
19. Interaction (pointer)
20. Resize, adaptive quality
21. Main loop: update sim, fish, petals, food, render underScene→RT, composer.render
22. Snapshot, toast helpers

Let me be decisive on fish geometry builder:

computeVertexNormals after merge — merging manually: I'll just build arrays and concat with index offsets (write helper appendPart(pos,uv,bend,flap,fin,idx)).

Fish material ShaderMaterial with uniforms: uTime, uSeed, uType (0 kohaku,1 sanke,2 ogon,3 black/red), uSwim (speed-driven freq/amp), uMoonDir, uNight uniforms shared (pass references to shared uniform objects so one update hits all: create shared = { uTime:{value:0}, uDeep:{value:new Color}, ... } and merge into each material's uniforms by reference).

Pattern in frag:

uv for pattern: use uv=(s, around) — patch scale: fbm(vec2(uv.x2.0, uv.y1.0)*scale... fine.

Fish count rebuild: dispose old meshes.

Steering per fish (CPU):

Food: pellets array {mesh, pos, r, life}; fish within 2.5 seek nearest; nibble: dist<0.35 → food.r -= dt*0.25; chime every nibble tick; ripple small. food gone → remove. Auto drop food every ~25s? No—only user. Also "Feed" button drops 3 near center.

Petals burst: reset all petals random over pond.

Stir: pointer down+move: splash strength ∝ dist moved, radius 0.02; scare: fish within 2.2 of pointer get flee impulse.

Splash queue: array of {x,y(uv),r,s}; each frame take up to 12 into uniform array; clear rest.

Fish near surface create ambient ripples: every 0.4s, random fish near surface small splash — adds life. Also pads bobbing make nothing. OK.

Underwater RT render: renderer.setRenderTarget(sceneRT); renderer.render(underScene, camera); then composer (renders mainScene). Water shader uniform uSceneTex = sceneRT.texture. Resize: sceneRT.setSize(wscale, hscale).

Edge case: underScene bg = floor plane fills view? Floor 40×40 dark beyond pond. Background of underScene: set underScene.background = dark color. Water refraction samples may hit background — fine (deep color).

Camera: fov 45, pos (0, 16, 10) looking at 0,0,0 → polar ~58°. minDistance 8, maxDistance 30, minPolar 0.2, maxPolar 1.15, enablePan false.

Bloom: threshold 0.75, strength 0.55, radius 0.4. Moon sprite + fireflies + lotus glow will bloom.

Final pass: vignette+grain+slight saturation — combine into a ShaderPass.

Adaptive: avg fps over 60 frames; if <45: bloom off, RT scale 0.75, ripple 256→(recreate? no—keep size, just steps 1); if still <30: RT scale 0.5, petals 40.

Write snapshot: composer.render then canvas.toDataURL.

Audio: master; functions plop(), chime(n), stirNoise(amount), crickets gain by night. Implement compactly.

Stats: FPS, koi n, fed count.

OK — writing the file now. Must be careful with GLSL strings inside template literals (avoid nested backticks). Let me write it.

One more design decision for water reflection: analytic sky function shared in GLSL string between water frag and reused:

Water frag main:

Ripple height scale: sim heights ~[-1,1]; normal scale ~ 2.2; displacement 0.06.

uResolution = RT pixel size of sceneRT (device px). gl_FragCoord device px — matches if sceneRT same size.

Floor shader:

I'll use the famous Shadertoy caustic (by Dave Hoskins / "Caustics"):

Yes that one. GLSL loop constant fine.

Fish also add caustic(worldXZ*0.5) * causticColor.

Pebbles voronoi:

Write compact.

Pines silhouette: cones stacked 3 per tree, very dark blue-green, around radius 16-22, ~14 trees, instanced? Just merged geometry with basic dark material (fog affects). Use MeshBasicMaterial color near-bg (fog:false?) keep fog true... MeshBasic affected by fog if material.fog=true default yes. good.

Rocks: instanced dodecahedron r~0.6-1.1 squashed y0.55, around r=13.6±0.5, gray #5a5f6a tint variance via instance color (InstancedMesh.setColorAt + MeshStandardMaterial? basic lambert with vertexColors instance). Use MeshStandardMaterial roughness 1, flatShading. Lighting: dir moon light + ambient hemisphere. Pads standard too (receive dir light). Water is custom (ignores scene lights, uses own uniforms).

Lotus: 3 flowers: core sphere small emissive warm + petals (cones bent?) — simplify: 8 petals per flower via squashed spheres arranged, pink-white, emissive slight. Small group, static bob at pad position. Few objects fine.

Fireflies shader points:

Petals: geometry small quad (0.16×0.12) bent? plane fine, slight rotation; material: pink #ffb7c5 with white center gradient via uv, alpha; doubleside. InstancedMesh with dynamic usage; per frame update matrices (80 ok) + splash tiny occasionally.

Petals also gently rotate to lie flat: matrix compose pos, quat from euler (tilt small, yaw spin slow), scale 1.

Flow field: curl-ish: v = (sin(z0.3+t0.1), cos(x0.3-t0.08)) * flow + wind constant dir. drift speed 0.15-0.4.

Koi count slider: rebuild on change (debounced).

Time slider: sets palettes.

Let me also add subtle "godray" above water? skip.

Auto demo mode: every ~20s if no interaction, drop a food pellet at random spot to show behavior? Nice touch — yes, gentle auto-feed every 18s (stop after user interacts? keep always, it's charming; add toggle? keep simple: always, every 20s, only if <2 pellets active).

Toast helper + boot overlay? Keep: title overlay fades (like previous demos had "click to interact"?). Simple hint bar at bottom.

Sound unlock: first pointerdown resumes ctx.

Alright, writing now. I'll write the whole file. Estimate ~1150 lines. Go.

Also update /space/demos/index.html adding card 024 at top of list.

Demo name: 024-koi-pond, title "Koi Pond — a moonlit water garden".

Let me write the file.

Careful GLSL notes:

• No uv name clash; use vUv.
• Loops with constant bounds.
• #define ok.
• texture2D auto-mapped.

For InstancedMesh pads with onBeforeCompile on MeshStandardMaterial: inject into vertex shader after #include <begin_vertex>:

texture2D in vertex — WebGL2 fine (texture() with implicit lod 0 in vertex — with #version 300 es mapping texture2D→texture, in vertex shader texture() without bias is allowed (lod 0). Yes allowed.

But pad tilting: also tilt normal by ripple gradient — compute in vertex and pass varying to override normal? Minor: pads bob only, add slight rotation via gradient: transformed.xz tilt... skip tilt, bob + tiny scale pulse enough. Actually tilt adds a lot of realism cheaply: rotate local pos around X/Z by gradient*0.3 before instance transform:

eh — simple approach: transformed.y += hhbob; then apply tilt: transformed.xz += vec2(hx,hz2)(-transformed.y_local?) skip. Bob only. Good enough at this scale... Actually pads are 0.5-0.9 radius; ripple bob ±0.06 — visible. Tilt from gradient: rotate via small-angle: y already offset; add: transformed.x += -hx*4.0*transformed.y; transformed.z += -hz*4.0*transformed.y; wait that shifts by local y which ~0 for flat disc. Tilt affects normal visually only through lighting... Lambert normal stays up → lighting flat. Add normal perturbation in fragment? Keep simple: bob + done.

Lily pad shape: ShapeGeometry with notch: circle arc from angle 0.25..2π-0.25 minus wedge — Shape with absarc and lineTo(0,0).

Pad color variance via instance color? MeshStandardMaterial + instanceColor works (USE_INSTANCING_COLOR when setColorAt used). Set green hues.

Petals as InstancedMesh + MeshBasicMaterial? Need per-petal alpha fade near edges: do in shader — custom ShaderMaterial with instanceMatrix support: declare attribute mat4 instanceMatrix;?? With ShaderMaterial + InstancedMesh, three defines USE_INSTANCING and the prefix declares instanceMatrix automatically ONLY for built-in? For ShaderMaterial, WebGLProgram builds prefix from parameters; instancing define is added when parameters.instancing true — and prefix includes:

This is in the standard prefix for ALL materials including ShaderMaterial (it's part of prefixVertex in WebGLProgram). Yes, r170 prefixVertex includes instancing attribute declaration guarded by USE_INSTANCING for RawShaderMaterial? No—Raw excludes; ShaderMaterial includes standard prefix with #ifdef USE_INSTANCING attribute mat4 instanceMatrix; — confirmed in three source. So ShaderMaterial can use instanceMatrix when rendered as InstancedMesh.

Petals ShaderMaterial: vertex: world = instanceMatrix * pos; bob via ripple tex; frag: petal color gradient. alpha fade: vFade computed from pond radius in vertex (pass world pos → fade near rim 12.5..13.5).

Also petals render above water (y≈0.03) — fine.

Fireflies ShaderMaterial points — positions attribute static base + seed attribute; vertex computes animated offset; point size by perspective: gl_PointSize = size * (300/ -mvPosition.z).

Fish food: cylinder r=0.06 h=0.03 color tan; bob; shader? MeshStandardMaterial fine, floats y=0.03+ripple.

Pellet ripple rings: on drop, splash medium; nibbling: tiny.

OK — also ensure renderer.autoClear proper for RT pass: render underScene with autoClear true default; setRenderTarget(sceneRT), render; setRenderTarget(null); composer.render(). Composer's RenderPass clears main scene. sceneRT.texture colorSpace: default linear; renderer outputColorSpace SRGB with OutputPass — RenderPass renders mainScene into composer RT (linear), OutputPass converts. Water sampling sceneRT (linear) — consistent. Fish colors specified in sRGB → convert via Color().setHex with ColorManagement default converts to linear-srgb working space automatically for materials using color uniforms? Uniform colors passed manually aren't auto-converted; THREE.Color stores as-is; with ColorManagement enabled, new THREE.Color(0xff8800) converts hex to linear working space automatically. Yes — Color setHex applies SRGBToLinear when color management enabled (default). Good, all colors linear in shaders, OutputPass does sRGB + tonemap. Set renderer.toneMapping = ACESFilmicToneMapping; OutputPass applies tonemapping. Note: my custom final ShaderPass after bloom, then OutputPass last. Order: Render → Bloom → FinalGrade → Output. Hmm OutputPass includes tone mapping; grading in linear before it OK.

Fish in underScene rendered to sceneRT via renderer.render (not composer) — tone mapping applies? Material tonemapped flag applies tone mapping in each material's fragment when rendering to screen... When rendering to render target, tone mapping is NOT applied? Actually tone mapping chunk applies when toneMapping !== NoToneMapping regardless of target? In three, tone mapping is applied in tonemapping_fragment chunk for built-in materials if renderer.toneMapping set AND material.toneMapped — applied when rendering to screen? No—it's compiled into material, applied always... Hmm: WebGLRenderer sets _currentRenderTarget; tone mapping applied in shader regardless of render target for built-in materials — BUT the renderer only enables tone mapping defines based on renderer.toneMapping for all materials. Wait no: there's a check — material.toneMapped && renderTarget === null? I recall tone mapping applied only when rendering to canvas (null target)... Actually in three, tonemapping_fragment: #if defined( TONE_MAPPING ) gl_FragColor.rgb = toneMapping( gl_FragColor.rgb ); #endif and TONE_MAPPING define set when renderer.toneMapping !== NoToneMapping && material.toneMapped — hmm but when rendering to RT, three does NOT disable it automatically? I believe WebGLPrograms: toneMapping: material.toneMapped ? renderer.toneMapping : NoToneMapping — no render-target check. There's render-target check for output color space only (colorspace_fragment uses linear-to-output based on target colorspace; RT default Linear → no conversion). So built-in materials in underScene WOULD get ACES tone mapped into sceneRT, then OutputPass tone maps AGAIN the composite. Double tonemap on fish/floor → washed. Avoid: for underScene use mostly custom ShaderMaterials (no tonemap chunk) — floor & fish & shadows custom shaders anyway. Food pellets & any standard material in underScene: food is in mainScene (floats above) ✓. So underScene = floor(custom) + fish(custom) + shadows(basic? MeshBasicMaterial has tonemapping chunk — set material.toneMapped=false). Good: underScene all custom/tonemapped=false.

MainScene: pads/rocks standard materials → tonemapped by OutputPass only (they're rendered into composer RT... wait RenderPass renders into composer RT with materials applying tone mapping? Same issue! If TONE_MAPPING applied during RenderPass into RT, then OutputPass would double-apply. But EffectComposer's standard setup: renderer.toneMapping applied in OutputPass; during RenderPass materials render... hmm, actually when using EffectComposer + OutputPass, docs say set renderer.toneMapping = NoToneMapping? OutputPass reads renderer.toneMapping to decide its own tone mapping. And during intermediate passes, materials: RenderPass renders scene to RT — WebGLPrograms toneMapping param... I now recall there IS a render target check: in WebGLRenderer.render → _currentRenderTarget; programs get toneMapping: (renderTarget === null && material.toneMapped) ? ...? Hmm. Modern three: getParameters receives toneMapping: material.toneMapped ? renderer.toneMapping : NoToneMapping... but material programs are cached per material, not per target. EffectComposer usage with OutputPass is standard in examples with standard materials and looks correct — so three must skip tone mapping when rendering to render targets. Let me recall source r160 WebGLPrograms.getParameters:

Hmm but then examples would double-tonemap... In examples using EffectComposer, materials render into HalfFloat RT and tone mapping... Actually I remember: WebGLRenderer.render sets _this.toneMapping used in programs, and EffectComposer examples DO look right. There is this in WebGLPrograms: parameters.toneMapping = material.toneMapped ? renderer.toneMapping : NoToneMapping — and RenderPass... I'm quite sure modern three applies tone mapping ONLY when rendering to the default framebuffer (null RT). Checking memory of WebGLRenderer.renderBufferDirect → setProgram → materials.refreshMaterial... there's: if (material.toneMapped && _currentRenderTarget === null) toneMapping = renderer.toneMapping... Something like: in setProgram: m.toneMapping = ... hmm. I'll just avoid ambiguity: keep renderer.toneMapping = ACESFilmic; my custom shaders ignore it; built-in materials (pads/rocks/food) — if double-tonemapped they'd look slightly flat but acceptable; if correct, great. Previous demos (frostline) used OutputPass with presumably standard materials fine. Don't overthink.

Simplify: use custom cheap lambert-ish ShaderMaterials for pads too? No—time. Standard materials fine either way.

Alright, WRITE. I'll produce the file now, long but single write. Then node --check the JS, then update index.html, done.

Ripple sim resolution: 256. uTexel=1/256. Splashes uniform vec4[12].

Also initial ripples: few random splashes at boot for instant life.

Fish wakes: throttle: per fish timer.

Pointer → world: raycaster.ray.intersectPlane(plane y=0). uv = (x/size+0.5, z/size+0.5).

Pond size constant: WORLD = 30 (square), R = 13.4.

Let me now also define fish archetypes:

• 0 Kohaku: white + red patches
• 1 Sanke: white + red + black spots
• 2 Ogon: gold
• 3 Showa-ish black with orange: base dark #1a1a1f + orange patches
• 4 Platinum/white gold? keep 4 types (0-3).

Fish scale: length 1.0 geometry × scale 0.7..1.3 (koi ~0.7-1.3m vs pond 27m diameter — realistic-ish proportions would be smaller: pond diameter 27 units ~ if 1 unit=0.3m, pond 8m, koi 0.5m → scale 1.6?? Eh, visual balance: fish length ~1.1 units vs pond 27 — looks good from camera height. Keep geometry length 1.0, scale 0.8..1.4.

Speed: 0.8-1.4 u/s wander; dart 3.

Camera at y=14, z=9 → pond 27 wide fills view nicely with fov 42.

Ripple sim damping 0.985 (long-lived), speed: wave eq coeff: next = avg4*2? Standard: next = (l+r+u+d)/2 - prev; damping 0.99. With 60fps steps. Add uRain? no.

Petal wake: every 0.5s per petal: str 0.02, r 0.006 — subtle. only if moving.

Fish surface wakes: str 0.05.

Stir: str 0.35 * speed, r 0.015.

Food drop: str 0.8, r 0.02.

Now numbers for water normal: height amplitude after splashes ~0.5-1; normalScale = 1.8; refraction = 0.028.

gl_FragCoord / uResolution: uResolution = vec2(rtW, rtH) where rtW = floor(wdprscale). gl_FragCoord in device px matches.

Moon sprite: mainScene sprite high up at direction*uDist? Camera looks down, moon rarely visible — skip sprite, reflection carries it. But bloom wants some emitters: fireflies (night) + lotus + spec glints. Good.

Fireflies y 0.5-2.5 above pads region & edges.

Crickets at night: schedule chirps: setInterval-ish via audio clock; implement in update.

Auto-feed timer 20s.

Adaptive quality at 3s intervals.

HUD styling: reuse glass style: position fixed, left top, backdrop-filter blur, border rgba(125,211,252,.18) accent teal #7dd3fc, buttons pill. Title "KOI POND", sub "月下の庭 — moonlit water garden". Stats: 60 fps · 18 koi · 5 fed.

Sliders: Time of Day [0..100], Drift (flow) [0..100], Koi [4..28]. Buttons: 🍘 Feed, 🌸 Petals, 📷 Snapshot, 🔊 Sound.

Hint bar bottom: "Click water to feed · Drag to stir · Right-drag / two-finger to orbit · Wheel to zoom".

Keyboard: F feed, P petals, S snapshot, M mute, H hide UI.

OK writing the actual file NOW. I'll be methodical. (Also remember: cameraPosition available in ShaderMaterial frag? cameraPosition is declared in vertex prefix only... In fragment prefix, three declares uniform vec3 cameraPosition;? Yes, fragment prefix includes cameraPosition too (used by envmap etc). Confirmed: fragment prefix has uniform vec3 cameraPosition; uniform mat4 viewMatrix;... yes.)

vWorldPos: compute in vertex: worldPosition via modelMatrix * position (water plane single mesh): pass vWorld.

Fish vertex wave: uniform uTimeF (per fish phase offset via uPhase), uSwimAmp, uSwimFreq driven by speed (CPU updates per fish material uniforms each frame — 24 materials × few uniforms fine).

Fish frag caustics need world pos → varying vWPos.

Under-scene fog? Apply depth tint manually. underScene.fog = null.

underScene.background = new Color(deep) updated per palette.

Floor shader includes: pebbles + caustics + depth + vignette dark at corners? fine.

Also floor receives "food shadow"? no.

Fish shadow: circular gradient plane 1.1×0.8 scaled by fish, opacity 0.35 * (1 - fishDepth/2.5) — custom shader basic with uniform uOpacity shared? Per-fish child mesh with shared ShaderMaterial but per-fish opacity → use mesh.onBeforeRender? Just fixed opacity 0.28, size scales with fish. Position y = -2.18 (floor at -2.2), slight offset by moon dir. Shared material, per-mesh scale — fine, no per-mesh uniforms needed. Rotation to align with heading: shadowMesh.rotation.z = mesh.rotation.y? Plane rotated -90 x to lie flat; heading rotation then about its local... parent the shadow to a group at fish pos with rotation y = heading: shadow follows parent? If shadow child of fish mesh, it'd inherit fish y too (fish at -0.6, floor -2.2 → child offset y=-1.6) and inherit roll/pitch — meh. Simpler: shadows array updated in loop: sh.position.set(x+0.3, -2.16, z+0.3); sh.rotation.z = -heading (plane geometry rotated x -90 baked, so rotation.z acts as yaw in world? After baking rotateX(-PI/2) into geometry, mesh.rotation.z rotates around world Z?? Euler order XYZ: rotation.z applied... to get yaw after baked flat geometry, use rotation.y? Baked geometry lies in XZ; mesh.rotation.y = -heading gives yaw. Yes.)

Now WRITE.

Actually also — index.html update: insert new card after <!-- New demos are added here -->.

Let me draft the full HTML mentally then write via single write call... It's long; risk of typos — will run node --check.

GLSL caustic function shared string CAUSTIC_GLSL used in floor + fish.

Voronoi for pebbles:

Pebbles: scale p2.2; F2-F1 edge → gap mask; stone color = mix(sand, rand tint); rounded shading: use distance to cell center for dome shading: n = ... approximate: brightness = 0.75 + 0.25smoothstep(1,0,F1)? fine.

Let me write. I'll allow ~40k chars. Go.

One more check: UnrealBloomPass import path 'three/addons/postprocessing/UnrealBloomPass.js' with importmap three/addons/ → unpkg examples/jsm/. Match frostline usage.

Also OutputPass import.

Final grade shader (vignette+grain+lift):

Petals geometry: PlaneGeometry(0.18,0.12, 1,1) bent? add slight z bow via position tweak: pos.z += sin(uv.x*π)*0.03. Fine skip.

Time to write the file.

Fish material uniforms shared: I'll create sharedUniforms object; each fish material: uniforms: Object.assign({uSeed:{value}, uType:{value}, uPhase:{value}, uAmp:{value}, uFreq:{value}}, sharedUniforms) — shared references same objects ✓.

Fish vertex shader:

Hmm pectoral flutter should rotate fins outward (z) with flap oscillation: p.z += sideflutteraFlap where flutter = sin(t*1.6)0.25+0.1. Tail fin extra: aFin==3 → p.z += sin(t-3.4)uAmp1.4aFlap.

Normal transform: skip accurate bend normals; pass n as-is (small bend → ok).

world = modelMatrix * vec4(p,1) (mesh at world via mesh.matrixWorld — use modelMatrix ✓). vN = normalize(mat3(modelMatrix)*n).

frag: pattern by vUv.x (s along body 0 tail..1 head) & vUv.y around. Patches via fbm(vec2(vUv.x3., vUv.y2.) + seed*31.7):

Belly: vN.y<0 lighter... For type:

• 0: col = mix(white, red, m1)
• 1: + black: m2 = smoothstep(0.55,0.62, fbm(offset2)); col = mix(mix(white,red,m1), black0.15, m20.85)
• 2: gold: base gold; shimmer bands: col = gold*(0.85+0.3*fbm); spec stronger.
• 3: black base + orange patches + white belly.

Lighting: diffuse from moon dir + ambient; caustic add; fresnel-ish rim lighten; depth tint mix to deep.

Alpha: opaque.

Shadow material: ShaderMaterial radial alpha:

UnderScene render order: floor first, shadows above floor (y -2.16 vs floor -2.2 with depth test ✓), fish after. transparent shadows sort vs opaque fish fine.

Food (mainScene): MeshStandardMaterial #d9b380 roughness .8.

Pads: ShapeGeometry:

ShapeGeometry(shape, 24) → in XY plane; rotateX(-90) bake → XZ. Scale per instance 0.5-1.1. Position y 0.02. Notch wedge visible ✓.

Standard material green #3f7a44 variations; roughness 0.9; side DoubleSide.

Lotus at 2-3 pad positions: group: 6 petals (SphereGeometry scaled (0.09,0.05,0.16)) arranged ring tilt up, color #ffb3d9 emissive #ff5fa2*0.25; center sphere small #ffd76a emissive 0.6. y=0.08.

Rocks: InstancedMesh(DodecahedronGeometry(1,0), std #5b6070 flatShading, 26) set matrices around ring + color variance slight.

Pines: create 12: each = Group of 3 cones (ConeGeometry) dark #0c1626 basic material fog:true; positions ring r 17-23 outside rocks, scale 2-4. Also a big soft "hill" silhouette? skip.

Fireflies: BufferGeometry positions 64 random in r<14, y 0.4-2.6; seeds attr. ShaderMaterial points additive.

Water: PlaneGeometry(30,30, 140,140) rotateX(-PI/2) baked; ShaderMaterial as designed; uniforms shared refs.

MainScene children: skyDome, water, pads, lotus, petals, rocks, pines, fireflies, food group + lights (dir moon, hemi).

SkyDome: SphereGeometry(60, 32, 15, BackSide) shader gradient uSkyTop/Horizon + faint stars? stars: hash sparkle by direction at night — cheap: st = step(0.9985, hash(floor(d*200))) twinkle sin — adds magic. Add.

underScene: floor plane 60×60? floor visible through refraction only within pond circle — 32×32 enough but big safe: 40. y=-2.2. Plus fish + shadows.

Fog: mainScene.fog = FogExp2(color, 0.012). SkyDome material fog:false.

Composer: RenderPass(mainScene, camera).

Order per frame:

1. dt clamp 0.05; time += dt
2. update palette lerp toward target (smooth slider transitions)
3. fish steering update (+materials uAmp/uFreq from speed, uTime shared)
4. food update (bob, nibble shrink, sink)
5. petals update (+matrices)
6. fireflies uniform time
7. splashes: collect queue (stir/feed/wakes/petals/auto) → up to 12 into sim uniforms
8. ripple sim steps (1 or 2)
9. render underScene → sceneRT
10. composer.render()
11. fps adapt; stats update; audio update (crickets, water bed gain by stir amount)

Also water uniform uTime for sparkle anim.

Auto quality: measure avg frame; levels 0..2; adjust: bloom.enabled, rtScale (recreate sceneRT on change), sim steps 2/1, petals visible count via instanceMesh.count.

Resize handler: renderer, composer, camera, sceneRT.

Snapshot: button → composer.render once then toDataURL → a.download.

Toast(msg): fade div.

Audio (~100 lines): ctx lazily; master; waterNoise buffer loop through lowpass; plop(); chime(scaleIdx); crickets scheduling with night gain; stirGain following pointer activity.

Keyboard shortcuts.

H hide UI.

Boot: initial palette = slider 0.35 (dusk→night), applyPreset? none. initial splashes random ×6. initial petals scattered. initial food none; drop 1 after 2s as demo hint + toast "Click the water to feed the koi".

Edge: WebGL2 float RT support — check renderer.capabilities.isWebGL2; half float RT for sim; fallback UnsignedByte? Sim in byte loses precision → if no float, still works with scaled values? Skip fallback complexity: use HalfFloat (WebGL2 widely supports EXT_color_buffer_float; HalfFloat color buffer is core-ish via EXT_color_buffer_half_float). Frostline did fallback; do quick: type = HalfFloatType, if (!renderer.extensions.has('EXT_color_buffer_float') && !has half) → use FloatType? just try HalfFloat and if error, byte. Keep simple: HalfFloatType, check support, else UnsignedByteType with damping tweak — fine, accept.

Write it!

Line count target ~1050. Let me go. I'll write with care around template literals — the whole script is inside HTML; use normal backticks in JS; GLSL in backticks too. No nested backticks issues as file written raw (not via JS template). ✓

Also avoid ${ sequences inside GLSL strings? They're fine since I want interpolation only where written. Careful not to accidentally include ${ in GLSL (won't).

uResolution for water = sceneRT size (device px * rtScale). Pass vec2.

Also device pixel ratio: renderer.setPixelRatio(min(dpr,2)); gl_FragCoord uses device px ✓.

Writing now — FINAL. Then: node check, mkdir, write, update index, quick sanity greps, done.

Now let me check the JS syntax. There's a bug I noticed: in updateFish, the separation code has _v.add(_v.clone().copy(f.pos).sub(o.pos)...) — that's convoluted but works (clone then copy overwrites). Let me simplify mentally: _v.clone().copy(f.pos) creates a clone of _v then copies f.pos into it → effectively new vector from f.pos. OK fine.

Also the adapt function call at the end is weird: adapt(fpsAcc / fpsN * fpsN === 0 ? 60 : fpsN / fpsAcc, fps); adapt(3.1 * 0 + dt, fps); — that's messy leftover. The adapt signature is adapt(dt, fps) and accumulates fpsTimer until 3s. Calling it twice per stats window with dt adds up. Let me clean that: just call adapt(dt, fps) once per frame instead — but adapt currently only gets called every 0.5s. Let me restructure: call adapt every frame with dt and current fps estimate. Simplest fix: in the per-frame loop, track fps continuously:

But adapt uses fps averaged over a short window; fine. Let me fix that block.

Also check padMat.userData.sync — I set waterMat.userData.padSync = padMat.userData.sync and call it each frame to update the ripple texture reference after ping-pong swaps. Good. But padMat.onBeforeCompile sets uniforms on shader when compiled — needs padMat.userData.sh set. OK.

One issue: pads material onBeforeCompile injects texture2D into vertex shader — WebGL2 vertex texture fetch of a HalfFloat LinearFilter texture. Vertex texture fetch is supported; linear filtering of half-float requires OES_texture_float_linear / half-float-linear (WebGL2 supports linear filtering for half float via OES_texture_half_float_linear? In WebGL2, float32 linear needs EXT, float16 linear is core). OK.

Another check: simMat.uniforms.uPrev.value = simA.texture then swap — initial simA/simB contain zero — fine.

In the water vertex shader I sample uRipple — at first frame texture bound is simA.texture set via uniform initial value — I set uRipple: { value: simA.texture } initially and update each frame after swaps ✓.

Petal material: transparent discard-based; fine.

Fish steering: f.vel max length check then if (f.vel.length() < 0.35) setLength(0.35) — constant motion, ok.

Separation inner loop allocates clones — minor GC churn with 28 fish × 27 others × 60fps — ~45k allocs/sec. Acceptable but could be optimized; fine.

koiFrag uses cameraPosition in fragment — declared in fragment prefix ✓.

Water frag uses cameraPosition ✓.

floorMat fragment shader: I used template literal with ${NOISE} and ${CAUSTIC} — yes those are inside a JS template literal — the file is raw HTML so ${...} interpolation happens in JS — intended ✓. And .replace(/PONDR/g, ...) — clever but check: the string contains "PONDR" only where I want. In floor shader I wrote smoothstep(0.0, PONDR, r). Yes.

But wait — in the water shader I interpolated ${WORLD.toFixed(1)} etc directly in the template literal — fine.

Koi vertex shader: attribute float aBend; etc. — with WebGL2 conversion, three's prefix converts attribute → in. Three's WebGLProgram does string replaces for GLSL1 shaders: it includes attribute/varying/texture2D conversions when isWebGL2 and GLSL1... Actually careful: Three converts built-in chunks, and for ShaderMaterial with GLSL1 syntax it prepends:

in the vertex shader, and correspondingly in fragment. Yes — that's standard behavior. ✓ (frostline relied on the same.)

But one gotcha: In the koi VERTEX shader I declared varying vec2 vUv; varying vec3 vN; varying vec3 vW; and in FRAGMENT the same varyings — conversion handles ✓.

Another gotcha: uv attribute is auto-declared in vertex prefix for ShaderMaterial? The vertex prefix declares attribute vec2 uv; always ✓.

instanceMatrix in petal vertex shader: declared in prefix only #ifdef USE_INSTANCING. My petals vertex shader uses instanceMatrix without the #ifdef guard — since petals.mesh is InstancedMesh, USE_INSTANCING will be defined. ✓. But wait — ShaderMaterial + InstancedMesh: does WebGLPrograms set instancing: true for ShaderMaterial? getParameters: instancing: IS_INSTANCEDMESH — independent of material type ✓. And prefixVertex includes:

Yes.

The pad onBeforeCompile injection into MeshStandardMaterial: #include <begin_vertex> exists in standard vertex shader ✓; #include <common> ✓.

One concern: padMat.userData.sh.uniforms.uRipple.value — set at compile; we sync each frame. Before compile, sh undefined → guard ✓.

waterMat.userData.padSync assigned inside the pads block — but I also set waterMat.userData = {} just before, then assign padSync. In the loop: if (waterMat.userData.padSync) waterMat.userData.padSync(); ✓.

Rocks: rocks.setColorAt — creates instanceColor; MeshStandardMaterial handles ✓.

Fish material side: THREE.DoubleSide — normals on backfaces flipped automatically? GLSL: gl_FrontFacing not handled in custom shader; DoubleSide with custom shader may light backfaces wrong, acceptable.

Shadow shader: uses modelViewMatrix ✓ declared.

sfx.stir references ctx — if ctx null, if (ctx && !muted) ✓.

In pointermove handler: sfx.stir(...) — calls even before unlock: guarded ✓.

updateFish — f.pos.clone().normalize() allocates; fine.

Issue: _v.add(_v.clone().copy(f.pos).sub(o.pos)...) — _v.clone().copy(f.pos) → clone _v, then copy f.pos into it (overwrites) → vector = f.pos; .sub(o.pos) → f.pos - o.pos ✓. Works though wasteful.

Now the messy adapt call — fix it. Also remove the odd line.

Also: spawnFish disposes f.mesh.material but not geometry (shared koiGeo, good) and shadow mesh uses shared geo/mat ✓. But it removes shadow from underScene — shadows were added to underScene directly ✓; fishGroup.remove(mesh) ✓.

Bug: in spawnFish cleanup, fishGroup.remove(f.mesh); underScene.remove(f.shadow); ✓.

dropFood — pellets cap 6 ✓; fedCount referenced in pointerup before its let declaration — let fedCount = 0 is declared in UI section which comes AFTER the interaction section in file order. pointerup handler references fedCount — but the handler only RUNS after user interaction, by which time the module has fully executed → let hoisting TDZ only matters during module evaluation. Handler defined earlier but called later ✓ fine.

$('sKoi').value at boot — UI section runs before boot ✓.

Potential issue: renderer.domElement pointerdown with right button: my handler returns early if e.button !== 0 && e.pointerType === 'mouse' → controls stay enabled for right-drag orbit ✓. But controls.mouseButtons.LEFT = -1 — OrbitControls onPointerDown → onMouseDown switch on mouseButtons.LEFT → -1 → default case: this.state = STATE.NONE? Let me recall r170 code:

So LEFT -1 → NONE → no action, no preventDefault ✓. My capture handler disables controls during left drag anyway.

Touch: touches.ONE = -1 → onTouchStart switch(1 pointer): switch(touches.ONE) default → STATE.NONE; two pointers: switch(touches.TWO) → DOLLY_ROTATE ✓. But when my pointerdown fires for the first touch I set controls.enabled=false — then two-finger gesture won't work until lift. Hmm — with controls disabled at first touch, OrbitControls' onPointerDown returns early and never tracks pointers → second finger does nothing. That kills touch orbit. Fix: only disable controls for mouse; for touch leave enabled with ONE:-1 (single touch → state NONE → no orbit action; my handler gets the events since OrbitControls won't preventDefault... does it? onPointerDown→ if enabled false return; enabled true → onTouchStart → state NONE; then in onPointerDown after onTouchStart: if (state !== STATE.NONE) setPointerCapture... — I think it only captures when state set. Single touch: no capture, no preventDefault (touch-action CSS: OrbitControls sets style.touchAction = 'none' on domElement — that blocks browser scrolling but not my JS handlers ✓).

So: modify pointerdown handler: if mouse → disable controls; if touch → keep controls enabled (ONE:-1 means it ignores single touch anyway). On pointerup re-enable only if we disabled.

Let me patch:

Also OrbitControls may still interfere on wheel — fine (zoom desired).

Now the double adapt call cleanup. Also adapt(dt, fps) design: it accumulates fpsTimer += dt and checks every 3s. I'll call it per frame with the instantaneous-ish fps (1/dt smoothed). Replace stats block:

And adapt ignores fps>threshold; with instantaneous fps noisy, a few bad frames could downgrade quality unnecessarily — use EMA: fpsEMA = fpsEMA*0.95 + (1/dt)*0.05 then adapt(dt, fpsEMA). Good.

Let me apply these two patches, then extract & syntax-check the JS.

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