Render text on canvas using WebGL

Question

Hi, I want to render some text on a canvas using WebGL, which API of WebGL should be used?

Note: "text" can be either plain text or HTML snippet with CSS style

Answer 1

Most demos that I've seen that do text of any sort (like a FPS counter) simply create an HTML element with the text they want and position it over the canvas. This would probably be a good approach for most text that you would want to show "in" a canvas (ie: menus).

The only exception would be if you want the text to be an actual part of the 3d scene (like, say, text on a billboard), in which case the methodologies wouldn't be any different than rendering text in standard OpenGL. You can find a very good robust example here: http://dmedia.dprogramming.com/?n=Tutorials.TextRendering1

Answer 2

For WebGL-rendered text, you can write text to a canvas "2d" context, then create a texture from the canvas. Denny Koch does that in his EnergizeGL framework: http://energize.cc/?page_id=364