There are two main ways to render text with WebGL.

Character Bitmap

This method is quite straightforward. First, draw all characters you need on a canvas (of course in 2D context). Then use the image as a texture map. But if you’re going to render text under many font sizes. You need to store many character bitmaps of different font sizes. I found a package doing this job.

Vectorized Text

The second way is to convert outline (usually Bézier curves) of characters into triangle mesh. Then draw the mesh by WebGL. I also found a package called vectorize-text doing this job. It’s also based on canvas. I think its implementation is a little bit hack. First, it draw your text with your options on an invisible large canvas. Second, it fetch all pixels and use a package called surface-nets to find all contours and simplify it by simplify-planar-graph. Finally, it cleans all planar straight line graphs by the help of clean-pslg. Because we want triangle meshes. It uses cdt2d to convert contours to meshes.

It seems that the whole process is really costly, especially when you want to vectorize a large amount of texts. I will do a performance test later on.

An OpenType Way

Last night, I tried a new way with OpenType. The main idea is to get glyph outlines directly from font files. Then convert them into triangle meshes. I think it can be the most accurate and fast way to draw text because the outlines are rasterized only once. The good news is that opentype.js has already taken kerning, OpenType features and hinting into account. But the bad news is you have to handle position (such as baseline, anchor) or even word wrap by yourself.

Conclusion

Well, no conclusion is drawn in this post. This post is a like a summary of my adventures. But I will finish it in next few days.