Part of a WIP fishing game I’m working on (so far it’s just a handful of playgrounds with various needed features) I need cute underwater environments, since most of the game happens underwater (player will be swimming to collect fish).
So I need nice water in the game. Thankfully @Evgeni_Popov has done all of the hard work already for creating gorgeous FFT ocean in Babylon. It’s actually one of the first demos I saw of BabylonJS when looking for a WebGPU compatible engine! So thanks for that project, very inspiring and well organized to take apart
Anyway, since in my game we will be underwater a lot, I needed to flip things upside down a little, thinking how light would travel from the underside of water. There are lots of tricks involved like Snell’s window, wavelength falloff in water, and scattering of light. Some of them are simple to fake, others not so much. I learned a lot so far along the way!
Here’s my WIP for now! It includes:
- volumetric god rays
- Snell’s window (turn up FOV on camera and look upwards to really see this),
- reacting automatically to lighting changes (change the Inclination and Azimuth of the sun for example)
- ‘sort of’ physically based light falloff and ‘fog’
- caustics on underwater surfaces that are sampled with a scatter radius proportional to the depth (so deeper caustics look blurrier)
Some shots:
A lot of things can be improved of course, especially around the underside of the water mesh itself.
I had trouble with that the Custom PBR of the original ocean material uses GLSL but my material plugin uses WGSL, because I frequently need to use the same logic in both, so thus far I just ChatGPT-translated some chunks between.
The material plugin also needs to pull in more uniforms from the ocean shaders, for example to more accurately (than y < 0) understand if a fragment is underwater.
But it already looks good enough to share I think. Enjoy!