1

我对 JS 非常陌生，尤其是 Three.js 中的着色器。目前，我只是想在http://threejs.org/examples/#webgl_gpgpu_birds的 Birds 示例中使用的 ShaderMaterial 上启用雾。我正在构建一个基于水下的应用程序，因此将以类似的方式渲染鱼，但是在尝试了此处的所有示例/问题以及许多其他搜索后，我似乎无法使其正常工作。

似乎加载如下所示的外部着色器文件（我已将 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？

经过多次尝试和失败后，我不知所措:(

提前感谢您的任何建议！

4

0 回答 0