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
- Slides: 17