├── .gitignore ├── LICENSE ├── README.md ├── example └── example.js ├── package.json └── text.js /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules/* 16 | *.DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2013 Mikola Lysenko 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | gl-render-text 2 | ============== 3 | Renders text into a WebGL texture so you can draw it. 4 | 5 | Example 6 | ======= 7 | 8 | ```javascript 9 | var shell = require("gl-now")() 10 | var createShader = require("gl-shader") 11 | var drawTriangle = require("a-big-triangle") 12 | var createText = require("gl-render-text") 13 | 14 | var shader, text 15 | 16 | shell.on("gl-init", function() { 17 | var gl = shell.gl 18 | 19 | shader = createShader(gl, 20 | "attribute vec2 position;\ 21 | varying vec2 tc;\ 22 | void main() {\ 23 | gl_Position=vec4(position,0.0,1.0);\ 24 | tc=0.5*(vec2(1.0+position.x, 1.0-position.y));\ 25 | }", 26 | "precision highp float;\ 27 | uniform sampler2D texture;\ 28 | varying vec2 tc;\ 29 | void main() {\ 30 | vec4 color = texture2D(texture, tc);\ 31 | gl_FragColor = vec4(tc, color.a, 1.0);\ 32 | }") 33 | 34 | text = createText(gl, "test string") 35 | }) 36 | 37 | shell.on("gl-render", function() { 38 | shader.bind() 39 | shader.uniforms.texture = text 40 | drawTriangle(shell.gl) 41 | }) 42 | ``` 43 | 44 | Install 45 | ======= 46 | 47 | npm install gl-render-text 48 | 49 | API 50 | === 51 | 52 | ### `var text = require("gl-render-text")(gl, str[, options])` 53 | Creates a [gl-texture2d object](https://github.com/mikolalysenko/gl-texture2d) containing a rendering of the given string. 54 | 55 | * `gl` is the WebGL context you want to create the texture in. 56 | * `str` is the string to be rendered 57 | * `options` is an optional object that you can use to specify a list of the following pramaters: 58 | + `font` is the font-family/font name to use 59 | + `size` is the height of the font in pixels 60 | + `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 61 | + `style` is an optional style string, like bold, italic, underline etc. 62 | 63 | **Returns** A texture2d object containing the rendered text. 64 | 65 | ## Credits 66 | (c) 2013 Mikola Lysenko. MIT License 67 | -------------------------------------------------------------------------------- /example/example.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var shell = require("gl-now")() 4 | var createShader = require("gl-shader") 5 | var drawTriangle = require("a-big-triangle") 6 | var createText = require("../text.js") 7 | 8 | var shader, text 9 | 10 | shell.on("gl-init", function() { 11 | var gl = shell.gl 12 | 13 | shader = createShader(gl, 14 | "attribute vec2 position;\ 15 | varying vec2 tc;\ 16 | void main() {\ 17 | gl_Position=vec4(position,0.0,1.0);\ 18 | tc=0.5*(vec2(1.0+position.x, 1.0-position.y));\ 19 | }", 20 | "precision highp float;\ 21 | uniform sampler2D texture;\ 22 | varying vec2 tc;\ 23 | void main() {\ 24 | vec4 color = texture2D(texture, tc);\ 25 | gl_FragColor = vec4(tc, color.a, 1.0);\ 26 | }") 27 | 28 | text = createText(gl, "test string") 29 | }) 30 | 31 | shell.on("gl-render", function() { 32 | shader.bind() 33 | shader.uniforms.texture = text 34 | drawTriangle(shell.gl) 35 | }) 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gl-render-text", 3 | "version": "0.0.1", 4 | "description": "Renders text to a WebGL texture", 5 | "main": "text.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "dependencies": { 10 | "bit-twiddle": "~0.0.2", 11 | "gl-texture2d": "~0.1.4" 12 | }, 13 | "devDependencies": { 14 | "gl-now": "~0.0.4", 15 | "a-big-triangle": "~0.0.0", 16 | "gl-shader": "~0.0.6" 17 | }, 18 | "scripts": { 19 | "test": "echo \"Error: no test specified\" && exit 1" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git://github.com/mikolalysenko/gl-render-text.git" 24 | }, 25 | "keywords": [ 26 | "text", 27 | "webgl", 28 | "string", 29 | "font", 30 | "render", 31 | "texture" 32 | ], 33 | "author": "Mikola Lysenko", 34 | "license": "MIT", 35 | "readmeFilename": "README.md", 36 | "gitHead": "4cb314c513a00b9f1963b1400bff8415f9d9321f", 37 | "bugs": { 38 | "url": "https://github.com/mikolalysenko/gl-render-text/issues" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /text.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var createTexture = require("gl-texture2d") 4 | var bits = require("bit-twiddle") 5 | var drawCanvas = document.createElement("canvas") 6 | var drawContext = drawCanvas.getContext("2d") 7 | 8 | function makeColorString(rgb) { 9 | return "rgba(" + rgb.map(function(x) { 10 | if(x < 0) { 11 | return "0" 12 | } else if(x < 16) { 13 | return 255.0*x 14 | } else if(x >= 255) { 15 | return "255" 16 | } 17 | return (x|0).toString(16) 18 | }, "1.0").join("") 19 | } 20 | 21 | function createText(gl, str, options) { 22 | options = options || {} 23 | 24 | var fontFamily = options.font ? " " + options.font : " monospace" 25 | var fontSize = options.size || 56 26 | var fontColor = options.color || [0,0,0] 27 | var fontStyle = options.style ? options.style + " " : "" 28 | var font = [fontStyle, fontSize, "px", fontFamily].join("") 29 | 30 | drawContext.font = font 31 | drawContext.textAlign = "center" 32 | drawContext.textBaseline = "middle" 33 | var dims = drawContext.measureText(str) 34 | 35 | var w = bits.nextPow2(dims.width) 36 | var h = bits.nextPow2(2 * (fontSize|0)) 37 | 38 | drawCanvas.width = w 39 | drawCanvas.height = h 40 | 41 | drawContext.clearRect(0, 0, w, h) 42 | 43 | drawContext.fillStyle = makeColorString(fontColor) 44 | drawContext.font = font 45 | drawContext.textAlign = "center" 46 | drawContext.textBaseline = "middle" 47 | drawContext.fillText(str, w/2, h/2) 48 | 49 | var texture = createTexture(gl, drawCanvas) 50 | texture.generateMipmap() 51 | texture.magFilter = gl.LINEAR 52 | texture.minFilter = gl.LINEAR_MIPMAP_LINEAR 53 | 54 | return texture 55 | } 56 | 57 | module.exports = createText --------------------------------------------------------------------------------