我是JS的新手，特别是Three.js中的Shaders。此刻，我只想尝试在这里的Birds示例http://threejs.org/examples/#webgl_gpgpu_birds中使用的ShaderMaterial上启用雾。我正在构建一个基于水下的应用程序，所以将以类似的方式呈现鱼类，但是在这里尝试了所有的示例/问题以及许多其他搜索，我似乎无法让它发挥作用。
看起来像加载一个外部着色器文件，如下所示（我在这里将最近回答的问题之一与Birds示例中的实际着色器代码合并，希望它能够工作）是流行的方法，但现在我有加载它和访问着色器的问题。这是我的CustomFogShader类：
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")
};
当尝试访问ShaderMatreial构造函数中的着色器时，我在CustomShader上得到未定义的错误。
var material = new THREE.ShaderMaterial( {
uniforms: birdUniforms,
vertexShader: THREE.CustomFogShader.vertexShader,
fragmentShader: THREE.CustomFogShader.fragmentShader,
side: THREE.DoubleSide,
fog: true
});
我已经阅读过我需要使用ShaderLoader类..但我可以找到的唯一示例是单独加载每个着色器，所以我想我的问题是：如何加载此文件并访问ShaderMaterial设置中的着色器？或者，是否有人知道更好的方法来使scene.fog影响示例中的Birds ShaderMaterial？
经过多次努力和失败后，我感到很茫然:(
提前感谢任何建议！