Three.js PBR材质简介

参考资料：threejs中文网

threejs qq交流群：814702116

Three.js PBR材质简介

本节课没有具体的代码，就是给大家科普一下PBR材质，所谓PBR就是，基于物理的渲染(physically-based rendering)。

Three.js提供了两个PBR材质相关的APIMeshStandardMaterial和MeshPhysicalMaterial,MeshPhysicalMaterial是MeshStandardMaterial扩展的子类，提供了更多功能属性。

光照模型

如果你有初高中最基本的物理光学知识，应该有折射、镜面反射、漫反射等基本光学概念，对于实际生活中的光学问题，Three.js会提供一些的光照模型来模拟物体表面的光照，光照模型就一种模拟光照的计算方法。MeshPhysicalMaterial和MeshLambertMaterial一样都是渲染网格模型的材质，但是他们用的光照模型不同，具体点说就是材质模拟Mesh反射光照的代码算法不同，算法不同，自然模拟光照的真实程度也不同。

如果你想深入研究光照模型，可以学习下原生WebGL或WebGPU，或者看看计算机图形学相关书籍，使用threejs的大部分情况，用不着你自己实现光照模型算法，毕竟threejs通过网格模型材质帮你实现了。

PBR相关理论介绍文章

• 半小时了解PBR：https://zhuanlan.zhihu.com/p/37639418
• PBR知识体系整理：https://zhuanlan.zhihu.com/p/100596453
• PBR核心知识体系总结与概览：https://zhuanlan.zhihu.com/p/53086060

网格模型材质整体回顾

• MeshLambertMaterial: Lambert光照模型(漫反射)

• MeshPhongMaterial：Phong光照模型(漫反射、高光反射)

• MeshStandardMaterial和MeshPhysicalMaterial：基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射…)

PBR材质相比MeshLambertMaterial和MeshPhongMaterial可以提供更逼真的、更接近生活中的材质效果，当然也会占用更多的电脑硬件资源。

通过MeshPhysicalMaterial文档，提供的资源，可以查看多个PBR材质的案例效果，系统课程中轿车展示案例也会用到PBR材质。

渲染占用资源和表现能力

整体上来看，就是渲染表现能力越强，占用的计算机硬件资源更多。

• 占用渲染资源
  MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial

• 渲染表现能力
  MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial