Glyph Triangulation

Glyph Triangulation

This technique was employed when I was looking to render text using OpenGL in a web application.

It was never intended to be a permanent solution, rather just a placeholder to continue developing other areas of the application.

This approach rendered text by drawing triangles, and was used in an early Javascript/HTML/OpenGL version of my CAD application. The font glyphs were pre-rendered to a JSON structure to be included by OpenGL, via External link Three.js.

Employing External link Node.js, a Javascript program was written to pre-process the glyphs, and followed the following steps:

  1. The font file was converted from TTF to SVG format using External link Fontforge.
  2. The SVG file was imported as a XML.
  3. A SVG library was used to iterate over all the paths in each glyph.
  4. A poly-line was generated for each path (These could be nested depending upon the glyph).
  5. A poly-line simplification library was used to reduce the level of detail.
  6. Given TTF glyphs are non-intersecting outlines, a hierarchy of outlines and holes was created from the poly-lines.
  7. A polygon triangulation library was used to convert poly-lines into triangle meshes.
  8. The meshes were recorded to the JSON structure and rendered using OpenGL by the CAD application.

While it worked, glyphs needed generated in advance and files could be large.

This technique was replaced when the application was moved off the web.

TTF Font Rendering Quadratic Shader