学院 LOGO · 占位
#sec-1
Computer Graphics · Chapter 6 · 03

Phong 与 Blinn-Phong 局部光照模型

从分量叠加到半角优化,构建工业级经典着色模型

环境光分量完整Phong方程Blinn-Phong半角优化材质调配与显微镜Uniform数据架构
#sec-2-1
Bridge-in · Synthesis Problem

有了环境、漫反射与高光,如何组装成统一的光学模型?

前两节课我们掌握了环境底色 \(I_a\)、漫反射 \(I_d\) 与镜面反射 \(I_s\)。物体表面的最终颜色由谁主导?

R06-07 · 材质反射三属性分量分解与合成
三大光学分量各司其职:环境光防死黑、漫反射定形体、镜面光斑显光泽。
#sec-2-2
Predict · Model Combination

预测:早期图形学为什么采用简单的加权线性相加?

Bui Tuong Phong 提出将环境光、漫反射与镜面反射直接线性叠加(\(I = I_a + I_d + I_s\)),主要出于什么考量?
A. 严格符合麦克斯韦电磁方程组与能量守恒定律 B. 计算极简、GPU 运算极其飞快,且视觉效果惊人逼真 C. 真实光学世界中不同频率的光子数量天然线性相加 D. 没有物理考虑,完全是数学巧合
正确答案:B Phong 模型是经典的经验近似模型(Empirical Model),用最少算力换取了极高视觉逼真度。
#sec-3-1
Formula · Phong Model

经典 Phong 局部光照完整方程

\[I = \underbrace{k_a I_a}_{\text{环境反射}} + \underbrace{k_d I_L \max(0, \hat{\mathbf{n}}\cdot\hat{\mathbf{l}})}_{\text{Lambert漫反射}} + \underbrace{k_s I_L [\max(0, \hat{\mathbf{r}}\cdot\hat{\mathbf{v}})]^n}_{\text{Phong镜面反射}}\]

① 环境光分量 \(I_a\)

模拟房间内漫射散射光;无论朝向如何,为暗部提供保底明度,消除死黑。

② 漫反射分量 \(I_d\)

由法线与光线点乘决定;刻画平缓的阴阳明暗过渡,呈现固有色与立体形体。

③ 镜面高光分量 \(I_s\)

由反射角与视线点乘主导;沿反射锥集中出射,呈现高光耀斑与光滑质感。

#sec-3-1-fig
Figure R06-11 · Component Sum

一图拆解 Phong:环境+漫反+高光

在相同模型、相同视角下,把三项反射分量分别展示,再展示逐项合成后的效果。

R06-11 · Phong 三项分量与合成效果分解图
合成方程:\(I = I_a + I_d + I_s\);RGB 分量可逐通道累加,最后还要考虑输出颜色范围。
#sec-3-2
Multiple Lights · Linear Superposition

多光源照射下的光照累加法则

真实场景中往往存在多个主灯、补光灯与环境光,整体出射光强满足线性叠加:

\[I = k_a I_a + \sum_{m=1}^{M} \left( k_d I_{L,m} \max(0, \hat{\mathbf{n}}\cdot\hat{\mathbf{l}}_m) + k_s I_{L,m} [\max(0, \hat{\mathbf{r}}_m\cdot\hat{\mathbf{v}})]^n \right)\]

环境光的单次性

全局环境光通常在着色器中只计入一次,代表整个环境空间的基底漫射。

直接光源的独立累加

每个点光源或方向光分别计算自己的入射向量 \(\mathbf{l}_m\) 与反射向量 \(\mathbf{r}_m\),加权累加后输出。

RGB 向量运算:上述公式在 GLSL 中对 R、G、B 三个通道独立并行计算。
#sec-3-2-fig
Figure R06-12 · Multiple Lights

两盏灯各算一次:为什么要逐灯累加?

固定一个表面点 P:蓝灯与暖灯分别产生自己的 L、R 和 RGB 贡献,结果由着色器加总。

R06-12 · 多光源逐灯独立计算与线性叠加图解
公式组织:环境光通常只加一次;每个光源各自计算漫反射与镜面反射,再按 RGB 通道求和。
#sec-3-3
Physics vs Empirical

经验模型的物理本质与局限

工程优势:为什么 50 年不衰?

