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

Appetizer Texture BasedVector TextureGPU 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 x256 Distance Map 4096x4096 texture  Uses a distance field representation  Threshold the distance map to get the final text  Enables various edge effects

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  1280x720 A8R8G8B8 Surface time (mS) Traditional Texture0.34 Vector Texture0.57 Vector Texture (AA)0.57 GPU Vector Graphic0.47 GPU Vector Graphic (AA)1.69

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

Questions?