渲染管线

前情回顾：07 矢量与实体 讲清了 GPU 实例化、SDF/MSDF 字体渲染和 Billboard 技术。当数万标记、折线和地名标签被高效提交到 GPU 后，它们是如何在屏幕上变成最终像素的？一篇优秀的 3D 地图为什么看起来”通透”、“有空气感”？本篇回答：GPU 渲染管线的工作原理，以及如何管理颜色和光。

直觉问题

打开任意一个现代 3D 地图引擎，观察这些现象：

• 为什么远处的山看起来是”蓝”的？ 现实中空气对光的散射（Rayleigh 散射）会让远山偏蓝。在计算机里，这种”有空气感的画面”是怎么模拟的？
• 为什么高亮的云层像”炸开”一样过曝？ 将 HDR（高动态范围）光照直接显示在屏幕上时，过亮的区域会丢失细节。Tone Mapping 是如何把”无限亮度的光”压到屏幕能显示的 0~1 范围内的？
• 8 步帧循环里的每一步都在干什么？ 第 1 步”相机更新”和第 4 步”视锥剔除”谁先谁后？
• 透明物体（如半透明多边形）为什么不能和不透明物体一起画？ 如果先画了半透明地面再画山脉，会发生什么？
• Picking 的颜色编码为什么不直接在最前面做？ 如果 Picking 和最终渲染使用同一管线，会有什么问题？

读完本篇，你能回答：GPU 渲染管线每个阶段发生了什么？为什么 Tone Mapping 不是”加个滤镜”而是物理上必要的？大气散射如何用数学模拟？

核心概念白话讲

GPU 渲染管线：从顶点到像素的流水线

想象你是一个 GPU——你的工作是：接收一堆三维坐标，把它们变成屏幕上的像素颜色。你不能”逐个点慢慢画”，你必须像工厂流水线一样高效处理。

渲染管线（Graphics Pipeline） 就是这个工厂流水线的规范，定义了数据从顶点输入到像素输出的标准路径：

正在加载图表…

8 步帧循环：每一帧的完整舞蹈

上一篇提到的 8 步循环，本质上是CPU 侧的逻辑组织，但它决定了 GPU 在每个阶段接收什么数据：

步骤	阶段	CPU 在做什么	GPU 在做什么
1. 相机更新	输入	计算视图矩阵、投影矩阵	—
2. 事件处理	控制	响应输入、更新状态	—
3. 批量绘制	输入	收集可见对象到 Draw List	—
4. 视锥剔除	优化	过滤视锥外的对象	—
5. 瓦片调度	调度	计算需要加载/卸载的瓦片	—
6. 实体渲染	渲染	提交 Draw List	顶点 → 光栅 → 像素
7. 透明排序	渲染	按深度排序透明物体	混合计算
8. 拾取渲染	拾取	生成颜色编码的 Picking Buffer	快速渲染

HDR vs LDR：光照范围的”分辨率”

LDR (Low Dynamic Range)：屏幕像素只能存 0~1 的颜色。1.0 就是纯白，0.0 就是纯黑。

HDR (High Dynamic Range)：光照值可以远超 1.0——正午的阳光可能是 10000，室内灯光只有 5。如果直接把 HDR 值截断到 1.0，亮部全部变成死白，丢失所有细节。

特性	LDR	HDR
颜色精度	8-bit (0~255)	16-bit / 32-bit float
最大亮度	1.0	无上限 (> 10000)
是否截断	是，> 1.0 变成白	否，保留全部细节
最终显示	直接输出	需要 Tone Mapping

Tone Mapping：不只是”加个滤镜”

Tone Mapping 的核心任务：将 HDR 高动态范围的颜色映射到 LDR 显示设备的有限动态范围，同时保留视觉对比度和细节。

它不是”压暗高光、提亮阴影”那么简单——这是有物理意义的：

• 保留局部对比度：暗部和亮部都要有细节，不能”一刀切”
• 防止过曝和欠曝：亮部不糊、暗部不黑
• 审美调节：不同算法产生不同的”胶片感”

大气散射：为什么天空是蓝的？

