In my process of teaching myself WebGPU, I’ve spent the last week learning how GPU water simulation and rendering works by writing a simple scene from scratch.
What I built so far:
- A 2D wave equation solved on the GPU using finite difference integration
Real-time interactive ripples
- Continuous ambient-driven waves
- Physically-based water rendering using Fresnel reflection, HDR skybox reflections, Blinn-Phong specular and depth-based color
- A customizable simulation grid to tweak the simulation resolution
One note: I used three.js to decode the HDR environment map because I am lazy :D So that’s the single external dependency I have.
There’s still a lot to do to get realistic-looking water, but I’m pretty happy with the result so far. There are things I’m planning to work on next though:
- Better and more realistic wave dispersion
- The ripples are currently a bit too perfect. I think I can get more realistic results by introducing some noise (probably baking and sampling a Perlin noise texture)
- There’s no refraction at the moment. For example, the floor tiles underneath the water should be distorted
- Caustics, I believe, would be a game changer in terms of realism
- Foam and spray would be nice to have, but I believe this will be quite hard to implement
Live demo: https://rage997.github.io/water-webgpu/
Source code: https://github.com/Rage997/water-webgpu
I’m open to feedback and suggestions on how to improve the realism. If you’ve worked on water rendering or GPU simulations before, feel free to share any tips!