Visual Effects Using Signed Distance Field Textures

Here, I will discuss how I utilize a technical art concept called Signed Distance Fields, or SDFs, and how I utilize it in order to create high quality and performant stylized effects for Unreal. In this post, I will be using Substance Designer and Unreal Engine, and provide the respective documentation for both parts.

This process is notably used by Valve in their title, Team Fortress 2, where it is discussed in their article here :

https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

By utilizing signed distance field textures, and downsampling, I am effectively able to get high quality alphas for my stylized effects, for only a little bit of memory taken up by alpha texture which reach up to 512x512 (which in itself can be a bit overkill).

Below are a couple node setups in both Substance Designer and Unreal, to show the process of how I created the texture, and the nodes I used in Unreal to utilize the exported images.

In this example, I use multiple alphas packed into color channels. The explosion lines and impact cloud are all packed into a single texture for the effect.

Here I use a combination of 3 different alphas, all on a cone mesh to create an impact effect.

For ribbon effects, I made sure my alpha was able to tile. Additionally, in the lightning effect, I used multiple textures to create different variations for the lightning streak and electric cracks across the floor.

Here, I do something similar to the lightning effect, but for a more cartoony trail.

The textures are created through using the distance nodes in Substance Designer. By inputting my alpha, and getting the absolute value of the distance of both the alpha and its inverse, you effectively get an image with baked information related to the silhouette and edge.

Afterwards, these textures can be imported as RGB8 textures, and run through a smooth step node to get the proper shapes for your effects. By changing the values in the smooth step node, you can do things like shrink, grow, or animate the effect.

The neat thing is, is that I can do things like animate, grow, or shrink these alphas by using other shader techniques and effects in order to reach a higher amount of creative control.

Page updated

Google Sites

Report abuse