gl-toy

2.0.3 • Public • Published

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

Package Sidebar

Install

npm i gl-toy

Weekly Downloads

2

Version

2.0.3

License

MIT

Last publish

Collaborators

  • mikolalysenko
  • wwwtyro
  • thibauts
  • mikkoh
  • yoshuawuyts
  • mattdesl
  • hughsk
  • chrisdickinson
  • tatumcreative
  • rezaali