Water shader foam in world space?

Hi all,

I have been playing around with a water shader that we got help with from here - How would you do a Orthographic water intersection effect? and I am struggling to get it to look more like some of our test renders.

Current result in Babylon:
waterExampleBabylon

Desired result:

The test render is achieved very differently from how it needs to be achieved in Babylon (render is in Blender using meshes for water foam) but I am wondering if there is a way to accomplish the same look?
The current method does not create any foam in “world space” around the mesh as it is just using a depth map and “painting” the mesh (apologies my shader fu is weak) as per above link. I’m stumped as to how to go about this without creating additional meshes as part of the models (not very feasible in our case). Has anyone tackled this sort of problem before?

Thanks! :slight_smile:

Would be great if you could share a playground with your rendering ???

@Evgeni_Popov is the king of rendering and might certainly be able to help.

I thought about it a bit but I didn’t find a simple way (i.e. a single shader) to do it… Or even with a complicated way, for that matter!

Is that snake animated or static?

If its static just use some quads with a texture and alpha on it to fake it.

Otherwise if I had to do this I would make a secondary camera that is in the positive y some amount of space to allow for seeing the context you need to have with the foam outline (and only render the objects you need to that camera). Have a shader be applied to all meshes that need foam that in their vertex shader you flatten them entirely on their Y and then scale them out a certain amount on the X and Z. Then in the fragment you set them to a solid color that you will use as your mask later. Then once the material pass is applied you capture the rtt from your above camera and bind that to a texture on a plane that matches your water surface.

It sounds complex but to fake it would not be that hard to do.

Apologies most relevant playground is this one which is what the shader is based on with only a few small changes - https://playground.babylonjs.com/#UNGKGD#175
Will try and make an updated one shortly.

@Evgeni_Popov thanks for giving it some thought, it is very apreciated :smile:

Hi @Pryme8 , the snake is animated and also the tiles underneath the snake undulate so that’s why we couldn’t go with static quads (unfortunately).
That is a very interesting idea I will need to try and improve my shader skills and give it a go. I do worry that the secondary camera will have too great a perfomance impact but I may be wrong.

It might be easiest to render out a sprite sheet that matches what you need and do that on a plane for each object.

If you do the second camera thing there is lots of technical things to overcome.

Because you are orthographic the sprite sheet animation would prolly be the best bet, or even just actual mesh data.