① 纯局部代数计算,没有任何跨三角形的射线追踪,耗时极低;
② 片元着色器天然并行计算,能轻松跑满 144Hz 实时帧率;
③ 参数直观,非常易于艺术家和程序员直观调节。

物理局限:它忽略了什么?

① 不守恒:\(k_a+k_d+k_s\) 随意调大可能导致反射能量超过入射能量;
② 无阴影:被其他物体挡住的光线依然会照亮表面(需额外 Shadow Map);
③ 无菲涅尔效应:掠射角反光急剧增强的物理现象无法自然呈现。

Phong 模型是图形学的伟大基石;之后的高级物理渲染(PBR)正是在其基础上做物理修正。
#sec-3-3-fig
Old Asset · Scope

局部与全局:光照路径差异比公式更重要

Phong 可以计算光源到当前表面的直接贡献,却不会自动生成光在表面之间反弹造成的间接照明。

局部光照与全局光照比较图
读图找缺口:直接光源 → 表面 → 眼睛可由局部模型近似;表面 → 表面 → 眼睛的多次反射需要额外算法。
#sec-4-1
Performance Bottleneck · Reflection Vector

传统 Phong 模型的 GPU 算力痛点

为什么 Jim Blinn 在 1977 年提出了对 Phong 模型的重大改良?

痛点一 · 算力开销沉重

求反射向量 \(\hat{\mathbf{r}} = 2(\hat{\mathbf{n}}\cdot\hat{\mathbf{l}})\hat{\mathbf{n}} - \hat{\mathbf{l}}\) 需要在每个片元执行一次点积、一次标量与向量乘法、一次向量减法。在早期 GPU 和移动设备上极其昂贵。

痛点二 · 视角突变与锐利裁切

当视线 \(\mathbf{v}\) 与反射向量 \(\mathbf{r}\) 夹角大于 90° 时,点积直接截断为 0;在粗糙材质的大高光区域边缘,容易出现不自然的高光生硬切边。

能否不计算反射向量 \(\mathbf{r}\),也能精准度量视线与光线的对称关系?
#sec-4-1-fig
Figure & Derivation · Reflection Geometry

反射向量 R 的几何推导:从投影到公式

依据理想反射定律与向量投影,推导传统 Phong 镜面反射向量 \(\hat{\mathbf{r}}\) 的标准代数表达式:

反射向量 R 的几何构造与推导图
几何关系:单位向量 \(\hat{\mathbf{l}}\)(入射光反向)、\(\hat{\mathbf{n}}\)(表面法线)、\(\hat{\mathbf{r}}\)(反射线)

① 正投影 · 求法向分量

单位入射向量 \(\hat{\mathbf{l}}\) 在法线 \(\hat{\mathbf{n}}\) 上的标量正投影为 \(\cos\theta = \hat{\mathbf{n}}\cdot\hat{\mathbf{l}}\),沿法向分量为: \(\mathbf{l}_{\parallel} = (\hat{\mathbf{n}}\cdot\hat{\mathbf{l}})\hat{\mathbf{n}}\)

② 几何对称 · 中点与平行四边形

由反射定律,\(\hat{\mathbf{l}}\) 与 \(\hat{\mathbf{r}}\) 构成菱形,其连线中点恰好落在法向投影分量端点: \(\frac{\hat{\mathbf{l}} + \hat{\mathbf{r}}}{2} = (\hat{\mathbf{n}}\cdot\hat{\mathbf{l}})\hat{\mathbf{n}} \iff \hat{\mathbf{l}} + \hat{\mathbf{r}} = 2(\hat{\mathbf{n}}\cdot\hat{\mathbf{l}})\hat{\mathbf{n}}\)

③ 移项解算 · 反射向量公式

移项解出 \(\hat{\mathbf{r}}\),即得标准反射计算公式(对应着色器 reflect(-l, n)): \(\hat{\mathbf{r}} = 2(\hat{\mathbf{n}}\cdot\hat{\mathbf{l}})\hat{\mathbf{n}} - \hat{\mathbf{l}}\)

计算代价:求 \(\hat{\mathbf{r}}\) 需 1 次点积、1 次数乘与 1 次减法,片元着色器逐像素计算负担重,这启发了 Blinn-Phong 采用半角向量 \(\hat{\mathbf{h}}\)。
#sec-4-2
Innovation & Geometry · Halfway Vector

