Three.js 物理材质 MeshStandardMaterial 和 MeshPhysicalMaterial

Question

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,
})

PBR 流程

3D 美术经常会提到一个PBR流程概念，所谓的PBR流程，就是 3D 美术通过 3dmax、substance painter 等软件为 PBR 物理材质 MeshPhysicalMaterial 提供该材质所需要的材质贴图，原来普通的次时代流程不需要 3D 美术提供PBR物理材质需要的金属度贴图和粗糙度贴图，提供的是高光贴图，无论传统次时代流程还是现在比较流程的PBR流程都需要提供颜色贴图、法线贴图等贴图