Skip to content

Instantly share code, notes, and snippets.

@mattdesl
Last active May 8, 2022 07:11
Show Gist options
  • Save mattdesl/b04c90306ee0d2a412ab to your computer and use it in GitHub Desktop.
Save mattdesl/b04c90306ee0d2a412ab to your computer and use it in GitHub Desktop.
how we're currently using glslify + ThreeJS

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).

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() {
...
}
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)
}
var fancy = require('./shaders/fancy')
//somewhere in our app:
var material = new THREE.ShaderMaterial(fancy({
//optionally add more material params..
depthWrite: false,
wireframe: true
}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment