A wrapper for WebGL shaders. Part of stack.gl
Try it out now in your browser: http://stackgl.github.io/gl-shader/
var shell = require('gl-now')()
var createShader = require('gl-shader')
var shader, buffer
shell.on('gl-init', function() {
var gl = shell.gl
//Create shader
shader = createShader(gl,
'attribute vec3 position;\
varying vec2 uv;\
void main() {\
gl_Position = vec4(position, 1.0);\
uv = position.xy;\
}',
'precision highp float;\
uniform float t;\
varying vec2 uv;\
void main() {\
gl_FragColor = vec4(0.5*(uv+1.0), 0.5*(cos(t)+1.0), 1.0);\
}')
//Create vertex buffer
buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1, 0, 0,
0, -1, 0,
1, 1, 0
]), gl.STATIC_DRAW)
})
shell.on('gl-render', function(t) {
var gl = shell.gl
//Bind shader
shader.bind()
//Set attributes
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
shader.attributes.position.pointer()
//Set uniforms
shader.uniforms.t += 0.01
//Draw
gl.drawArrays(gl.TRIANGLES, 0, 3)
})Here is the result:
npm install gl-shader
var createShader = require('gl-shader')There are two main usages for the constructor. First,
Constructs a wrapped shader object with shims for all of the uniforms and attributes in the program.
glis the webgl context in which the program will be createdvertexSourceis the source code for the vertex shaderfragmentSourceis the source code for the fragment shaderuniformsis an (optional) list of all uniforms exported by the shader programattributesis an (optional) list of all attributes exported by the shader program
The optional uniforms and attributes arrays have the following format. This will be extracted at run-time from the shader, so you can typically omit the uniforms and attributes arguments.
{
uniforms: [
{ type: 'mat4', name: 'projection' },
{ type: 'sampler2D', name: 'texture0' }
],
attribuets: [
{ type: 'vec3', name: 'position' }
]
}You can specify a default location number for each attribute, otherwise WebGL will bind it automatically.
Returns A compiled shader object.
The same as above, but takes an object instead of a parameter list.
glis a WebGL contextopt.vertexa vertex shader sourceopt.fragmenta fragment shader sourceopt.uniforms(optional) a list of uniformsopt.attributes(optional) a list of attributes
Returns A wrapped shader object
Binds the shader for rendering
Rebuilds the shader object with new vertex and fragment shaders (same behavior as constructor)
Rebuilds the shader object with new vertex and fragment shaders (same behavior as constructor)
Deletes the shader program and associated resources.
The WebGL context associated to the shader
A reference to the underlying program object in the WebGL context
A reference to the underlying vertex shader object
A reference to the underlying fragment shader object
The uniforms for the shader program are packaged up as properties in the shader.uniforms object. The shader must be bound before the uniforms are assigned. For example, to update a scalar uniform you can just assign to it:
shader.bind()
shader.uniforms.scalar = 1.0While you can update vector uniforms by writing an array to them:
shader.uniforms.vector = [1,0,1,0]Matrix uniforms must have their arrays flattened first:
shader.uniforms.matrix = [ 1, 0, 1, 0,
0, 1, 0, 0,
0, 0, 1, 1,
0, 0, 0, 1 ]