javascript - 自定义 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 的制服。如果您想添加新制服，请按以下步骤操作:

material.onBeforeCompile = function ( shader ) {

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

}