gl-toy

Create quick GLSL fragment shader demos.

Installation

$ npm install gl-toy

Usage

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.js

toy = 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.

Contributors

• Yoshua Wuyts
• Hugh Kennedy

License

MIT