<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><style type="text/css">
p, li { white-space: pre-wrap; }
</style></head><body style=" font-family:'Ubuntu'; font-size:11pt; font-weight:400; font-style:normal;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">A place for every pixel and ever pixel in its place</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">After sweating out some tricky vector manipulations to convert accurately between Freetype pixels and OpenGL texture coordinates, I am happy to say that Freetype fonts are now rendering to just the level of the precision I had hoped for. To verify that, I blow the glyphs up to gigantic proportions and obsess over each pixel. See font15.png for example, a 20 point strike of Liberation Sans Regular at 72 dpi. This is pixel for pixel the same as Freetype renders to the screen in 2D text mode. When rendered at the correct scale and with appropriate filtering this font looks both crisp and smooth as you can see from the glyph album drawn to the left at correct viewing scale.</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">But what about smaller point sizes? See font16.png, a 10 point font at 72 dpi, or in other words an "em box" of 10x10 pixels. That is really a ridiculously small number of pixels, but the font comes out perfectly legible as you can see. What is more, it does not alias when moving across on the screen or rotating. I'm sorry, but I'm just going to have to call that magic.</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">Cranking up the resolution, font17.png is a 40 point strike, and you start to see the quality of this lovely, free typeface. Font18.png adds the edge enhancement effect I described last post, based on a full color texture as opposed to a pure alpha representation. This has promise - the glyphs seem to jump right off the page at you, yet the effect is subtle enough to go unnoticed if you are not paying close attention. Unfortunately, along with the nice border effect comes some extra jagginess. I do not think there is any fundamental reason why this should be, it is most likely just my less than perfect attention to the mathematical details. Later when I hope to return to this and improve the technique to eliminate the bumps while keeping the attractive sharp edge effect. In the mean time, it says around as an option.</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">Font19.png is an amusing inverse effect where the characters are rendered as transparent instead of colored pixels. And finally, font20.png shows rotated text, which has exactly the same quality as nonrotated text. This is highly desirable for its intended purpose, which is to replace GLC for rendering text tags onto 3D objects.</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">Legend:</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;"> font15.png 20 pt Liberation Sans Regular</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;"> font16.png 10 pt</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;"> font17.png 40 pt</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;"> font18.png 40 pt enhanced edges</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;"> font19.png 40 pt inverted</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;"> font20.png 12 pt rotated</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">The same renderer that shows the giant pixels for debugging is in fact the production renderer. Instead of telling it to render at texel size of one world unit (nominally one meter) we tell it to use a texel size just a little larger than one pixel. OpenGL's bilinear filtering combined with the antialiasing Freetype builds into the glyph bitmaps is enough to virtually eliminate aliasing. If texels are too large you notice them as lumpy edges, and if they are too small they alias. In between is a sweet spot with something like 10-20% leeway where the characters look good and do not flicker as they animate.</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">So with the basics under control, I am about ready for the final push to create a drop in replacement for GLC out of this. There were a few shortcuts to move this along, notably a simplistic album format that wastes more than half the texture space. But that can be fixed later. Now, the closer this gets to production the more I want it. Eliminating jaggies is like getting rid of hissing, pops and distortion from a stereo system: after you have heard the real thing, it is very hard to go back.</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">Regards,</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">Daniel</p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; "> </p></body></html>