Realistic Water
WebGL pool simulation with caustics · 2024 · Experiments, WebGL
An interactive water simulator built with React Three Fiber and WebGL — a glass-walled pool where every ripple, reflection and caustic pattern is rendered live in the browser.
The surface uses vertex shader distortions to drive motion and refraction, while projected caustics crawl across the mosaic tiles below. Underwater shading, depth absorption and surface roughness all respond in real time as you move through the scene.
Step out of the water and droplets cling to the camera — a small detail that sells the illusion. Tune color, luminosity and roughness from the panel and watch the entire mood of the pool shift instantly.
Technical details
- WebGL
- React Three Fiber
- Vertex Shader Distortion
- Caustics
- Underwater Effects
- Water Droplets
- Custom Shaders
- Three.js