Simple stylized water shader

Demos and projects
1

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 !

14 Likes
2

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

3

Amazing work! Well done @phaselock

5

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
7

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

3 Likes
8

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:

9

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

image
image1438×730 153 KB

image
image1915×1080 292 KB

5 Likes
10

@phaselock sorry for resurrecting old thread, but I was googling for stylized water shader and found myself here :slight_smile: There is one problem I noticed, that foam edge is rendered even if mesh or it’s part is above water. Foam is rendered as long as target mesh and water mesh overlaps from camera perspective.

Screenshot_2
Screenshot_2830×464 44.4 KB

As you can see here, part inside of red rectangle is above water. How we could render foam only on the edge where water and mesh actually meets?
Thank you.

11

I made the original shader so I’ll let you know right away that’s the one downfall of this method and there is no easy work around other then using a completely different method.

1 Like
12

Oh, I see. That’s unfortunate.

13

@Gugis you can find @Pryme8 alternative approach here: Get current frame buffer texture for shader material

It might suit your needs better. Hope it helps. :slight_smile:

2 Likes
14

image

Ha I forgot about that one thanks for finding it.

Honestly you might be able to find another one of my methods too if you dig hard enough. I geeked on that stuff for a while.

4 Likes
15

I think it is beacuse the size of depthMap is lower than mainTexutre, I meet the same question when I write some postprocess with depthMap