Skip to content

stackgl/gl-toy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jan 1, 2016
152e2f5 Â· Jan 1, 2016

History

11 Commits
Apr 25, 2015
Dec 8, 2014
Dec 8, 2014
Dec 8, 2014
Dec 8, 2014
Dec 8, 2014
Dec 8, 2014
Apr 25, 2015
Jan 1, 2016
Jan 1, 2016

Repository files navigation

gl-toy

NPM version Downloads

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

License

MIT