WebGL has no text rendering functions. But it’s pretty easy to create a texture with text using canvas 2D context:
You need a WebGL-enabled browser to see this.
The interesting code:
// an invisible CANVAS element, 512x512 pixels <canvas id="textureCanvas" style="display:none" width="512" height="512"></canvas> var textureCanvas = document.getElementById('textureCanvas') var ctx = canvas.getContext('2d');
// showcase live rendering by writing the current time
var date = new Date();
function two(number) {
if (number < 10)
return ‘0’ + number;
else
return number;
}
var text = two(date.getHours()) + ‘:’ +
two(date.getMinutes()) + ‘:’ +
two(date.getSeconds());
// let the color of the box rotate every minute
var secs = date.getSeconds() + date.getMilliseconds() / 1000;
ctx.fillStyle = ‘hsl(’ + 360 * (secs / 60) + ‘,100%,50%)’;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// write white text with black border
ctx.fillStyle = ‘white’;
ctx.lineWidth = 2.5;
ctx.strokeStyle = ‘black’;
ctx.save();
ctx.font = ‘bold 80px Verdana’;
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘middle’;
var leftOffset = ctx.canvas.width / 2;
var topOffset = ctx.canvas.height / 2;
ctx.strokeText(text, leftOffset, topOffset);
ctx.fillText(text, leftOffset, topOffset);
ctx.restore();
// bind our canvas to a 2D texture
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, textureCanvas);
gl.bindTexture(gl.TEXTURE_2D, null);