在THREE.JS中组合着色器

我正在编写一个着色器，从一个高度贴图渲染地形，一切都很好，除了我有了着色器后，我松开了灯光和阴影。这就是地狱之痛的开始。我应该使用

THREE.ShaderChunk

来添加默认着色器块，而不仅仅是使用我的着色器添加混乱

所以在谷歌搜索了很长一段时间后，我开始

您只需在以下位置向自定义着色器材质添加几个片段： 适当地点：

//制服

三.UniformsLib[“阴影贴图”]

//片段着色器

三.ShaderChunk[“阴影贴图”\u pars\u fragment]，三.ShaderChunk[ “阴影贴图碎片”]

//顶点着色器

三.ShaderChunk[“阴影贴图”\u pars\u vertex]，三.ShaderChunk[ “阴影贴图_顶点”]

但对我来说，这并没有增加灯光和阴影。然后，我能想到的最好办法就是查看并尝试使用其中一个默认着色器的设置。因此，我对

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）

---

jsIDLE-

在我的例子中，解决方案是将

灯光：是的

添加到

着色器材质

看看那里，也许它们会help@2pha，只有各种着色器示例，但没有使用“THREE.ShaderChunk”将现有threejs着色器添加到自定义着色器。