OpenGL text terminal

About

This is a small demo program illustrating fontmap texture based text rendering in a single rendering pass, where a fragment shader reads a texture containing the text to render and performs the fontmap lookup in the shader.

Download source tarball

How it works

The program renders a textured rectangle, like this one:

    (0,0) ______ (1,0)
         |\     |
         | \    |
         |  \   |
         |   \  |
         |    \ |
         |_____\|
    (0,1)        (1,1)

A single channel, 8 bit unsigned integer texture is mapped onto the rectangle. Each texel contains a 7 bit ASCII (or 8 bit Latin-1, Codepage FOO or whatever) value.

The texture has only relatively small resolution (number of rows*columns, or in the demo: 16*16) and is sampled with nearest neighbor filtering, essentially partitioning the textured area into a number of cells, like this:

    (0,0) _______ (1,0)
         |_|_|_|_|
         |_|_|_|_|
         |_|_|_|_|
         |_|_|_|_|
         |_|_|_|_|
         |_|_|_|_|
    (0,1)         (1,1)

Where each cell will later contain a glyph from the fontmap.

Multiplying the texture coordinates with the number of texels for one character in the fontmap transforms the texture coordinates from [0,1] in both dimensions to [0,charwidth] and [0,charheight]. However, we want to paste more than one glyph onto the rectangle, so we multiply the result with the number of character slots for both dimensions and take the modulo of the glyph texel size.

In the fragment shader, the whole thing boils down to this:

uvec2 numchars = uvec2(textureSize(text_tex, 0));
vec2 char_coord = mod(texcoord * numchars * char_size, char_size);

This gives us the relative glyph texel coordinates, for each slot. The only thing that is left to do is offsetting it by the character index:

char_coord.x += char_size.x * mod(character, glyphs_per_row);
char_coord.y += char_size.y * (character / glyphs_per_row);

The final fontmap texture coordinate can be computed by dividing it by the fontmap texture size to get back to relative texture coordinates in [0,1] range:

vec2 coord = vec2(char_coord) / vec2(textureSize(font_tex, 0));

This wouldn't be neccessary if we simply use texelFetch, which needs actual texel coordinates, but we want to use the OpenGL builtin texture filtering behaviour for the fontmap.

Using the built in texture filters, we get bilinear interpolation and even mipmaping for our glyphs.

However, at the edges between the glyphs, we have large jumps in texture coordinates. This is a problem, since the normal texture lookup function uses the derivative of the texture coordinates to determine the mipmap level, wich would give us visible edges between the glyphs.

The solution is to supply manually calculated gradients for picking the mipmap level. Those gradients, however are computed from the original, unmodified, continuous texture coordinates, as if the fontmap was simply texture mapped onto the rect:

vec2 dx = dFdx(texcoord);
vec2 dy = dFdy(texcoord);

vec4 lcolor = textureGrad(font_tex, coord, dx, dy);

In the end, we simply blend the glyph color onto the background color:

COLOR0 = mix(lcolor, bgcolor, 1.0 - lcolor.a);

Possible Extensions

An interesting extension would be an implementation of the technique described in "Improved Alpha-Tested Magnification for Vector Textures and Special Effects" by Chris Green, VALVE Software.

This would require an additional distance field texture for the fontmap but could potentially result in a largely improved visual appearance.

Back to software snippets

Back to the Index