three.js - THREEJS中MeshPhongMaterial和ShaderMaterial有什么区别

Question

将 MeshPhongMaterial 和 ShaderMaterial 与 THREE.ShaderLib.phong 一起使用有什么区别。

1. Three js 会在内部使用所有 Material 的着色器吗？
2. 使用 ShaderMaterial 会提高性能吗？
3. 我有一段使用 MeshPhongMaterial 的代码，以及如何使用 THREE.ShaderLib.phong 转换为 ShaderMaterial。

这是代码

var Material = new THREE.MeshPhongMaterial({ 颜色: 0xffffff, 光泽度: 35, 着色:THREE.SmoothShading，组合:THREE.MultiplyOperation，镜面反射:0x030303，反射率:1 });

如何在 ShaderMaterial 中指定组合、反射率和其他属性

Answer 1

我逐行消除你的疑虑可能会有所帮助:

将 MeshPhongMaterial 和 ShaderMaterial 与 THREE.ShaderLib.phong 一起使用有什么区别。

MeshPhongMaterial是库为最终用户提供的命名空间，使来自图形领域(开发/设计师背景)的开发更快更容易所以在内部如果你检查库 src/renderers/shaders/ShaderLib.jsTHREE.ShaderLib['phong'] 映射到 ShaderIDs 第 29574 行的三个 75 版本。所以它们是相同的。

Three js 会在内部使用所有 Material 的着色器吗？

答案:OpenGLES 2.0 及以上版本都是基于着色器的技术，与使用 EGL 创建的表面上绘制内容的固​​定管道相比。

使用 ShaderMaterial 会提高性能吗？

答案:取决于你要研究的内容。 Three.js 着色器足够成熟，如果你不想将光矢量计算到片段着色器中(通过提供直接 vec3 而不是统一)，你可以得到一点点，但这可能不是第一个为了提高性能，它们有很多，比如 LOD、对象池等。(不同的人可能对同一件事有不同的看法)

我有一段使用 MeshPhongMaterial 的代码，以及如何使用 THREE.ShaderLib.phong 转换为 ShaderMaterial。

答:可以手动调用

var phongShader = THREE.ShaderLib[ 'phong' ]
var shaderMaterial = new THREE.ShaderMaterial( {
 uniform: phongShader.uniform,
 vertexShader: phongShader.vertexShader,
 fragmentShader: phongShader.fragmentShader
});

但是您也可以通过使用 THREE.ShaderChunk 调用自定义 glsl 文件来使用扩展着色器。

如何在 ShaderMaterial 中指定组合、反射率和其他属性

答案:创建您自己的制服(您提到的制服已经在 Material 中支持)，然后调用

THREE.UniformsUtils.merge( [
phongShader.uniform,
{
//to do custom uniform
}
vertexShader:vertexShader,
fragmentShader:fragmentShader
)]
var vertexShader = [

//so on add the shaderChunk Required
].join( '\n' )

var fragmentShader = [
THREE.ShaderChunk[ "common" ],
//so on add the shaderChunk Required
//call your custom uniform which you have supplied into the final gl_FragColor
].join( '\n' )

看到你的问题恕我直言，你不需要在 vertexShader 中进行更改，你可以直接使用自定义参数编辑fragmentShader。