├── screenshot.png ├── images └── screenshot.png ├── .gitignore ├── .npmignore ├── vao.js ├── package.json ├── lib ├── vao-emulated.js ├── do-bind.js └── vao-native.js ├── LICENSE ├── example └── example.js └── README.md /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackgl/gl-vao/HEAD/screenshot.png -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackgl/gl-vao/HEAD/images/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 | images/* -------------------------------------------------------------------------------- /vao.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var createVAONative = require("./lib/vao-native.js") 4 | var createVAOEmulated = require("./lib/vao-emulated.js") 5 | 6 | function ExtensionShim (gl) { 7 | this.bindVertexArrayOES = gl.bindVertexArray.bind(gl) 8 | this.createVertexArrayOES = gl.createVertexArray.bind(gl) 9 | this.deleteVertexArrayOES = gl.deleteVertexArray.bind(gl) 10 | } 11 | 12 | function createVAO(gl, attributes, elements, elementsType) { 13 | var ext = gl.createVertexArray 14 | ? new ExtensionShim(gl) 15 | : gl.getExtension('OES_vertex_array_object') 16 | var vao 17 | 18 | if(ext) { 19 | vao = createVAONative(gl, ext) 20 | } else { 21 | vao = createVAOEmulated(gl) 22 | } 23 | vao.update(attributes, elements, elementsType) 24 | return vao 25 | } 26 | 27 | module.exports = createVAO 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gl-vao", 3 | "version": "1.3.0", 4 | "description": "Vertex array object wrapper/shim for WebGL", 5 | "main": "vao.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "dependencies": {}, 10 | "devDependencies": { 11 | "gl-now": "^1.3.1", 12 | "gl-buffer": "^2.0.7", 13 | "glslify": "^1.4.0" 14 | }, 15 | "scripts": { 16 | "test": "echo \"Error: no test specified\" && exit 1", 17 | "start": "beefy example/example.js --open -- --transform glslify" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git://github.com/stackgl/gl-vao.git" 22 | }, 23 | "keywords": [ 24 | "vertex", 25 | "array", 26 | "object", 27 | "oes", 28 | "extension", 29 | "webgl", 30 | "gl", 31 | "graphics" 32 | ], 33 | "author": "Mikola Lysenko", 34 | "license": "MIT", 35 | "readmeFilename": "README.md", 36 | "gitHead": "49233a7e29c1507cc25173f3e333f0859081fc81", 37 | "bugs": { 38 | "url": "https://github.com/stackgl/gl-vao/issues" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /lib/vao-emulated.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var bindAttribs = require("./do-bind.js") 4 | 5 | function VAOEmulated(gl) { 6 | this.gl = gl 7 | this._elements = null 8 | this._attributes = null 9 | this._elementsType = gl.UNSIGNED_SHORT 10 | } 11 | 12 | VAOEmulated.prototype.bind = function() { 13 | bindAttribs(this.gl, this._elements, this._attributes) 14 | } 15 | 16 | VAOEmulated.prototype.update = function(attributes, elements, elementsType) { 17 | this._elements = elements 18 | this._attributes = attributes 19 | this._elementsType = elementsType || this.gl.UNSIGNED_SHORT 20 | } 21 | 22 | VAOEmulated.prototype.dispose = function() { } 23 | VAOEmulated.prototype.unbind = function() { } 24 | 25 | VAOEmulated.prototype.draw = function(mode, count, offset) { 26 | offset = offset || 0 27 | var gl = this.gl 28 | if(this._elements) { 29 | gl.drawElements(mode, count, this._elementsType, offset) 30 | } else { 31 | gl.drawArrays(mode, offset, count) 32 | } 33 | } 34 | 35 | function createVAOEmulated(gl) { 36 | return new VAOEmulated(gl) 37 | } 38 | 39 | module.exports = createVAOEmulated -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /example/example.js: -------------------------------------------------------------------------------- 1 | var shell = require("gl-now")() 2 | var createBuffer = require("gl-buffer") 3 | var createVAO = require("../vao.js") 4 | var glslify = require("glslify") 5 | 6 | var createShader = glslify({ 7 | vertex: "\ 8 | attribute vec2 position;\ 9 | attribute vec3 color;\ 10 | varying vec3 fragColor;\ 11 | void main() {\ 12 | gl_Position = vec4(position, 0, 1.0);\ 13 | fragColor = color;\ 14 | }", 15 | fragment: "\ 16 | precision highp float;\ 17 | varying vec3 fragColor;\ 18 | void main() {\ 19 | gl_FragColor = vec4(fragColor, 1.0);\ 20 | }", 21 | inline: true 22 | }) 23 | 24 | var vao, shader 25 | 26 | shell.on("gl-init", function() { 27 | var gl = shell.gl 28 | 29 | //Create shader object 30 | shader = createShader(gl) 31 | shader.attributes.position.location = 0 32 | shader.attributes.color.location = 1 33 | 34 | //Create vertex array object 35 | vao = createVAO(gl, [ 36 | { "buffer": createBuffer(gl, [-1, 0, 0, -1, 1, 1]), 37 | "type": gl.FLOAT, 38 | "size": 2 39 | }, 40 | [0.8, 1, 0.5] 41 | ]) 42 | }) 43 | 44 | shell.on("gl-render", function(t) { 45 | var gl = shell.gl 46 | 47 | //Bind the shader 48 | shader.bind() 49 | 50 | //Bind vertex array object and draw it 51 | vao.bind() 52 | vao.draw(gl.TRIANGLES, 3) 53 | 54 | //Unbind vertex array when fini 55 | vao.unbind() 56 | }) -------------------------------------------------------------------------------- /lib/do-bind.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | function doBind(gl, elements, attributes) { 4 | if(elements) { 5 | elements.bind() 6 | } else { 7 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null) 8 | } 9 | var nattribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS)|0 10 | if(attributes) { 11 | if(attributes.length > nattribs) { 12 | throw new Error("gl-vao: Too many vertex attributes") 13 | } 14 | for(var i=0; i 73 | 74 | ## Install 75 | 76 | Use [npm](https://npmjs.org/): 77 | 78 | npm install gl-vao 79 | 80 | To compile demos in for your browser try [browserify](https://github.com/substack/node-browserify) or [beefy](https://github.com/chrisdickinson/beefy). 81 | 82 | ## API 83 | 84 | ```javascript 85 | var createVAO = require("gl-vao") 86 | ``` 87 | 88 | ### `var vao = createVAO(gl, attributes[, elements][, elementsType])` 89 | Creates a vertex array object 90 | 91 | * `gl` is the gl context in which the vertex array object is created 92 | * `attributes` is an array of objects that give the attributes bound to particular locations starting at 0. Each of these attributes is either an array-like object of length 4 or less representing a constant attribute value, or else it is an object with the following properties that correspond to the parameters passed to [`gl.vertexAttribPointer`](http://www.khronos.org/opengles/sdk/docs/man/xhtml/glVertexAttribPointer.xml) 93 | 94 | + `buffer` a [`gl-buffer`](https://github.com/mikolalysenko/gl-buffer) object encoding a webgl buffer 95 | + `size` the size of the attribute (default 4) 96 | + `type` the type of the attribute (default `gl.FLOAT`) 97 | + `normalized` a flag that checks whether the attribute should be normalized or not 98 | + `stride` the stride of the attribute **in bytes** (default 0) 99 | + `offset` offset to the start of the attribute in the buffer **in bytes** (default 0) 100 | 101 | * `elements` is a buffer created using [`gl-buffer`](https://github.com/mikolalysenko/gl-buffer) encoding the state of the vertex elements 102 | 103 | * `elementsType` the type of data contained within the element buffer, if given. Defaults to `gl.UNSIGNED_SHORT`. Acceptable values are `gl.UNSIGNED_BYTE`, `gl.UNSIGNED_SHORT`. If the `OES_element_index_uint` extension is available and active, `gl.UNSIGNED_INT` may also be used. 104 | 105 | ### `vao.bind()` 106 | Binds the vertex array object to the active vertex state. 107 | 108 | ### `vao.unbind()` 109 | Unbinds the vertex array object. 110 | 111 | **Note** You should call this method before switching back to using vertex arrays and buffers as usual. Failing to do so can cause the state of the vertex array object to become corrupted. However, it is acceptable to skip the unbind step if another vertex array object is immediately bound. 112 | 113 | ### `vao.draw(mode, count[, offset])` 114 | Draws the vertex array object. 115 | 116 | * `mode` is the mode to use when drawing the buffer, for example `gl.TRIANGLES`, `gl.LINES`, etc. 117 | * `count` is the number of vertices to draw. 118 | * `offset` is the offset to start drawing from. Default `0` 119 | 120 | ### `vao.update(attributes[, elements][, elementsType])` 121 | Updates the contents of the vertex array object using the same syntax and conventions as the constructor. 122 | 123 | ### `vao.dispose()` 124 | Destroys the vertex array object and releases all of its resources. 125 | 126 | 127 | ## Credits 128 | (c) 2013 Mikola Lysenko. MIT License 129 | --------------------------------------------------------------------------------