How to move shader scripts in external files? - opengl-es

Question

I would like to know how could I move shaders which are actually included in my html to external files. In this way, I'll be able to include them in my gulp tasks. I took a look at how JavaScript shaders files are written but I don't understand very well.
For example with the Glow shader code below, how could I move it to an external file ?
<script type="x-shader/x-vertex" id="vertexShaderGlow">
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main()
{
vec3 vNormal = normalize( normalMatrix * normal );
vec3 vNormel = normalize( normalMatrix * viewVector );
intensity = pow( c - dot(vNormal, vNormel), p );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="x-shader/x-vertex" id="fragmentShaderGlow">
uniform vec3 glowColor;
varying float intensity;
void main()
{
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, 1.0 );
}
</script>

Answer 1

The other answer provided is simply taking GLSL code and turning each line into a string. Each string is a value in an array. The join call is concatenating all of the strings with a \n character to make the code easier to read when debugging. I've done it this way many times before, and is a legitimate solution to what you're trying to do.
But if you'd rather have external files with raw GLSL code, you can do that, too. Consider the two files:
glow_vertex.glsl
glow_fragment.glsl
These files contain the shader code which you would normally have in the script tags. You can use an XMLHTTPRequest to fetch the files, and use the returned text as your shader code.
var vertexShader = null;
var fragmentShader = null;
function shadersDone(){
var material = new THREE.ShaderMaterial({
uniforms: { /* define your uniforms */},
vertexShader: vertexShader,
fragmentShader: fragmentShader
});
}
function vertexDone(code){
vertexShader = code;
if(fragmentShader !== null){
shadersDone();
}
}
function fragmentDone(code){
fragmentShader = code;
if(vertexShader !== null){
shadersDone();
}
}
var xhr1 = new XMLHttpRequest();
var xhr2 = new XMLHttpRequest();
xhr1.open("GET", "/server/glow_vertex.glsl", true);
xhr2.open("GET", "/server/glow_fragment.glsl", true);
xhr1.responseType = "text";
xhr2.responseType = "text";
xhr1.onload = function(){
if(xhr1.readyState === xhr1.DONE && xhr1.status === 200){
vertexDone(xhr1.resultText);
}
};
xhr2.onload = function(){
if(xhr2.readyState === xhr2.DONE && xhr2.status === 200){
fragmentDone(xhr2.resultText);
}
};
xhr1.send(null);
xhr2.send(null);
Note that that's all asynchronous. Also, your server is going to need to be configured to send GLSL files as plain text.
As long as we're talking about the modern web...
There is also the option to import your shader code. VERY BIG BUT it's currently only supported in Chrome and Opera (although polyfills do exist). Microsoft Edge lists the functionality as "under consideration," and Firefox does not indent to implement it in its current state. So take what follows with a large grain of salt, and keep an eye on: http://caniuse.com/#search=import
In your HTML, and before the JavaScript which would use it...
<link id="vertexImport" rel="import" href="/server/glow_vertex.glsl" />
<link id="fragmentImport" rel="import" href="/server/glow_fragment.glsl" />
Then later in your JavaScript:
var material = new THREE.ShaderMaterial({
vertexShader: document.getElementById("vertexImport").import.body.childNodes[0].data,
fragmentShader: document.getElementById("fragmentImport").import.body.childNodes[0].data,
});
Again, this is asynchronous. You may need to add an onload handler for each link, so you don't attempt to access the code before it's loaded.

Answer 2

The answer suggesting joining an array of glsl lines is a pattern that can be encountered with three, but should probably be avoided in this use case.
It may be useful in some kind of a module, where it's sort of a "compiled" snapshot of a shader, not intended to be modified.
Otherwise the main downsides of this approach is lack of syntax highlighting and being verbose.
Nowadays most js code is transformed one way or the other. Shader code should be inlined like this.
const myShader = new THREE.ShaderMaterial({
vertexShader: require('./myVert.vs'),
fragmentShader: require('./myFrag.vs'),
})
edit
myVert.vs:
//this is all nicely highlighted in sublime text for example
void main (){
gl_Position = vec4( position.xy, 0., 1.);
}
myVert.fs:
void main (){
gl_FragColor = vec4(1.,0.,0.,1.);
}
myClass.js:
class myMaterial extends THREE.ShaderMaterial{
constructor(){
super({
vertexShader: require('./myVert.vs'),
//^ becomes vertexShader: 'void main() {...}'
...

Answer 3

You can move the shader code into a separate JS file and include that file after three.js.
Here is one example from https://github.com/timoxley/threejs/blob/master/examples/js/shaders/ColorifyShader.js
/**
* #author alteredq / http://alteredqualia.com/
*
* Colorify shader
*/
THREE.ColorifyShader = {
uniforms: {
"tDiffuse": { type: "t", value: null },
"color": { type: "c", value: new THREE.Color( 0xffffff ) }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform vec3 color;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"vec3 luma = vec3( 0.299, 0.587, 0.114 );",
"float v = dot( texel.xyz, luma );",
"gl_FragColor = vec4( v * color, texel.w );",
"}"
].join("\n")
};
With the above you would create our material like this:
material = new THREE.ShaderMaterial({
uniforms : THREE.ColorifyShader.uniforms,
vertexShader : THREE.ColorifyShader.vertexShader,
fragmentShader : THREE.ColorifyShader.fragmentShader
});
ofcourse you don't need to call the object THREE.ColorifyShader, you can call it whatever you want.