Leaderboard

A few weeks ago Michael (Mythos_Ruler) mentioned his problem with current 0 A.D. bitmap fonts - they seem to fall quite short from rest of the art content, mainly because: Texture fonts aren't scalable (you need to generate fixed sizes). No dynamic font stroke, outlines or drop-shadow effects (unless baked into the texture). No wide Unicode support (cyrillic, greek, extended latin, arabic, etc.). Small text is quite hard to read (no font hinting). I've been working on this problem for the past two weeks and decided to give you some insight to the work. 1. Old bitmap fonts The old bitmap-font system in 0 A.D. is very simple, yet limited. A bitmap font is usually generated with an external tool and contains glyph information (*.fnt) and the bitmap (*.png). To illustrate, here is the current 0 A.D. 'Serif 12px' bitmap: You can immediately notice that most characters looks somewhat pixelated and dirty, making some characters pretty hard to read. This is mostly due to imperfect anti-aliasing for small scale fonts and no font hinting. Adding new fonts is especially difficult, since you need to generate font bitmaps for any variation you want. Say you wish to have Arial text in sizes 10, 12 and 14; you also might want regular, italic, bold, bolditalic styles. You also might want to have a regular, stroked and drop-shadow variant. If you had to generate all these bitmap fonts, you'd quickly have [sizevariants] * [stylevariants] * [fxvariants] font variants. In this case it might be 3 * 4 * 3 = 36 variants. So now adding a new font into the game with all the features you want turns out to be a real hassle since you need to generate so many variants that its crazy. Running tests to find your 'favorite' font and style combination quickly becomes pretty much impossible. Once you've generated your Arial variants, you'll just be glad its over. Furthermore, if 0 A.D. ever wishes to become a fully localized / multi-lingual game, at least partial unicode support is required to draw cyrillic, greek, extended latin, arabic, etc. glyphs. Can you imagine generating bitmap fonts for such a broad variety of languages? Add 6 different codepage support and you'll be looking at 36*6 = 216 bitmap fonts. Currently 0 A.D. bitmap fonts range from plain ASCII and Latin1 up to Latin Extended-A, which basically just covers most western characters. If you wanted to add support for Greek characters, you'd need to either regenerate all fonts to add the glyphs you need, or you'll have to create a separate bitmap for just Greek characters. That would be like reinventing codepages. 2. TrueType and FreeType A few decades ago this problem was addressed by designing a vector-based font format, which we now know as TrueType. I'll spare you the details, but the gist of it is to use vector outlines to describe all the style variants for every glyph in the font. There are only two issues here: 1) Getting a font that supports all the glyphs you need. 2) Reading these complex font files and turn them into an image. First is easily solved, the web is full of TrueType fonts: http://www.fontsquirrel.com/ Second is a lot harder, but luckily enough, we have the FreeType library: http://www.freetype.org/ Still though, Freetype isn't designed to be a full-fledged text displaying engine. All it does for us is a specific glyph image and some sub-pixel data to position it correctly. The rest is all up to us. We have to actually do the hard thing and get all this data through OpenGL 3.1 and onto the screen. Note: Due to some specific design decision, using an existing library like freetype-gl was out of the question and as we can see later, the end result is better optimized to our needs. 3. Runtime texture atlas This is exactly like bitmap fonts, with one major difference - we generate the texture atlas during runtime to suit our needs. If we need an emboldened font, we'll only generate that and be done with it. The first step is to generate the basic ASCII subset, which is [0..127] inclusive, which is actually easy enough to do. We use a very basic shelf-styled packing method to create an 8-bit RED channel bitmap with just the size we need. The only requirement set by OpenGL is to align image width to 4-byte boundary. We use a neat font called 'Anonymous Pro' - a monospace font that looks perfect for lots of text: Using freetype library, some programming hocus-pocus and the simplest shelf-packing algorithm, we get a neat 1-channel bitmap for our 'Anonymous Pro 12px': Can you notice the extra clarity compared to the 'Serif 12px' texture font? If you zoom in really close, you'll actually notice that the characters are neatly anti-aliased and also somewhat distorted. This is because 'auto-hinting' was enabled in order to make the small font look sharp and clear - making it a lot easier to read at smaller sizes. 4. Glyphs We also need to store information about every character - or glyph in the atlas, otherwise we wouldn't know how to display it: struct Glyph { ushort code; // unicode value ushort index; // freetype glyph index byte width; // width of the glyph in pixels byte height; // height of the glyph in pixels byte advance; // number of pixels to advance on x axis char bearingX; // x offset of top-left corner from x axis char bearingY; // y offset of top-left corner from y axis byte textureX; // x pixel coord of the bitmap's bottom-left corner ushort textureY;// y pixel coord of the bitmap's bottom-left corner }; Since we could have a lot of these glyphs (several thousand in fact), it's in our (and L2 cache) best interest to keep them small. In this case, each glyph has been optimized to be exactly 12 bytes in size and keep all the needed information to render and place a glyph. To make glyph lookup faster, they are placed in a vector and sorted by the unicode character value. Each lookup is done with binary-search, which keeps it consistent and very fast. We should also remember that OpenGL textures are bottom-up, so pixel 0 would be the bottom-most and pixel N the topmost. 5. OpenGL 3.1 and a custom Text Shader Now that we have everything we need, we actually have to display the glyphs on the screen. In OpenGL, everything is displayed by using Triangles and the same applies to this case. With some additional testing, I found that using a single Vertex Buffer Object with 6 vertices per glyph is the fastest and most memory efficient version. This is mostly due to the small size of the Vertex2D structure: struct Vertex2D { float x, y; // position.xy float u, v; // coord.uv }; The generated glyph Quad itself looks something like this: The simplest fragment shader to display our text in any color: #version 140 // OpenGL 3.1 varying vec2 vCoord; // vertex texture coordinates uniform sampler2D diffuseTex; // alpha mapped texture uniform vec4 diffuseColor; // actual color for this text void main(void) { // multiply alpha with the font texture value gl_FragColor = vec4(diffuseColor.rgb, texture2D(diffuseTex, vCoord).r * diffuseColor.a); } Which basically gives our Quad a color of diffuseColor.rgb and makes it transparent by using the font-atlas texture. Once displayed on the screen, both filled and wireframe views of the same text: Great! We now have a neat mono-space font perfect for displaying readable text. 6. Freetype If we dig through some Freetype documentation, we will notice that the library also supports: Glyph stroke - Will give a neat outline to our fonts Glyph outline - You can just render an outline of a character. Glyph emboldening - You won't need a 'bold' font. Glyph slanting - You can generate italic text on the go. Auto-hinting - Makes small text more readable (http://en.wikipedia....ki/Font_hinting) Using some simple code-sorcery, we can also add text shadows, which makes small text several times more readable on pretty much any background. Stroke effect (48px white font + 3px black stroke): Outline effect (48px white font + 1.5px outline): Shadow effect (48px white font + 2px black shadow): 7. Magic of Stroke and Shadows The stroke and shadow effect can have their own Outline color, in order to achieve this, we actually need to use another channel - Green. So for stroked and shadowed text a 2-channel Red-Green texture is generated instead of a 1-channel Red. The best way is just to show the generated Red-Green texture: You can see how powerful this sort glyph imaging is, since you can combine any kind of Diffuse and Outline colors to create your text effects. Best of all, fonts that don't use this effect still use a single 1-channel Red bitmap. Even though the glyphs look really sharp and anti-aliased, they can be made blurry by just lowering the Outline alpha. The shader used to combine this effect and work consistently for both 1-channel and 2-channel bitmaps, looks like this: #version 140 // OpenGL 3.1 varying vec2 vCoord; // vertex texture coordinates uniform sampler2D diffuseTex; // alpha mapped texture uniform vec4 diffuseColor; // actual color for this text uniform vec4 outlineColor; // outline (or shadow) color for the text void main(void) { vec2 tex = texture2D(diffuseTex, vCoord).rg; // color consists of the (diffuse color * main alpha) + (background color * outline alpha) vec3 color = (diffuseColor.rgb * tex.r) + (outlineColor.rgb * tex.g); // make the main alpha more pronounced, makes small text sharper tex.r = clamp(tex.r * 2.0, 0.0, 1.0); // alpha is the sum of main alpha and outline alpha // main alpha is main font color alpha // outline alpha is the stroke or shadow alpha float mainAlpha = tex.r * diffuseColor.a; float outlineAlpha = tex.g * outlineColor.a * diffuseColor.a; gl_FragColor = vec4(color, mainAlpha + outlineAlpha); } It looks a bit more complex, but the idea is simple: combine R and Diffuse, combine G and Outline, add them together. 8. Going Unicode Now it's nice that we could achieve all this with plain ASCII, but we still haven't touched Unicode. The main reason it's so hard to support Unicode, is because there are thousands of combinations of different glyphs. It's impossible to generate all of them into a single texture - you'll easily overflow the 16384px limitation of OpenGL textures. Worst of all, even if you generate all of them, you'll probably only use 5% of them. This is also something that freetype-gl is bad at. It's only useful for generatic a limited subset of glyphs into a single texture. If you want to support unicode, you'll go crazy with such a system. To be honest, I also had to scratch my head quite a bit on how to solve this. If I were to use regular texture coordinates [0.0 - 1.0] on the glyph quads, they would immediatelly break if I resized the font-atlas texture. So using any conventional means pretty much flies out of the window. The solution is pretty obvious, I have to use pixel values for the texture coordinates and generate the actual texture coordinates in the Vertex Shader. Now if I add glyphs to the end of the texture, thus resizing it, I won't break any glyph coordinates. The Vertex Shader: #version 140 // OpenGL 3.1 attribute vec4 vertex; // vertex position[xy] and texture coord[zw] uniform mat4 transform; // transformation matrix; also contains the depth information uniform sampler2D diffuseTex; // alpha mapped texture varying vec2 vCoord; // out vertex texture coord for frag void main(void) { // we only need xy here, since the projection is trusted to be // orthographic. Any depth information is encoded in the transformation // matrix itself. This helps to minimize the bandwidth. gl_Position = transform * vec4(vertex.xy, 0.0, 1.0); // since texture coordinates are in pixel values, we'll need to // generate usable UV's on-the-go // send the texture coordinates to the fragment shader: vCoord = vertex.zw / textureSize(diffuseTex, 0); } The code for generating text looks like this: Font* font = new Font(); font->LoadFile("fonts/veronascript.ttf", 48, FONT_STROKE, 3.0f); VertexBuffer* text = new VertexBuffer(); font->GenerateStaticText(text, L"VeronaScript"); If I were to include any unicode characters like õäöü, the font atlas would automatically generate the glyphs on-demand and add them into the atlas. font->GenerateStaticText(text, L"Unicode õäöü"); Here's a simple before-after comparison: With this neat feature, we can support the entire unicode range, as long as the entire range isn't in actual use. If the texture size reaches its limit of 16384px, no more glyphs are generated and all subsequent glyphs will be displayed using the 'invalid glyph'. 9. Addendum In the first paragraph, four problems of current 0 A.D. texture fonts were raised. Now we have provided solutions to all of them: Freetype allows dynamic font scaling. Freetype provides dynamic font effects (stroke, outline, embolden, italic). Unicode support depends on the .ttf font. The provided method ensures reasonable unicode support. Freetype provides auto-hinting, which drastically improves small text readability. The new Freetype OpenGL font system solves all these issues by introducing truly scalable vector font support, with any required font effects and full Unicode support. From my own testing I've ascertained that using shadow style drastically improves readability of text. Regarding performance: Even with large volumes of text, there was no noticeable performance hit. Volumes of text that are all in a single Vertex Buffer Object especially benefit from very fast render times. The more text you can send to the GPU in a single VBO, the faster the rendering should be in theory. What's still left to do: Implement embolden, slanting, underline, strikethrough. Improve the naive shelf-packing algorithm to achieve better texture space usage. (performance) Improve font-face loading to share between font-atlases. (performance) Buffer all static text into a single Vertex Buffer Object, render by offset into buffer. (performance) Implement this beast into 0 A.D. I hope you liked this little introspect into the world of real-time text rendering. Regards, - RedFox About Jorma Rebane aka 'RedFox': Jorma is a 22-year old Real-Time Systems programmer, studies Computer Engineering at Universitas Tartuensis and enjoys anything tech related. His weapon of choice is C++.

http://trac.wildfiregames.com/ticket/1967 Modeling an Oryx. It's a big to high poly this time, (currently 850 triangles). I was aiming for 700, like specified in the art document, but there is plenty of regions that could be simplified, but I figured I'd finish this model first before tweaking it for 0AD I've been rigging it up to see how it looks (but it's not quite finished). Here is a sample