Rayleigh 散射：空气分子（如 N、O）的尺寸远小于可见光波长（约 400~700 nm），根据瑞利散射定律，散射强度与波长的四次方成反比：

$I(\lambda) \propto \frac{1}{\lambda^4}$

这意味着蓝光（波长约 450 nm）比红光（波长约 650 nm）散射强约 5 倍。所以：

• 白天：太阳光中的蓝光被天空到处散射 → 天是蓝的
• 日出/日落：阳光穿过更厚的大气层，蓝光被散射殆尽，剩下红光 → 天是红的

Mie 散射：大气中的微粒（尘埃、水滴）尺寸与光波长相近或更大。散射强度与波长关系不大，所以散射光呈现白色（所有波长混合）。

散射类型	粒子尺寸	波长依赖	散射方向	颜色
Rayleigh	<< λ	强（λ⁻⁴）	各向同性（近似）	蓝
Mie	≈ λ	弱	前向为主	白/灰

原理与数学/机制

1. GPU 渲染管线详解

1.1 顶点阶段：世界 → 屏幕

顶点阶段的核心任务：把三维世界坐标变换为二维屏幕坐标。这通过三个矩阵级联完成：

$V_{clip} = P \cdot V \cdot M \cdot V_{local}$

其中：

• M (Model)：把局部坐标变换到世界坐标
• V (View)：把世界坐标变换到相机坐标系
• P (Projection)：把相机坐标投影到裁剪空间（Clip Space）

裁剪空间：一个 $[-1, 1]^3$ 的立方体。GPU 硬件自动丢弃立方体外的顶点，这就是几何裁剪。

经过透视除法（除以 w 分量），顶点从裁剪空间进入归一化设备坐标 (NDC)：$[-1, 1]^3$。

最后，NDC 坐标被视口变换映射到屏幕像素坐标：

$x_{screen} = (x_{NDC} + 1) \cdot \frac{width}{2} + viewport_x$

$y_{screen} = (1 - y_{NDC}) \cdot \frac{height}{2} + viewport_y$

1.2 光栅化：三角形 → 像素

光栅化是 GPU 的”魔法”——给定三个顶点，自动算出三角形覆盖的所有像素。对于每个像素，GPU 会：

1. 用重心坐标 $(u, v, w)$ 且 $u + v + w = 1$ 计算该像素的属性插值
2. 对每个顶点属性（颜色、UV、法线）进行线性插值
3. 得到该像素的属性后，送入片元（Fragment）阶段

重心坐标插值公式（以颜色为例）：

$color_{pixel} = u \cdot color_0 + v \cdot color_1 + w \cdot color_2$

1.3 片元阶段：像素着色

片元阶段是渲染管线的”大脑”——这里决定每个像素最终的颜色。对于 3D 地图，典型的片元着色流程：

输入：像素坐标 (x,y)，插值后的 UV、法线、世界位置
步骤：
1. 从纹理采样基础颜色 (albedo)
2. 计算光照（环境光 + 方向光/点光）
3 come idiot3. 用 normal map 扰动法线（如果有）
4. 可选：反射/折射采样 cube map
5. 应用大气散射（后处理或逐像素）
6. 输出 RGBA

1.4 输出阶段：深度测试与混合

这是 GPU 的”智能守门员”：

深度测试 (Depth Test)：

• 读取当前像素的深度缓冲值 $z_{buffer}(x, y)$
• 比较新像素的深度 $z_{new}$
• 如果 $z_{new} < z_{buffer}$（更近），更新颜色缓冲和深度缓冲
• 否则丢弃该像素

混合 (Blending)：

• 用于半透明物体
• $output = src_{color} \times src_{factor} + dst_{color} \times dst_{factor}$
• 常见模式：$src_{factor} = src_{alpha}$, $dst_{factor} = 1 - src_{alpha}$

2. Tone Mapping 的数学原理

2.1 Reinhard Tone Mapping

最简单的 Tone Mapping 方法，将无界亮度映射到 [0, 1]：

$L_{out} = \frac{L_{in}}{1 + L_{in}}$

优点：简单、连续、不会过曝 缺点：整体发灰，对比度损失

2.2 Uncharted 2 Tone Mapping

