Real-time foam/soap suds shader?

Hey guys, I was wondering if anyone’s ever spotted a good working example of expanding foam/soap suds in a game. It’s important that no flipbooks be involved, just geo, shaders and perhaps maybe particles.

How would you approach something like this? Just thinking about it makes my head hurt, what with all the overlapping refraction, transparency, etc…

1 Like

I’d approach it by faking it. No refraction, no transparency.

Playing with Worley noise and mapping it to the roughness / smoothness / specular / whatever should do the trick. Also, make the inner bubble part dark by inverting the noise mask and using that to lerp between two not very contrasted values, like 0.96 and 0.88 for example. I’d also avoid harsh or contrasty shadows, as that could help with the GI / SSS feeling.

For the specific reference you shared, I’d also fake the “deformation” and the wiggle using a decent polycount mesh with a bit more resolution in the holes, and maybe faking their creation by using a skeletal mesh with bones that make the foam go in and out. But then I’d also use triplanar uv mapping so the animated holes wont give any problems.

About the particles, I can hardly see any in the reference. But maybe making some bubbles popping out would look nice.

Would you like me to recreate it and share it with you?



Well! If you’re up for it I definitely won’t say no to that. Looking forward to seeing what you come up with!

1 Like

Give me a couple days as I’m a bit busy right now! :coffee:

Well, talk of the devil… I was just playing Mario + Rabbids on Switch last night and lo and behold…


This is actually pretty good and I’ve already begun to attempt to recreate something similar. I’ll post it as soon as I have something that looks half decent.

Hi, did you succeed in recreating that? I’m trying to make some foam for a witch cauldron right now and if you can share some tips I would be very thankful. =)

I think that one is just a mesh with scrolling texture? If you wanted something that is fully procedural and interactable, it would be difficult but i imagine you could fake it by setting it all up as particles, then use a shader to draw spheres over each of the particle locations and calculating the depth using screen space,calculate the normals, you could then create some sort of blur so it looks like each of the particles are interacting with one another. then you would need to figure out a way to get some of the sharpness of each bubble back, you could do what they do with photographs and use an edge preserving filter. that would get you something close to what your looking for, then to make it look even more like foam, i suppose you could use some sort of cell noise from which you could calculate shadow information from or something? im not sure, it would be one hell of a challenge, but its doable to create something like that. All of this would be drawn to render textures so it will all be calculated in screen space.

i dont really know what your going for, so this may be overcomplicating it if you dont want to be interactable etc

Still busy to date HAHAHA perhaps someday I’ll do it :joy:

it’s not really interactive, but these simple 2d sprites for RDR2 seem to do the trick: