JarCastinggl-buffer
A wrapper for WebGL buffer objects.
Example
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:
Install
npm install gl-buffer
API
var createBuffer = require("gl-buffer")
Constructor
The constructor for a GL buffer works as follows:
var buffer = createBuffer(gl[, data, type, usage])
glis a WebGL contextdatais either an integer, an array, a typed array, an array buffer or an ndarray representing the data of the buffer. Default is0typeis an optional parameter specifying the type of the webgl buffer. Default isgl.ARRAY_BUFFER.usageis 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. Defaultgl.DYNAMIC_DRAW
Properties
buffer.gl
A reference to the buffer's WebGL context
buffer.handle
A handle to the underlying WebGLBuffer object
buffer.type
The type of the buffer (either gl.ARRAY_BUFFER or gl.ELEMENT_ARRAY_BUFFER)
buffer.length
The size of the buffer in bytes
buffer.usage
The internal WebGL usage for the buffer.
Methods
buffer.bind()
Binds the buffer to the appropriate target. Equivalent to gl.bindBuffer( ... )
buffer.dispose()
Deletes the buffer releasing all associated resources. Equivalent to gl.deleteBuffer(...)
buffer.update(data[, offset])
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.
datathe new data to add to the buffer. This follows the same semantics as in the constructor.offsetthe offset in bytes to copy data into the buffer from or if unspecified then the buffer is resized by callinggl.bufferDatainstead ofgl.bufferSubData. Default0.
Credits
(c) 2013-2014 Mikola Lysenko. MIT License
