Friday, 5 October 2012

Signed Distance Field Font Rendering

Signed Distance Field (SDF) font rendering is a really nice technique for rendering crisp, clear fonts. It was made by Valve and used in Team Fortress 2. Valve presented it at SIGGRAPH 2007 in this white paper.

I wanted to make a game that used a lot of text in a 3D environment, and it quickly became apparent that regular texture fonts weren't up to the task. Without using massive textures for the fonts things looked bad, and the fuzziness was just unavoidable.

Paul Houx's excellent explanation and code posted in this thread on the Cinder forums give a great overview of how SDF font rendering works, and it really helped me try it out.

The text scales beautifully, and the results speak for themselves:




Later, an implementation for OpenGLES 2 dropped into a game prototype:


Signed Distance Field font rendering.