How can we create realistic ocean water using shaders as in this example?

Could someone kindly provide an example playground of how we can produce realistic ocean water material in babylonjs, similar to this three js example?

shader code with three js.


Is webGPU must to run the Ocean demo? I need webgl support because our projects only support webGL

Yes, I would assume so given that’s one of the stated requirements.

How i can run this in webgl just like this exmple?

That example looks incredibly close to Babylon’s Sky Material + Water Material. They both work in WebGL and do not require WebGPU like the ocean demo. I’d suggest you read the docs for those and experiment with the various options to achieve the effect you are after.

Here’s the water material link again:

And the sky material:


Thank you for your support. Yes, I’m using water material, however it’s not as realistic as it seems in the demo or in the ocean demo with shaders. Do you have any webgl shader examples?
It will be very helpful for me.

Did you check out the NME featured ocean example?
Even without in-depth knowledge of shaders and materials (and with a bit of patience and lots of saves to snippets, trials, fails and try harder :wink:), you can use this base to create some amazing looking ocean (or any other water surface).
For example, I’m currently using this base to create a waterwall (WIP). Of course, it looks better with animations.


Thanks for your support @mawa @inteja.