A Survey of Font Rendering Techniques Cameron Egbert

A Survey of Font Rendering Techniques Cameron Egbert Software Development Engineer XNA Developer Connection Microsoft

Appetizer Texture Based Vector Texture GPU Vector Graphic

Texture Based Fonts > Render >+ >+ textured quads Easy Render anything representable with a texture > - The usual blocky texture artifacts

Vector Textures “Improved Alpha Tested Magnification for Vector Textures and Special Effects” – Chris Green 2007 Uses a distance field representation Threshold the distance map to get the final text > Enables various edge effects > > 4096 x 4096 texture 256 x 256 Distance Map

Caveats > Sharp features tend to get rounded off Vector Texture Reference > Breaks down at high magnification

Comparison + Almost as simple as traditional textures + Much better visual quality + No shaders required, just Alpha Test + Edge Effects & Antialiasing (with shaders) - Tends to cut corners off

As Seen in Team Fortress 2 Vector Texture based text with anti-aliasing and soft drop-shadows (courtesy Valve Software)

GPU Vector Graphics “Resolution Independent Curve Rendering Using Programmable Graphics Hardware” – Loop and Blinn 2005 > > > Convert character outline to Bézier curves Render curves as triangles with an inside-outside test Use derivatives for edge effects & anti-aliasing > Requires extra geometry

Caveats > > > Creating the geometry is a bit involved Intersecting outlines Complex characters Designed for quadratic and cubic Béziers Anti-Aliasing requires a lot of geometry

Comparison +Resolution independence! +Perfect reproduction of quadratic and cubic Bézier curves +Edge effects & anti-aliasing (with extra geometry) - Performance is tied to font complexity

As Seen in Forza Motorsport 2 GPU Vector graphic based text with anti-aliasing

demo

Performance > > > XBox 360 GPU 1255 Characters 1280 x 720 A 8 R 8 G 8 B 8 Surface time (m. S) Traditional Texture 0. 34 Vector Texture 0. 57 Vector Texture (AA) 0. 57 GPU Vector Graphic 0. 47 GPU Vector Graphic (AA) 1. 69

Recommendations > Traditional graphics textures for non-vector > Vector Textures if you don’t mind slightly rounded corners > GPU Vector Graphics if you can invest in the highest visual quality

Questions? cegbert@microsoft. com