gl-render-text

Renders text to a WebGL texture

npm install gl-render-text
2 downloads in the last week
13 downloads in the last month

gl-render-text

Renders text into a WebGL texture so you can draw it.

Example

var shell = require("gl-now")()
var createShader = require("gl-shader")
var drawTriangle = require("a-big-triangle")
var createText = require("gl-render-text")

var shader, text

shell.on("gl-init", function() {
  var gl = shell.gl

  shader = createShader(gl,
  "attribute vec2 position;\
  varying vec2 tc;\
  void main() {\
    gl_Position=vec4(position,0.0,1.0);\
    tc=0.5*(vec2(1.0+position.x, 1.0-position.y));\
  }",
  "precision highp float;\
  uniform sampler2D texture;\
  varying vec2 tc;\
  void main() {\
    vec4 color = texture2D(texture, tc);\
    gl_FragColor = vec4(tc, color.a, 1.0);\
  }")

  text = createText(gl, "test string")
})

shell.on("gl-render", function() {
  shader.bind()
  shader.uniforms.texture = text
  drawTriangle(shell.gl)
})

Install

npm install gl-render-text

API

var text = require("gl-render-text")(gl, str[, options])

Creates a gl-texture2d object containing a rendering of the given string.

  • gl is the WebGL context you want to create the texture in.
  • str is the string to be rendered
  • options is an optional object that you can use to specify a list of the following pramaters:
    • font is the font-family/font name to use
    • size is the height of the font in pixels
    • color is the color of the font to render, represented as a 3d array of numbers in the range [0,255] inclusive representing the color rgb color value
    • style is an optional style string, like bold, italic, underline etc.

Returns A texture2d object containing the rendered text.

Credits

(c) 2013 Mikola Lysenko. MIT License

npm loves you