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!

glslify-live

Usage

Detecting File Changes

License

Current Tags

12 Versions