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 в этом примере?

Я в растерянности после многих попыток и неудач:(

Спасибо заранее за любые советы!

0 ответов

Другие вопросы по тегам