{"id":"gen-1784086454-v0C79D9YL3IThvzeGdEf","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"Looking at this, I'll create a WebGL-based river simulation with a custom fragment shader that handles flowing water physics, Fresnel reflections, caustics, and click-driven ripple propagation. The water will use simplex noise for directional flow and a proper wave equation for ripples that expand outward at constant speed with damping.\n\n```html\n\n\n\n\nRiver Flow — Interactive Water\n\n\n\n

River Flow

Interactive Water Simulation

\n ripples 0
\n fps —\n

\n click to disturbdrag to trailmove to ripple\n

\n\n\n\n\n```\n\n**How it works:**\n\nThe entire river is rendered in a single WebGL fragment shader that evaluates a height field at every pixel. The height field combines four layers:\n\n1. **Directional flow** — Multi-octave simplex noise animated along the flow vector, with the lowest frequency stretched along the flow direction so swells look like they're moving downstream rather than isotropically.\n\n2. **Click ripples** — Each click stores `(x, y, time, strength)` in a uniform array. The shader computes `localTime = age - distance / speed`, so waves propagate outward at a constant speed (like real surface waves). They're shaped by a damped sinusoid `sin(τ)·e^(-τ)` with a smooth attack ramp so the wave front isn't a hard step, plus a `1/(1+d)` spatial energy falloff.\n\n3. **Mouse-hover micro-ripples** — A small continuous disturbance follows your cursor when not clicking.\n\n4. **Wind ripples** — High-frequency noise for surface texture.\n\nThe normal is computed via finite differences of the height field, then used for **Schlick Fresnel** reflection (sky gradient), a **Blinn-Phong sun specular** (sharp + broad), **caustic patterns** on the virtual riverbed, **foam at wave crests**, and a depth-based color blend between deep and shallow water. Flow streaks are overlaid to emphasize the current direction.\n\nClick anywhere to send out a ring of waves, or drag to trail smaller disturbances across the surface.","refusal":null,"role":"assistant","annotations":null,"audio":null,"function_call":null,"tool_calls":null,"reasoning":"The user wants a realistic river animation that reacts to cursor clicks. I need to create a single HTML file with all the necessary code. Let me think about how to make this look really good and realistic.\n\nFor a realistic river animation, I'll use:\n1. WebGL/Canvas for the water rendering\n2. Shaders for the water effect (or a 2D canvas approach with rippling effects)\n3. Click interactions that create ripples/waves\n\nI think the best approach for a realistic river would be to use a WebGL shader-based approach with:\n- A flow effect using noise\n- Ripples emanating from click points\n- Reflections/caustics\n- Maybe some particles for foam/spray\n\nLet me design this carefully:\n\nOption 1: Pure WebGL with custom shaders - most realistic but complex\nOption 2: Canvas 2D with displacement mapping - good balance\nOption 3: Three.js with shader materials - realistic and manageable\n\nI'll go with WebGL directly with custom shaders for the best control and realism. I'll implement:\n- A water surface using a plane\n- Vertex shader with multiple wave layers (flowing + ripples)\n- Fragment shader with realistic water coloring, Fresnel effect, caustics\n- Click interactions that add ripple sources\n- Flowing water using animated noise\n\nLet me write this carefully. I'll use a fragment-shader-heavy approach where most of the water effect is computed in the fragment shader using raymarching or a heightmap approach.\n\nActually, let me think about this more. For a 2D top-down or perspective river view, I can use:\n\n1. A height map approach where I track water surface height\n2. The wave equation for ripples\n3. Flowing noise for the river current\n\nLet me go with a fragment shader approach that:\n- Renders a full-screen quad\n- Uses procedural noise for the flowing water\n- Tracks click positions and creates expanding ripples\n- Has realistic water color with depth, reflections, Fresnel\n\nI'll write the entire thing in WebGL with raw shaders for maximum control. Let me design the shader:\n\n```glsl\n// Fragment shader\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec2 uMouse;\nuniform vec4 uRipples[10]; // x, y, time, strength\n\n// Noise functions\nfloat hash(vec2 p) { ... }\nfloat noise(vec2 p) { ... }\nfloat fbm(vec2 p) { ... }\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution.xy;\n vec2 p = uv;\n \n // Flowing water using animated noise\n vec2 flowDir = vec2(1.0, 0.1);\n float flow = fbm(p * 4.0 + flowDir * uTime * 0.5);\n \n // Ripples from clicks\n float rippleHeight = 0.0;\n for (int i = 0; i < 10; i++) {\n vec4 r = uRipples[i];\n float age = uTime - r.z;\n if (age < 3.0 && r.w > 0.0) {\n vec2 rp = p - r.xy;\n float dist = length(rp);\n float wave = sin(dist * 50.0 - age * 8.0) * exp(-dist * 5.0) * exp(-age * 0.8);\n rippleHeight += wave * r.w;\n }\n }\n \n // Compute normal from height field\n // ...\n \n // Water color with depth, reflections\n // ...\n}\n```\n\nThis is getting complex. Let me simplify and focus on what creates a realistic effect:\n\n1. Use Perlin/Simplex noise for flowing water surface\n2. Compute normals from the height field for proper lighting\n3. Add Fresnel reflection for water realism\n4. Add click ripples that expand and fade\n5. Add caustics-like patterns\n6. Depth-based color (deeper = darker blue-green)\n\nLet me write the complete code now. I'll structure it as:\n\n1. HTML with canvas\n2. WebGL setup\n3. Vertex shader (simple passthrough)\n4. Fragment shader (the meat of the effect)\n5. Animation loop\n6. Click handlers that add ripples\n7. Mouse position tracking for additional interaction\n\nI'll make it look like a river flowing from top to bottom (or angled) with realistic water.\n\nLet me write this out:\n\n```html\n\n\n\n\n\n\n

Click to create ripples

\n\n\n\n```\n\nLet me write the actual shader carefully. The key parts:\n\n**Noise function (Simplex-like):**\n```glsl\nvec2 hash2(vec2 p) {\n p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n return -1.0 + 2.0 * fract(sin(p) * 43758.5453);\n}\n\nfloat noise(vec2 p) {\n const float K1 = 0.366025404;\n const float K2 = 0.211324865;\n vec2 i = floor(p + (p.x + p.y) * K1);\n vec2 a = p - i + (i.x + i.y) * K2;\n float m = step(a.y, a.x);\n vec2 o = vec2(m, 1.0 - m);\n vec2 b = a - o + K2;\n vec2 c = a - 1.0 + 2.0 * K2;\n vec3 h = max(0.5 - vec3(dot(a,a), dot(b,b), dot(c,c)), 0.0);\n vec3 n = h*h*h*h*vec3(dot(a, hash2(i)), dot(b, hash2(i+o)), dot(c, hash2(i+1.0)));\n return dot(n, vec3(70.0));\n}\n\nfloat fbm(vec2 p) {\n float v = 0.0;\n float a = 0.5;\n for (int i = 0; i < 5; i++) {\n v += a * noise(p);\n p *= 2.0;\n a *= 0.5;\n }\n return v;\n}\n```\n\n**Height function:**\n```glsl\nfloat waterHeight(vec2 p, float t) {\n // Flowing water - main current\n float flow = fbm(p * 3.0 + vec2(t * 0.3, t * 0.05));\n flow += 0.3 * fbm(p * 8.0 - vec2(t * 0.5, -t * 0.1));\n \n // Ripples\n float ripples = 0.0;\n for (int i = 0; i < 16; i++) {\n if (i >= uRippleCount) break;\n vec4 r = uRipples[i];\n float age = t - r.z;\n if (age < 4.0 && age >= 0.0) {\n vec2 rp = p - r.xy;\n float dist = length(rp);\n // Expanding ring with falloff\n float speed = 0.4;\n float radius = age * speed;\n float ring = exp(-pow((dist - radius) * 15.0, 2.0));\n float wave = sin((dist - radius) * 40.0 - age * 5.0);\n float decay = exp(-age * 0.6) * exp(-dist * 1.5);\n ripples += wave * ring * decay * r.w;\n }\n }\n \n return flow * 0.1 + ripples * 0.3;\n}\n```\n\n**Normal calculation:**\n```glsl\nvec3 computeNormal(vec2 p, float t) {\n float eps = 0.002;\n float h = waterHeight(p, t);\n float hx = waterHeight(p + vec2(eps, 0.0), t);\n float hy = waterHeight(p + vec2(0.0, eps), t);\n return normalize(vec3((h - hx) / eps, (h - hy) / eps, 1.0));\n}\n```\n\n**Color:**\n```glsl\nvec3 waterColor(vec2 p, float t) {\n vec3 normal = computeNormal(p, t);\n vec3 viewDir = vec3(0.0, 0.0, 1.0);\n \n // Fresnel\n float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 3.0);\n fresnel = mix(0.05, 1.0, fresnel);\n \n // Sky reflection\n vec3 skyColor = mix(vec3(0.6, 0.7, 0.85), vec3(0.3, 0.4, 0.6), p.y);\n vec3 reflectColor = skyColor;\n \n // Water base color (deep teal/green)\n vec3 deepColor = vec3(0.05, 0.2, 0.25);\n vec3 shallowColor = vec3(0.1, 0.4, 0.45);\n float depth = 0.5 + 0.5 * fbm(p * 2.0);\n vec3 waterBase = mix(deepColor, shallowColor, depth);\n \n // Caustics\n float caustic = fbm(p * 5.0 + vec2(t * 0.2, t * 0.1));\n caustic = pow(max(0.0, caustic), 2.0);\n waterBase += vec3(0.2, 0.4, 0.3) * caustic * 0.3;\n \n // Specular highlight\n vec3 lightDir = normalize(vec3(0.5, -0.5, 1.0));\n vec3 halfDir = normalize(lightDir + viewDir);\n float spec = pow(max(dot(normal, halfDir), 0.0), 80.0);\n \n vec3 color = mix(waterBase, reflectColor, fresnel);\n color += vec3(1.0, 1.0, 0.95) * spec * 0.5;\n \n return color;\n}\n```\n\nThis should give a nice realistic water effect. Let me also add some edge vignetting and finalize the code.\n\nLet me think about the river context - the user said \"river flowing\" so I should make it clear that there's a directional flow. I'll make the water flow primarily in one direction (downward or to the side) using the noise animation direction.\n\nI'll also add some additional touches:\n- Slight bank/shore on the edges\n- Maybe some floating particles (foam/leaves)\n- Sun glints on the water\n\nLet me write the complete code now. I need to be careful about the GLSL syntax and make sure everything compiles.\n\nActually, let me reconsider the approach. Using a heightmap-based water shader with computed normals is good. Let me write the full code:\n\n```html\n\n\n\n\nRiver Flow\n\n\n\n

River Flow

Click anywhere to disturb the water

Click · Drag · Touch

\n\n\n\n```\n\nNow for the JavaScript. I need to:\n1. Get WebGL context\n2. Compile shaders\n3. Set up a fullscreen quad\n4. Track ripples in a uniform array\n5. Animate\n\nLet me write this carefully. I'll use a uniform array for ripples, and keep an array in JS of active ripples.\n\nHere's the full plan:\n- Max 20 ripples tracked\n- Each ripple: {x, y, time, strength}\n- When clicked, add a new ripple (or recycle old slot)\n- In shader, compute height contribution from each ripple\n- Compute normal from height\n- Apply lighting, Fresnel, color\n\nLet me also think about making it look really good. A few additional touches:\n- Use 2-3 octaves of noise for the flowing water\n- Add small high-frequency ripples (wind effect)\n- Specular highlights from a \"sun\" direction\n- Color gradient based on viewing angle (Fresnel)\n- Subtle ambient occlusion in troughs\n\nI'll write the code now. Let me be careful with the WebGL boilerplate.\n\n```javascript\nconst canvas = document.getElementById('c');\nconst gl = canvas.getContext('webgl');\n\nfunction resize() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n gl.viewport(0, 0, canvas.width, canvas.height);\n}\nresize();\nwindow.addEventListener('resize', resize);\n\nconst vsSource = `\nattribute vec2 aPos;\nvoid main() {\n gl_Position = vec4(aPos, 0.0, 1.0);\n}\n`;\n\nconst fsSource = `\nprecision highp float;\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec2 uMouse;\nuniform float uMouseStrength;\nuniform int uRippleCount;\nuniform vec4 uRipples[20]; // x, y, startTime, strength\n\n// Simplex noise\nvec2 hash2(vec2 p) {\n p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n return -1.0 + 2.0 * fract(sin(p) * 43758.5453);\n}\n\nfloat noise(vec2 p) {\n const float K1 = 0.366025404;\n const float K2 = 0.211324865;\n vec2 i = floor(p + (p.x + p.y) * K1);\n vec2 a = p - i + (i.x + i.y) * K2;\n float m = step(a.y, a.x);\n vec2 o = vec2(m, 1.0 - m);\n vec2 b = a - o + K2;\n vec2 c = a - 1.0 + 2.0 * K2;\n vec3 h = max(0.5 - vec3(dot(a,a), dot(b,b), dot(c,c)), 0.0);\n vec3 n = h*h*h*h * vec3(dot(a, hash2(i)), dot(b, hash2(i+o)), dot(c, hash2(i+1.0)));\n return dot(n, vec3(70.0));\n}\n\nfloat fbm(vec2 p) {\n float v = 0.0;\n float a = 0.5;\n for (int i = 0; i < 5; i++) {\n v += a * noise(p);\n p = p * 2.0 + vec2(1.3, 1.7);\n a *= 0.5;\n }\n return v;\n}\n\nfloat waterHeight(vec2 p, float t) {\n // Main flowing current - flow downward and slightly to the right\n vec2 flow = vec2(0.0, -0.4); // negative y = downward in screen space if y is up\n // Wait, in screen space, uv.y goes 0 to 1 top to bottom typically... let me think\n // Actually gl_FragCoord.y is 0 at bottom. Let me flip in main.\n \n // For now, flow in +x direction with slight y variation\n vec2 flowDir = vec2(0.6, 0.05);\n \n float h = 0.0;\n // Large slow waves\n h += 0.15 * fbm(p * 1.5 + flowDir * t * 0.4);\n // Medium waves\n h += 0.08 * fbm(p * 4.0 + flowDir * t * 0.8 + vec2(0.0, 5.0));\n // Small ripples (wind effect)\n h += 0.03 * fbm(p * 12.0 + flowDir * t * 1.5);\n \n // Mouse hover ripple (small continuous disturbance at mouse position)\n if (uMouseStrength > 0.0) {\n vec2 mp = p - uMouse;\n float dist = length(mp);\n float m = sin(dist * 60.0 - t * 8.0) * exp(-dist * 8.0) * uMouseStrength;\n h += m * 0.04;\n }\n \n // Click ripples\n for (int i = 0; i < 20; i++) {\n if (i >= uRippleCount) break;\n vec4 r = uRipples[i];\n float age = t - r.z;\n if (age >= 0.0 && age < 5.0) {\n vec2 rp = p - r.xy;\n float dist = length(rp);\n // Expanding ring\n float speed = 0.35;\n float radius = age * speed;\n float thickness = 0.08;\n float ring = exp(-pow((dist - radius) / thickness, 2.0));\n // Wave inside ring\n float wave = sin((dist - radius) * 30.0 - age * 6.0);\n // Overall decay\n float decay = exp(-age * 0.5) * exp(-dist * 0.8);\n h += wave * ring * decay * r.w * 0.25;\n }\n }\n \n return h;\n}\n\nvec3 computeNormal(vec2 p, float t) {\n float eps = 0.003;\n float h = waterHeight(p, t);\n float hx = waterHeight(p + vec2(eps, 0.0), t);\n float hy = waterHeight(p + vec2(0.0, eps), t);\n return normalize(vec3(-(hx - h) / eps, -(hy - h) / eps, 1.0));\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution.xy;\n vec2 p = uv;\n // Flip y so origin is top-left (more intuitive)\n p.y = 1.0 - p.y;\n \n // Aspect correction\n float aspect = uResolution.x / uResolution.y;\n vec2 pp = vec2(p.x * aspect, p.y);\n \n float t = uTime;\n \n vec3 normal = computeNormal(pp, t);\n vec3 viewDir = vec3(0.0, 0.0, 1.0);\n \n // Fresnel\n float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 4.0);\n fresnel = mix(0.03, 1.0, fresnel);\n \n // Sky reflection gradient\n vec3 skyTop = vec3(0.65, 0.72, 0.82);\n vec3 skyHorizon = vec3(0.85, 0.78, 0.65);\n vec3 skyColor = mix(skyHorizon, skyTop, p.y);\n \n // Distort sky sampling by normal for reflection\n vec2 skyUv = p + normal.xy * 0.1;\n skyColor = mix(skyHorizon, skyTop, skyUv.y);\n \n // Water depth color\n vec3 deepColor = vec3(0.02, 0.15, 0.18);\n vec3 shallowColor = vec3(0.08, 0.35, 0.38);\n float depth = 0.5 + 0.5 * fbm(pp * 1.2);\n vec3 waterBase = mix(deepColor, shallowColor, depth);\n \n // Caustics-like patterns\n float caustic = fbm(pp * 6.0 + vec2(t * 0.3, t * 0.2));\n caustic = smoothstep(0.0, 0.5, caustic);\n waterBase += vec3(0.15, 0.3, 0.25) * caustic * 0.25;\n \n // Subsurface scattering approximation\n float sss = pow(max(0.0, normal.z), 2.0);\n waterBase += vec3(0.05, 0.15, 0.1) * sss;\n \n // Sun direction\n vec3 sunDir = normalize(vec3(0.4, -0.3, 1.0));\n vec3 halfDir = normalize(sunDir + viewDir);\n float spec = pow(max(dot(normal, halfDir), 0.0), 120.0);\n vec3 specColor = vec3(1.0, 0.95, 0.8) * spec * 0.8;\n \n // Combine\n vec3 color = mix(waterBase, skyColor, fresnel);\n color += specColor;\n \n // Edge vignette\n float vig = smoothstep(1.5, 0.5, length(uv - 0.5) * 1.5);\n color *= mix(0.7, 1.0, vig);\n \n // Subtle color grading\n color = pow(color, vec3(0.95));\n \n gl_FragColor = vec4(color, 1.0);\n}\n`;\n```\n\nHmm, the ripple effect needs some tweaking. Let me think about the math more carefully.\n\nFor a ripple from a click:\n- Center at (cx, cy)\n- Started at time t0\n- Current time t\n- Age = t - t0\n- The ripple expands outward at some speed\n- At distance d from center, the wave has been there since (d / speed) seconds after the click\n- So the \"local age\" at distance d is age - d/speed\n\nA nice ripple function:\n```glsl\nfloat ripple(vec2 p, vec2 center, float age, float strength) {\n float dist = length(p - center);\n float speed = 0.5; // propagation speed\n float localAge = age - dist / speed;\n if (localAge < 0.0) return 0.0;\n \n // Damped oscillation\n float wave = sin(localAge * 15.0) * exp(-localAge * 1.5);\n // Spatial decay\n float spatialDecay = exp(-dist * 1.0);\n // Initial ramp-up\n float ramp = smoothstep(0.0, 0.1, localAge);\n \n return wave * spatialDecay * ramp * strength;\n}\n```\n\nThis is more physically based - the wave starts at the center and propagates outward at constant speed, decaying as it goes.\n\nLet me revise the shader. I think this will look better.\n\nActually, the issue is that with a constant propagation speed and a sine wave, you get concentric rings. That's what we want! Let me write it cleanly:\n\n```glsl\nfloat clickRipple(vec2 p, vec2 center, float age, float strength) {\n float dist = length(p - center);\n float speed = 0.6;\n float wavelength = 0.08;\n float localTime = age - dist / speed;\n \n if (localTime < 0.0) return 0.0;\n \n // Wave that oscillates and damps over time\n float wave = sin(localTime * 12.0) * exp(-localTime * 1.2);\n \n // Spatial decay (energy spreads out)\n float spatialDecay = 1.0 / (1.0 + dist * 4.0);\n \n // Smooth start\n float ramp = 1.0 - exp(-localTime * 8.0);\n \n return wave * spatialDecay * ramp * strength;\n}\n```\n\nGood. Let me also add a more dramatic initial disturbance:\n\nActually, let me just code the whole thing and iterate. Let me write the complete HTML now.\n\nOne more thing - for the river to look like a river (not just a pool), I should:\n- Have the flow direction be clearly visible\n- Maybe add some streaks or current lines\n- Maybe add particles flowing downstream\n\nLet me also add some \"current lines\" using stretched noise in the flow direction.\n\nHere's my plan for the final shader:\n\n```glsl\n// Height field components:\n// 1. Flowing waves (stretched in flow direction, animated)\n// 2. Wind ripples (small, high frequency, isotropic)\n// 3. Click ripples (concentric expanding rings)\n// 4. Mouse hover disturbance (small continuous ripple at cursor)\n\n// Lighting:\n// 1. Compute normal from height gradient\n// 2. Fresnel reflection of sky\n// 3. Specular sun glint\n// 4. Water depth color\n// 5. Caustics\n```\n\nLet me write the complete code now. I'll be careful about WebGL2 vs WebGL1 - I'll use WebGL1 for maximum compatibility, but I need to make sure the array uniform works.\n\nActually, for arrays of vec4 in WebGL1, I need to use:\n```glsl\nuniform vec4 uRipples[20];\n```\n\nAnd set with:\n```javascript\ngl.uniform4fv(loc, flatArray);\n```\n\nThis should work in WebGL1. Let me finalize the code.\n\nLet me also think about the click handling - I want:\n- Click to create a strong ripple\n- Drag/move to create a subtle continuous disturbance\n- Touch support\n\nFinal code structure:\n\n```javascript\nconst ripples = []; // {x, y, time, strength}\nconst MAX_RIPPLES = 20;\n\ncanvas.addEventListener('click', (e) => {\n const rect = canvas.getBoundingClientRect();\n const x = (e.clientX - rect.left) / rect.width;\n const y = 1.0 - (e.clientY - rect.top) / rect.height; // flip y\n ripples.push({x: x * aspect, y: y, time: performance.now() / 1000, strength: 1.0});\n if (ripples.length > MAX_RIPPLES) ripples.shift();\n});\n\ncanvas.addEventListener('mousemove', (e) => {\n // Update mouse uniform\n});\n```\n\nWait, I need to convert mouse coords to the same space as the shader's `p`. Let me be consistent.\n\nIn the shader:\n- `uv = gl_FragCoord.xy / uResolution.xy` (0 to 1, y up)\n- `p.y = 1.0 - uv.y` (y down, so 0 at top)\n- `pp = vec2(p.x * aspect, p.y)` (aspect-corrected)\n\nFor mouse in JS:\n- `e.clientX` is 0 at left, increasing right\n- `e.clientY` is 0 at top, increasing down\n\nSo mouse in shader space (pp):\n- `mouseX = (e.clientX / width) * aspect`\n- `mouseY = e.clientY / height` (already y-down, matches p.y)\n\nGood.\n\nNow let me write the complete code. I'll also add a subtle shore/bank effect at the edges to make it feel more like a river.\n\nActually, for a top-down river view, I might add some banks on the left and right with darker color (shore/shadow). Or I could make it look like a section of river with the camera looking down at an angle.\n\nLet me go with a top-down view but make it feel like a river by:\n- Having a clear flow direction\n- Adding some \"shore\" texture at the edges (darker, with sand/rock color)\n- Maybe constraining the river to a channel in the middle\n\nHmm, but that might complicate things. Let me keep it as a flowing water surface that fills the screen, but with the flow clearly directional.\n\nOK let me just write the code now. I'll iterate on the visuals in my head:\n\n```html\n\n\n\n\nRiver Flow — Interactive Water\n\n\n\n

River Flow

Interactive Water Simulation

\n ripples: 0
\n fps: --\n

\n click to disturbmove to ripple\n

\n\n\n\n```\n\nNow the JS:\n\n```javascript\nconst canvas = document.getElementById('c');\nconst gl = canvas.getContext('webgl', { antialias: false, alpha: false });\n\nif (!gl) {\n document.body.innerHTML = '

WebGL not supported

';\n throw new Error('No WebGL');\n}\n\n// Shader sources\nconst VS = `\nattribute vec2 aPos;\nvoid main() {\n gl_Position = vec4(aPos, 0.0, 1.0);\n}\n`;\n\nconst FS = `\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec2 uMouse;\nuniform float uMouseActive;\nuniform int uRippleCount;\nuniform vec4 uRipples[24]; // x, y, startTime, strength\n\n// --- Simplex-style noise ---\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }\n\nfloat snoise(vec2 v) {\n const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n -0.577350269189626, 0.024390243902439);\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod289(i);\n vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n + i.x + vec3(0.0, i1.x, 1.0));\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m; m = m*m;\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nfloat fbm(vec2 p) {\n float v = 0.0;\n float a = 0.5;\n mat2 rot = mat2(0.8, 0.6, -0.6, 0.8);\n for (int i = 0; i < 5; i++) {\n v += a * snoise(p);\n p = rot * p * 2.0 + vec2(1.7, 9.2);\n a *= 0.5;\n }\n return v;\n}\n\n// --- Water height field ---\nfloat waterHeight(vec2 p, float t) {\n float h = 0.0;\n \n // Flow direction: primarily along +x with slight curve\n vec2 flowDir = vec2(1.0, 0.08);\n \n // Large rolling waves (stretched along flow)\n vec2 q = p;\n q.x *= 0.7; // stretch along flow direction\n h += 0.10 * fbm(q * 1.8 + flowDir * t * 0.35);\n \n // Medium choppy waves\n h += 0.05 * fbm(p * 4.0 + flowDir * t * 0.7 + vec2(3.0, 1.0));\n \n // Small wind ripples\n h += 0.025 * fbm(p * 11.0 + flowDir * t * 1.4);\n \n // Very fine detail\n h += 0.012 * snoise(p * 28.0 + flowDir * t * 2.2);\n \n // Mouse hover disturbance\n if (uMouseActive > 0.5) {\n vec2 d = p - uMouse;\n float dist = length(d);\n float m = sin(dist * 50.0 - t * 7.0) * exp(-dist * 10.0);\n h += m * 0.02 * uMouseActive;\n }\n \n // Click ripples\n for (int i = 0; i < 24; i++) {\n if (i >= uRippleCount) break;\n vec4 r = uRipples[i];\n float age = t - r.z;\n if (age < 0.0 || age > 6.0) continue;\n \n float dist = length(p - r.xy);\n float speed = 0.55;\n float localTime = age - dist / speed;\n \n if (localTime < 0.0) continue;\n \n // Damped oscillation\n float wave = sin(localTime * 14.0) * exp(-localTime * 1.0);\n // Spatial energy decay\n float spatialDecay = 1.0 / (1.0 + dist * 5.0);\n // Smooth start\n float ramp = 1.0 - exp(-localTime * 10.0);\n // Initial strength\n h += wave * spatialDecay * ramp * r.w * 0.12;\n }\n \n return h;\n}\n\nvec3 computeNormal(vec2 p, float t) {\n float eps = 0.004;\n float h0 = waterHeight(p, t);\n float hx = waterHeight(p + vec2(eps, 0.0), t);\n float hy = waterHeight(p + vec2(0.0, eps), t);\n return normalize(vec3(-(hx - h0) / eps, -(hy - h0) / eps, 1.0));\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution.xy;\n \n // Aspect-corrected coordinates, y-down (origin top-left)\n float aspect = uResolution.x / uResolution.y;\n vec2 p = vec2(uv.x * aspect, 1.0 - uv.y);\n \n float t = uTime;\n vec3 n = computeNormal(p, t);\n vec3 viewDir = vec3(0.0, 0.0, 1.0);\n \n // Fresnel\n float fresnel = pow(1.0 - max(dot(n, viewDir), 0.0), 5.0);\n fresnel = mix(0.02, 1.0, fresnel);\n \n // Sky reflection (gradient + distorted by normal)\n vec3 skyTop = vec3(0.55, 0.62, 0.72);\n vec3 skyHorizon = vec3(0.82, 0.74, 0.58);\n float skyY = clamp(uv.y + n.y * 0.15, 0.0, 1.0);\n vec3 skyColor = mix(skyHorizon, skyTop, skyY);\n \n // Water base color\n vec3 deepColor = vec3(0.01, 0.09, 0.11);\n vec3 shallowColor = vec3(0.05, 0.28, 0.30);\n float depthPattern = 0.5 + 0.5 * fbm(p * 0.9 + vec2(t * 0.1, 0.0));\n vec3 waterBase = mix(deepColor, shallowColor, depthPattern);\n \n // Caustics (subsurface light pattern)\n float caust = fbm(p * 5.0 + vec2(t * 0.4, t * 0.15));\n caust = pow(smoothstep(-0.2, 0.5, caust), 2.0);\n waterBase += vec3(0.12, 0.28, 0.22) * caust * 0.3;\n \n // Foam at wave crests\n float h = waterHeight(p, t);\n float foam = smoothstep(0.06, 0.12, h);\n waterBase = mix(waterBase, vec3(0.75, 0.82, 0.80), foam * 0.4);\n \n // Sun specular highlight\n vec3 sunDir = normalize(vec3(0.35, -0.25, 1.0));\n vec3 halfDir = normalize(sunDir + viewDir);\n float spec = pow(max(dot(n, halfDir), 0.0), 150.0);\n vec3 specColor = vec3(1.0, 0.96, 0.82) * spec * 1.2;\n \n // Secondary wider specular\n float spec2 = pow(max(dot(n, halfDir), 0.0), 30.0);\n specColor += vec3(0.6, 0.7, 0.8) * spec2 * 0.15;\n \n // Combine\n vec3 color = mix(waterBase, skyColor, fresnel);\n color += specColor;\n \n // Subtle flow streaks (visualize flow direction)\n float streak = fbm(vec2(p.x * 3.0 - t * 0.5, p.y * 8.0));\n streak = smoothstep(0.1, 0.4, streak) * smoothstep(0.6, 0.4, streak);\n color += vec3(0.05, 0.1, 0.08) * streak * (1.0 - fresnel);\n \n // Vignette\n vec2 vigUv = uv - 0.5;\n float vig = 1.0 - dot(vigUv, vigUv) * 0.8;\n color *= vig;\n \n // Color grading\n color = pow(color, vec3(0.92));\n color *= vec3(0.95, 1.0, 1.02); // slight cool tint\n \n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\n// Compile shaders\nfunction compile(type, source) {\n const s = gl.createShader(type);\n gl.shaderSource(s, source);\n gl.compileShader(s);\n if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {\n console.error(gl.getShaderInfoLog(s));\n throw new Error('Shader compile error');\n }\n return s;\n}\n\nconst program = gl.createProgram();\ngl.attachShader(program, compile(gl.VERTEX_SHADER, VS));\ngl.attachShader(program, compile(gl.FRAGMENT_SHADER, FS));\ngl.linkProgram(program);\nif (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n console.error(gl.getProgramInfoLog(program));\n throw new Error('Link error');\n}\ngl.useProgram(program);\n\n// Fullscreen quad\nconst buf = gl.createBuffer();\ngl.bindBuffer(gl.ARRAY_BUFFER, buf);\ngl.bufferData(gl.ARRAY_BUFFER, new Float32Array([\n -1, -1, 1, -1, -1, 1,\n -1, 1, 1, -1, 1, 1\n]), gl.STATIC_DRAW);\n\nconst aPos = gl.getAttribLocation(program, 'aPos');\ngl.enableVertexAttribArray(aPos);\ngl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);\n\n// Uniform locations\nconst uTime = gl.getUniformLocation(program, 'uTime');\nconst uResolution = gl.getUniformLocation(program, 'uResolution');\nconst uMouse = gl.getUniformLocation(program, 'uMouse');\nconst uMouseActive = gl.getUniformLocation(program, 'uMouseActive');\nconst uRippleCount = gl.getUniformLocation(program, 'uRippleCount');\nconst uRipples = gl.getUniformLocation(program, 'uRipples');\n\n// State\nconst ripples = [];\nconst MAX_RIPPLES = 24;\nlet mouse = { x: 0, y: 0, active: 0 };\nlet startTime = performance.now();\n\nfunction resize() {\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n canvas.width = window.innerWidth * dpr;\n canvas.height = window.innerHeight * dpr;\n gl.viewport(0, 0, canvas.width, canvas.height);\n}\nresize();\nwindow.addEventListener('resize', resize);\n\nfunction toShaderCoords(clientX, clientY) {\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const x = (clientX / window.innerWidth) * (window.innerWidth / window.innerHeight);\n const y = 1.0 - (clientY / window.innerHeight);\n return { x, y };\n}\n\ncanvas.addEventListener('click', (e) => {\n const c = toShaderCoords(e.clientX, e.clientY);\n ripples.push({\n x: c.x,\n y: c.y,\n time: (performance.now() - startTime) / 1000,\n strength: 1.0\n });\n while (ripples.length > MAX_RIPPLES) ripples.shift();\n});\n\nlet mouseDown = false;\ncanvas.addEventListener('mousedown', () => { mouseDown = true; });\ncanvas.addEventListener('mouseup', () => { mouseDown = false; });\ncanvas.addEventListener('mouseleave', () => { \n mouse.active = 0; \n mouseDown = false;\n});\n\ncanvas.addEventListener('mousemove', (e) => {\n const c = toShaderCoords(e.clientX, e.clientY);\n mouse.x = c.x;\n mouse.y = c.y;\n mouse.active = mouseDown ? 1.0 : 0.6;\n \n // If dragging, add small ripples\n if (mouseDown) {\n ripples.push({\n x: c.x,\n y: c.y,\n time: (performance.now() - startTime) / 1000,\n strength: 0.3\n });\n while (ripples.length > MAX_RIPPLES) ripples.shift();\n }\n});\n\n// Touch support\ncanvas.addEventListener('touchstart', (e) => {\n e.preventDefault();\n for (const t of e.touches) {\n const c = toShaderCoords(t.clientX, t.clientY);\n ripples.push({\n x: c.x,\n y: c.y,\n time: (performance.now() - startTime) / 1000,\n strength: 1.0\n });\n }\n while (ripples.length > MAX_RIPPLES) ripples.shift();\n}, { passive: false });\n\ncanvas.addEventListener('touchmove', (e) => {\n e.preventDefault();\n for (const t of e.touches) {\n const c = toShaderCoords(t.clientX, t.clientY);\n mouse.x = c.x;\n mouse.y = c.y;\n mouse.active = 0.8;\n ripples.push({\n x: c.x,\n y: c.y,\n time: (performance.now() - startTime) / 1000,\n strength: 0.4\n });\n }\n while (ripples.length > MAX_RIPPLES) ripples.shift();\n}, { passive: false });\n\n// FPS tracking\nlet lastFrame = performance.now();\nlet fps = 60;\nlet fpsAccum = 0;\nlet fpsCount = 0;\nconst statsEl = document.getElementById('stats');\n\nfunction render() {\n const now = performance.now();\n const time = (now - startTime) / 1000;\n \n // FPS\n const dt = now - lastFrame;\n lastFrame = now;\n fpsAccum += 1000 / dt;\n fpsCount++;\n if (fpsCount >= 30) {\n fps = Math.round(fpsAccum / fpsCount);\n fpsAccum = 0;\n fpsCount = 0;\n statsEl.innerHTML = `ripples: ${ripples.length}
fps: ${fps}`;\n }\n \n // Remove old ripples\n const cutoff = time - 6.0;\n while (ripples.length > 0 && ripples[0].time < cutoff) {\n ripples.shift();\n }\n \n // Mouse fade\n mouse.active *= 0.95;\n \n // Set uniforms\n gl.uniform1f(uTime, time);\n gl.uniform2f(uResolution, canvas.width, canvas.height);\n gl.uniform2f(uMouse, mouse.x, mouse.y);\n gl.uniform1f(uMouseActive, mouse.active);\n gl.uniform1i(uRippleCount, ripples.length);\n \n // Pack ripples into flat array\n const flat = new Float32Array(MAX_RIPPLES * 4);\n for (let i = 0; i < ripples.length && i < MAX_RIPPLES; i++) {\n flat[i * 4 + 0] = ripples[i].x;\n flat[i * 4 + 1] = ripples[i].y;\n flat[i * 4 + 2] = ripples[i].time;\n flat[i * 4 + 3] = ripples[i].strength;\n }\n gl.uniform4fv(uRipples, flat);\n \n gl.drawArrays(gl.TRIANGLES, 0, 6);\n \n requestAnimationFrame(render);\n}\n\n// Initial mouse position (center)\nmouse.x = (window.innerWidth / window.innerHeight) * 0.5;\nmouse.y = 0.5;\n\nrender();\n```\n\nWait, I need to double-check the toShaderCoords function. Let me trace through:\n\nIn the shader:\n```\nuv = gl_FragCoord.xy / uResolution.xy; // 0 to 1, y up\np = vec2(uv.x * aspect, 1.0 - uv.y); // 0 to aspect, y down\n```\n\nSo p.x ranges from 0 to aspect, p.y ranges from 0 to 1 (0 at top, 1 at bottom).\n\nFor mouse:\n- clientX is 0 to window.innerWidth (left to right)\n- clientY is 0 to window.innerHeight (top to bottom)\n\nSo:\n- p.x = (clientX / window.innerWidth) * aspect\n- p.y = clientY / window.innerHeight\n\nWhere aspect = window.innerWidth / window.innerHeight.\n\nLet me fix toShaderCoords:\n```javascript\nfunction toShaderCoords(clientX, clientY) {\n const aspect = window.innerWidth / window.innerHeight;\n const x = (clientX / window.innerWidth) * aspect;\n const y = clientY / window.innerHeight;\n return { x, y };\n}\n```\n\nThat's correct.\n\nNow let me also think about the visual quality. I want this to look really good. Let me review the shader:\n\n1. Noise - using simplex noise, good\n2. Flow - directional flow with multiple octaves, good\n3. Ripples - expanding rings with damped oscillation, good\n4. Lighting - Fresnel, sky reflection, specular, caustics, foam - good\n5. Color grading - subtle cool tint, vignette\n\nI think this will look quite good. Let me also add:\n- Some \"shore\" darkening at the edges to frame the river\n- Maybe a subtle color variation across the surface\n\nActually, the vignette already darkens the edges, which is good enough for framing.\n\nOne more thing - the initial mouse position before any mouse movement. Let me set it to center and active to 0 so there's no initial disturbance.\n\nLet me also reconsider the ripple parameters:\n- speed = 0.55 (in normalized units per second)\n- The screen is about 1-2 units wide, so a ripple takes about 2-4 seconds to cross\n- That seems reasonable\n- Damping exp(-localTime * 1.0) means ripples last about 3-5 seconds, good\n- Frequency sin(localTime * 14.0) gives about 2Hz oscillation, visible rings\n\nI think the parameters are reasonable. Let me finalize.\n\nOh wait, I need to be careful about the loop in GLSL. In WebGL1, you can't have dynamic loop bounds, but you can use a constant max and break. Let me make sure the loop is correct:\n\n```glsl\nfor (int i = 0; i < 24; i++) {\n if (i >= uRippleCount) break;\n // ...\n}\n```\n\nThis should work in WebGL1 because the loop bound is a constant (24), and we break early.\n\nActually, some WebGL1 implementations have issues with `break` in loops. Let me use a different approach - just always iterate all 24 and use the time check to skip:\n\n```glsl\nfor (int i = 0; i < 24; i++) {\n vec4 r = uRipples[i];\n float age = t - r.z;\n if (age >= 0.0 && age < 6.0) {\n // ... compute ripple\n h += ...;\n }\n}\n```\n\nThis is safer. The strength of dead ripples will be 0 anyway (or the age check will skip them).\n\nActually, let me set unused ripple slots to have time = -1000 so age is always > 6 and they get skipped. Or just rely on the age check. Let me use the age check approach.\n\nHmm, but if ripples array has fewer elements than 24, the remaining slots in the uniform array will be 0 (since I initialize flat to 0). So r.z = 0, age = t - 0 = t, which is positive and grows. For t > 6, age > 6, so they get skipped. For t < 6 (first 6 seconds), they'd create ripples at (0,0) with strength 0... Let me check:\n\nIf flat[i*4+3] = 0 (strength), then the contribution is 0 * everything = 0. So it's fine!\n\nWait, but the ripple position would be (0, 0), and the age check passes, so it computes a ripple at (0,0) with strength 0. The result is 0, so no visual effect. Good.\n\nActually, I should make sure that the `uRippleCount` is used correctly. Let me just iterate all 24 and rely on strength=0 to neutralize unused slots. That's simpler.\n\n```glsl\nfor (int i = 0; i < 24; i++) {\n vec4 r = uRipples[i];\n float age = t - r.z;\n if (age < 0.0 || age > 6.0 || r.w < 0.001) continue;\n // ... \n}\n```\n\nHmm, `continue` might also be problematic in some WebGL1 implementations. Let me use a different structure:\n\n```glsl\nfor (int i = 0; i < 24; i++) {\n vec4 r = uRipples[i];\n float age = t - r.z;\n if (age >= 0.0 && age < 6.0 && r.w > 0.001) {\n float dist = length(p - r.xy);\n float speed = 0.55;\n float localTime = age - dist / speed;\n if (localTime > 0.0) {\n float wave = sin(localTime * 14.0) * exp(-localTime * 1.0);\n float spatialDecay = 1.0 / (1.0 + dist * 5.0);\n float ramp = 1.0 - exp(-localTime * 10.0);\n h += wave * spatialDecay * ramp * r.w * 0.12;\n }\n }\n}\n```\n\nThis should work. All conditions are inside the loop body, no continue/break needed.\n\nActually, I realize I should also handle the case where WebGL might not support 24 vec4 uniforms. Let me check - the minimum guaranteed is 256 vec4 uniforms in the fragment shader in WebGL1, so 24 is fine.\n\nLet me also think about performance. The waterHeight function is called 3 times per pixel (for normal computation), and each call iterates 24 ripples + 5 octaves of FBM (each with a snoise call). That's about 24*3 + 5*3 = 87 snoise calls per pixel. At 1080p that's about 180 million snoise calls per frame. That might be too much.\n\nLet me optimize:\n1. Reduce ripple iterations to 16\n2. Reduce FBM octaves to 4\n3. Or compute the normal with fewer ripples\n\nActually, let me try with 16 ripples and 4 octaves first. If it's too slow, I can reduce further.\n\nHmm, actually 24 ripples * 3 (for normal) = 72 ripple evaluations per pixel, each involving a sin, exp, length, etc. Plus 4*3 = 12 snoise calls per pixel. At 1920x1080, that's about 2 million pixels, so:\n- 72 * 2M = 144M ripple evaluations\n- 12 * 2M = 24M snoise calls\n\nThis should be fine for modern GPUs. Let me proceed with the current plan.\n\nWait, I should also consider mobile devices. Let me reduce the DPR to 1.5 max and maybe reduce ripples to 16.\n\nActually, let me keep it at 20 ripples and 5 octaves. If it's slow, the user can resize the window.\n\nLet me finalize the code. One more thing - I want to make sure the colors look good. Let me think about the palette:\n\nRiver water colors:\n- Deep: dark teal/blue-green (0.01, 0.09, 0.11) - very dark\n- Shallow: medium teal (0.05, 0.28, 0.30)\n- Sky reflection: warm horizon to cool blue\n\nActually, for a more dramatic and beautiful look, let me use a sunset/golden hour palette:\n- Deep water: deep blue-green\n- Shallow: teal-turquoise\n- Sky horizon: warm orange/peach\n- Sky top: dusty blue\n- Sun specular: warm white/gold\n\nThis would look stunning. Let me adjust:\n\n```glsl\nvec3 skyTop = vec3(0.45, 0.52, 0.65); // dusty blue\nvec3 skyHorizon = vec3(0.92, 0.72, 0.55); // warm peach\n\nvec3 deepColor = vec3(0.01, 0.08, 0.10); // very dark teal\nvec3 shallowColor = vec3(0.04, 0.25, 0.28); // teal\n\n// Sun spec\nvec3 specColor = vec3(1.0, 0.92, 0.75); // warm white\n```\n\nActually, let me go with a midday look with clear sky and green-blue water. That's more classic for a river.\n\nLet me finalize with:\n- Sky: light blue to pale warm horizon\n- Water: dark teal to medium teal\n- Sun: bright warm white specular\n\nOK, I think I've planned enough. Let me write the final code.\n\nOne more consideration - I want the animation to feel alive even without clicks. The flowing water should be clearly visible. Let me make sure the flow is strong enough.\n\nAlso, I should add a subtle \"current\" visualization - maybe some flowing particles or streaks. The flow streaks in the shader should help with this.\n\nLet me write the final code now.\n\nActually, I just realized I should double check: in the shader, when computing `p`, I do:\n```glsl\nvec2 p = vec2(uv.x * aspect, 1.0 - uv.y);\n```\n\nAnd `aspect = uResolution.x / uResolution.y`. So p.x ranges from 0 to aspect (e.g., 1.78 for 16:9), and p.y ranges from 0 to 1. The mouse coordinates should match this space.\n\nIn JS:\n```javascript\nfunction toShaderCoords(clientX, clientY) {\n const aspect = window.innerWidth / window.innerHeight;\n const x = (clientX / window.innerWidth) * aspect;\n const y = 1.0 - (clientY / window.innerHeight); // flip y\n return { x, y };\n}\n```\n\nWait, in the shader, `1.0 - uv.y` flips y because gl_FragCoord.y is 0 at bottom. But in JS, clientY is 0 at top. So:\n\nIf I want p.y = 0 at top of screen:\n- shader: p.y = 1.0 - uv.y (uv.y=0 at bottom → p.y=1; uv.y=1 at top → p.y=0) ✓\n- JS: p.y = clientY / windowHeight (clientY=0 at top → p.y=0; clientY=height at bottom → p.y=1) ✓\n\nSo I DON'T need to flip y in JS. Let me fix:\n\n```javascript\nfunction toShaderCoords(clientX, clientY) {\n const aspect = window.innerWidth / window.innerHeight;\n const x = (clientX / window.innerWidth) * aspect;\n const y = clientY / window.innerHeight;\n return { x, y };\n}\n```\n\nYes, that's correct.\n\nOK let me write the final code now. I'll also clean up the UI a bit.\n\nLet me also think about what makes this \"realistic\":\n1. Proper wave physics (propagation, damping)\n2. Fresnel reflection (more reflective at grazing angles)\n3. Specular highlights from a light source\n4. Caustics on the bottom\n5. Foam at wave crests\n6. Multiple wave scales (large swells, medium chop, small ripples)\n7. Directional flow\n8. Color depth variation\n\nI think I have all of these. Let me write it.\n\nFor the final polish, let me also add:\n- A subtle color variation across the surface (some areas greener, some bluer)\n- Maybe a slight gradient in the flow direction (upstream vs downstream color difference)\n\nActually, I'll keep it simple and clean. The current plan is good.\n\nLet me write the complete HTML file now:\n\nActually, let me reconsider one thing. The `continue` keyword in WebGL1 GLSL loops - I've seen issues with it. Let me use nested ifs instead to be safe.\n\nAlso, for WebGL1, dynamic indexing of uniform arrays might be restricted. Let me check... Actually, in WebGL1, uniform arrays can be indexed by constant expressions or loop indices. Since `i` is a loop index, `uRipples[i]` should work. Let me verify this is OK.\n\nFrom the GLSL ES 1.00 spec: \"Sampler types cannot be indexed by expressions other than constant-index-expressions.\" But for non-sampler uniforms, the rule is less strict. Actually, in practice, indexing uniform arrays with loop variables works in WebGL1.\n\nOK, let me finalize. Here's the complete code:\n\nActually, let me also reconsider the number of ripples. 24 might be a lot. Let me use 20 for a good balance.\n\nLet me write the final code. I'll be thorough and make sure everything is correct.\n\nOne more optimization: instead of computing waterHeight 3 times for the normal, I could compute it once and use a cheaper approximation for the gradient. But for quality, the 3-sample approach is better. Let me keep it.\n\nActually, I realize there might be a performance issue with calling fbm (which calls snoise 5 times) 3 times per pixel just for the flowing water, plus 24*3 for the ripples. Let me think about reducing this...\n\nThe flowing water part: 5 octaves * 3 samples = 15 snoise calls per pixel for the base height.\nThe ripples: 24 * 3 = 72 iterations (but each is cheap - just sin, exp, length).\n\nTotal per pixel: 15 snoise + 72 ripple evaluations + lighting calculations.\nAt 1920x1080 * 2 (DPR) = ~4M pixels: 60M snoise calls per frame. That's a lot but should be OK on a decent GPU.\n\nOn mobile, this might be too much. Let me cap the DPR at 1.5 instead of 2. And maybe reduce to 16 ripples.\n\nActually, let me add a simple performance check - if FPS drops below 30, reduce the DPR. But that's complex. Let me just cap DPR at 1.5 for now.\n\nOK, writing the final code now.\n\nHmm, actually let me reconsider the whole thing. The user asked for a \"realistic animation of a river flowing where the water reacts to my cursor clicks\". Let me make sure I deliver on both:\n1. Realistic river flowing animation ✓ (flowing noise, waves, etc.)\n2. Water reacts to cursor clicks ✓ (expanding ripple rings)\n\nI think my plan covers both well. Let me write it.\n\nLet me also make sure the visual is immediately impressive - when the page loads, the water should already be flowing beautifully, and the user should want to click to see the ripples.\n\nFinal code:\n\n```html\n\n\n\n\nRiver Flow\n\n\n\n

\n\n\n\n\n```\n\nLet me write the complete, final version now. I need to be very careful about the shader code to make sure it compiles.\n\nI'll use 20 ripples max and 4 FBM octaves to balance quality and performance.\n\nActually, let me use 5 octaves for better looking water, and 20 ripples. Modern GPUs can handle this easily.\n\nLet me write it all out now. Final version:\n\nWait, one more thing. I want to make the river feel like it's flowing in a specific direction. Let me add a subtle directional current effect by:\n1. Making the flow noise anisotropic (stretched in the flow direction)\n2. Adding some \"current lines\" or streaks\n3. Maybe adding some small particles that flow downstream\n\nFor particles flowing downstream, I could add them in the shader using a point-like approach, or I could use a separate canvas/layer. Let me keep it in the shader for simplicity.\n\nActually, the flowing noise already gives a strong directional feel. Let me not over-complicate it.\n\nOK, writing the final code now. For real this time.\n\nLet me also make sure the shader handles the edge case where uMouseActive is 0 - the mouse hover disturbance should be skipped. I'll use `if (uMouseActive > 0.01)` check.\n\nFinal shader code:\n\n```glsl\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec2 uMouse;\nuniform float uMouseActive;\nuniform int uRippleCount;\nuniform vec4 uRipples[20];\n\n// Simplex noise\nvec3 mod289(vec3 x) { return x - floor(x * (1.0/289.0)) * 289.0; }\nvec2 mod289(vec2 x) { return x - floor(x * (1.0/289.0)) * 289.0; }\nvec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }\n\nfloat snoise(vec2 v) {\n const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod289(i);\n vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m; m = m*m;\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nfloat fbm(vec2 p) {\n float v = 0.0;\n float a = 0.5;\n mat2 rot = mat2(0.8, 0.6, -0.6, 0.8);\n for (int i = 0; i < 5; i++) {\n v += a * snoise(p);\n p = rot * p * 2.0 + vec2(1.7, 9.2);\n a *= 0.5;\n }\n return v;\n}\n\nfloat waterHeight(vec2 p, float t) {\n float h = 0.0;\n vec2 flowDir = vec2(1.0, 0.06);\n \n // Large rolling waves\n vec2 q = vec2(p.x * 0.7, p.y);\n h += 0.10 * fbm(q * 1.8 + flowDir * t * 0.35);\n \n // Medium waves\n h += 0.05 * fbm(p * 4.0 + flowDir * t * 0.7 + vec2(3.0, 1.0));\n \n // Small wind ripples\n h += 0.025 * fbm(p * 11.0 + flowDir * t * 1.4);\n \n // Fine detail\n h += 0.012 * snoise(p * 28.0 + flowDir * t * 2.2);\n \n // Mouse hover\n if (uMouseActive > 0.01) {\n float dist = length(p - uMouse);\n float m = sin(dist * 50.0 - t * 7.0) * exp(-dist * 12.0);\n h += m * 0.025 * uMouseActive;\n }\n \n // Click ripples\n for (int i = 0; i < 20; i++) {\n vec4 r = uRipples[i];\n float age = t - r.z;\n if (age > 0.0 && age < 6.0 && r.w > 0.01) {\n float dist = length(p - r.xy);\n float speed = 0.55;\n float localTime = age - dist / speed;\n if (localTime > 0.0) {\n float wave = sin(localTime * 14.0) * exp(-localTime * 1.0);\n float spatialDecay = 1.0 / (1.0 + dist * 5.0);\n float ramp = 1.0 - exp(-localTime * 10.0);\n h += wave * spatialDecay * ramp * r.w * 0.12;\n }\n }\n }\n \n return h;\n}\n\nvec3 computeNormal(vec2 p, float t) {\n float eps = 0.004;\n float h0 = waterHeight(p, t);\n float hx = waterHeight(p + vec2(eps, 0.0), t);\n float hy = waterHeight(p + vec2(0.0, eps), t);\n return normalize(vec3(-(hx - h0) / eps, -(hy - h0) / eps, 1.0));\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution.xy;\n float aspect = uResolution.x / uResolution.y;\n vec2 p = vec2(uv.x * aspect, 1.0 - uv.y);\n \n float t = uTime;\n vec3 n = computeNormal(p, t);\n vec3 viewDir = vec3(0.0, 0.0, 1.0);\n \n // Fresnel\n float fresnel = pow(1.0 - max(dot(n, viewDir), 0.0), 5.0);\n fresnel = mix(0.02, 1.0, fresnel);\n \n // Sky reflection\n vec3 skyTop = vec3(0.52, 0.60, 0.72);\n vec3 skyHorizon = vec3(0.85, 0.76, 0.62);\n float skyY = clamp(uv.y + n.y * 0.15, 0.0, 1.0);\n vec3 skyColor = mix(skyHorizon, skyTop, skyY);\n \n // Water depth\n vec3 deepColor = vec3(0.01, 0.08, 0.10);\n vec3 shallowColor = vec3(0.04, 0.26, 0.28);\n float depthPattern = 0.5 + 0.5 * fbm(p * 0.9 + vec2(t * 0.08, 0.0));\n vec3 waterBase = mix(deepColor, shallowColor, depthPattern);\n \n // Caustics\n float caust = fbm(p * 5.0 + vec2(t * 0.4, t * 0.15));\n caust = pow(smoothstep(-0.2, 0.5, caust), 2.0);\n waterBase += vec3(0.10, 0.25, 0.20) * caust * 0.3;\n \n // Foam at crests\n float h = waterHeight(p, t);\n float foam = smoothstep(0.06, 0.11, h);\n waterBase = mix(waterBase, vec3(0.72, 0.80, 0.78), foam * 0.35);\n \n // Sun specular\n vec3 sunDir = normalize(vec3(0.35, -0.25, 1.0));\n vec3 halfDir = normalize(sunDir + viewDir);\n float spec = pow(max(dot(n, halfDir), 0.0), 150.0);\n vec3 specColor = vec3(1.0, 0.96, 0.82) * spec * 1.2;\n \n float spec2 = pow(max(dot(n, halfDir), 0.0), 30.0);\n specColor += vec3(0.5, 0.6, 0.75) * spec2 * 0.12;\n \n // Combine\n vec3 color = mix(waterBase, skyColor, fresnel);\n color += specColor;\n \n // Flow streaks\n float streak = fbm(vec2(p.x * 3.0 - t * 0.5, p.y * 8.0));\n streak = smoothstep(0.1, 0.4, streak) * smoothstep(0.6, 0.4, streak);\n color += vec3(0.04, 0.09, 0.07) * streak * (1.0 - fresnel);\n \n // Vignette\n vec2 vigUv = uv - 0.5;\n float vig = 1.0 - dot(vigUv, vigUv) * 0.7;\n color *= vig;\n \n // Grade\n color = pow(color, vec3(0.92));\n color *= vec3(0.96, 1.0, 1.03);\n \n gl_FragColor = vec4(color, 1.0);\n}\n```\n\nI think this is solid. Let me put it all together now.\n\nActually, one issue: I'm computing `waterHeight(p, t)` twice in the fragment shader - once for the normal and once for the foam. Let me combine them or just compute the normal and use the normal's z component for foam. Actually, let me just reuse the `h` value from the normal computation... but `h` in computeNormal is local to that function.\n\nLet me restructure: compute h in main, then compute normal using h.\n\n```glsl\n// In main:\nfloat eps = 0.004;\nfloat h0 = waterHeight(p, t);\nfloat hx = waterHeight(p + vec2(eps, 0.0), t);\nfloat hy = waterHeight(p + vec2(0.0, eps), t);\nvec3 n = normalize(vec3(-(hx - h0) / eps, -(hy - h0) / eps, 1.0));\n\n// Then use h0 for foam\nfloat foam = smoothstep(0.06, 0.11, h0);\n```\n\nThis is more efficient - 3 waterHeight calls instead of 4. Let me do this.\n\nOK, final code. Let me write it all out now.","reasoning_details":[{"type":"reasoning.text","text":"The user wants a realistic river animation that reacts to cursor clicks. I need to create a single HTML file with all the necessary code. Let me think about how to make this look really good and realistic.\n\nFor a realistic river animation, I'll use:\n1. WebGL/Canvas for the water rendering\n2. Shaders for the water effect (or a 2D canvas approach with rippling effects)\n3. Click interactions that create ripples/waves\n\nI think the best approach for a realistic river would be to use a WebGL shader-based approach with:\n- A flow effect using noise\n- Ripples emanating from click points\n- Reflections/caustics\n- Maybe some particles for foam/spray\n\nLet me design this carefully:\n\nOption 1: Pure WebGL with custom shaders - most realistic but complex\nOption 2: Canvas 2D with displacement mapping - good balance\nOption 3: Three.js with shader materials - realistic and manageable\n\nI'll go with WebGL directly with custom shaders for the best control and realism. I'll implement:\n- A water surface using a plane\n- Vertex shader with multiple wave layers (flowing + ripples)\n- Fragment shader with realistic water coloring, Fresnel effect, caustics\n- Click interactions that add ripple sources\n- Flowing water using animated noise\n\nLet me write this carefully. I'll use a fragment-shader-heavy approach where most of the water effect is computed in the fragment shader using raymarching or a heightmap approach.\n\nActually, let me think about this more. For a 2D top-down or perspective river view, I can use:\n\n1. A height map approach where I track water surface height\n2. The wave equation for ripples\n3. Flowing noise for the river current\n\nLet me go with a fragment shader approach that:\n- Renders a full-screen quad\n- Uses procedural noise for the flowing water\n- Tracks click positions and creates expanding ripples\n- Has realistic water color with depth, reflections, Fresnel\n\nI'll write the entire thing in WebGL with raw shaders for maximum control. Let me design the shader:\n\n```glsl\n// Fragment shader\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec2 uMouse;\nuniform vec4 uRipples[10]; // x, y, time, strength\n\n// Noise functions\nfloat hash(vec2 p) { ... }\nfloat noise(vec2 p) { ... }\nfloat fbm(vec2 p) { ... }\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution.xy;\n vec2 p = uv;\n \n // Flowing water using animated noise\n vec2 flowDir = vec2(1.0, 0.1);\n float flow = fbm(p * 4.0 + flowDir * uTime * 0.5);\n \n // Ripples from clicks\n float rippleHeight = 0.0;\n for (int i = 0; i < 10; i++) {\n vec4 r = uRipples[i];\n float age = uTime - r.z;\n if (age < 3.0 && r.w > 0.0) {\n vec2 rp = p - r.xy;\n float dist = length(rp);\n float wave = sin(dist * 50.0 - age * 8.0) * exp(-dist * 5.0) * exp(-age * 0.8);\n rippleHeight += wave * r.w;\n }\n }\n \n // Compute normal from height field\n // ...\n \n // Water color with depth, reflections\n // ...\n}\n```\n\nThis is getting complex. Let me simplify and focus on what creates a realistic effect:\n\n1. Use Perlin/Simplex noise for flowing water surface\n2. Compute normals from the height field for proper lighting\n3. Add Fresnel reflection for water realism\n4. Add click ripples that expand and fade\n5. Add caustics-like patterns\n6. Depth-based color (deeper = darker blue-green)\n\nLet me write the complete code now. I'll structure it as:\n\n1. HTML with canvas\n2. WebGL setup\n3. Vertex shader (simple passthrough)\n4. Fragment shader (the meat of the effect)\n5. Animation loop\n6. Click handlers that add ripples\n7. Mouse position tracking for additional interaction\n\nI'll make it look like a river flowing from top to bottom (or angled) with realistic water.\n\nLet me write this out:\n\n```html\n\n\n\n\n\n\n

Click to create ripples

River Flow

Click anywhere to disturb the water

Click · Drag · Touch

River Flow

Interactive Water Simulation

\n ripples: 0
\n fps: --\n

\n click to disturbmove to ripple\n

WebGL not supported

\n\n\n\n\n```\n\nLet me write the complete, final version now. I need to be very careful about the shader code to make sure it compiles.\n\nI'll use 20 ripples max and 4 FBM octaves to balance quality and performance.\n\nActually, let me use 5 octaves for better looking water, and 20 ripples. Modern GPUs can handle this easily.\n\nLet me write it all out now. Final version:\n\nWait, one more thing. I want to make the river feel like it's flowing in a specific direction. Let me add a subtle directional current effect by:\n1. Making the flow noise anisotropic (stretched in the flow direction)\n2. Adding some \"current lines\" or streaks\n3. Maybe adding some small particles that flow downstream\n\nFor particles flowing downstream, I could add them in the shader using a point-like approach, or I could use a separate canvas/layer. Let me keep it in the shader for simplicity.\n\nActually, the flowing noise already gives a strong directional feel. Let me not over-complicate it.\n\nOK, writing the final code now. For real this time.\n\nLet me also make sure the shader handles the edge case where uMouseActive is 0 - the mouse hover disturbance should be skipped. I'll use `if (uMouseActive > 0.01)` check.\n\nFinal shader code:\n\n```glsl\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec2 uMouse;\nuniform float uMouseActive;\nuniform int uRippleCount;\nuniform vec4 uRipples[20];\n\n// Simplex noise\nvec3 mod289(vec3 x) { return x - floor(x * (1.0/289.0)) * 289.0; }\nvec2 mod289(vec2 x) { return x - floor(x * (1.0/289.0)) * 289.0; }\nvec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }\n\nfloat snoise(vec2 v) {\n const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod289(i);\n vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m; m = m*m;\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nfloat fbm(vec2 p) {\n float v = 0.0;\n float a = 0.5;\n mat2 rot = mat2(0.8, 0.6, -0.6, 0.8);\n for (int i = 0; i < 5; i++) {\n v += a * snoise(p);\n p = rot * p * 2.0 + vec2(1.7, 9.2);\n a *= 0.5;\n }\n return v;\n}\n\nfloat waterHeight(vec2 p, float t) {\n float h = 0.0;\n vec2 flowDir = vec2(1.0, 0.06);\n \n // Large rolling waves\n vec2 q = vec2(p.x * 0.7, p.y);\n h += 0.10 * fbm(q * 1.8 + flowDir * t * 0.35);\n \n // Medium waves\n h += 0.05 * fbm(p * 4.0 + flowDir * t * 0.7 + vec2(3.0, 1.0));\n \n // Small wind ripples\n h += 0.025 * fbm(p * 11.0 + flowDir * t * 1.4);\n \n // Fine detail\n h += 0.012 * snoise(p * 28.0 + flowDir * t * 2.2);\n \n // Mouse hover\n if (uMouseActive > 0.01) {\n float dist = length(p - uMouse);\n float m = sin(dist * 50.0 - t * 7.0) * exp(-dist * 12.0);\n h += m * 0.025 * uMouseActive;\n }\n \n // Click ripples\n for (int i = 0; i < 20; i++) {\n vec4 r = uRipples[i];\n float age = t - r.z;\n if (age > 0.0 && age < 6.0 && r.w > 0.01) {\n float dist = length(p - r.xy);\n float speed = 0.55;\n float localTime = age - dist / speed;\n if (localTime > 0.0) {\n float wave = sin(localTime * 14.0) * exp(-localTime * 1.0);\n float spatialDecay = 1.0 / (1.0 + dist * 5.0);\n float ramp = 1.0 - exp(-localTime * 10.0);\n h += wave * spatialDecay * ramp * r.w * 0.12;\n }\n }\n }\n \n return h;\n}\n\nvec3 computeNormal(vec2 p, float t) {\n float eps = 0.004;\n float h0 = waterHeight(p, t);\n float hx = waterHeight(p + vec2(eps, 0.0), t);\n float hy = waterHeight(p + vec2(0.0, eps), t);\n return normalize(vec3(-(hx - h0) / eps, -(hy - h0) / eps, 1.0));\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution.xy;\n float aspect = uResolution.x / uResolution.y;\n vec2 p = vec2(uv.x * aspect, 1.0 - uv.y);\n \n float t = uTime;\n vec3 n = computeNormal(p, t);\n vec3 viewDir = vec3(0.0, 0.0, 1.0);\n \n // Fresnel\n float fresnel = pow(1.0 - max(dot(n, viewDir), 0.0), 5.0);\n fresnel = mix(0.02, 1.0, fresnel);\n \n // Sky reflection\n vec3 skyTop = vec3(0.52, 0.60, 0.72);\n vec3 skyHorizon = vec3(0.85, 0.76, 0.62);\n float skyY = clamp(uv.y + n.y * 0.15, 0.0, 1.0);\n vec3 skyColor = mix(skyHorizon, skyTop, skyY);\n \n // Water depth\n vec3 deepColor = vec3(0.01, 0.08, 0.10);\n vec3 shallowColor = vec3(0.04, 0.26, 0.28);\n float depthPattern = 0.5 + 0.5 * fbm(p * 0.9 + vec2(t * 0.08, 0.0));\n vec3 waterBase = mix(deepColor, shallowColor, depthPattern);\n \n // Caustics\n float caust = fbm(p * 5.0 + vec2(t * 0.4, t * 0.15));\n caust = pow(smoothstep(-0.2, 0.5, caust), 2.0);\n waterBase += vec3(0.10, 0.25, 0.20) * caust * 0.3;\n \n // Foam at crests\n float h = waterHeight(p, t);\n float foam = smoothstep(0.06, 0.11, h);\n waterBase = mix(waterBase, vec3(0.72, 0.80, 0.78), foam * 0.35);\n \n // Sun specular\n vec3 sunDir = normalize(vec3(0.35, -0.25, 1.0));\n vec3 halfDir = normalize(sunDir + viewDir);\n float spec = pow(max(dot(n, halfDir), 0.0), 150.0);\n vec3 specColor = vec3(1.0, 0.96, 0.82) * spec * 1.2;\n \n float spec2 = pow(max(dot(n, halfDir), 0.0), 30.0);\n specColor += vec3(0.5, 0.6, 0.75) * spec2 * 0.12;\n \n // Combine\n vec3 color = mix(waterBase, skyColor, fresnel);\n color += specColor;\n \n // Flow streaks\n float streak = fbm(vec2(p.x * 3.0 - t * 0.5, p.y * 8.0));\n streak = smoothstep(0.1, 0.4, streak) * smoothstep(0.6, 0.4, streak);\n color += vec3(0.04, 0.09, 0.07) * streak * (1.0 - fresnel);\n \n // Vignette\n vec2 vigUv = uv - 0.5;\n float vig = 1.0 - dot(vigUv, vigUv) * 0.7;\n color *= vig;\n \n // Grade\n color = pow(color, vec3(0.92));\n color *= vec3(0.96, 1.0, 1.03);\n \n gl_FragColor = vec4(color, 1.0);\n}\n```\n\nI think this is solid. Let me put it all together now.\n\nActually, one issue: I'm computing `waterHeight(p, t)` twice in the fragment shader - once for the normal and once for the foam. Let me combine them or just compute the normal and use the normal's z component for foam. Actually, let me just reuse the `h` value from the normal computation... but `h` in computeNormal is local to that function.\n\nLet me restructure: compute h in main, then compute normal using h.\n\n```glsl\n// In main:\nfloat eps = 0.004;\nfloat h0 = waterHeight(p, t);\nfloat hx = waterHeight(p + vec2(eps, 0.0), t);\nfloat hy = waterHeight(p + vec2(0.0, eps), t);\nvec3 n = normalize(vec3(-(hx - h0) / eps, -(hy - h0) / eps, 1.0));\n\n// Then use h0 for foam\nfloat foam = smoothstep(0.06, 0.11, h0);\n```\n\nThis is more efficient - 3 waterHeight calls instead of 4. Let me do this.\n\nOK, final code. Let me write it all out now.","format":"unknown","index":0}]},"native_finish_reason":"stop"}],"created":1784086454,"model":"z-ai/glm-5.2","object":"chat.completion","service_tier":null,"system_fingerprint":null,"usage":{"completion_tokens":22504,"prompt_tokens":87,"total_tokens":22591,"completion_tokens_details":{"accepted_prediction_tokens":null,"audio_tokens":0,"reasoning_tokens":13618,"rejected_prediction_tokens":null,"image_tokens":0},"prompt_tokens_details":{"audio_tokens":0,"cached_tokens":0,"cache_write_tokens":0,"video_tokens":0},"cost":0.06939758,"is_byok":false,"cost_details":{"upstream_inference_cost":0.06939758,"upstream_inference_prompt_cost":0.00008526,"upstream_inference_completions_cost":0.06931232}},"provider":"GMICloud"}

Create a realistic animation of a river flowing where the wa...