mere/browserify-shader

super simple shader loader plugin for browserify

browserify-shader

super simple browserify transform for loading webgl shaders

Installation:

npm install browserify-shader --save

Usage:

Simply use require() to load your shader files:

var vs = require('./vertex.c');
var fs = require('./fragment.c');

WebGL API example:

var vs = require('./vertex.c');
var fs = require('./fragment.c');

var shader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(shader, vs()); 
gl.compileShader(shader);
gl.attachShader(yourWebGLProg, shader);

THREE.js example:

var vs = require('./vertex.c');
var fs = require('./fragment.c');

var myMaterial = new THREE.ShaderMaterial({
        uniforms: uniforms,
        attributes: attributes,
        vertexShader: vs(),
        fragmentShader: fs(),
        transparent: true,
        side: THREE.BackSide
    });

Parameterised shaders:

You can add compile-time parameters in your shaders.
Simply add {{foo}}-style parameters, eg.:

attribute vec3 pos;
void main() {
  gl_Position = vec4(pos, {{zoom}});
}

Then in your code:

var vs = require('./vertex.c');
...
gl.shaderSource(shader, vs({
    zoom: "2.0"
  })); 

For runtime parameters, use uniform-s in the shader.

Extensions

browserify-shader recognises the following extensions by default:

[
    "c"
  , "glsl"
  , "vert"
  , "frag"
  , "vs"
  , "fs"
  , "gs"
  , "vsh"
  , "fsh"
  , "gsh"
  , "vshader"
  , "fshader"
  , "gshader"
];

You can add/delete/modify this list using:

require("browserify-shader").extensions = ["vertexshader", "fragmentshader", "c"]

How to run

Options

The following options will work if you want to customize your transform:

• parameterize: Boolean
  • enables parameterised shaders, Note: if disabled, modules will be required/imported as strings instead of functions.
• module: String
  • configures module type incase your using an es6 transpiler with browserify, possibilities are "es6"/"es2015" and "common" (default).

CLI:

run browserify with the transform option:

browserify -t browserify-shader entry-point.js

browserify -t [browserify-shader --parameterize=true] entry-point.js

Node/grunt:

When compiling using Javascript code custom extensions can be set:

var browserify = require("browserify");
var browserifyShader = require("browserify-shader")

browserify("./index.js");
  .transform(browserifyShader, {
     module: "es6"
  });
  .bundle()
  .pipe(fs.createWriteStream("./bundle.js"));

Gulp + Watchify

var gulp = require('gulp')
var source = require('vinyl-source-stream')

gulp.task('watch', function() {
  var bundler = watchify('./src/index.js');
  bundler.transform('browserify-shader') 

  bundler.on('update', rebundle)

  function rebundle () {
    return bundler.bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./dist'))
  }

  return rebundle()
})

browserify-shader's Issues

npmjs.com installation instructions broken

Not horribly. Just confusingly.

Currently, the page at https://www.npmjs.com/package/browserify-shader contains the following text:
super simple browserify transform for loading webgl shaders

###Installation:

npm install browserify-shaders

Note the trailing 's' in the Installation instruction's name for the module.

Sourcemaps get wrong mapping

It took me a while to figure out that the sourcemap mapping issue i had was due to browserify-shader.

This is my gulp task:

var bundler = browserify('./www/js/app/main.js', {
    debug: true
});

if (watch) {
    bundler = watchify(bundler);
    bundler.on('update', function(){ bundle(bundler) });
    bundler.on('log', function(message){ $.util.log(message) });
}

bundler.transform(
    babelify.configure({
        sourceMapRelative: 'www/js',
        presets: ['es2015'],
        plugins: ['transform-class-properties']
    })
);

bundler.transform('browserify-shader');

bundler.bundle()
    .on('error',notifier)
    .pipe( source('main.bundle.js') )//vinyl-source-stream
    // .pipe(buffer())
    // .pipe(sourcemaps.init({loadMaps: true }))
    // .pipe( sourcemaps.write('./'))

    .pipe(gulp.dest('./www/js/'));

but then i would get this

var crossFadeMaterial = new THREE.ShaderMaterial({

uniforms:{
    uTexA:{
        type:'t',
        value:null
    },
    uTexB:{
        type:'t',
        value:null
    },
    uFade:{
        type:'f',
        value:0
    }
},
vertexShader: require('./crossFade.vert')(),
fragmentShader: require( './crossFade.frag')()

});


export default class CrossFadePlane extends THREE.Mesh {

constructor(){

    super( pg , crossFadeMaterial.clone() );
    console.log('foo',this);
}
...

Removing all calls to require('someShader') mapped everything correctly.

ParseError:Unexpected token "varying vec3 vWorldPosition;"

I'm unable to get this working with this glsl file: https://github.com/ngokevin/kframe/blob/master/components/sun-sky/shaders/vertex.glsl

browserify -t [ browserify-shader ] public/packages.js

browserify -t [ browserify-shader --parameterize=true ] public/packages.js

node_modules/aframe-sun-sky/shaders/vertex.glsl:1
varying vec3 vWorldPosition;
        ^
ParseError: Unexpected token

I'm using Browserify 13.1.1.

Regex matching does not work when using default extensions for files which have an extension in the middle of the name

A file named 'mymodules.color.js' does match for the extension "c"