Three.js 次时代和 PBR（MeshPhongMaterial 和 MeshStandardMaterial）

Question

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

光照模型

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

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

高光网格材质 MeshPhongMaterial

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

基于物理的材质 MeshStandardMaterial 和 MeshPhysicalMaterial

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

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

次时代和 PBR 流程

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

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

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

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

质感

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