gl-magic-uniforms

Create a magic getter/setter object for a given WebGLProgram's uniforms. This provides a standalone gl-shader-style interface for setting shader programs' uniforms that you can use in your own projects.

Usage

uniforms = Magic(gl, program[, uniforms[, opts]])

• gl is the WebGLRenderingContext that program is attached to.
• program is a WebGLProgram instance to modify the uniforms of.

Optionally, you can pass in a custom set of uniforms objects. This should be in the same format as the results of gl-shader-extract. If not supplied, uniforms are automatically inferred at runtime by inspecting program.

var uniforms = require('gl-magic-uniforms')
 
var canvas = document.createElement('canvas')
var gl = canvas.getContext('webgl')
var program = gl.createProgram()
var start = Date.now()
 
// ...setup the program object...
 
var uniforms = MagicUniforms(gl, program)
 
gl.useProgram(program)
uniforms.time = (Date.now() - start) / 1000
uniforms.light = [1, 0, 1, 1]

Uniforms can now be got and set by name, in the same style as documented in gl-shader.

Note: program must be in use when setting uniforms, or unexpected behavior may occur. This is not done by default to avoid an excess of calls to gl.useProgram.

Additionally, you can pass in the following options:

• opts.cacheScalars: if true, scalar uniforms (e.g. float, bool, int) will be cached where possible, reducing the amount of work for the GPU. Defaults to true.
• opts.cacheVectors: if true, vector uniforms will be cached where possible, provided they're 4 or less elements long. Defaults to false, as there are cases where this produces more overhead when enabled depending on how often these values change.

License

MIT. See LICENSE.md for details.