Signed Distance Fields
> Intro
My recent focus of late (Summer 2023) has been all about the various implementations and usages of Signed Distance Fields or SDFs. There is so much to cover just in their applications for Game Development, but they’re used in so many other fields too. Focusing my attention a bit though I’ve been working to smooth out the process of adoption for SDFs in work projects for myriad reasons. I’ve mostly focused on the 2D applications, but I am working toward 3D implementations in Unreal as well. Signed Distance Fields (SDFs) are shapes described with mathematical expressions. They provide information about the distance from any point in space to the nearest surface of the shape, positive values are outside the shape and negative values are inside the shape.
> 2D Usages
SDFs are a great tool for optimized texture rendering demonstrated in a paper Valve submitted to SIGGRAPH 2007 where they revealed that they could utilize highly compressed textures to display the same content in their games with Alpha Testing. Now-a-days with even stronger computer hardware we can leverage Alpha Blending techniques to create higher quality renders. This technique alone allows teams to significantly reduce texture memory costs but SDFs also offer additional features. You can easily create several effects such as outlines, glows, drop shadows, and sharp corners. For SDF shapes you can easily round corners, make them annular, and perform union, subtraction, and intersection operations with little additional overhead. Building an optimized basis for things such as UI elements and their special effects without the need for texture sampling.
SDF Box | ABS SDF Box |
---|---|
![]() | ![]() |
> 3D Usages
2D applications are also only scratching the surface of the power of SDFs, they also play many roles in 3D. Unreal Engine builds Distance Fields for levels that can be utilized to detect collisions, SDFs are also used in Ray Tracing calculations. For example, Lumen’s Software Ray Tracing for Global Illumination and Reflections are possible because of them. SDFs can be leveraged for Mesh Generation with voxel data, they also support geometry manipulations similar to the 2D counterparts like union, subtraction, and intersections. They are also useful for LOD management, Animations, and Distance-based Effects such as ambient occlusion, soft shadows, field based effects (like force-fields), and fluid simulations. A lot of this I’m sharing from my research, but I definitely want to see what I can put together knowing more about these applications.
> Inspiration & Resources
Martin Donald is a Senior Technical Artist at Ubisoft Berlin, who builds tech demo YouTube content and is my original inspiration for learning about these techniques. https://www.youtube.com/watch?v=1b5hIMqz_wM
Valve’s paper from SIGGRAPH 2007. https://cdn.cloudflare.steamstatic.com/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
Inigo Quilez has done a lot of work on Signed Distance Functions for various shapes both 2D and 3D as well as additional effects for them. Rounding, Annularity, Onion, Union, Subtraction, and Intersections. https://iquilezles.org/articles/distfunctions2d/
Epic’s UI/UX team from Fortnite also did a demonstration utilizing SDFs and provided several functions for building UIs from these various shapes. https://www.youtube.com/watch?v=WaHlhkmVDoI
YouTube creator Kishimisu did some work introducing some circle SDFs creating some interesting and beautiful patterns. https://www.youtube.com/watch?v=f4s1h2YETNY