半角向量 H:Blinn-Phong 的核心创新

将“视线对准反射线(\(\hat{\mathbf{v}}\approx\hat{\mathbf{r}}\))”巧妙转化为“法线对准半角方向(\(\hat{\mathbf{n}}\approx\hat{\mathbf{h}}\))”:

Blinn-Phong 半角向量 H 几何构造图
几何构造:单位向量 \(\hat{\mathbf{l}}\) 与 \(\hat{\mathbf{v}}\) 模长均为 1,向量和 \(\hat{\mathbf{l}}+\hat{\mathbf{v}}\) 沿菱形对角线(天然角平分线)

① 代数定义与高效计算

\(\hat{\mathbf{h}}\) 为入射光反向 \(\hat{\mathbf{l}}\) 与视线 \(\hat{\mathbf{v}}\) 的单位角平分线向量: \(\hat{\mathbf{h}} = \operatorname{normalize}(\hat{\mathbf{l}} + \hat{\mathbf{v}}) = \frac{\hat{\mathbf{l}} + \hat{\mathbf{v}}}{\|\hat{\mathbf{l}} + \hat{\mathbf{v}}\|}\) 只需 1 次加法与 1 次归一化;若视点与光源位于无穷远(平行光),\(\hat{\mathbf{h}}\) 全局恒定!

② 光学物理等价性

由几何对称,当微观法线与半角向量重合(\(\hat{\mathbf{n}}=\hat{\mathbf{h}}\))时,入射角必等于反射角,入射光完美镜面反射入人眼,高光达到极大值!

③ 高光度量与视觉优势

用 \(\max(0, \hat{\mathbf{n}}\cdot\hat{\mathbf{h}})\) 近似度量高光:峰值方向一致且过渡平滑,彻底避免了夹角大于 90° 时的生硬切边伪影。

思路飞跃:从“求反射线追踪视线”转变为“构造角平分线比对法线”,不仅大幅削减片元算力开销,而且为现代微表面理论(PBR)奠定了坚实基石。
#sec-4-3
Formula · Blinn-Phong

Blinn-Phong 高光计算方程与工业优势

\[I_{s,\text{Blinn}} = k_s I_L [\max(0, \hat{\mathbf{n}}\cdot\hat{\mathbf{h}})]^{\beta}\]

① 便于优化与复用

无需计算复杂的反射向量 \(\mathbf{r}\);当视点与光源处于无穷远时,\(\mathbf{h}\) 在整个网格面上为常数向量!

② 高光过渡更平滑

\(\mathbf{n}\cdot\mathbf{h}\) 随视点变化平缓,避免了 90° 截断突变硬边,大高光表现更加真实自然。

③ 经典实时渲染方案

通常取指数 \(\beta \approx 2n \sim 4n\) 即可匹配传统 Phong 的光斑大小。OpenGL、Direct3D 与 WebGL 均不规定默认光照模型,须由着色器实现。

#sec-4-3-fig
Figure R06-13 · Model Comparison

同一光照条件:R·V 与 N·H 是两种高光近似

两幅几何图使用同一表面、光源、相机与法线;唯一的区别是传统 Phong 测量 R·V,Blinn-Phong 测量 N·H。

R06-13 · Phong 与 Blinn-Phong 两种高光点乘几何对比图
严谨比较:峰值对齐条件相同,但余弦幂的函数曲线不同;指数 n 与 β 需要按目标高光宽度调节,并非严格等价。
#sec-5-1
Interactive Demo · D06-01

D06-01 · 局部光照与材质参数显微镜

D06-01 · 教学实验台 WebGL2 + GLSL ES 3.00 + 局部光照渲染

光源与材质参数显微镜

固定同一个球体与器械模型及相机视角,独立调控光源与材质属性,实时观察光照分量与明暗高光响应。

🔹 分量独显与合成:支持仅环境光、仅漫反射、仅镜面反射或完整组合叠加渲染
🔹 材质分量解构:环境反射 \(k_a\)、漫反射 \(k_d\)、镜面反射 \(k_s\) 与高光指数 \(n\)
🔹 光源多维调控:平行光 / 点光源 / 聚光灯、位置方位角与 RGB 光谱能量
课堂观察任务 4 min

