Yong Su, who previously ported Evan Wallace's WebGL Water demo to WebGPU, has now successfully brought it to Three.js with several enhancements.
This real-time water simulation includes ray-traced reflections, refractions, caustics, and interactive objects. It also features configurable pool shapes such as rounded boxes and a light-follow camera mode for exploring dynamic caustics and highlights. The object system is extensible, so you can add additional Three.js geometries or custom 3D models by defining their render shader, water displacement approximation, hit test, and optics descriptor.
You can play with the demo in your browser here. Draw on the water to create ripples, drag the background to rotate the camera, and drag the sphere to move it. Press L to adjust the light, G to toggle gravity, and Spacebar to pause or unpause.
The GitHub repository is available here, and you can click this link to see Evan Wallace's original demo. Interested in more Three.js water? Dan Greenheck has released a major update to Three.js Water Pro, his complete ocean rendering solution.
