Approaches to Realtime Foam Rendering
A study of foam rendering methods in realtime graphics
Table of contents:
Too Long, Didn't Read
If you are here to look for quick tips on creating a foam material, see our 60 seconds tutorial here
For Unreal Engine developers looking for a ready-made foam solution for production, we are planning to release a procedural foam asset soon. Follow us on ArtStation or YouTube for updates.
Introduction
In this article we dive deep into an exciting topic of foam and bubbles, exploring various approaches to creating real-time dynamic foam in a game engine.
Compared to the well-research subject of fluids, foam in computer graphics has received less attention in published research. Due to this gap in research and the absence of industry-standard solutions, artists and researchers are faced with the choice of either inventing their own solutions or skipping foam shading, which happens even in groundbreaking research such as Wretborn et al 2022. Simulation packages including Houdini also do not offer high quality off-the-shelf solutions, defaulting to basic fog volumes or translucent particles in game engines. In an attempt to bridge the gap in foam shading methods, this article presents some of our in-house research along with a review of commercially available solutions.
Fig 1: The complex geometric structure of foam
Photo by lanah nel on Unsplash
Foam represents a complex geometric structure, combining reflective, translucent and refractive properties, presenting a challenging problem in computer graphics rendering. Particularly in real-time graphics, current generation graphics pipelines extensively use deferred rendering, which is not suitable for complex translucent objects. Even the addition of raytraced reflections and shadows does not address this particular issue.
To tackle this challenge, we begin by examining basic properties of foam in real world references and then define a desired feature set for foam materials. Based on those, a number of rendering techniques are presented to shade foam at micro and macro scale, suitable for use in games, cinematics, product visualisation and other applications. The main focus is on visual quality rather than performance, but notes about performance will also be provided.
While Unreal Engine will be used for practical demonstrations, the techniques presented in this article are engine-agnostic and can be recreated in other deferred renderers.
Related Work
The physical principles governing soap bubble structures were described by Joseph Plateau in the 19th century through Plateau's laws. Implementing Pleatea's laws in computer graphics, combined with various forces and surface tension in a particle simulation, produces realistic results as demonstrated in the SIGGRAPH 2012 proceedings (Busaryev et al 2012).
Fig 2: Particle based foam simulation results (Busaryev et al 2012)
The particle simulation approach serves as a valuable ground truth resource and, depending on scene size, may be suitable for offline rendering. However, the simulation cost of several seconds per frame in test scenes (Busaryev et al 2012) makes it unfeasible for most real-time applications.
Fig 3: Offline foam material using animated height maps (Sprangers 2022)
Logan Sprangers, in his product "Realistic Animated Foam Material" (see fig 3), models bubbles using displacement stored in a sequence of high-resolution height maps. This solution is easy to implement and creates believable foam including animation and bubble popping but comes at a high memory cost. We simplified this approach and applied it to real-time rendering as a starting point for foam shading on lower end platforms.
Fig 4: Offline foam material using a procedural volumetric shader (SergiDis 2021)
Another example which uses volumetric rendering is Real Foam Shader (see fig 4). This shader for Blender Cycles allows artists to turn any base mesh into realistic foam by tracing through layered 3D textures. We explore a similar approach in the Volumetric Rendering Method chapter. This approach offers exceptionally realistic results and is feasible for use in offline rendering. However, it comes at high GPU performance cost making it unfeasible for most practical real-time applications at the time of writing.
In real-time rendering, foam is commonly blended on top of liquid materials based on velocities and masks.
Fig 5: Real-time foam material in "Fortnite" using Single Layer Water in Unreal Engine (Epic Games 2020)
Unreal Engine has built-in functionality for rendering foam which connects with the Water system plugin (see fig 5). The system is simulation based and integrates seamlessly with interactive water, but by default the foam shading quality is not detailed enough for closeups. Improving the detail of foam shading will therefore be one of the aims of our research.
Fig 6: Real-time foam material using the water plugin in Unreal Engine 5 (Aminullah 2022)
Fluid Flux 2 is a water simulation plugin created by Krystian Komisarek and available as a marketplace asset (Komisarek 2022). The plugin offers a foam feature which produces impressively high quality results when seen at a medium to far distance.
Fig 7: Fluid Flux, a dynamic water simulation plugin for Unreal Engine 5 (Komisarek 2022)
When seen up-close, Fluid Flux does not demonstrate bubble-level detailing we are looking for in the video or executable demo files, but still remains a useful benchmark for comparison.
Observation
Let us begin by defining basic properties of foam based on common sense and science.
Foams are materials formed by trapping pockets of gas in a liquid or solid.From the Wikipedia definition we see that we are dealing with two different substances: gas and liquid. We expect light interaction to happen at each point the two interfaces meet creating reflections, refractions and scattering.
Fig 9: Smooth looking coffee foam is made of thousands of tiny bubbles (4k Royalty Free Stock Video 2020)
The structure, density and colour of foam all vary depending on the properties of liquid which is mixed with air. Below is a number of foam examples:
Fig 10: Different foam types enclosed in round containers and photographed top-down
Observing reference videos, we can see that foam starts forming as a mass of transparent bubbles. As it gets thicker, it gradually turns towards opaque white due to complex light scattering between bubbles.
Fig 11: Bubbles created by pouring beer into a glass
Source: https://www.youtube.com/watch?v=CoQwH0Id4Og
Small bubbles are shaped as near perfect spheres which is guaranteed by the principle of surface tension. Larger bubbles may stretch and elongate as seen while sliding across surfaces.
Fig 12: Beer foam sliding on the side of a glass
Source: https://www.youtube.com/watch?v=IZt9Rv9OlJA
The videos below demonstrate different types of liquids poured into a short glass. Different bubble size distribution, clustering and lifetime can be observed for each type of liquid.
Beer
| Coke
| Cold oolong tea
|
Fig 13: Foam creation process and movement until dissolving. A comparison of 3 liquids poured into a short glass.
Research Goals
Based on our observations above, we aim to achieve the following goals in our research:
1. Realism - high fidelity foam at medium distance and closeups with noticeable, realistic bubbles
2. Art direction - plenty of control for look development, adjusting the bubble size and structure
3. Animation - foam movement, bubble popping, etc
While exploring various rendering techniques in this article, we will look for solutions to satisfy the above conditions in each approach.
Implementation
In this chapter, various approaches to modelling foam will be considered. The methods below are listed in the order of increasing performance cost. The photo based method works on nearly all platforms, while the volumetric method is only feasible on high-end desktop GPUs. The final dynamic approach is a scalable solution with customizable quality settings and support for most platforms.
Texture-Based Method
 Opacity Mask |  Normal Map |
