Web编程技术营地
研究、演示、创新

微表面 PBR 模型

撰写时间:2026-07-21

修订时间:2026-07-21

概述

在上一章中,尽管我们使用Phong模型渲染出现环境光漫反射光高光,但这些公式只侧重于为光源建立起数学模型。例如,高光公式中只有高光强度specStrength光泽系数shininess参与了运算。

可见,这种模型忽略了材质属性的差异性。在真实物理世界中,所有光滑的表面,若仔细看,它们都由坑坑洼洼的细小表面所构成。只不过光滑的材质(如镜面),这些微表面都朝同一个方向整齐排列;而粗糙的材质(如橡胶),这些微表面各朝不规律的方向排列。这些特性,必将影响最终的光照朝向。

此外,材质对光照的吸收、反射能力也能影响漫反射高光的计算。例如,非金属将产生漫反射及较弱的镜面反射;而金属将主要产生镜面反射漫反射很少或几乎没有。

微表面PBR模型 (Microfacet physically-based rendering,微表面基于物理的渲染模型) 将这些特性纳入至其数学模型中,通过引入粗糙度 (roughness) 及金属度 (metallic) 这两个最关键的基本因子,完美覆盖了从塑料、皮肤、金属、清漆等各个材质的差异,从而使得渲染效果更为逼真、绚丽。

微表面 PBR 模型的特征

微表面PBR模型有以下4个物理特性:

  1. 基于微表面假设:表面由无数微小、完美的镜面组成,光线在这些微表面上发生完美的镜面反射
  2. 能量守恒:小范围内的高光刺眼,大范围内的高光柔和。也即反射光折射光漫反射光的能量总和,不能超过入射光的能量。
    这是其与Phong模型最大的不同点。
  3. 基于BRDFBRDF,全称为 Bidirectional Reflectance Distribution Function,中文通常译为双向反射分布函数二向性反射分布函数。它规范了光线照到物体表面后,如何向不同方向反射的规律。从视觉上,它决定了我们从一个特定角度观察物体时,能看到多亮的反光。
  4. 精准模拟菲涅尔效应菲涅尔效应,英文为 Fresnel reflection,即反射强度随观察角度不同而变化。较为典型的场景有:1、近处湖水透明能看到水中的小鱼来回游弋(反射差)、远处湖水变成镜子而倒映出高山及云朵(反射变强);2、靠近窗户玻璃能看清外面,远离窗户玻璃却能看到房间内物体的镜像;3、光滑圆球中心反光弱而边缘反光强。

三大核心分量公式

法线分布函数

描述微表面法线与半角向量对齐的概率。

\[D_{GGX} = \frac {α^2} {𝛑 \cdot [(n \cdot h)^2 \cdot (α^2 - 1) + 1]^2}\]

其中粗糙度参数\(α = roughness^2\),用于控制微表面分布的离散程度。

具体应用代码:

几何遮蔽函数

模拟微表面之间的光线遮挡衰减。

\[G_{Smith} = \frac {0.5} {𝜆_V + 𝜆_L}\]

其中,

\[𝜆_V = (n \cdot l) \cdot \sqrt {(n \cdot v)^2 \cdot (1 - α^2) + α^2}\]

\[𝜆_L = (n \cdot v) \cdot \sqrt {(n \cdot l)^2 \cdot (1 - α^2) + α^2}\]

菲涅尔效应

模拟不同入射角下的反射率变化。

\[F = F_0 + (1 - F_0) \cdot (1 - cosθ)^5\]

其中,\(cosθ = h \cdot v\),\(F_0\)为材质垂直入射的基础反射率,在GLSL中,其公式为:

\[F_0 = mix(vec3(0.04), albedo, uMetallic)\]

其中的\(albedo\)为通用的反射率,glTF 2.0中使用baseColor来代替。则\(F_0\)的值介于灰色(0.04, 0.04, 0.04)baseColor颜色值之间,可模拟表面既有金属属性又有非金属属性的混合质感。

对于所求出的\(F\),仍需下面代码联动地保障其能量守恒:

kS代表高光反射项,kD代表漫反射项。当uMetallic值为1(金属)时,漫反射kD值为0,意味着此时金属物体的漫反射完全消失,所有颜色均靠高光kS来呈现,完美契合金属没有漫反射的物理现实。

而当uMetallic值为0(非金属)时,漫反射kD取除去高光之外的值,也即baseColor颜色值。而高光只反射4%的白光。

代码

顶点着色器

与上一章相比,其代码无变动。

片断着色器代码变化较大:

运行应用

参考资源

  1. WebGL 1.0 Specification
  2. WebGL 2.0 Specification
  3. OpenGL ES 3.0 Reference Pages
  4. glMatrix.net