自定义 phong 着色器

Question

我需要为我的地形网格创建一个相当简单的着色器。着色器必须根据世界地图（图像）的颜色使用不同的漫反射和法线纹理，必须接收阴影并使用灯光。

默认 phong 着色器包含许多包含，我可以在哪里更改或只查看它们的代码？如何复制 phong 着色器代码并创建新的THREE.ShaderMaterial？

我已经尝试使用onBeforeCompile 修改这样的着色器：

var material = new THREE.MeshPhongMaterial( {
    map: grassTexture
} );
material.onBeforeCompile = function ( shader ) {
    shader.fragmentShader = shader.fragmentShader.replace(
        'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
        [
            'gl_FragColor = vec4( 0.1, 0.1, 0.5, 1.0 );'
        ].join( '\n' )
    );
    console.log(shader.fragmentShader);
};

但我还需要将多个纹理加载到着色器中，如何更改 phong 的制服？

Answer 1

请看下面的例子：

https://threejs.org/examples/webgl_materials_modified.html

它展示了如何访问预定义材料的制服。如果您想添加新制服，请这样做：

material.onBeforeCompile = function ( shader ) {

    shader.uniforms.time = { value: 0 };
    shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;

}