Better Quality Text in WebGL

Question

I am searching a method to draw better quality (arbitrary) text inside WebGL. Currently I am using bitmap font rendering on a 2D canvas and blitting them into the WebGL context.

Answer 1

Looking at the source code for three.js suggests a solution.

Here's the code for three.js font creation: FontUtils.js.

It says right at the top:

/*
 * For Text operations in three.js (See TextGeometry)
 *
 * It uses techniques used in:
 *
 *  typeface.js and canvastext
 *      For converting fonts and rendering with javascript
 *      https://gero3.github.io/facetype.js/
 *
 *  Triangulation ported from AS3
 *      Simple Polygon Triangulation
 *      http://actionsnippet.com/?p=1462
 *
 *  A Method to triangulate shapes with holes
 *      https://web.archive.org/web/20121018020533/https://www.sakri.net/blog/2009/06/12/an-approach-to-triangulating-polygons-with-holes/
 */

Typeface.js provides the font data and there's an online form to convert truetype fonts.

Other solutions:

1. Render the text to your bitmaps at a higher resolution and draw them at that resolution or smaller.

2. Use a curve renderer: Rendering Vector Art on the GPU.