I'm fairly new to JS and particularly Shaders in Three.js. At this moment I'm just trying to enable fog on the ShaderMaterial used in the Birds example here http://threejs.org/examples/#webgl_gpgpu_birds . I'm building an an underwater based app so will be rendering fish in a similar way, but having tried all of the examples/questions on here and many other searches I can't seem to get it working.
It seems like loading an external shader file like the one below (I've merged one of the most recent answered questions here on SO with the actual shader code in the Birds example, hoping it will work) is the popular approach, but now I have the issue of loading it in and accessing the shaders. Here's my CustomFogShader class:
THREE.CustomFogShader = {
uniforms: THREE.UniformsUtils.merge( [
THREE.UniformsLib[ "fog" ],
{
"someCustomUniform" : { type: 'f', value: 1.0 }
}
] ),
fragmentShader: [
"varying float someCustomVarying;",
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "fog_pars_fragment" ],
"void main() {",
"vec3 outgoingLight = vec3( 0.0 );",
THREE.ShaderChunk[ "fog_fragment" ],
"gl_FragColor = vec4(outgoingLight, 1.0);",
"}"
].join("\n"),
vertexShader: [
"uniform float someCustomUniform;",
"varying float someCustomVarying;",
"attribute vec2 reference;",
"attribute float birdVertex;",
"attribute vec3 birdColor;",
"uniform sampler2D texturePosition;",
"uniform sampler2D textureVelocity;",
"varying vec4 vColor;",
"varying float z;",
"uniform float time;",
"void main() {",
"someCustomVarying = 1.0 * someCustomUniform;",
"vec4 tmpPos = texture2D( texturePosition, reference );",
"vec3 pos = tmpPos.xyz;",
"vec3 velocity = normalize(texture2D( textureVelocity, reference ).xyz);",
"vec3 newPosition = position;",
"if ( birdVertex == 4.0 || birdVertex == 7.0 ) {",
// flap wings
"newPosition.y = sin( tmpPos.w ) * 5.;",
"}",
"newPosition = mat3( modelMatrix ) * newPosition;",
"velocity.z *= -1.;",
"float xz = length( velocity.xz );",
"float xyz = 1.;",
"float x = sqrt( 1. - velocity.y * velocity.y );",
"float cosry = velocity.x / xz;",
"float sinry = velocity.z / xz;",
"float cosrz = x / xyz;",
"float sinrz = velocity.y / xyz;",
"mat3 maty = mat3(",
"cosry, 0, -sinry,",
"0 , 1, 0 ,",
"sinry, 0, cosry",
");",
"mat3 matz = mat3(",
"cosrz , sinrz, 0,",
"-sinrz, cosrz, 0,",
"0 , 0 , 1",
");",
"newPosition = maty * matz * newPosition;",
"newPosition += pos;",
"z = newPosition.z;",
"vColor = vec4( birdColor, 1.0 );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );",
"}"
].join("\n")
};
And when trying to access the shaders in the ShaderMatreial constructor, I get undefined errors on the CustomShader.
var material = new THREE.ShaderMaterial( {
uniforms: birdUniforms,
vertexShader: THREE.CustomFogShader.vertexShader,
fragmentShader: THREE.CustomFogShader.fragmentShader,
side: THREE.DoubleSide,
fog: true
});
I've read I need to use the ShaderLoader class.. but the only examples I can find load each shader individually, so I guess my question is: How can I load this file in and access the shaders in the ShaderMaterial setup? or, Does anyone know a better way to get the scene.fog to affect the Birds ShaderMaterial in the example?
I'm at a loss after a lot of trying and failing :(
Thanks in advance for any advice!