Three.js次时代和PBR(MeshPhongMaterialMeshStandardMaterial)

本文涉及到的关键词有高光网格材质MeshPhongMaterial、标准网格材质MeshStandardMaterial、物理网格材质MeshPhysicalMaterial、次时代、PBR,如果你对这些关键词有一定的了解更好,如果没有可以查阅Three.js官方文档或中文档了解相关的材质,百度了解下与3D美术相关的次时代流程、PBR流程。

光照模型

如果你有最基本的物理光学知识,应该有反射、折射、镜面反射、漫反射等基本光学概念,对于实际生活中的光学问题,Three.js会提供一些的光照模型计算物体表面的光照变化,MeshStandardMaterialMeshPhongMaterial一样都是渲染网格模型的材质,本质上都是顶点着色器和片元着色器代码,只是光照模型不同,反映到着色器代码就是光照计算算法不同。一种光照计算算法,就是一种光照模型,更多关于关照模型的内容可以学习计算机图形学。

基于物理的材质MeshStandardMaterial相比较基于Phong光照模型的高光网格材质MeshPhongMaterial能够更加真实的描述物体表面的光照变化,简单说就是渲染效果更好,比如通过MeshStandardMaterial设置一个金属材质效果,比MeshPhongMaterial效果更逼真,不过基于物理的材质MeshStandardMaterial相比较高光网格材质MeshPhongMaterial而言,需要消耗更多的计算机计算资源。

高光网格材质MeshPhongMaterial

高光网格材质MeshPhongMaterial支持定义高光颜色属性.specular和高光贴图属性.specularMap,主要用来表达网格表面的镜面反射效果,如果一个网格模型表面镜面反射效果是一样的,可以直接定义高光颜色属性.specular,如果一个网格模型表面不同位置的镜面反射程度不一样,也就是高光颜色值不同,可以通过一张高光贴图去表示,赋值给材质的高光贴图属性.specularMap即可。

基于物理的材质MeshStandardMaterialMeshPhysicalMaterial

物理网格材质MeshPhysicalMaterial和标准网格材质MeshStandardMaterial一样都是基于物理渲染的材质,MeshStandardMaterialMeshPhysicalMaterial的基类,两个材质基本相同,具体更多内容可以查看Three.js文档。

MeshStandardMaterialMeshPhongMaterial一样都支持颜色贴图map、法线贴图normalMap,不同的地方在于MeshStandardMaterialMeshPhysicalMaterial不支持高光贴图.specularMap,没有高光颜色属性.specularMeshStandardMaterial增加了金属度.metalness和粗糙度.roughness两个属性来表达物体表面的反射情况,与金属度和粗糙度对应的两个贴图属性分别是金属度贴图.metalnessMap和粗糙度贴图.roughnessMap

次时代和PBR流程

如果你想展示一个三维场景,比如一辆轿车,首先需要3D美术建模和烘培,然后程序员通过Three.js引擎加载解析显示出来。

对于3D美术来说烘培的时候有次时代、PBR两种流程,这两种所谓的流程,对应的就是Three.js的高光网格材质MeshPhongMaterial、基于物理的材质MeshStandardMaterialMeshPhysicalMaterial

对于程序员而言,如果你不想深入理解什么是高光网格材质,什么是基于物理的材质,每种材质对应的着色器代码应该如何编写,这种情况下,你只需要会选择使用哪种网格材质就可以。

如果3D美术烘培的时候是次时代流程,也就是贴图中你可以看到高光贴图.specularMap,你需要选择高光网格材质MeshPhongMaterial渲染该模型,如果3D美术烘培的时候是PBR流程,也就是贴图中你可以看到金属度贴图.metalnessMap和粗糙度贴图.roughnessMap,你需要选择基于物理的材质MeshStandardMaterialMeshPhysicalMaterial解析渲染。

质感

如果展示一个物体,需要很好的质感,比如轿车、珠宝等产品展示,可以让3D美术选择PBR流程烘培导出贴图,程序员使用基于物理的材质MeshStandardMaterialMeshPhysicalMaterial进行解析渲染。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号