Simple stylized water shader

With help from @Evgeni_Popov and @Pryme8, I’ve ported a simple stylized water shader from Unity (https://www.reddit.com/r/Unity3D/comments/f6bh50/making_stylized_water_with_shader_graph/) into bjs. This is useful when you need a fuss-free non-MC environment asset.

Playground: https://playground.babylonjs.com/#UNGKGD#7

Parameters:

  • wNoiseScale and wNoiseOffset - control water refraction
  • fNoiseScale - controls foam
  • maxDepth - set max depth of your water mesh
  • wDeepColor and wShallowColor - set the water colors for shallow and deep

I’ve added in some gizmos in the PG so you can play around with the spheres and water.

In the spirit of opensource, do what you will with it. It served my needs as a base and there’s a lot more that can be done/customized for your own needs. Feel free to experiment.

Enjoy, cheers !

8 Likes

Whoa, this is awesome :smiley: Thanks for sharing, @phaselock !

Amazing work! Well done @phaselock

Nice! :slight_smile:

There is a problem : if I use the shaderMaterial in my sea-simulator the sea behaves strange

This demo is without your sea material:

image

And this with:

image

The demo has a vertex shader with a simple wave function. You can switch it off: https://playground.babylonjs.com/#X70GES#2

Hope it helps !

2 Likes

image
https://playground.babylonjs.com/#X70GES#4

With foam on the edge of the “boat”!
I love this shader material! :smiley:

2 Likes

You have to pass the boat into the depth map for the foam to show.
https://playground.babylonjs.com/#X70GES#5

3 Likes

great so far! just your foam seems to be a tad blockish in comparison to the Unity version. I will see to play around with some numbers later , thanks :wink:

Nice one, gonna use this :smiley: with some tweaks
https://playground.babylonjs.com/#UNGKGD#8

4 Likes