FreeType on OpenGL ES (iPhone)

• Download source - 1.15 MB

Introduction

This project renders fonts using OpenGL ES and the FreeType library. The FreeType library uses font hinting, which makes the fonts look better than your average anti-aliased fonts. This project is primarily designed for the iPhone, however the code is portable and should work on other platforms.

In addition, this code is designed to be efficient. All fonts are bin packed into one texture and draw call batching is implemented.

The standard way to render text in OpenGL is to create a textured quad for each character. You could have a separate texture and quad for each character, but this is very wasteful, because OpenGL textures can only be power of 2 (i.e. 32x32, 64x32,etc) and means there will a lot of unnecessary padding. A better way to do it is to bin pack all the characters into one single texture - known as a texture atlas.

Another advantage to having everything in the same texture is that it allows you to batch more OpenGL draw calls together. This reduces the workload of the GPU and increases performance.

Using the Code

The principle class is FontAtlas. To prepare a font for use, you must first include the TrueType font (i.e. the .ttf file) as a resource in your project. Then, you call FontAtlas::AddFont with the file name of the font, the desired point size and a list of the characters that you need. You call this function for every font you need, then you call FontAtlas::CreateAtlas(). The FontAtlas class retrieves the size of each character from the FreeType library, then it uses its bin packing algorithm to fit them into a OpenGL ES texture.

Initialising fonts:

const char* szLetters = " !\"#&'()*,-./0123456789:;
<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ\\_abcdefghijklmnopqrstuvwxyzÁáÉéÍíÑñÓóÚú";

m_pFontAtlas = new FontAtlas();
m_pFontAtlas->AddFont("arial.ttf", 12, szLetters);
m_pFontAtlas->AddFont("times.ttf", 18, szLetters);
m_pFontAtlas->AddFont("times.ttf", 16, szLetters);
m_pFontAtlas->CreateAtlas();

You can then render strings as follows:

FTBitmapFont* pArialFont = m_pFontAtlas->GetFTFont(ARIAL_IX);
pArialFont->DrawString(5, 0, "AV Arial font 12 point", BLACK);

Classes

• FontAtlas

  This is the principle class. It creates the texture atlas and holds all the FTBitmapFont objects. Each time you call AddFont, a new FTBitmapFont object is created.

• FTBitmapFont

  FTBitmapFont holds a list of characters and kerning data from the FreeType library. Strings can be rendered via the DrawString method. GetWidth returns the width of a string rendered in the given font.

• FTBitmapChar

  For each glyph (i.e. character) in the font, there is a FTBitmapChar. This class copies the glyph bitmap into the texture and calculates the texture co-ordinates and vertex dimensions of the character.

• GLCallBatcher

  This class is responsible for batching the draw calls. Every time a FTBitmapChar wants to draw itself, it calls GLCallBatcher::AddQuad. Instead of drawing directly, GLCallBatcher strings all the quads together in one array and only sends the mesh data to the GPU when RenderCurr is called, or when there a state change is needed. A state change is required, for example, if you change the alpha value, or colour of the text. In this way, the number of draw calls are reduced.

• TreeNode

  This class is used to implement the bin packing algorithm used to create the texture atlas. This is the algorithm in more detail.

Kerning

You can enable kerning by setting the useKerning flag before the atlas is created:

m_pFontAtlas->SetUseKerning(true); 

Personally, I don't think kerning is worth the performance hit, as you hardly notice the difference in quality.

Compiling FreeType on XCode

The FreeType source is included in the project in the directory OpenGLFont\Classes\freetype-2.4.3. Freetype should really be built as a standalone library, but I didn't have time to do that (exercise left to reader ;) ). I followed the instructions, detailed in INSTALL.ANY in the FreeType documentation. Removing all the bits that I didn't need flattened the directory structure, and disabled the modules that weren't used.

Building the Project

You need to download Boost and unzip it somewhere on your drive. Then set the include paths in xcode to point to the Boost include directory. Also, while you are in there, fix the path for FreeType (i.e. OpenGLFont/Classes/freetype-2.4.3/include/).

Quality

When rendered on a PC, the quality of the FreeType font is quite good, but not quite as good as in other applications (OpenOffice for instance). However, on the iPhone itself, it's a lot better - possibly because of the pixel density of the screen.

History

• Version 1
• Version 1.01
• Fixed bugs: handling character codes > 128
• Ignore characters that don't exist in font
• Smarter memory handling