gl-simplified-vao

A simplified interface for creating vertex array objects without the need to calculate strides and offsets or perform seperate buffer allocations

The following code was shamelessly repurposed from the stack.gl vao project:

var shell = require("gl-now")()
var createVAO = require("gl-simplified-vao")
var glslify = require("glslify")
 
var createShader = glslify({
  vertex: "\
    attribute vec2 position;\
    attribute vec3 color;\
    varying vec3 fragColor;\
    void main() {\
      gl_Position = vec4(position, 0, 1.0);\
      fragColor = color;\
    }",
  fragment: "\
    precision highp float;\
    varying vec3 fragColor;\
    void main() {\
      gl_FragColor = vec4(fragColor, 1.0);\
    }",
  inline: true
})
 
var vao, shader
 
shell.on("gl-init", function() {
  var gl = shell.gl
  
  //Create shader object 
  shader = createShader(gl)
  shader.attributes.position.location = 0
  shader.attributes.color.location = 1
  
  //Create vertex array object 
  vao = createVAO(gl,[-1, 0 ,0.8, 1, 0.5, 
   0, -1,0.8, 1, 0.5,
   1, 1, 0.8, 1, 0.5], 
   [{'type': gl.FLOAT, 'size': 2},
    {'type': gl.FLOAT, 'size': 3}])
})
 
shell.on("gl-render", function(t) {
  var gl = shell.gl
 
  //Bind the shader 
  shader.bind()
  
  //Bind vertex array object and draw it 
  vao.vao.bind()
  vao.vao.draw(gl.TRIANGLES, 3)
  
  //Unbind vertex array when fini 
  vao.vao.unbind()
})

createVAO will return an object with two attributes:

• vao: the vertex array object to use
• buffer: the buffer object that was allocated for this array