javascript - 调整 Three.js 中的现有着色器

Question

我编写了一个自定义着色器，旨在添加到现有的 Three.js 着色器中。目前，我已经使用相对简单的顶点和片段着色器定义了着色器 Material 。着色器本身会更改对象上的特定颜色。

然而，正如目前所写，这些颜色不会与光相互作用。为了解决这个问题，我希望将我的代码注入(inject)到现有 Three.js Material (即 Phong 和/或 Lambert)的代码中。我尝试了几种不同的方法，但都没有成功。最有前途的方法似乎与这篇文章类似:

Replicating MeshLambertMaterial Using ShaderMaterial ignores textures

当我尝试实现这种方法时，我的着色器无法编译。我会发布一个代码示例，但它确实是一团乱码(~90% 是从 Firefox 的 GLSL 实时编辑器复制/粘贴的，所以我认为它不会提供太多信息)。我的主要问题是:

1)上述OP采用的方法是最佳选择吗？

2) 哪里是找到 Three.js 的 Lambert/Phong Shader 代码的最佳位置。我意识到很大一部分是自动生成的，但从 Firefox 复制/粘贴肯定不是最好的选择...

希望有人能帮忙。

Answer 1

我使用了您找到的示例并向其添加了纹理混合。

material = new THREE.ShaderMaterial(
    {
        uniforms: THREE.UniformsUtils.merge(
        [
            THREE.UniformsLib['lights'],
            THREE.UniformsLib[ "common" ],
            THREE.UniformsLib[ "fog" ],
            THREE.UniformsLib[ "lights" ],
            THREE.UniformsLib[ "shadowmap" ],
        {
            t0: { type: "t", value: null},
            t1: { type: "t", value: null},
            blendMap: { type: "t", value: null},
            repeat: { type:'f', value: 35 },
            topColor:    { type: "c", value: new THREE.Color( 0x0077ff ) },
            bottomColor: { type: "c", value: new THREE.Color( 0xffffff ) },
            offset:      { type: "f", value: 33 },
            exponent:    { type: "f", value: 0.6 },
            fogColor:    { type: "c", value: scene.fog.color },
            fogNear:     { type: "f", value: scene.fog.near },
            fogFar:      { type: "f", value: scene.fog.far }
        }
        ]), 
        lights: true,
        fog: true,
        vertexShader: 
        [

            "#define LAMBERT",

            "varying vec3 vLightFront;",

            "varying vec2 vUv;",

            "#ifdef DOUBLE_SIDED",

            "varying vec3 vLightBack;",

            "#endif",

            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" ],

            "void main() {",
                "vUv = uv;",

                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[ "worldpos_vertex" ],
                THREE.ShaderChunk[ "envmap_vertex" ],
                THREE.ShaderChunk[ "lights_lambert_vertex" ],
                THREE.ShaderChunk[ "shadowmap_vertex" ],
            "}"

        ].join("\n"),
        fragmentShader: 
        [

            "uniform float opacity;",

            "varying vec3 vLightFront;",

            "#ifdef DOUBLE_SIDED",

                "varying vec3 vLightBack;",

            "#endif",

            "uniform sampler2D t0;",
            "uniform sampler2D t1;",
            "uniform sampler2D blendMap;",
            "uniform float repeat;",
            "varying vec2 vUv;",

            THREE.ShaderChunk[ "color_pars_fragment" ],
            THREE.ShaderChunk[ "map_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" ],



            "void main() {",
                "gl_FragColor = vec4( vec3 ( 1.0 ), opacity );",

                "vec3 c;",
                "vec4 Ca = texture2D(t0, vUv * repeat);",
                "vec4 Cb = texture2D(t1, vUv * repeat);",
                "vec4 b = texture2D(blendMap, vUv);",
                THREE.ShaderChunk[ "map_fragment" ],
                THREE.ShaderChunk[ "alphatest_fragment" ],
                THREE.ShaderChunk[ "specularmap_fragment" ],

                "#ifdef DOUBLE_SIDED",

                    "float isFront = float( gl_FrontFacing );",
                    "gl_FragColor.xyz *= isFront * vLightFront + ( 1.0 - isFront ) * vLightBack;",

                    "if ( gl_FrontFacing )",
                        "gl_FragColor.xyz *= vLightFront;",
                    "else",
                        "gl_FragColor.xyz *= vLightBack;",

                "#else",

                    "gl_FragColor.xyz *= vLightFront;",

                "#endif",


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

                "gl_FragColor *= vec4(mix(Ca.rgb, Cb.rgb, b.r),0);",
                THREE.ShaderChunk[ "linear_to_gamma_fragment" ],

                THREE.ShaderChunk[ "fog_fragment" ],

            "}"

        ].join("\n")


    });

    material.uniforms.t0.value = texture1;
    material.uniforms.t1.value = texture2;
    material.uniforms.blendMap.value = 
    ImageLoad("land/land"+landx+"_blendmap.png" );

    material.uniforms.t0.value.wrapS = material.uniforms.t0.value.wrapT = THREE.RepeatWrapping;
    material.uniforms.t1.value.wrapS = material.uniforms.t1.value.wrapT = THREE.RepeatWrapping;