gl-toy v2.0.3
gl-toy
Create quick GLSL fragment shader demos.
Installation
$ npm install gl-toyUsage
var glslify = require('glslify')
var toy = require('gl-toy')
var shader = glslify('./shader.frag')
var start = Date.now()
toy(shader, function(gl, shader) {
shader.uniforms.uScreenSize = [gl.drawingBufferWidth, gl.drawingBufferHeight]
shader.uniforms.uTime = Date.now() - start
})With beefy installed:
$ beefy ./index.jstoy = glToy(frag, update)
Creates a new shader renderer, attaching it to document.body and making
it fill the screen.
frag should be a fragment shader string you'd like to render using
a-big-triangle.
update(gl, shader) is called before drawing to the screen so that you
can update uniforms being passed into the program. Here, gl is a
WebGLRenderingContext and shader is an instance of
gl-shader.
toy.update(frag)
Updates the current fragment shader with the new frag
string.
toy.resize()
Resizes the canvas to fit within its parent element, using
canvas-fit.
toy.canvas
A reference to gl-toy's canvas element.
toy.gl
A reference to gl-toy's WebGLRenderingContext.
toy.shader
A reference to gl-toy's instance of
gl-shader.
Why?
WebGL and glslify can be a bit tricky to set up. This makes it easier to get something working quickly. It might not suit all use cases, but then again: neither does shadertoy.