Fig 14: Tileable closeup foam textures (downloadable assets)
Starting with the simplest approach, we can create foam by using a cropped and tiled picture of foam and applying to an opaque material. Combined with a hand-painted mask, this may offer acceptable results for background foam. To further improve quality, a normal map can be added, and UV distortion can be applied to simulate fluid-like movement. This method is suitable for use in mobile games or WebGL as it carries very low performance cost.
A single texture layer resembles foam but lacks flexibility to control bubble size in different areas. To add more artistic control, multiple layers can be blended at different scales and the blending can be controlled using vertex color.
Adding extra layers not only helps achieved a more organic look, but also adds realism to the movement of animated masks. It is especially noticeable when painting meshes in the viewport, such as in the video below. Notice how bubbles gradually get smaller before disappearing when erased.
Fig 15: Dynamic bubble scaling based on vertex color.
Differences in UV Scale were exaggerated to demonstrate the effect.
A step-by-step tutorial to recreate this material is available on our YouTube channel.
Fig 16: Texture based paintable foam material tutorial
Blending multiple foam layers opens an opportunity to implement bubble popping. The most intuitive solution is to replace our texture set with filmed sequences of popping bubbles, as used in Realistic Animated Foam Material. However, this approach requires too much memory to be considered practical in a game engine. Instead, we can leverage our layered material and create a fake effect bursting bubble effect by fading out the top bubble layer with a bubble ID mask.
Fig 17: Substance Designer is used to create a bubble ID mask, which fills each bubble with a random color to be used in our shader.
As a result, a popping bubble plausibly reveals a layer of smaller bubbles from the layer underneath. The remaining bubbles from the topic layer do not rearrange themselves, but this behaviour is considered realistic when simulating thicker foam. For a realistic simulation of thinner foam, see the full dynamic setup below.
Visual quality ▲
Performance ✅
Flexibility ✅
Animation ▲
Implementation cost 🌟
We faced the limit of the photo based material approach. Next we will look at building procedural textures to improve the detail level, lighting and flexibility of our material.
Procedural Texture Method
To achieve more flexibility than the photo-based method, we can create a procedural PBR foam material following a modern workflow. We layer different size bubbles using height blending then create normals and masks to feed into the UE material and render detailed foam. This approach supports full dynamic lighting and is fully customizable. The requires going back and forth between DCC and the engine for look development to break up the "procedural" look.
A key consideration when using the procedural approach is choosing a sampling method for scattering bubbles in texture space.
Fig 18: A comparison of bubbles created using random scatter (left), voronoi noise (middle) and photo reference (right)
A naive approach of scattering circles on a randomized grid (see fig 18 left image) produces somewhat acceptable results when viewed at a distance, but lack organic arrangement when compared to photo reference (fig 18 right image) giving off a procedural look.
A more realistic arrangement can be modelled using Voronoi noise (fig 18 middle image). Using height blending, layered and scaled Voronoi noises form a more believable foam pattern. The Voronoi pattern works especially well for modelling larger bubbles which are more prone to squishing.
However, there is one issue. With Voronoi points placed randomly we have some bubbles unnaturally close, and other times we see large gaps between bubbles due to uneven cell sizes. What can we do to improve that?
Fig 19: Default jittered voronoi noise solved using Poisson disc sampling
(left: Voronoi diagram, right: circle distances)
As seen in the interactive ShaderToy sample in fig 19 above, Voronoi cells can be combined with Poisson disc sampling to create more uniform cells suitable for modelling smaller bubbles (under 1cm diameter). The benefit of using Poisson is it introduces a distance constraint between every point to create natural looking and equidistant random distribution.
Using the Poisson approach brings us closer to the arrangement of real uniform sized bubbles as seen on the left side of the close up reference image below.
Fig 20: A comparison of uniform and varying size bubbles (Wikipedia 2014)
The next step to achieve in order to match real world reference is bubbles on the right side of figure 18, which are of varying size. We arrive at a problem of packing circles or spheres of different sizes, which is non trivial and often resorts to a simulation based approach.
Fortunately, Poisson disc distribution can be modified to use a weight function which can help us solve the problem.
Following this approach we can efficiently create tightly packed bubble height maps which can be converted to masks, normals and roughness maps and used in a game engine.
Visual quality ✅
Performance ✅
Flexibility ✅
Animation ▲
Implementation Cost ▲
Volumetric Texture Method
The methods presented until now approach work well for thin foam applied to flat meshes.
However, when aiming to create thick foam, especially for more translucent foam types, the volumetric rendering method can be utilized to a great effect.
Fig 21: Foam rendered using our Foam tool to be released on Epic Marketplace soon
This setup is inspired by offline rendering methods (SergiDis 2021) and is built with two layers: a reflective surface for bubble surface and a volume for rendering brighter, fine foam around larger bubbles. We use a base geometry shape with a sub-surface scattering material eroded with a volumetric height map and a separate reflective layer with the height map added. Together these two layers create realistic round bubbles and convincing foam shading.
Bubbles popping and foam movement are implemented in a similar fashion to the photo based approach. In addition, bubbles can be animated to grow similarly to a boiling water situation.
A production quality solution based on this method is currently being prepared for Epic Marketplace and will be released in the following weeks. If you are a developer, please follow us on ArtStation or subscribe to our YouTube channel for news on our foam tool and other exciting upcoming tools.
Visual quality ⭐️
Performance ▲
Flexibility ✅
Animation ▲
Implementation Cost ✅
Discussion
Summing up our findings, we explored a number of approaches to shading foam in real-time graphics based on existing solutions in offline rendering.
We first discovered that in some cases a simple photographed foam textures offered sufficient quality for use on backgrounds objects as long as dynamic lighting is not required. Following that, we explored procedural foam generation methods revolving around variations of layered Voronoi cells, allowing more customization and support for detailed dynamic reflections and lighting. Extending the same approach, we evaluated a more complex volumetric texture based method which supports realistic rendering of thick foam and offers the best balance between visual quality, features and performance.
The final, volumetric method offers additional benefits of natural bubble reveal movement, and can be further extended to use raymarching and trace inside the foam volume in detailed close ups. In our production tool Easy Foam, we included procedural 2D and volumetric modes in order to target medium to high end platforms for a wide variety of users.
Future research
The Unreal Engine's visual effects toolkit Niagara can be used to create a dynamic simulation and realistically animate foam emission, dissolving, and enable the player to interact with foam in a game. This method was deemed too expensive to use on current generation platforms and is therefore left for future research.
Fig 22: Niagara neighbor grid can be used to solve particle self-collisions (Sumours 2023)
Niagara is a versatile effects programming toolkit supporting CPU and GPU particle and grid simulations. For the purpose of this article, the Simulation Stages feature will be used which enables access to GPGPU programming in Unreal Engine. Figure 22 shows an experimental setup using a neighbor grid to simulate spherical particle self-collisions interactively (Sumours 2023).
Shading translucent bubbles rendered as individual spheres using deferred rendering is a non-trivial problem. Heavy overdraw becomes a performance issue when foam is seen up-close, and transparency sorting artifacts can be observed decreasing the visual quality. To improve visual quality and performance, particles can be drawn to a render target and rendered indirectly using a single mesh and the render target using normal maps or displacement, similarly to the volumetric method above.
However, running the underlying neighbor grid simulation gets expensive unless limited to a small focus area.
Conclusion
This article provided an in-depth look into efficient foam shading methods in real-time computer graphics. Every method presented comes with a set of strengths and weaknesses. To help our readers choose the right solution, we evaluated each method with visual quality, flexibility, performance and implementation cost in mind.
We hope this article brought our readers some new insights on how foam and other natural phenomena can be efficiently modelled in real-time computer graphics.
Please stay tuned for our production foam asset Easy Foam which will be released in the next few weeks, and post your comments below if you have any questions about this article.
References
Epic Games (2020). Building Worlds in ‘Fortnite’ With Unreal Engine. Unreal Fest Online 2020. https://www.youtube.com/watch?v=w3tTbVNkuwA&t=1773s
Joel Wretborn, Sean Flynn, and Alexey Stomakhin (2022). Guided bubbles and wet foam for realistic whitewater simulation. ACM Trans. Graph. 41, 4, Article 117 (July 2022), 16 pages. https://doi.org/10.1145/3528223.3530059
Krystian Komisarek (2022). Fluid Flux. UE Marketplace. https://www.unrealengine.com/marketplace/en-US/product/fluid-flux
Logan Sprangers (2022). Realistic Animated Foam Material. Gumroad. https://logansprangers.gumroad.com/l/ybalb
Meta Meow (2024). [UE5] Paintable foam short tutorial. YouTube. https://youtube.com/shorts/dCg834HOyJ4?si=DLvDWwDFLMerblHP
Oleksiy Busaryev, Tamal K. Dey, Huamin Wang, and Zhong Ren (2012). Animating bubble interactions in a liquid foam. ACM Trans. Graph. 31, 4, Article 63 (July 2012), 8 pages. https://doi.org/10.1145/2185520.2185559
SergiDis (2021). Real Foam Shader. Blender Market. https://blendermarket.com/products/foam-shader
Sumours (2023). Unreal Engine 5 - Experiment Niagara NeighborGrid sim - Mograph. YouTube. https://www.youtube.com/watch?v=IoRVyuAIMiA
Wikipedia contributors (2023). Plateau's laws. In Wikipedia, The Free Encyclopedia. Retrieved February 6 2024, from https://en.wikipedia.org/w/index.php?title=Plateau%27s_laws&oldid=1183163835
Wikipedia contributors (2024). Foam. In Wikipedia, The Free Encyclopedia. Retrieved 07:04, February 6, 2024, from https://en.wikipedia.org/w/index.php?title=Foam&oldid=1202073170
Yahya Aminullah (2022). Unreal Engine 5 - Enabling Water Foam. YouTube. https://www.youtube.com/watch?v=YQJPMPmJNn8