WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js物理材质MeshStandardMaterialMeshPhysicalMaterial

MeshStandardMaterialMeshPhysicalMaterial类是PBR物理材质,可以更好的模拟光照计算,相比较高光网格材质MeshPhongMaterial渲染效果更逼真。

MeshStandardMaterialMeshPhysicalMaterial两个类基本相似,物理网格材质MeshPhysicalMaterialMeshStandardMaterial的扩展,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流程都需要提供颜色贴图、法线贴图等贴图

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com