threejs使用pbr物理材质

MeshStandardMaterial 是 three.js 里默认走 PBR 的材质。它的着色基于 metallic-roughness 工作流——也就是 glTF 用的那一套——光照响应是物理化的,跟 MeshPhongMaterial 那种靠高光指数凑出来的效果不是一个路子。

它一共两个核心旋钮:

参数 范围 含义
metalness 0–1 0 是电介质(塑料、木头、漆面、玻璃),1 是纯金属。中间值基本只在烘焙贴图里出现
roughness 0–1 0 是镜面,高光收成一个点;1 完全漫反射,没有高光

两个参数,配上一张 color、一张法线贴图,已经能覆盖场景里绝大部分东西:塑料外壳、木头桌面、没上漆的金属、混凝土、地面。日常够用了。

但它们有一条共同的边界——描述的全都是”同一个表面”。roughness 说的是这个表面有多粗糙,metalness 说的是这个表面是不是金属,color 说的是这个表面是什么颜色。三个答案指向的是同一层。

一辆车不是这么回事:

  • 车漆是两层。底下是带颜色的色漆,上面覆一层无色透明的清漆。清漆有自己的粗糙度,跟底色那层完全是两回事——底色可以很哑,清漆同时很亮。
  • 玻璃不是一个”表面”,是一个”体积”。光要穿过去,还要在穿过的那段路程里被染色。
  • 轮毂是纯金属,没有漫反射,看到的全是反射来的环境。这条 standard 能表达,但它会牵出环境贴图的问题。

前两条 MeshStandardMaterial 表达不了:它没法说”这个表面之上还盖着另一层,那层有自己的粗糙度”,也没法说”光会穿过这个表面,并在里面走一段”。

MeshPhysicalMaterial 就是来补这两块的。

阅读更多