A Survey of Font A Survey of Font Rendering TechniquesRendering Techniques

Cameron EgbertCameron EgbertSoftware Development EngineerSoftware Development EngineerXNA Developer ConnectionXNA Developer ConnectionMicrosoftMicrosoft

AppetizerAppetizer

Texture Based

Vector Texture

GPU Vector Graphic

Texture Based FontsTexture Based Fonts Render textured quadsRender textured quads

+ Easy+ Easy + Render anything representable + Render anything representable

with a texturewith a texture - The usual blocky texture artifacts- The usual blocky texture artifacts

Vector TexturesVector Textures“Improved Alpha Tested Magnification for Vector “Improved Alpha Tested Magnification for Vector Textures and Special Effects” – Chris Green 2007Textures and Special Effects” – Chris Green 2007

256x256 Distance 256x256 Distance MapMap

4096x4096 texture4096x4096 texture

Uses a distance field representationUses a distance field representation Threshold the distance map to get Threshold the distance map to get

the final textthe final text Enables various edge effectsEnables various edge effects

CaveatsCaveats Sharp features Sharp features

tend to get tend to get rounded offrounded off

Vector Texture Reference

Breaks down at Breaks down at high high magnificationmagnification

ComparisonComparison+ Almost as simple as traditional + Almost as simple as traditional

texturestextures+ Much better visual quality+ Much better visual quality+ No shaders required, just Alpha + No shaders required, just Alpha

TestTest+ Edge Effects & Antialiasing + Edge Effects & Antialiasing

(with shaders)(with shaders)- Tends to cut corners off- Tends to cut corners off

As Seen in Team As Seen in Team Fortress 2Fortress 2

Vector Texture based text with anti-aliasing and Vector Texture based text with anti-aliasing and soft drop-shadows (courtesy Valve Software)soft drop-shadows (courtesy Valve Software)

GPU Vector GraphicsGPU Vector Graphics“Resolution Independent Curve Rendering Using “Resolution Independent Curve Rendering Using Programmable Graphics Hardware” – Loop and Blinn Programmable Graphics Hardware” – Loop and Blinn 20052005 Convert character outline to Bézier curvesConvert character outline to Bézier curves Render curves as triangles with an inside-Render curves as triangles with an inside-

outside testoutside test Use derivatives for edge effects & anti-Use derivatives for edge effects & anti-

aliasingaliasing Requires extra geometryRequires extra geometry

CaveatsCaveats Creating the geometry is a bit Creating the geometry is a bit

involvedinvolved Intersecting outlinesIntersecting outlines Complex charactersComplex characters Designed for quadratic and cubic Designed for quadratic and cubic

BBééziersziers Anti-Aliasing requires a lot of Anti-Aliasing requires a lot of

geometrygeometry

ComparisonComparison+Resolution independence!+Resolution independence!+Perfect reproduction of +Perfect reproduction of

quadratic and cubic Bquadratic and cubic Béézier zier curvescurves

+Edge effects & anti-aliasing +Edge effects & anti-aliasing (with extra geometry)(with extra geometry)

- Performance is tied to font - Performance is tied to font complexitycomplexity

As Seen in Forza As Seen in Forza Motorsport 2Motorsport 2

GPU Vector graphic based text with anti-aliasingGPU Vector graphic based text with anti-aliasing

demodemo

PerformancePerformance XBox 360 GPUXBox 360 GPU 1255 Characters1255 Characters 1280x720 A8R8G8B8 1280x720 A8R8G8B8

SurfaceSurface  time (mS) Traditional Texture 0.34 Vector Texture 0.57 Vector Texture (AA) 0.57 GPU Vector Graphic 0.47 GPU Vector Graphic (AA) 1.69

RecommendationsRecommendations Traditional textures for non-Traditional textures for non-

vector graphicsvector graphics Vector Textures if you don’t Vector Textures if you don’t

mind slightly rounded cornersmind slightly rounded corners GPU Vector Graphics if you can GPU Vector Graphics if you can

invest in the highest visual invest in the highest visual qualityquality

Questions?Questions?

cegbert@microsoft.comcegbert@microsoft.com