How Hard Can Text Rendering Really Be?

Today's goal: Lay the groundwork for TrueType font rendering!


  • Created a Discord for Flux Harmonic:
  • PNG saving now works (Thanks to libspng's author Randy for stopping by!)
  • I added some code for rotating and scaling rendered textures
  • Also made the preview area center itself and be scalable

Rendering TrueType fonts with OpenGL

Today we'll be using the long-lived FreeType library to load up a TrueType font so that we can extract glyphs for each letter, turn them into OpenGL textures, and render them to the screen.

Things we'll probably have to deal with:

  • Storing information about characters of different sizes
  • Kerning, to a basic degree (the space between characters)
  • Locating fonts by name using FontConfig (probably later)

We won't be adding things like text wrapping or alignment (yet), this code will just render a string from left to right.


DONE Use the FreeType library to load a font

DONE Render glyphs to OpenGL textures

DONE Write a function that can render a string by indexing the texture for each letter

Next Steps

TODO Find out how to make the text white instead of red!

TODO Improve the kerning of the text (or make it configurable)

TODO Maybe add a nice gradient to rendered text?

TODO Render all glyphs to a single texture atlas for performance

TODO Possibly "bake" a texture for static strings to reduce draw calls