A wrapper for WebGL buffer objects.

View this demo in your browser

var shell = require("gl-now")()
var glslify = require("glslify")
var createBuffer = require("gl-buffer")

var createShader = glslify({
  vertex: "\
    attribute vec2 position;\
    varying vec2 uv;\
    void main() {\
      gl_Position = vec4(position, 0.0, 1.0);\
      uv = position.xy;\
    }",
  fragment: "\
    precision highp float;\
    uniform float tick;\
    varying vec2 uv;\
    void main() {\
      gl_FragColor = vec4(0.5*(uv+1.0), 0.5*(cos(tick)+1.0), 1.0);\
    }",
  inline: true
})

var buffer, shader

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

  //Create buffer
  buffer = createBuffer(gl, [-1, 0, 0,-1, 1, 1])

  //Create shader
  shader = createShader(gl)
  shader.attributes.position.location = 0
})

shell.on("gl-render", function(t) {
  var gl = shell.gl
  shader.bind()
  buffer.bind()
  shader.attributes.position.pointer()
  shader.uniforms.tick = Date.now() / 1000.0
  gl.drawArrays(gl.TRIANGLES, 0, 3)
})

Output:

npm install gl-buffer

var createBuffer = require("gl-buffer")

The constructor for a GL buffer works as follows:

• gl is a WebGL context
• type is an optional parameter specifying the type of the webgl buffer. Default is gl.ARRAY_BUFFER.
• handle is either an integer, an array, a typed array, an array buffer or an ndarray representing the data of the buffer. Default is 0
• length is an optional parameter that represents the number of indices of the handle
• usage is an optional parameter representing the intended usage for the buffer (in the WebGL sense). It is not clear this does anything in current WebGL implementations. Default `gl.DYNAMIC_DRAWl

A reference to the buffer's WebGL context

A handle to the underlying WebGLBuffer object

The type of the buffer (either gl.ARRAY_BUFFER or gl.ELEMENT_ARRAY_BUFFER)

The size of the buffer in bytes

The internal WebGL usage for the buffer.

Binds the buffer to the appropriate target. Equivalent to gl.bindBuffer( ... )

Unbinds the buffer. Equivalent to gl.bindBuffer(TYPE, null)

Deletes the buffer releasing all associated resources. Equivalent to gl.deleteBuffer(...)

Updates the data in the buffer. There are two basic modes to this function. In the first, it calls gl.bufferSubData to update a portion of the buffer in place, and in the second it calls gl.bufferData to completely resize the buffer.

• data the new data to add to the buffer. This follows the same semantics as in the constructor.
• offset the offset in bytes to copy data into the buffer from or if unspecified then the buffer is resized by calling gl.bufferData instead of gl.bufferSubData. Default 0.

(c) 2013-2014 Mikola Lysenko. MIT License