Question

我正在写一个着色器从高度图渲染地形，所有这些都很好，因为在我有着色器之后，我会失去光线和阴影。这是地狱痛苦开始的时候。我应该使用THREE.ShaderChunk来添加默认着色器块，而不仅仅是添加 - 使用我的着色器混乱。

所以经过长时间的谷歌搜索后，我来到this advise

您只需在自定义ShaderMaterial中添加几个片段即可   适当的地方：

//制服

THREE.UniformsLib [“shadowmap”]，

//片段着色器

THREE.ShaderChunk [“shadowmap_pars_fragment”]，THREE.ShaderChunk [   “shadowmap_fragment”]，

//顶点着色器

THREE.ShaderChunk [“shadowmap_pars_vertex”]，THREE.ShaderChunk [   “shadowmap_vertex”]，

但对我而言，没有添加灯光和阴影。然后我能想到的最好的方法是查看ShaderLib.js并尝试使用默认着色器之一的设置。所以我对lambert进行了设置，最后得到了这段代码：

        @tileMaterial = new THREE.ShaderMaterial
        uniforms:  THREE.UniformsUtils.merge [
            THREE.UniformsLib[ "common" ],
            THREE.UniformsLib[ "fog" ],
            THREE.UniformsLib[ "lights" ],
            THREE.UniformsLib[ "shadowmap" ],

            {
                "emissive" : { type: "c", value: new THREE.Color( 0x000000 ) },
                "wrapRGB"  : { type: "v3", value: new THREE.Vector3( 1, 1, 1 ) }
            }

        ]
        vertexShader: [
            "#define LAMBERT",

            "varying vec3 vLightFront;",

            "#ifdef DOUBLE_SIDED",

            "   varying vec3 vLightBack;",

            "#endif",

            THREE.ShaderChunk[ "common" ],
            THREE.ShaderChunk[ "map_pars_vertex" ],
            THREE.ShaderChunk[ "lightmap_pars_vertex" ],
            THREE.ShaderChunk[ "envmap_pars_vertex" ],
            THREE.ShaderChunk[ "lights_lambert_pars_vertex" ],
            THREE.ShaderChunk[ "color_pars_vertex" ],
            THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
            THREE.ShaderChunk[ "skinning_pars_vertex" ],
            THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
            THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],

            "void main() {",

                THREE.ShaderChunk[ "map_vertex" ],
                THREE.ShaderChunk[ "lightmap_vertex" ],
                THREE.ShaderChunk[ "color_vertex" ],

                THREE.ShaderChunk[ "morphnormal_vertex" ],
                THREE.ShaderChunk[ "skinbase_vertex" ],
                THREE.ShaderChunk[ "skinnormal_vertex" ],
                THREE.ShaderChunk[ "defaultnormal_vertex" ],

                THREE.ShaderChunk[ "morphtarget_vertex" ],
                THREE.ShaderChunk[ "skinning_vertex" ],
                THREE.ShaderChunk[ "default_vertex" ],
                THREE.ShaderChunk[ "logdepthbuf_vertex" ],

                THREE.ShaderChunk[ "worldpos_vertex" ],
                THREE.ShaderChunk[ "envmap_vertex" ],
                THREE.ShaderChunk[ "lights_lambert_vertex" ],
                THREE.ShaderChunk[ "shadowmap_vertex" ],

            "}"

        ].join "\n"
        fragmentShader: [
            "uniform vec3 diffuse;",
        "uniform vec3 emissive;",
        "uniform float opacity;",

        "varying vec3 vLightFront;",

        "#ifdef DOUBLE_SIDED",

        "   varying vec3 vLightBack;",

        "#endif",

        THREE.ShaderChunk[ "common" ],
        THREE.ShaderChunk[ "color_pars_fragment" ],
        THREE.ShaderChunk[ "map_pars_fragment" ],
        THREE.ShaderChunk[ "alphamap_pars_fragment" ],
        THREE.ShaderChunk[ "lightmap_pars_fragment" ],
        THREE.ShaderChunk[ "envmap_pars_fragment" ],
        THREE.ShaderChunk[ "fog_pars_fragment" ],
        THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
        THREE.ShaderChunk[ "specularmap_pars_fragment" ],
        THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],

        "void main() {",

        "   vec3 outgoingLight = vec3( 0.0 );",
        "   vec4 diffuseColor = vec4( diffuse, opacity );",

            THREE.ShaderChunk[ "logdepthbuf_fragment" ],
            THREE.ShaderChunk[ "map_fragment" ],
            THREE.ShaderChunk[ "color_fragment" ],
            THREE.ShaderChunk[ "alphamap_fragment" ],
            THREE.ShaderChunk[ "alphatest_fragment" ],
            THREE.ShaderChunk[ "specularmap_fragment" ],

        "   #ifdef DOUBLE_SIDED",


        "       if ( gl_FrontFacing )",
        "           outgoingLight += diffuseColor.rgb * vLightFront + emissive;",
        "       else",
        "           outgoingLight += diffuseColor.rgb * vLightBack + emissive;",

        "   #else",

        "       outgoingLight += diffuseColor.rgb * vLightFront + emissive;",

        "   #endif",

            THREE.ShaderChunk[ "lightmap_fragment" ],
            THREE.ShaderChunk[ "envmap_fragment" ],
            THREE.ShaderChunk[ "shadowmap_fragment" ],

            THREE.ShaderChunk[ "linear_to_gamma_fragment" ],

            THREE.ShaderChunk[ "fog_fragment" ],

        "   gl_FragColor = vec4( outgoingLight, diffuseColor.a );",

        "}"
        ].join "\n"
        attributes:
            height:
                type: "f"
                value: heightData
        wireframe: no

仍然不会添加灯光和阴影，也会引发错误：

three.js:22804 WebGL: INVALID_VALUE: uniform3fv: no array
three.js:22804 WebGL: INVALID_VALUE: uniform3fv: no array

所以问题是 - 为自定义着色器添加灯光和阴影的步骤是什么（对于r71）？

jsfiddle - http://jsfiddle.net/SET001/0wzqemks/2/

Answer 1

我的解决方案是将lights: yes添加到ShaderMaterial

在THREE.JS中组合着色器

1 个答案: