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

光照、光源与材质

为什么同样的几何模型,会呈现截然不同的表面外观?

同一模型光源材质局部光照预测与验证
#sec-2-1
Bridge-in · Chapter 5 → 6

相机不变,模型为什么突然有了立体感?

第五章完成了观察与投影;现在保持相机与几何不变,只加入光照计算。

R06-01 · 同一三维模型:无局部光照与有局部光照
#sec-2-2
Predict · 1 min

先预测:只改变光源位置,会改变什么?

固定模型、相机、投影方式与材质,把光源从左侧移到右侧。

哪一项最可能发生变化?
A. 模型顶点坐标B. 高亮区域的位置C. 三角形数量D. 投影类型
#sec-3-1
Concept · Rendering pipeline

几何与投影之后,为什么还需要光照?

模型与观察→可见表面点→光源/材质/法向量→片元颜色
新增问题:同一个可见表面点,最后应显示什么颜色?
#sec-3-2
Light × Surface

光线到达表面以后发生什么?

R06-02 · 光线与物体表面相互作用(旧素材)

吸收

部分光能被材质吸收。

漫反射

光向多个方向散射。

镜面反射

能量集中在接近反射方向的区域。

#sec-3-3
Local vs. Global

局部光照:只计算当前点附近的关系

R06-03a · 局部光照(旧素材)

局部光照

R06-03b · 全局光照(旧素材)

全局光照

局部模型不自动计算其他物体的遮挡、反射光反复弹射和颜色渗透。
#sec-4-1
Light Model · Ambient

环境光:为什么暗面并非总是全黑?

用场景中近似均匀的照明项,模拟无法逐一追踪的环境贡献。

R06-04a · 环境光示意(旧素材)
环境光是计算近似,不是位于某个位置的独立灯具。
#sec-4-2
Light Model · Directional

平行光:远处光源,方向近似相同

R06-04b · 平行光源(旧素材)
典型近似:日光。课堂重点关注方向,而不是逐点到光源的距离。
#sec-4-3
Light Model · Point

点光源:位置改变,照射方向随之变化

R06-04c · 点光源(旧素材)
光从一个位置向外发出;随着距离增加,会发生衰减。
#sec-4-4
Light Model · Spot

聚光灯:增加发光方向与锥角

R06-04d · 聚光灯(旧素材)
与点光源相比,多了一个照射方向与角度范围。
#sec-5-1
Material · Reflection

同样的灯光,不同表面为什么外观不同?

R06-05a · 高光镜面材质:镜面反射

高光镜面表面:镜面反射(集中高光)

R06-05b · 粗糙哑光材质:漫反射散射

粗糙哑光表面:漫反射散射(柔和明暗)

R06-05c · 透明介质材质:透射与折射

透明介质表面:透射与折射(内部通透)

不同物体的微观材质构造,决定了光在表面发生镜面反射、漫反射散射或内部透射,塑造出截然不同的视觉外观。
#sec-5-2
Parameters · Light Source

要素一 · 光源:照亮场景的物理能量源

在局部光照计算中,光源由类型、几何向量与 RGB 辐射强度三要素共同定义:

R06-06 · 光源三要素:类型、几何向量与RGB强度

① 光源类型 (Type)

平行光 / 点光源 / 聚光灯
决定光线传播的几何分布与入射角范围。

② 入射向量 l (Vector)

\(\mathbf{l} = \text{normalize}(P_L - P)\)
由表面点指向光源位置,参与余弦点乘计算。

③ RGB 辐射强度 I (Color)

\(I = (I_r, I_g, I_b)\)
光谱能量向量,决定光源冷暖颜色与发光功率。

Shader 直映:光源属性通常以 uniform vec3/vec4 形式传入着色器,是外部环境的物理输入。
#sec-5-3
Parameters · Material Properties

要素二 · 材质:物体对光的吸收与反射响应

物体表面将入射光能量解构为三项反射分量,分别控制底色、立体感与高光:

R06-07 · 材质反射三属性分量分解

① 环境反射 ka

基础明度 · 消除死黑
对无方向环境光的漫射反射,维持背阴处底色。

② 漫反射 kd (\(\mathbf{l}\cdot\mathbf{n}\))

固有色 · 朗伯立体感
各向同性散射,由法线与光线夹角塑造平滑明暗。

③ 镜面高光 ks (\(\mathbf{r}\cdot\mathbf{v}\))n

高光耀斑 · 光滑度 n
\(k_s\) 控亮度,指数 \(n\) 控光斑聚拢锐利度(金属感)。

物理本质:\(k_a, k_d, k_s \in [0, 1]\) 为各分量物理反射率,与光源逐通道相乘得到出射光强。
#sec-5-4
Parameters · Viewer & Eye

要素三 · 观察者:视线决定高光落在哪里

漫反射散射向全空间各向同性,而镜面高光具有高度方向性,唯有视线对准才可见:

R06-08 · 观察者与镜面高光几何关系

① 视线向量 v

\(\mathbf{v} = \text{normalize}(\text{Eye} - P)\)
由表面点指向相机视点,确定眼睛观察方向。

② 高光视点依赖性

\(I_{\text{spec}} \propto (\mathbf{r}\cdot\mathbf{v})^n = \cos^n\alpha\)
\(\mathbf{v}\) 贴近反射方向 \(\mathbf{r}\) 见强高光;视点移动,高光位移。

③ 同一标架点乘

\(\mathbf{n}\)、\(\mathbf{l}\)、\(\mathbf{v}\) 空间统一
所有向量必须在世界或相机同一标架下完成点积运算。

三位一体闭环:光源给能量(\(\mathbf{l}, I\))、材质定响应(\(k_a, k_d, k_s\))、观察者定视角(\(\mathbf{v}\))。
#sec-5-5
Interactive Demo · Experiment

D06-01 · 光源与材质参数显微镜

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

光源与材质参数显微镜

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

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

带着问题观察与验证

  1. 分量单开验证:依次单开“仅环境光”、“仅漫反射”与“仅镜面反射”,观察不同分量对表面立体感与高光的独立贡献。
  2. 光源类型与位置切换:切换点光源与平行光并移动 X/Y/Z,观察明暗分界线与高光耀斑如何跟随移动。
  3. 高光指数对比:拖动高光指数 \(n\)(从小到大),观察高光斑点如何从大面积弥散变为集中锐利的光斑。
  4. 材质与光源颜色乘积:调节光源 RGB 与材质颜色,验证出射色彩为何是两者逐通道的乘积。
💡 重点理解:模型几何顶点保持不变,仅通过光源参数与表面材质反射系数即可计算丰富外观。
请先口头预测:哪次操作改变亮度分布?哪次改变反射颜色或高光聚拢度?
#sec-5-6
Experiment · Observe → Explain

三轮操作:每次只改变一个因素

  • 实验① 固定材质,移动光源:观察明暗区域。
  • 实验② 固定光源,改变材质颜色:观察反射颜色。
  • 实验③ 固定两者,移动视点:预测观察方向是否影响高光。
记录:改变的参数 → 观察的现象 → 自己的解释。
#sec-6-1
Data View · Preview

WebGL2需要向着色器传递什么信息?

#version 300 es
uniform vec3 uLightColor;
uniform vec3 uLightPosition;
uniform vec3 uMaterialDiffuse;
这些参数描述光源和材质;之后还需要法向量、表面位置与观察方向。
#sec-6-2
Synthesis · Five Inputs

局部光照中的五组核心信息

光源

颜色、位置或方向。

材质

各类反射系数。

表面

位置与法向量。

还需要观察方向,才能正确描述视点相关的镜面反射。
#sec-6-3
Transfer · MED × CG

医学模型查看器:如何让结构更清晰?

一个骨骼或医疗器械三维模型在不同光照下会呈现不同的形体线索。

如果局部几何凹凸难以辨认,你优先考虑哪类操作?
A. 调整光源方向与明暗对比B. 任意改变模型拓扑C. 直接更改投影类别
#sec-7-1
Summary

本课小结:三维外观来自哪些因素?

光源→材质→表面几何→观察方向→着色结果
下一课:把“表面朝向影响亮度”变成一个可计算的公式。
#sec-7-2
Check for Understanding

Exit Ticket · 一句话解释

为什么白色物体在不同颜色光照下会呈现不同颜色?
从光源RGB与材质对光的反射共同解释不要回答“因为它改了贴图”