glslify-live

A browserify transform that transparently enables live reloading of your shaders when using glslify.

Usage

After installing glslify-live, run this from your project root to start up the live reloading server:

node_modules/.bin/glslify-live

If you're running it from a package.json script, you can just do:

glslify-live

Once that's running, you can simply include the glslify-live transform before glslify when you're bundling with browserify. In the commandline:

browserify -t glslify-live -t glslify

Or through browserify's JavaScript API:

var browserify = require('browserify')
var fs = require('fs')
 
var output = fs.createWriteStream('bundle.js')
var br = browserify('client.js')
 
br.transform('glslify-live')
br.transform('glslify')
 
br.bundle().pipe(output)

Detecting File Changes

You might want to respond to these automatic updates, especially considering that they may result in changing the values of your uniform/attribute variables.

In that case, you can simply require this module in your code and list to the update event:

var live = require('glslify-live')
 
live.on('update', function(filename, shaderInstance) {
  // do things here
})

If you're not applying the transform, all that you're loading up is an empty EventEmitter so it shouldn't be an issue including it in your code. Enjoy!

License

MIT. See LICENSE.md for details.