Breakdown: Approaches to Realtime Foam Rendering

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-researched 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.

The complex geometric structure of the 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 the 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 the micro and macro scales, suitable for use in games, cinematics, product visualization, 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).

Particle-based foam simulation results

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.

Logan Sprangers, in his product Realistic Animated Foam Material, 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.

Another example that uses volumetric rendering is Real Foam Shader. 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 a 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

Real-time foam material in "Fortnite" using Single Layer Water in Unreal Engine

Unreal Engine has built-in functionality for rendering foam which connects with the Water system plugin. The system is simulation-based and integrates seamlessly with interactive water, but by default, the foam shading quality is not detailed enough for close-ups. Improving the detail of foam shading will therefore be one of the aims of our research.

Real-time foam material using the water plugin in Unreal Engine 5

Fluid Flux 2 is a water simulation plugin created by Krystian Komisarek and available as a marketplace asset. The plugin offers a foam feature that produces impressively high-quality results when seen at a medium to far distance.

When seen up close, Fluid Flux does not demonstrate the 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 the basic properties of foam based on common sense and science.

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.

The structure, density, and color of foam all vary depending on the properties of the liquid which is mixed with air. Below are a number of foam examples:

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.

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.

Research Goals

Based on our observations above, we aim to achieve the following goals in our research:

1. Realism – high fidelity foam at a 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 modeling 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.

Opacity Mask/Normal Map:

Starting with the simplest approach, we can create foam by using a cropped and tiled picture of foam and applying it 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 a very low-performance cost. 

A single texture layer resembles foam but lacks the 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 achieve 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.

Dynamic bubble scaling based on vertex color. Differences in the UV Scale were exaggerated to demonstrate the effect.

A step-by-step tutorial to recreate this material is available on our YouTube channel:

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.

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 behavior is considered realistic when simulating thicker foam.

• Visual quality ▲
• Performance ✅
• Flexibility ✅
• Animation ▲
• Implementation cost 🌟

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-sized 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. This 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.

A comparison of bubbles created using random scatter (1), Voronoi noise (2) and photo reference (3):

A naive approach of scattering circles on a randomized grid produces somewhat acceptable results when viewed at a distance, but lacks organic arrangement when compared to photo reference giving off a procedural look.

A more realistic arrangement can be modeled using Voronoi noise. Using height blending, layered and scaled Voronoi noises form a more believable foam pattern. The Voronoi pattern works especially well for modeling 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?   

Default jittered Voronoi noise solved using Poisson disc sampling (left: Voronoi diagram, right: circle distances)

As seen in the interactive ShaderToy sample attached above, Voronoi cells can be combined with Poisson disc sampling to create more uniform cells suitable for modeling smaller bubbles (under 1cm diameter). The benefit of using Poisson is it introduces a distance constraint between every point to create a 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:

A comparison of uniform and varying-size bubbles

The next step to achieve in order to match real-world reference is bubbles, which are of varying sizes. We arrive at the problem of packing circles or spheres of different sizes, which is nontrivial 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.

Foam rendered using our Foam tool 

This setup is inspired by offline rendering methods and is built with two layers: a reflective surface for the 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.

• 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 simple photographed foam textures offered sufficient quality for use on background 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 that supports the 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 tracing 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 and 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.

Niagara is a versatile VFX 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. The video above shows an experimental setup using a neighbor grid to simulate spherical particle self-collisions interactively.

Shading translucent bubbles rendered as individual spheres using deferred rendering is a non-trivial problem. Heavy overdraw becomes a performance issue when the 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, similar 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 into how foam and other natural phenomena can be efficiently modeled in real-time computer graphics.

You can check out the original article here