As part of my goal to write a custom GUI library for my own projects, I had to find a way to render text. There are different ways this can be done. Probably the most commonly used technique is to pre-render all glyphs in different sizes to so-called font atlases. When rendering text, the required glyphs are fetched from the font atlas and placed to the correct position on screen. As I was searching for different text rendering techniques I came across an article by Will Dobbie1 who describes a different approach. Instead of pre-rendering the letters, his version renders text in real-time using the GPU to improve performance.
Glyphs are made up of a series of bezier curves. Each bezier curve has a start, an end, and a control point.
By cleverly arranging the bezier curve description of a glyph inside a GPU buffer, a shader program runs for each pixel individually and determines if the pixel is inside or outside the glyph. (e.g. draw the pixel white if it is inside the glyph, black if outside) This technique allows for manipulating the glyph’s size, rotation or skew in real time without compromising resolution and without any potential frame drops that might happen when new font atlases need to be created.
Based on the technique described in Will Dobbie’s post I implemented my own text rendering algorithm. It uses some ideas from the slug algorithm2 to account for floating point precision issues.
