Menu
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
235
Making text textures is probably the simplest and oldest way to draw text in WebGL. Open up Photoshop or some other raster graphics editor, draw an image with some text on it, then render these textures onto a quad and you are done! Alternatively, you could use the canvas to create the textures on demand at runtime.
HTML5 Canvas is also used to write WebGL applications. To create a WebGL rendering context on the canvas element, you should pass the string experimental-webgl, instead of 2d to the canvas. getContext() method. Some browsers support only 'webgl'.
Visuals make sense, but using text in canvas prints can be a powerful way to make a statement. Text is a strong design choice, especially used cleverly and combined with affordable, high-quality canvas prints.
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
There's also a WebGL tutorial about text here.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
