about.md

shader-reload with budo

Say you want to use shader-reload on your current budo/ThreeJS application, but you don't want to use the glsl-server since you have some specific transforms or options you need.

You can write a new dev.js script (see below) and include any additional transforms you may want (babel, brfs, etc).

Now you can replace the budo command with node dev.js, and pass all other flags as usual.

Note: The utility handles live reloading for you (JS, HTML, CSS, GLSL), so you don't need to pass the --live or -l flags.

"scripts": {
  "start": "node dev.js src/index.js:bundle.js --dir public/ --open"
}

dev.js

const budo = require('budo');

// a utility that attaches shader reloading capabilities to budo
const attachShaderReload = require('shader-reload/bin/budo-attach');

const app = budo.cli(process.argv.slice(2), {
  live: false, // this will ignore the "--live" option if passed through CLI arguments
  browserify: {
    transform: [
      'babelify', // Optional, only if you are already using babel
      'glslify', // Optional, only if you need glslify
      'shader-reload/transform' // Required for live shader reloading
    ]
  }
});

// attach shader reloading to our budo app
if (app) attachShaderReload(app);