WebGL Water

Raw WebGL2, no libraries. A from-scratch take on Evan Wallace’s 2011 demo: a height-field wave simulation, caustics, and a ray-traced water surface.

How it works

Height field. The surface is a 256×256 floating-point texture: red = height, green = velocity, blue/alpha = normal. Every frame a fragment shader pulls each texel toward the average of its four neighbours — the 2D wave equation, running entirely on the GPU.
Normals. A second pass turns height differences into surface normals and stores them back into the same texture.
Caustics. The water grid is drawn into an off-screen texture with each vertex refracted through the surface and projected onto the floor. Where triangles shrink, light concentrates: the area ratio (from dFdx/dFdy) is the caustic brightness. The ball’s soft shadow is written into the same map.
Ray-traced surface. Each water pixel shoots a reflected and a refracted ray and intersects them analytically with the pool box and the sphere, then blends the two with a Fresnel term. Seen from below, the same shader handles total internal reflection.
Pool & ball. Walls are plain triangles shaded with a procedural tile texture, cheap ambient occlusion and the caustic map. The ball pushes water aside as it moves and floats with simple buoyancy and drag.
Sky. Procedural: a gradient, value-noise clouds and a sun, evaluated per ray so reflections match the backdrop exactly.

Read the source: src/water.js (simulation), src/renderer.js (shaders), src/main.js (input & physics), src/gl.js (WebGL helpers).