Create quick GLSL fragment shader demos.
$ npm install gl-toyvar 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.jsCreates 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.
Updates the current fragment shader with the new frag
string.
Resizes the canvas to fit within its parent element, using
canvas-fit.
A reference to gl-toy's canvas element.
A reference to gl-toy's WebGLRenderingContext.
A reference to gl-toy's instance of
gl-shader.
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.