A pool of water with caustics and droplets in the browser

· 1 min read · webgl, react-three-fiber, water, shaders, launch

A glass-walled pool with a mosaic floor, rippling water and caustic light patterns, a WebGL water simulation

Water is the effect that makes people stop and look. It is also one of the hardest to fake, because the eye knows what it is supposed to do. This project is a small pool that tries to get the details right, running live in the browser with React Three Fiber and WebGL.

The pool, with its mosaic floor and caustics

What is in the pool #

It is a glass-walled pool, and everything you see is rendered on the fly:

  • Ripples and refraction. The surface moves with vertex shader distortions, and the motion drives how the world is bent through it.
  • Caustics. The bright patterns of light that crawl across the mosaic tiles on the floor are projected, not painted, so they move with the surface.
  • Underwater shading. When you go in, depth absorption and the roughness of the surface change what you see.
  • Droplets. When you come out of the water, drops stay on the camera for a moment. It is a small detail, and it sells the illusion.

Live controls #

A panel lets you change the color, the luminosity and the roughness of the water, and the whole mood of the pool changes at once. It is a good way to understand which parameter is responsible for what.

It also works in VR #

The same simulation was taken to WebXR, and there are videos of it running on Meta Quest 3 and on Apple Vision Pro.

Try it #

The pool is at water-simulation.vercel.app, and there is more on the project page.

Related projects