# Another water shader **URL:** \ **Category:** Demos and projects\ **Created:** [December 27, 2021, 10:15pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319 "2021-12-27T22:15:25Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\ **Post date:** [December 27, 2021, 10:15pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/1 "2021-12-27T22:15:25Z")
Hello, 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. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/0/308906ad0dfadc81cfa2bb5ceb98964f9f430f2f.jpeg) 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. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/0/5084507bdf530c09e0360d0955659c82bb561b37.png) 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. > **[Babylon.js Playground](https://playground.babylonjs.com/#KFYV93%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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. ---
**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\ **Post date:** [December 27, 2021, 11:10pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/2 "2021-12-27T23:10:07Z")
nice i think you can handle that on CustomMaterial i will help to complete that if you want ---
**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\ **Post date:** [December 27, 2021, 11:11pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/3 "2021-12-27T23:11:11Z")
That would be great, thanks! ---
**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\ **Post date:** [December 28, 2021, 8:40am UTC](https://forum.babylonjs.com/t/another-water-shader/26319/4 "2021-12-28T08:40:44Z")
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. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [December 28, 2021, 11:45am UTC](https://forum.babylonjs.com/t/another-water-shader/26319/5 "2021-12-28T11:45:52Z")
---
**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\ **Post date:** [December 28, 2021, 12:58pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/6 "2021-12-28T12:58:11Z")
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](https://playground.babylonjs.com/#KFYV93#6) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [December 28, 2021, 5:48pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/7 "2021-12-28T17:48:35Z")
For your aliasing problem, you should generate the mipmaps for the bump texture: > **[Babylon.js Playground](https://playground.babylonjs.com/#KFYV93%2316)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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: > **[Babylon.js Playground](https://playground.babylonjs.com/#KFYV93%2318)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes And here the PR. It will also fix the problems in 5.0: > > > See https://forum.babylonjs.com/t/another-water-shader/26319/6 > > The problem wa…s that when calling \`mesh.isReady(refreshRate === 0)\` in \`RenderTargetTexture.\_prepareRenderingManager\` it is the material of the mesh which is tested for readiness and not the material/effect used to render the mesh in the RTT. So I have added an implementation of \`RTT.customIsReadyFunction\` in all subsystems that are using a RTT internally which is calling the local \`isReady\` function. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [December 28, 2021, 5:48pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/8 "2021-12-28T17:48:40Z")
---
**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\ **Post date:** [December 28, 2021, 5:59pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/9 "2021-12-28T17:59:34Z")
thanks @Evgeni_Popov , it will be great to make it stable with these changes. ---
**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\ **Post date:** [December 28, 2021, 6:09pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/10 "2021-12-28T18:09:11Z")
I think you the link suppose to be to #18 (or 17) not to #16. I can see the changes in #17 and up. Anyway, thanks again 🙂 [https://playground.babylonjs.com/#KFYV93#18](https://playground.babylonjs.com/#KFYV93#18) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [December 28, 2021, 6:35pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/11 "2021-12-28T18:35:31Z")
Yes my mistake, the PG with all changes is #18 (I have updated my post). ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 28, 2021, 7:41pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/12 "2021-12-28T19:41:31Z")
Looking good! 😃 ---
**Author:** ![kri100s](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kri100s/32/21430_2.png) [@kri100s](https://forum.babylonjs.com/u/kri100s)\ **Post date:** [December 28, 2021, 10:04pm UTC](https://forum.babylonjs.com/t/another-water-shader/26319/13 "2021-12-28T22:04:08Z")
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. > **[Babylon.js Playground](https://playground.babylonjs.com/#KFYV93%2322)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [December 29, 2021, 2:26am UTC](https://forum.babylonjs.com/t/another-water-shader/26319/14 "2021-12-29T02:26:27Z")
Aww you are gonna make me blush, and holy crap my name was used in the same sentence as IQ. ❤❤❤