THREE.js Добавление тумана в ShaderMaterial
Я довольно плохо знаком с JS и особенно с шейдерами в Three.js. В данный момент я просто пытаюсь включить туман на ShaderMaterial, который используется в примере с Birds здесь http://threejs.org/examples/. Я создаю подводное приложение, поэтому буду отображать рыбу аналогичным образом, но, попробовав все примеры / вопросы здесь и многие другие поиски, я не могу заставить его работать.
Кажется, что загрузка внешнего файла шейдера, подобного приведенному ниже (я слил один из самых последних ответов на SO здесь с реальным кодом шейдера в примере с 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 в этом примере?
Я в растерянности после многих попыток и неудач:(
Спасибо заранее за любые советы!