I wanted some water shader for ocean from distance point of view. Didnt care about reflections/refractions but cared about shadows. Also cared about processing. Its still work in progress and the structure isnt great. Hopefully people can improve it.
I first use ortho camera looking from the bottom to get the depth map of the ground. I use that texture to generate SDF distance fields. I use that to mix shallow and deep water. Then I use noise to generate bump texture.
I got a lot of inspirations from BJS forum @Pryme8 and shadertoy InigoQuilez. Also saw a youtube video of someone using similar approach.
I started with using SDF to adjust the distortions for moving verticies but just normals seem good enough to me.
Hopefully it loads fine for you. I need to add an event handler to wait until the ortho depth projection is done. For some reason doesnt load on my machine using v5 so use v4.2.
There is one thing thats a bit annoying for this approach. When moving camera fast (rotating is easiest) the further away water area has kind of aliasing effect artefact especially when looking towards the light. Anyone has ideas how to mitigate this effect?
The game I am using it in is a flight simulation so its very annoying as I am moving fast all the time.
I think its moire effect. Increasing the generated texture resolution helps. Also changing the light intensity with angle helps and I guess for evening light I should dim it anyway. I couldnt find any antialias setting for custom texture.
playground with res increased to 512 from 128 https://playground.babylonjs.com/#KFYV93#6
For your aliasing problem, you should generate the mipmaps for the bump texture:
Also, there are some timing problems because the depth map should be generated before the other textures are generated (sometimes the PG works and sometimes it does not):
you should wait for CreateGroundFromHeightMap to finish (using the onReady callback) to be sure the rocks will be generated in the depth map
you should wait for the depth map to be generated before creating the custom textures. To do that, you can check rtt._currentRefreshId !== -1. _currentRefreshId is protected: in the PR below I added a getter so that you will be able to do rtt.currentRefreshId instead when it’s merged.
PG with those corrections:
And here the PR. It will also fix the problems in 5.0:
Just a small fix for something I got caught with. I have two lights there hemispherical and directional. Hemispherical is direction of the reflection while directional is direction of the light. That means direction vectors need to be opposite.
