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);