带着问题观察与验证

  1. 独显单项分量:依次切换“仅环境光”、“仅漫反射”、“仅镜面反射”,观察它们各自单独渲染时的视觉效果。
  2. 调大高光指数 n:把指数从 4 拖到 128,观察高光白斑如何从大范围弥散变为集中锐利的光点。
  3. 关闭漫反射(kd=0):观察只保留高光的纯黑球体,体会镜面反射与漫反射的独立性。
  4. 全项组合复原:同时开启三项分量,观察真实塑料球与手术钳器械的立体质感。
💡 核心验证:三个分量互不干扰,线性叠加后呈现出完整的材质外观。
#sec-5-2
Material Engineering · Presets

参数调配:常见材质的光学特征

通过设置不同的 \(k_a, k_d, k_s, n\) 组合,可以精确仿真现实生活中的各类质感:

塑料 / 涂漆木器

固有漫反射 + 白色高光
\(k_d\) 较高(表现物体红/蓝颜色),\(k_s\) 适中且高光为白色,\(n \approx 16 \sim 64\)。

金属 (Gold/Copper)

无漫反射 + 彩色镜面高光
\(k_d \approx 0\),\(k_s\) 极高且高光带有金属自身颜色(金色/铜色),\(n \ge 128\)。

粉笔 / 粗糙陶土

纯朗伯漫反射体
\(k_d\) 较高呈现灰白色,\(k_s \approx 0\) 完全没有高光耀斑,表面哑光柔和。

#sec-5-2-fig
Old Asset · Material Gallery

同一茶壶、不同参数:材质视觉对照

保持几何形体不变,只改变材质的漫反射色、镜面反射色和高光指数;观察从哑光到光泽的外观变化。

多个茶壶材质参数对比图
观察任务:哪一个主要由 kd 决定主体颜色?哪个出现窄而亮的高光?不能只凭高光大小唯一判断真实材料。
#sec-5-2-table
Authoritative Presets · OpenGL Material Library

典型材质参数配置表(OpenGL 经典经验库)

工业界经典标准(OpenGL Red Book)汇总的典型材质光学参数,展示金属、宝石与电介质的各分量配置:

典型材质 物理分类 环境反射 ka (RGB) 漫反射 kd (RGB) 镜面高光 ks (RGB) 高光指数 n / β 光学视觉特征
黄金 (Gold) 贵金属 (0.247, 0.200, 0.075) (0.752, 0.606, 0.226) (0.628, 0.556, 0.366) n = 51.2 (β ≈ 128) 高光带暖黄,金属反射强烈
白银 (Silver) 贵金属 (0.192, 0.192, 0.192) (0.508, 0.508, 0.508) (0.508, 0.508, 0.508) n = 51.2 (β ≈ 128) 全波段均匀反射,呈银白光泽
黄铜 (Brass) 合金 (0.329, 0.224, 0.027) (0.780, 0.569, 0.114) (0.992, 0.941, 0.808) n = 27.9 (β ≈ 80) 高光极强带浅金,光斑相对宽广
翡翠 (Emerald) 宝石矿物 (0.022, 0.175, 0.022) (0.076, 0.614, 0.076) (0.633, 0.728, 0.633) n = 76.8 (β ≈ 200) 翠绿漫反射基底,高光锐利晶亮
青色塑料 (Cyan Plastic) 电介质 (0.000, 0.100, 0.060) (0.000, 0.510, 0.510) (0.502, 0.502, 0.502) n = 32.0 (β ≈ 90) 非金属典型:高光为纯白光源色
黑色橡胶 (Black Rubber) 哑光体 (0.020, 0.020, 0.020) (0.010, 0.010, 0.010) (0.400, 0.400, 0.400) n = 10.0 (β ≈ 25) 反射率与指数均低,光斑弥散柔和
参数配置经验规律:① 金属 vs 电介质:非金属表面高光 ks 呈中性灰白色,金属高光被其自由电子吸收而带有金属固有色;② 高光指数:粗糙表面指数低(光斑大),抛光表面指数高(光斑锐)。Blinn-Phong 指数取 β ≈ 2n ~ 4n。
#sec-5-3
Troubleshooting · Visual Artifacts

