how we're currently using glslify + ThreeJS

readme.md

Our folder structure for glslify + ThreeJS.

src/
  shaders/
    glsl-voronoi/ (depends on glsl-random on npm)
    glsl-displace/ (depends on glsl-voronoi)
    glsl-src-over/
    glsl-blend-overlay/
    glsl-blend-screen/
    fancy.js
    fancy.frag
    pass.vert
  main.js

Each of the glsl-* folders is a "shader cunk" or util. At the end of the project, they will be stable enough to split into npm modules so they can be required and depended on in future projects (like glsl-random and glsl-lut).

fancy.frag

varying vec2 vUv;

uniform sampler2D tDiffuse;
uniform sampler2D tColorLUT;
uniform vec2 resolution;

#pragma glslify: blendOverlay = require(./glsl-blend-overlay)
#pragma glslify: displace = require(./glsl-displace)
#pragma glslify: srcOver = require(./glsl-src-over)
#pragma glslify: colorCorrect = require(glsl-lut/flipY)

void main() {
  ... 
}

fancy.js

var glslify = require('glslify')

//inline our shader code
var source = glslify({
    vertex: './pass.vert',
    fragment: './fancy.frag',
    sourceOnly: true
})

//converts to ThreeJS shader object:
//{ vertexShader, fragmentShader, uniforms, attributes }
var create = require('three-glslify')(THREE)
var xtend = require('xtend') 

module.exports = function(opt) {
    return xtend(create(source), opt)
}

main.js

var fancy = require('./shaders/fancy')

//somewhere in our app:
var material = new THREE.ShaderMaterial(fancy({
  //optionally add more material params..
  depthWrite: false,
  wireframe: true
}))