由 Naughty Dog 的 John Hable 提出，模仿胶片响应曲线：

$L_{out} = \frac{L \cdot (A \cdot L + C \cdot B)}{L \cdot (A \cdot L + B) + C \cdot D} - \frac{C \cdot F}{E}$

常数（经验值）：$A = 0.15, B = 0.50, C = 0.10, D = 0.20, E = 0.02, F = 0.30$

优点：保留亮部细节，暗部对比度好 缺点：几个魔法常数需要调参

2.3 ACES (Academy Color Encoding System)

电影工业标准，精确模拟胶片扫描仪的响应：

$L_{out} = \frac{(L \cdot (a \cdot L + b))}{(L \cdot (c \cdot L + d) + e)}$

其中常数 $a, b, c, d, e$ 由 ACES 标准定义。

优点：行业标准、色域宽、最自然的视觉体验 缺点：计算更复杂

2.4 色温和 White Balance

Tone Mapping 之后还要处理白平衡——确保”白色”真的是中性的。不同光源有不同色温：

光源	色温 (K)	色调
阴天天空	6500	中性
正午日光	5500	暖白
白炽灯	2700	橙 Threshold
烛光	1850	深橙

$R_{wb} = R_{out} \cdot \frac{1}{white_r}$

$G_{wb} = G_{out} \cdot \frac{1}{white_g}$

$B_{wb} = B_{out} \cdot \frac{1}{white_b}$

3. 大气散射的物理模型

3.1 Rayleigh 散射模型

对于从光源到观测者路径上的每一点，散射强度为：

$I_{scatter}(\lambda) = I_0 \cdot \frac{\pi^2 \cdot (n^2 - 1)^2}{2N} \cdot \frac{1}{\lambda^4} \cdot P(\theta)$

其中：

• $I_0$：入射光强度
• $n$：空气折射率
• $N$：分子数密度
• $P(\theta)$：相位函数（散射方向分布）

3.2 Mie 散射模型

Mie 散射的强度计算需要用到更复杂的 Mie 理论（涉及贝塞尔函数），但近似公式为：

$I_{mie}(\theta) = \frac{I_0}{k^2} \cdot |S(\theta)|^2$

其中 $S(\theta)$ 是散射振幅函数，$k = 2\pi/\lambda$ 是波数。

Mie 散射的相位函数（方向分布）明显前向偏置——光线主要沿着入射方向散射。这让太阳周围出现明显的光晕 (Glory) 和雾霭 (Aureole)。

3.3 光学深度 (Optical Depth)

光线穿过大气层时，部分被吸收或散射。定义光学深度 $\tau$：

$\tau = \int_{s_0}^{s_1} \beta(s) \, ds$

其中 $\beta(s)$ 是沿路径的消光系数。光学深度越大，衰减越严重。

Beer-Lambert 定律（描述光强衰减）：

$I = I_0 \cdot e^{-\tau}$

3.4 完整的逐像素大气散射计算

在 3D 地图中，通常从相机位置 $C$ 向像素方向 $\omega$ 追踪一条射线：

for each step t along [near, far]:
    计算当前点 P = C + t * ω 到地心的距离 r
    如果 r > 大气层外半径：break

    // 计算该点的散射系数
    ρ_rayleigh = exp(-(r - R_earth) / H_rayleigh)
    ρ_mie = exp(-(r - R_earth) / H_mie)

    // 太阳光到该点的光学深度
    τ_sun = optical_depth(P, sun_direction)

    // 该点对相机的散射贡献
    scatter_rayleigh += ρ_rayleigh * phase_rayleigh(θ) * exp(-τ_sun) * sun_color
    scatter_mie += ρ_mie * phase_mie(θ) * exp(-τ_sun) * sun_color

最终将散射结果叠加到原图上：

$color_{final} = color_{scene} \cdot e^{-\tau_{total}} + scatter_{rayleigh} + scatter_{mie}$

4. 瓦片数据的多纹理混合

3D 地图一个瓦片可能同时包含影像纹理、法线纹理、粗糙度纹理等。如何混合？

Modulate 混合（颜色乘积）：

$color_{base} = tex_{color} \cdot vertex_{color}$

Overlay 混合（基于基色亮度）：

