Question

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

三个js内部是否会为所有材质使用着色器？
使用ShaderMaterial会改善性能吗？
我有一段使用MeshPhongMaterial的代码，如何使用THREE.ShaderLib.phong转换为ShaderMaterial。

这是代码

var material = new THREE.MeshPhongMaterial（{color：0xffffff，shininess：35，着色：THREE.SmoothShading，combine：THREE.MultiplyOperation，specular：0x030303，reflectivity：1}）;

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

Answer 1

我清楚你一行一行的怀疑可能会有所帮助：

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

MeshPhongMaterial是一个命名空间，为您提供最终用户库，使开发更快更容易为那些来自图形的人（开发/设计师背景）所以在内部，如果你检查库src / renderers / shaders / ShaderLib.js THREE.ShaderLib ['phong']映射到shaderIDs行29574三个75版本。所以他们是一样的。

三个js内部是否会为所有材质使用着色器？

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

使用ShaderMaterial会改善效果吗？

答案：取决于你正在考虑的三个。如果你不想将光矢量计算到片段着色器（通过提供直接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文件来使用extend着色器。

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

答案：创建自己的制服（你提到的那个在材料中已经支持）然后调用

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。

Answer 2

您可以将MeshPhongMaterial视为ShaderMaterial，但需要为您完成所有艰苦的工作（变量，片段和顶点着色器）。

是的，所有材质都是着色器（将着色器代码发送到gpu）。
取决于你的着色器。
你为什么要重新创建它？你可以。在尝试之前，您应该了解材料的工作原理。

我有一个我自己experiments with ShaderMaterial的页面你可以看看。

我还看了一下内置材质/着色器供我自己参考here。

请注意，自我发布这些材料后，three.js材料及其组成方式发生了一些变化。但我的着色器实验可能有点帮助。

我还有一个fiddle here扩展了ShaderMaterial类，有效地制作了我自己的材料类（虽然这只是一个实验而且我不确定它是否是最好的，甚至是正确的方法来做到这一点。）

...

Answer 3

它们实际上并不相同，因为渲染器内置了MeshPhongMaterial特殊制服的更新，而某些ShaderMaterial制服必须手动更新。话虽如此，我没有完整的概述，至少需要检查THREE.WebGLRenderer源代码的详细信息。

我可以肯定的是，那是

let mat = new THREE.MeshPhongMaterial();

有效，

let mat = new THREE.ShaderMaterial(THREE.ShaderLib.phong);

失败并显示有关制服的错误消息。这至少部分也可能是由缺少默认值引起的。

编辑：我错了。

如果添加

，则有效

mat.lights = true;

您可能还想使用mat.fog = true来启用雾。如果单独指定着色器对象部件（uniforms，vertexShader，fragmentShader），还可以将“lights：true”和“fog：true”添加到ShaderMaterial构造函数的参数中。

THREEJS中的MeshPhongMaterial和ShaderMaterial之间有什么区别

3 个答案: