a survey of font rendering techniques

Download A Survey of Font Rendering Techniques

Post on 25-Feb-2016




6 download

Embed Size (px)


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 - PowerPoint PPT Presentation


  • A Survey of Font Rendering TechniquesCameron EgbertSoftware Development EngineerXNA Developer ConnectionMicrosoft

  • AppetizerTexture BasedVector TextureGPU Vector Graphic

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

  • Vector TexturesImproved Alpha Tested Magnification for Vector Textures and Special Effects Chris Green 2007256x256 Distance Map4096x4096 textureUses a distance field representationThreshold the distance map to get the final textEnables various edge effects

  • CaveatsSharp features tend to get rounded offVector TextureReferenceBreaks 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 2Vector Texture based text with anti-aliasing and soft drop-shadows (courtesy Valve Software)

  • GPU Vector GraphicsResolution Independent Curve Rendering Using Programmable Graphics Hardware Loop and Blinn 2005Convert character outline to Bzier curvesRender curves as triangles with an inside-outside testUse derivatives for edge effects & anti-aliasingRequires extra geometry

  • CaveatsCreating the geometry is a bit involvedIntersecting outlinesComplex charactersDesigned for quadratic and cubic BziersAnti-Aliasing requires a lot of geometry

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

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

  • demo

  • PerformanceXBox 360 GPU1255 Characters1280x720 A8R8G8B8 Surface

    time (mS) Traditional Texture0.34 Vector Texture 0.57 Vector Texture (AA)0.57 GPU Vector Graphic0.47 GPU Vector Graphic (AA)1.69

  • RecommendationsTraditional textures for non-vector graphics

    Vector Textures if you dont mind slightly rounded corners

    GPU Vector Graphics if you can invest in the highest visual quality

  • Questions?cegbert@microsoft.com

    *Text is one of the first things a user will see in your game. Besides getting the user through the opening scenes, it is prevalent in user interfaces and other areas of the game. Imagine if Power Point slides rendered texture based text like you see in many games. Yes, you can read it, but do you want to?

    *So, what can you do about it?*Blocky fonts work best with this method. You can also use multiple distance fields to alleviate the problem.

    *Test per pixel is f(u,v) = u^2 v = 0*If two outlines intersect, either subdivide the two outlines at the intersection, or render in two passes.This still works for East Asian characters, but it may be prohibitively expensive.Normal Character = 100-300 verts, AA = 600-1500 verts

    *Each of the 3 methods demonstrated in the text viewer