High-performance, Low-cost SDF Glyphs in Unreal

Ensuring smooth, detailed vector graphics without comprimising performance is a frequent challenge in modern video games. These visual motifs are known as glyphs and routinely appear in player cosmetics (such as “sprays” in first person games), signage, decals, or other visual novelties. Glyphs can be combined into layered decals to form more complex vector shapes. Typically, these textures render poorly at low resolutions. Therefore, attaining greater clarity in glyphs usually require a larger resolution at the cost of higher memory usage.

Grafitti created by three composite SDF glyphs.

Valve has introduced an efficient method based around SDF textures to render glyphs with a low resolution and achieve the same (or greater) perceived quality than high-resolution textures. For more information, refer to this paper, published in 2007.

Left: A 512x512 Alpha Texture. Right: A 512x512 SDF Glyph.

In this project, I’ve developed a workflow and pipeline that can be used to build quick SDF textures in Unreal Engine, with additional art-directable parameters. The pipeline utilizes Substance Designer scripts and adapts them for use with Unreal Engine textures, which can be built into a material for Decal actors.

Color, outline length, outline color, and overall glyph thickness can be modified through material parameters.

This approach enables the creation of composite glyphs with significantly lower resolution than typical high-resolution textures at a minimal fraction of the memory cost. Additional material options to add borders, expand the thickness of the SDF glyph, and insert drop shadows were also included in the material expression. These glyphs can be layered to build a more complex glyph, which is useful for certain scenarios situations in world building. This includes graffiti, LED displays, and even street signage.