Distance field based foam for water shader


I’ve been working on my own water material for a personal project now and while I’ve been quite succesful with the actual water shader so far I’ve run into some issues with the water foam around intersecting geometry.

So I’m working on a more stylized foam and I’d like the foam to form around any intersecting geometry. After doing a lot of research and experiments I found the exact thing I’d like to achieve:

Unfortunately I haven’t found a way to contact the blogger and the comment I left on the blog has gone unanswered so I now turn to you guys here.

I’m basically looking for some pointers or even better an example setup of what is shown in the blog. I’ve replicated the foam material itself but I just can’t figure out how to use the distance fields to generate my wanted UV coordinates.

Here is a link to the foam technique that is used in the above blogpost:

Any help would be greatly appreciated as I’ve been trying to solve this on my own for the past week with no success.

Distance To nearest surface - BUT.

  1. It’s a lot of load on the shader.
  2. it won’t look right all the time, at least I didn’t like it. approaching, the foam is on a flat plane and you can really see it.
  3. you need to enable distance fields, and anything that goes in the water needs to have the checkbox checked to have it cast the foam.

At a base level, you just use the variable to lerp between 0 and 1 with the node as the Alpha, and you thus created a mask to utilize.
Then you use that to mask a proper foam texture of some sort.
As the author states, the node is problematic for performance. and thus he found a different workaround.

A possible advanced setup would be done in combination (it’s just a variation of) reactive water.
Essentially, loop 3 render target while using the “actor location” as the brush. Many “reactive Landscape tessellation” tutorials will point you towards different ways to do this. The base docs are a decent start too, but none too accurate and performance intensive.
The limitation on this is that you really only have the ability to have 1 actor create the splashes at a time, since it’s done in BP. You could indeed convert to using an array of LOC/Forces but that would become even more intensive with more objects being placed on the water. I discourage this, if you need it for a MP you need to find a better overall solution then what the base tutorials provide in terms of BluePrint examples (in fact, just go the C++ route if you are in MP).

I’m not sure about the vector to radial value node, you’d have to experiment with it and see what results you can get. I see nothing online about using it short of the docs for how it works.


Thanks for the response.

Regarding the foam method I’ve tried various methods like depth fade etc but still ended up with the posted blog solution as the one that fits my needs the best. I’m aware of the performance impact but right now I’m mostly focused on figuring out how to do this and I’ll worry about optimization later :slight_smile:

I’m actually using the reactive water method already for creating ripples. What I’m just missing right now is the foam to really sell my material.

Hey everyone,

Finally managed to solve this with the help of a friend! Here are the nodes for getting the distance foam to wrap around objects that intersect the water surface, and scroll in the desired direction.

This will give you something like this, but animated of course, since this is just a screenshot.

The texture I used is just a simple stepped gradient with some colors. Here it is for anyone who wants to use it when trying this out.

To get rid of the visible seam caused by the UV distortion you have to adjust your MipValueMode.

You can then plug the resulting UV coordinates and the mask into your own foam setup. Here is a peak at my own foam:

Example 1

Example 2

hello guys,
sorry for digging this out, but I am recently working on this stuff, and I am fairly new with ue4 material, so maybe my question is stupid. How could I use the method from ***nightfrontier ***with my water? I mean I have to create foam first or just a new foam texture and then add it with base color?

For anyone having trouble- nightfrontier’s Material Blend Mode is set to Translucent and Unlit, the texture’s MipValueMode is set to MipLevel (which you set on the Texture Sample inside the material), and you have to have Generate Distance Fields enabled in the Project Settings.

I know this is an old thread, but I just wanted to say thank you for taking the time to post this. I’ve been searching for a solution to the same problem for more than a week now, and I finally ran across this post. Cheers!!