TextTexture – rendering text in WebGL

Always wanted to paint nice text in WebGL but didn’t know how? 😉 Today’s your lucky day as I’m releasing this little snippet for creating “text textures” and then drawing them using custom shaders.

The trick behind efficient usage of texture space here is using three separate color channels to store the text shapes, as can be seen in the example below:

The alpha values coming from anti-aliasing while the text is rendered on the canvas are premultiplied with the text color because the alpha channel of the image cannot be shared among the color channels.

This approach can also be used to render separate Unicode characters into the texture and compose text of multiple geometries, as it was often done in the good ol’ OpenGL days. By keeping it the way it is, you save on geometry size (probably not very significant) and possibly get whatever text layout benefits (e.g. better letters spacing) that come from rendering whole words on the canvas (this might be domain of advanced text editors though, I’m not sure if it’s really present in HTML5 canvas).

Anyhow, it’s the most efficient way of storing big portions of Unicode table in a texture. Rendering it using GL_POINTS should also be possible, providing full versatility and performance.

Enjoy: http://algoholic.eu/workspace/TextTexture/demo.html

DOWNLOAD: TextTexture.zip

Leave a Reply

Your email address will not be published. Required fields are marked *