├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── example └── example.js ├── index.js ├── package.json └── screenshot.png /.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/* -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 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 | example/* 17 | screenshot.png -------------------------------------------------------------------------------- /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-now 2 | ====== 3 | Create a WebGL context right now! 4 | 5 | This module is an extension of [game-shell](https://github.com/mikolalysenko/game-shell) that creates a WebGL enabled canvas and adds it to the specified container. 6 | 7 | ## Example 8 | 9 | [Try this demo in your browser](http://mikolalysenko.github.io/gl-now/) 10 | 11 | ```javascript 12 | //Initialize shell 13 | var shell = require("gl-now")() 14 | 15 | shell.on("gl-init", function() { 16 | var gl = shell.gl 17 | 18 | //Create fragment shader 19 | var fs = gl.createShader(gl.FRAGMENT_SHADER) 20 | gl.shaderSource(fs, [ 21 | "void main() {", 22 | "gl_FragColor = vec4(1, 0, 0, 1);", 23 | "}"].join("\n")) 24 | gl.compileShader(fs) 25 | 26 | //Create vertex shader 27 | var vs = gl.createShader(gl.VERTEX_SHADER) 28 | gl.shaderSource(vs, [ 29 | "attribute vec3 position;", 30 | "void main() {", 31 | "gl_Position = vec4(position, 1.0);", 32 | "}"].join("\n")) 33 | gl.compileShader(vs) 34 | 35 | //Link 36 | var shader = gl.createProgram() 37 | gl.attachShader(shader, fs) 38 | gl.attachShader(shader, vs) 39 | gl.linkProgram(shader) 40 | gl.useProgram(shader) 41 | 42 | //Create buffer 43 | gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()) 44 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 45 | -1, 0, 0, 46 | 0, -1, 0, 47 | 1, 1, 0 48 | ]), gl.STATIC_DRAW) 49 | 50 | //Set up attribute pointer 51 | var position_attribute = gl.getAttribLocation(shader, "position") 52 | gl.enableVertexAttribArray(position_attribute) 53 | gl.vertexAttribPointer(position_attribute, 3, gl.FLOAT, false, 0, 0) 54 | }) 55 | 56 | shell.on("gl-render", function(t) { 57 | var gl = shell.gl 58 | 59 | //Draw arrays 60 | gl.drawArrays(gl.TRIANGLES, 0, 3) 61 | }) 62 | 63 | shell.on("gl-error", function(e) { 64 | throw new Error("WebGL not supported :(") 65 | }) 66 | ``` 67 | 68 | Result: 69 | 70 | 71 | 72 | 73 | ## Install 74 | 75 | npm install gl-now 76 | 77 | # API 78 | 79 | ### `var shell = require("gl-now")([options])` 80 | 81 | Options is an object that takes the same fields as in [game-shell](https://github.com/mikolalysenko/game-shell#var-shell--requiregame-shelloptions) with the following additions: 82 | 83 | * `clearFlags` a list of flags to clear on redraw. (Default `gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT`) 84 | * `clearColor` a length 4 array representing background clear color. (Defaults to element's background-color or else `[0.2, 0.4, 0.8, 1.0]` 85 | * `clearDepth` value to clear depth buffer to (Defaults to `1.0`) 86 | * `clearStencil` value to clear stencil buffer to (Defaults to `0`) 87 | * `extensions` a list of necessary WebGL extensions to support. Vendor prefix optional. You can access these extensions later using [webglew](https://npmjs.org/package/webglew) 88 | * `glOptions` on object containing a set of parameters which are passed to the webgl context directly. 89 | 90 | ## Events 91 | 92 | In addition to all the events inherited from [game-shell](https://github.com/mikolalysenko/game-shell#events), `gl-now` adds the following events: 93 | 94 | ### `gl-init` 95 | Called once the WebGL context is initialized 96 | 97 | ### `gl-render([frame_time])` 98 | Called at the start of the WebGL frame. 99 | 100 | ### `gl-error(reason)` 101 | Called if there was an error initializing webgl 102 | 103 | ### `gl-resize(width, height)` 104 | Called when the WebGL window is resized 105 | 106 | 107 | ## Properties 108 | 109 | Finally `gl-now` adds the following extra properties to `game-shell`: 110 | 111 | ### `shell.gl` 112 | 113 | The WebGL context 114 | 115 | ### `shell.canvas` 116 | 117 | The canvas object 118 | 119 | ### `shell.width` 120 | 121 | The width of the gl context 122 | 123 | ### `shell.height` 124 | 125 | The height of the context 126 | 127 | ### `shell.scale` 128 | 129 | The scale of the context, which defaults to 1. Set it to higher values for 130 | a smaller viewport and faster rendering at the expense of quality. 131 | 132 | ### `shell.mouse` 133 | A length 2 vector giving the current coordinate of the mouse on the screen 134 | 135 | ### `shell.prevMouse` 136 | A length 2 vector giving the previous coordinate of the mouse on the screen 137 | 138 | # Credits 139 | (c) 2013 Mikola Lysenko. MIT License 140 | -------------------------------------------------------------------------------- /example/example.js: -------------------------------------------------------------------------------- 1 | var shell = require("../index.js")() 2 | 3 | shell.on("gl-init", function() { 4 | var gl = shell.gl 5 | 6 | //Create fragment shader 7 | var fs = gl.createShader(gl.FRAGMENT_SHADER) 8 | gl.shaderSource(fs, [ 9 | "void main() {", 10 | "gl_FragColor = vec4(1, 0, 0, 1);", 11 | "}"].join("\n")) 12 | gl.compileShader(fs) 13 | 14 | //Create vertex shader 15 | var vs = gl.createShader(gl.VERTEX_SHADER) 16 | gl.shaderSource(vs, [ 17 | "attribute vec3 position;", 18 | "void main() {", 19 | "gl_Position = vec4(position, 1.0);", 20 | "}"].join("\n")) 21 | gl.compileShader(vs) 22 | 23 | //Link 24 | var shader = gl.createProgram() 25 | gl.attachShader(shader, fs) 26 | gl.attachShader(shader, vs) 27 | gl.linkProgram(shader) 28 | gl.useProgram(shader) 29 | 30 | //Create buffer 31 | gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()) 32 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 33 | -1, 0, 0, 34 | 0, -1, 0, 35 | 1, 1, 0 36 | ]), gl.STATIC_DRAW) 37 | 38 | //Set up attribute pointer 39 | var position_attribute = gl.getAttribLocation(shader, "position") 40 | gl.enableVertexAttribArray(position_attribute) 41 | gl.vertexAttribPointer(position_attribute, 3, gl.FLOAT, false, 0, 0) 42 | }) 43 | 44 | shell.on("gl-render", function(t) { 45 | var gl = shell.gl 46 | 47 | //Draw arrays 48 | gl.drawArrays(gl.TRIANGLES, 0, 3) 49 | }) -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var makeGameShell = require("game-shell") 4 | var webglew = require("webglew") 5 | 6 | function createGLShell(options) { 7 | options = options || {} 8 | 9 | var extensions = options.extensions || [] 10 | 11 | //First create shell 12 | var shell = makeGameShell(options) 13 | var scale = shell.scale || 1 14 | var contextOptions = options.glOptions 15 | 16 | shell.on("init", function initGLNow() { 17 | 18 | //Create canvas 19 | var canvas = document.createElement("canvas") 20 | 21 | //Try initializing WebGL 22 | var gl = canvas.getContext("webgl", contextOptions) || 23 | canvas.getContext("experimental-webgl", contextOptions) 24 | if(!gl) { 25 | shell.emit("gl-error", new Error("Unable to initialize WebGL")) 26 | return 27 | } 28 | 29 | //Check extensions 30 | var ext = webglew(gl) 31 | for(var i=0; i