当基色 $base < 0.5$ 时用 $2 \cdot base \cdot blend$，否则用 $1 - 2 \cdot (1 - base) \cdot (1 - blend)$。

Normal Map 扰动： 将纹理采样到的法线（通常存为 $[-1, 1]$ 映射的 RGB）从切线空间变换到世界空间，用于光照计算。

可视化对比与动手实验

实验 1：不同 Tone Mapping 算法对比

场景	Reinhard	Uncharted 2	ACES	无 Tone Mapping
过曝高光	偏灰、丢失细节	保留亮部层次	最自然的亮部	纯白、完全丢失
暗部对比	整体发灰	暗部有层次	暗部深邃	暗部死黑
整体观感	”洗白”感	胶片感，对比适中	电影级，色彩丰富	截断生硬
计算开销	低	中	中高	无

实验 2：大气散射效果观察

条件	无大气散射	有 Rayleigh	完整大气 (Rayleigh + Mie)
天空颜色	纯黑色	蓝色	蓝色 + 日出日落红霞
远山颜色	与近山相同	偏蓝	偏蓝 + 雾霭层次感
太阳光晕	无	弱	明显的亮斑和光晕
地平线	锐利	略有渐变	自然的雾霭过渡

实验 3：深度测试与透明排序

在浏览器中观察以下现象：

操作	预期结果	错误原因
先画半透明面再画山	山被半透明面遮住	深度测试失败，山被丢弃
半透明面从远到近排序后绘制	正确显示山穿半透明面	正确的混合顺序
关闭深度测试	所有后画的覆盖先画的	没有深度关系
关闭混合	半透明面变成不透明的	没有颜色混合

实验 4：Web Shader 性能基准

着色器复杂度	每帧顶点数	片元着色器指令数	预期帧率 (1080p)
简单 (纯色)	10万	< 10	120+ fps
中等 (纹理 + 光照)	10万	50~100	60 fps
复杂 (PBR + 阴影)	10万	200+	30 fps
超复杂 (大气 + 体积)	10万	500+	< 15 fps

常见误区

延伸阅读与自测

延伸阅读

1. Real-Time Rendering (4th Edition) —— Tomas Akenine-Moller 等：计算机图形学”圣经”，涵盖渲染管线所有细节
2. Physically Based Rendering (PBR) —— Matt Pharr 等：物理渲染的理论基础
3. Tone Mapping 论文 —— Reinhard et al. “Photographic Tone Reproduction for Digital Images”：Tone Mapping 的奠基之作
4. Precomputed Atmospheric Scattering —— Eric Bruneton & Fabrice Neyret：实时大气散射的经典论文
5. ACES Filmic Tone Mapping —— Academy of Motion Picture Arts and Sciences：电影级 Tone Mapping 标准

自测题

1. 计算题：给定 HDR 颜色值 $(R=2.5, G=1.2, B=0.8)$，使用 Reinhard Tone Mapping 计算映射后的 LDR 值。

2. 概念辨析：GPU 渲染管线中，光栅化阶段和片元阶段有什么区别？一个三角形经过光栅化后产生了多少个片元？这个数量和什么有关？

3. 推导题：给定透视投影矩阵 $P$，证明在 NDC 空间中 $z$ 值与相机空间 $z$ 值是非线性关系。解释为什么这会导致远处的深度精度下降（z-fighting）。

4. 设计题：假设你要在一个 3D 地球仪上渲染大气散射效果，但目标设备是低端手机（带宽和计算有限）。你会如何设计一个”降级版”的大气散射方案？列出 3 种可行的优化策略。

5. 综合题：在 8 步帧循环中，步骤 6（实体渲染）使用 PBR（基于物理的渲染）shader，步骤 7（透明排序）按深度排序半透明物体。如果把 PBR 的粗糙度值设得很低（镜面反射），对步骤 7 的透明排序有什么影响？为什么镜面反射的透明物体需要特殊处理？

---

下一篇预告：09 3D Tiles 与 BIM 将深入 OGC 3D Tiles 标准、空间索引（BVH/R-tree）和地理锚定变换——带你理解”海量建筑模型如何在浏览器里流畅加载”。