Question

我需要为我的地形网格创建一个相当简单的着色器。着色器必须使用diffenet漫反射和普通纹理，具体取决于世界地图（图像）的颜色，必须接收阴影并使用灯光。

默认的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;

}

自定义phong着色器

1 个答案: