How it Works

Next

Signed Distance Field


When a text or sprite is magnified, it starts showing aliasing issues or blurriness. The blurriness can be mitigated by using Alpha Testing, however at high magnifications, a stair-case  patter appears.


By using Signed Distance Fields (SDF) the texture can be scaled while maintaining an anti-aliased edge. The original paper on SDF was published by Chris Green, a programmer at Valve.



In basic terms, Signed Distance Fields works by generating a special texture from the source image or font that stores the distance from each texel to the edge of shape. Pixels outside of the shape have positive distance values, while pixels inside the shape have negative distance values, hence the "signed" part of the name.

       

       

       

As more info is stored about the edge surroundings, special shaders can be applied to achieve effects like: Outline, Bevel, Soft Shadows, Glow, etc.



Created with the Personal Edition of HelpNDoc: Free help authoring tool