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 = ;var fs = ;
WebGL API example:
var vs = ;var fs = ; var shader = glgl; gl;gl;
THREE.js example:
var vs = ;var fs = ; var myMaterial = uniforms: uniforms attributes: attributes vertexShader: fragmentShader: transparent: true side: THREEBackSide ;
Parameterised shaders:
You can add compile-time parameters in your shaders.
Simply add {{foo}}
-style parameters, eg.:
attribute vec3 pos;void
Then in your code:
var vs = ;...gl;
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:
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 = ;var browserifyShader = ; ; ;
Gulp + Watchify
var gulp = var source = gulp