我需要为我的地形网格创建一个相当简单的着色器。着色器必须根据世界地图(图像)的颜色使用不同的漫反射和法线纹理,必须接收阴影并使用灯光。
默认的 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 的制服?
最佳答案
请看下面的示例:
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;
}
关于javascript - 自定义 phong 着色器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49589213/