MeshStandardMaterial
和MeshPhysicalMaterial
MeshStandardMaterial
和MeshPhysicalMaterial
类是PBR物理材质,可以更好的模拟光照计算,相比较高光网格材质MeshPhongMaterial
渲染效果更逼真。
MeshStandardMaterial
和MeshPhysicalMaterial
两个类基本相似,物理网格材质MeshPhysicalMaterial
是MeshStandardMaterial
的扩展,MeshPhysicalMaterial
可以更好地控制反射率。关于PBR物理材质的大多属性直接查看文档MeshStandardMaterial
即可。
PBR物理材质MeshPhysicalMaterial
是一个很重要可的材质,如果你想展示一个产品,为了更逼真的渲染效果最好选择该材质,如果游戏为了更好的显示效果可以选择PBR材质MeshPhysicalMaterial
,而不是高光材质MeshPhongMaterial
。
关于高光网格材质MeshPhongMaterial
和PBR物理材质MeshPhysicalMaterial
有什么不同可以阅读文章《Three.js次时代和PBR》。阅读这篇文章之前最好先对物理材质有一定的了解MeshPhysicalMaterial
。
注意使用物理材质的时候,一般需要设置环境贴图.envMap
。
.metalness
和粗糙度属性.roughness
为了更好的理解PBR物理材质MeshPhysicalMaterial
是如何设置一个金属、塑料等材质效果,可以查看文章
《物理材质MeshPhysicalMaterial设置金属效果》
高光网格材质的典型属性是高光颜色.specular
和高光亮度.shininess
,Threejs物理材质典型的属性是 金属度属性.metalness
和粗糙度属性.roughness
。
金属度属性.metalness
表示材质像金属的程度. 非金属材料,如木材或石材,使用0.0,金属使用1.0,中间没有(通常). 默认 0.5. 0.0到1.0之间的值可用于生锈的金属外观。如果还提供了粗糙度贴图.metalnessMap
,则两个值都相乘。
标准网格材质MeshStandardMaterial:基于物理的标准材料,使用Metallic-Roughness工作流程.
基于物理的渲染(PBR)最近已成为许多3D应用程序的标准, 例如 Unity, Unreal 和 3D Studio Max.
这种方法与旧方法的不同之处在于,不使用近似值来表示光与表面的相互作用,而是使用物理上正确的模型. 我们的想法是,不是在特定照明条件下调整材料以使其看起来更好,而是可以创建一种材料,在所有照明场景下'正确'反应.
在实践中,物理网格材质这比MeshLambertMaterial或MeshPhongMaterial提供了更准确和逼真的结果,代价是计算成本更高一些.
粗糙度属性.roughness
材质的粗糙程度. 0.0表示平滑的镜面反射,1.0表示完全漫反射. 默认 0.5. 如果还提供粗糙度贴图.roughnessMap
,则两个值相乘.
.metalnessMap
和粗糙度贴图.roughnessMap
在讲解Threejs材质的时候,会讲解颜色属性.color
和与颜色相对应的颜色贴图.map
,讲到高光网格材质MeshPhongMaterial
的时候,会提高和高光属性.specular
对应的高光贴图.specularMap
,类比学习物理材质,物理材质的金属度贴图.metalness
对应的是物理材质的金属度属性.metalness
,物理材质的粗糙度贴图.roughnessMap
对应的是物理材质的粗糙度贴图属性.roughnessMap
。
如果一个网格模型Mesh
表面都是同一种材质效果,比如金属,比如塑料,没必要使用金属度和粗糙度贴图,直接定义粗糙度和金属度属性即可,如果一个网格模型表面部分区域是金属,部分区域是塑料,部分区域是布料,这种情况下需要粗糙度贴图和金属度贴图。
金属度贴图和粗糙度贴图一般都是3D美术通过PBR次时代流程渲染烘培导出,比如通过substance painter软件,导出PBR物理材质需要的金属度贴图和粗糙度贴图,对于程序员而言直接加载解析就可以。
金属度贴图.metalnessMap
纹理的蓝色通道用于改变材料的金属度.
粗糙度贴图.roughnessMap
纹理的绿色通道用于改变材料的粗糙度
物理网格材质和其它的网格材质具有一些相同的属性,可以类比记忆学习,具体的信息可以参考Threejs文档MeshStandardMaterial
的相关介绍,比如材质发光颜色属性.emissive
、发光贴图属性.emissiveMap
、环境贴图属性.envMap
、环境贴图系数.envMapIntensity
、光照阴影贴图属性.lightMap
、法线贴图属性.normalMap
...
在大多数3D项目中,网格模型的物理材质一般需要3D美术提供颜色贴图map
、法线贴图normalMap
、金属度贴图roughnessMap
、粗糙度贴图metalnessMap
四张贴图,环境贴图不同的项目有些时候可以通用,至于其他贴图看情况需要,比如发光贴图emissiveMap
,如果有电源灯等发光表面,这时候一般需要美术提供发光贴图emissiveMap
。
下面一段代码是通过代码设置一个网格模型的物理材质。
var textureCube = new THREE.CubeTextureLoader()
.setPath('./环境贴图/环境贴图4/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'], function(texture) {
});
var texLoader = new THREE.TextureLoader()
// 网格材质设置为物理材质
mesh.material = new THREE.MeshPhysicalMaterial({
// color:0xff0000,
// 颜色贴图
map: texLoader.load("./模型/Mi_Bluetooth_Speaker_BaseColor_blue.png"),
// 如果设置了emissiveMap,自发光贴图,请务必将发光颜色设置为黑色以外的其他颜色
// emissive默认黑色,设置为白色
emissive:0xffffff,
// 发光贴图
emissiveMap: texLoader.load("./模型/Mi_Bluetooth_Speaker_blue_emissive.png"),
// 法线贴图
normalMap: texLoader.load("./模型/Mi_Bluetooth_Speaker_Normal.png"),
// 粗糙度贴图
roughnessMap: texLoader.load("./模型/Mi_Bluetooth_Speaker_Roughness.png"),
// 金属度贴图
metalnessMap: texLoader.load("./模型/Mi_Bluetooth_Speaker_Metallic.png"),
// 环境贴图
envMap: textureCube,
// 环境贴图影响程度
envMapIntensity: 0.9,
})
3D美术经常会提到一个PBR流程概念,所谓的PBR流程,就是3D美术通过3dmax、substance painter等软件为PBR物理材质MeshPhysicalMaterial
提供该材质所需要的材质贴图,原来普通的次时代流程不需要3D美术提供PBR物理材质需要的金属度贴图和粗糙度贴图,提供的是高光贴图,无论传统次时代流程还是现在比较流程的PBR流程都需要提供颜色贴图、法线贴图等贴图