现象反推与光照排错

三维场景渲染出来表面完全没有高光亮斑,应优先排查哪些几何与参数原因?
A. 材质高光反射系数 \(k_s\) 是否被误设为 0 B. 相机视线 \(\mathbf{v}\) 是否与反射光锥夹角过大(没对准高光) C. 该表面点是否处于背向光源的阴影面(\(\mathbf{n}\cdot\mathbf{l}\le 0\)) D. 以上三项均需严格逐一排查
正确答案:D 高光计算是乘法链路,系数为零、几何错位或背光保护都会导致高光缺失。
#sec-6-1
Implementation · GLSL Structure

WebGL2 中的 Uniform 结构体设计

#version 300 es
// 光源属性结构体
struct Light {
    vec3 position;  // 世界坐标位置
    vec3 ambient;   // 环境光 RGB 强度
    vec3 diffuse;   // 漫反射 RGB 强度
    vec3 specular;  // 镜面高光 RGB 强度
};
// 材质属性结构体
struct Material {
    vec3 ka;        // 环境反射系数
    vec3 kd;        // 漫反射系数(固有色)
    vec3 ks;        // 镜面反射系数
    float shininess;// Blinn-Phong 高光指数
}; 

uniform Light uLight;
uniform Material uMaterial;
结构清晰化:使用 GLSL 结构体(struct)组织 Uniform,代码与 CPU 侧场景数据完美映射。
#sec-6-2
Limits · Local Illumination

局部光照模型能做什么,不能做什么?

可以局部近似解释与渲染

① 单个表面的朝向与明暗变化;
② 光滑材质的高光耀斑与视点移动效应;
③ 材质颜色与光源颜色的光谱乘积。

不能自动处理的全局现象

① 投射阴影:被前面茶壶挡住的桌子依然被光照亮(需 Shadow Map);
② 相互反射:红色墙面无法将红光漫射弹射到白色地板上;
③ 透明折射:玻璃器皿内部的折射与焦散光斑。

区分“局部光照(Local)”与“全局光照(Global)”,清楚工程近似的边界所在。
#sec-6-2-fig
Old Asset · Local vs Global

Phong 的边界:有光就一定亮吗?

只判断表面法线与光源方向无法得知光线是否被遮挡,也无法模拟多次反弹。

多次反射全局光照现象
辨识检查:投射阴影要加入可见性判定;间接光照需额外计算,全局照明并不是多加一盏灯。
#sec-6-3
Transfer · MED × CG

迁移应用:医学三维可视化中的光照调优

在医学解剖三维重建(如胸腔骨骼或微创手术器械)中,如何设置光照参数?

骨骼与软组织

强调漫反射,抑制强高光
骨质表面具有微孔粗糙度,设置高 \(k_d\)、低 \(k_s\) 与低 \(n\)。若高光过强,反光白斑会遮挡微细骨折裂隙!

手术镊与钛合金器械

强调镜面高光,突出锋利金属轮廓
器械表面抛光精密,设置高 \(k_s\) 与高 \(n\)(128以上),借助狭窄耀斑凸显手术器械的空间走向与刃口金属感。

#sec-7-1
Summary · 120 Minutes Closure

第一单元知识大闭环:从物理到像素

6-1 宏观三要素
光源 · 材质 · 观察者
→ 6-2 微观两大定律
Lambert 漫反 + 镜面高光
→ 6-3 模型合成与工程
Phong累加 + Blinn半角
承上启下:现在我们能精准计算某一个几何点的光照;但三维网格由成千上万多边形组成,这些光照计算究竟应该在何时、何处执行?
#sec-7-2
Check for Understanding

Exit Ticket · 必须分清的“两个Phong”

“Phong 光照模型 (Phong Illumination Model)” 与 “Phong 着色算法 (Phong Shading)” 是一回事吗?
A. 是完全相同的同义词,只是英文翻译不同 B. 完全不同:前者是一个点上的光学计算公式;后者是片元级法向量插值着色策略 C. 前者已经完全被废弃,后者是现代 GPU 渲染的通用名称 D. 前者只能在 CPU 计算,后者只能在 GPU 片元着色器计算
正确答案:B 前者回答“如何计算一点的反射”,后者回答“网格面内何时计算光照”(下一课 6-4 核心!)。