第11章：渲染引擎 — 零基础讲义

讲义说明
本讲义基于 Jason Gregory 所著《Game Engine Architecture Volume II》第4版第11章（Rendering, p.1-135），逐节翻译推导。渲染引擎是游戏引擎中体量最大、技术迭代最快的子系统——本章从零开始带你理解"3D模型怎么变成屏幕上的像素"的全过程。
本版插画由 ImageGen + Guizang 材质插画标准流程生成。

学习目标

1. 理解"渲染问题"的本质——将3D场景描述转换为2D像素数组
2. 掌握渲染管线五大阶段的流程和数据流动
3. 理解顶点缓冲区、索引缓冲区、纹理、材质的基本概念
4. 了解可见性判断的三大技术（视锥剔除/遮挡剔除/LOD）
5. 掌握应用层如何管理渲染状态和绘制调用提交
6. 建立"渲染 = 数据泵 + 数学变换 + 像素着色"的宏观认知

11.1 渲染问题

11.1.1 渲染的本质

11.1.1.1 从三个角度理解渲染

Gregory 从三个互补的角度定义渲染问题：

11.1.1.2 实时渲染的苛刻约束

电影渲染一帧可以花数分钟到数小时。游戏引擎必须在16.7ms（60fps）内完成一帧的全部渲染工作——这还只是渲染，不包括物理、AI、动画、音频等子系统的时间。渲染引擎的使命就是在这极短的时间预算内，尽可能逼近照片级画质。

11.1.2 光栅化 vs 光线追踪

11.1.2.1 两种渲染范式的核心差异

11.1.2.2 混合渲染是当下主流

现代 3A 游戏不是"选光栅化还是光线追踪"——而是两者都用。光栅化处理主渲染（因为它快），光线追踪叠加到上次级效果（反射、环境光遮蔽、阴影精化）。Unreal Engine 5 的 Lumen 就是这种混合方案的代表。

11.2 灯光、相机、动作！

图11-1：虚拟相机视锥体与投影（Guizang流程生成）

11.2.1 虚拟相机

11.2.1.1 与真实相机的类比

生活类比： 虚拟相机就像一个拍电影的摄影机——它有位置（你站在哪）、朝向（你往哪看）、镜头（广角还是长焦）。它"看到"的3D场景被"拍成"一张2D照片，这就是你屏幕上的画面。

11.2.1.2 视锥体（View Frustum）

相机不是"看到整个世界"，而是看到一个截锥体（四棱台）形状的空间。只有落在这个锥体内的物体才需要渲染——锥体外的物体被视锥剔除（Frustum Culling）。视锥体由六个平面围成：上下左右四个斜面 + 近裁剪面 + 远裁剪面。

// 相机参数决定视锥体
struct Camera {
    Vector3  position;       // 相机位置（眼睛在哪）
    Vector3  lookAt;         // 看向哪（注视点）
    float    fovY;           // 垂直视野角度（60°=标准, 90°=鱼眼）
    float    nearPlane;      // 近裁剪面距离（太近的不渲染，如 0.1m）
    float    farPlane;       // 远裁剪面距离（太远的不渲染，如 1000m）
    float    aspectRatio;    // 宽高比（16:9 = 1.778）
};

// 视锥体的六个平面方程
// 判断：点是否在六个平面的"内侧"？是 → 在视锥体内 → 需要渲染

11.2.2 场景元素

11.2.2.1 网格（Mesh）— 几何形状

3D 物体的几何形状由三角形网格表示。一个角色模型可能有几万个三角形，一棵远处的树可能只用几百个。

// 三角形 = 3个顶点
struct Vertex {
    Vector3 position;        // 三维位置 (x, y, z)
    Vector3 normal;          // 法线方向（这个点"朝哪"）
    Vector2 texCoord;        // 纹理坐标（贴图的"哪个位置"）
    // 可能还有：颜色、切线、副法线、骨骼权重 ...
};

// 网格 = 顶点数组 + 索引数组（三角形列表）
struct Mesh {
    Vertex*  vertices;       // 所有顶点
    uint32_t vertexCount;    // 顶点数
    uint32_t* indices;       // 三角形索引（每3个索引=1个三角形）
    uint32_t indexCount;     // 索引数
}

11.2.2.2 纹理（Texture）— 表面细节

纹理是贴到三角形表面的二维图片。每个顶点的 texCoord（纹理坐标，通常记为 uv）告诉 GPU "这个顶点对应图片上的哪个像素"。GPU 在三角形内部自动插值 uv，把图片"拉伸包裹"到表面上。

11.2.2.3 材质（Material）— 外观定义

材质定义了"这个表面看起来是什么样的"：它用了哪些纹理（漫反射/法线/金属度/粗糙度）、反光特性、自发光颜色、透明度。材质 + 纹理 + 着色器 = 物体最终的外观。

11.2.3 光源

11.2.3.1 常见光源类型

11.3 3D渲染基础

图11-2：渲染管线五大阶段（Guizang流程生成）

11.3.1 渲染管线总览

11.3.1.1 五大阶段的流水线

生活类比： 渲染管线就像一条汽车工厂流水线——每个工位只做一件事，铁板从左到右流动，最终变成一辆完整的汽车。数据（三角形）从左边流入，在每个工位（着色器）被加工，右边流出的是像素颜色。

// 渲染管线的数据流
[三角形顶点数据]
    ↓  ① 顶点着色器（Vertex Shader）
[变换后的顶点 + 顶点属性]
    ↓  ② 图元装配（Primitive Assembly）
[组装好的三角形 + 裁剪后的结果]
    ↓  ③ 光栅化（Rasterization）
[屏幕上的像素碎片（Fragment）]
    ↓  ④ 像素/片元着色器（Pixel / Fragment Shader）
[每个像素的颜色值]
    ↓  ⑤ 输出合并（Output Merger / ROP）
[最终写入帧缓冲的像素（经过深度/模板测试+混合）]

11.3.2 阶段详解

11.3.2.1 ① 顶点着色器——把3D点变换到屏幕空间

每个顶点独立进入顶点着色器，执行一次。最常见的操作是MVP变换：将局部坐标乘以 World×View×Projection 三个矩阵，得到屏幕空间坐标。

// 一个简单的顶点着色器（HLSL/GLSL 伪代码）
VSOutput VertexShader(VSInput input) {
    VSOutput output;
    // MVP 变换：局部坐标 → 世界 → 相机 → 裁剪空间
    float4 worldPos = mul(worldMatrix, float4(input.position, 1.0));
    float4 viewPos  = mul(viewMatrix, worldPos);
    output.clipPos  = mul(projMatrix, viewPos);    // 最重要的输出！
    output.texCoord = input.texCoord;               // 把纹理坐标传给像素着色器
    output.normal   = mul((float3x3)worldMatrix, input.normal);
    return output;
}

11.3.2.2 ② 图元装配——把三个顶点拼成三角形

GPU 取三个顶点的输出数据，组装成一个三角形。然后进行裁剪——如果三角形的一部分超出了屏幕，GPU 会把它切成刚好在屏幕内的形状（生成新的小三角形）。完全在屏幕外的三角形被丢弃。

11.3.2.3 ③ 光栅化——把三角形"像素化"

光栅化器确定"这个三角形覆盖了屏幕上的哪些像素"。对每个被覆盖的像素，生成一个片元（Fragment）——包含该像素位置 + 从三个顶点插值出来的所有属性（颜色/法线/纹理坐标/深度）。

// 光栅化做的事（简化伪代码）
for (int y = tri.minY; y <= tri.maxY; y++) {
    for (int x = tri.minX; x <= tri.maxX; x++) {
        if (PointInTriangle(x, y, tri)) {
            float3 bary = CalcBarycentric(x, y, tri);  // 重心坐标
            Fragment frag;
            frag.color    = bary.x*v0.color + bary.y*v1.color + bary.z*v2.color;
            frag.texCoord = bary.x*v0.uv  + bary.y*v1.uv  + bary.z*v2.uv;
            frag.depth    = bary.x*v0.pos.z + bary.y*v1.pos.z + bary.z*v2.pos.z;
            ProcessFragment(frag);                     // 发给像素着色器
        }
    }
}

11.3.2.4 ④ 像素着色器——决定每个像素的颜色

每个片元独立运行一次像素着色器。这是渲染管线中最耗时的阶段——屏幕上有 1920×1080 ≈ 207万个像素，每个过绘制像素都要跑一遍像素着色器。

// 一个简单的像素着色器
float4 PixelShader(PSInput input) : SV_Target {
    // 从纹理采样颜色
    float4 albedo = diffuseTexture.Sample(sampler, input.texCoord);
    // 简单的漫反射光照（点积判断光线方向和法线的夹角）
    float NdotL = max(dot(input.normal, lightDir), 0.0);
    float3 litColor = albedo.rgb * lightColor * NdotL;
    return float4(litColor, albedo.a);
}

11.3.2.5 ⑤ 输出合并——决定像素写入帧缓冲的最终值

每个像素可能被多个三角形覆盖（如透明窗户叠加在建筑上）。输出合并阶段做两件事：深度测试——只保留离相机最近的像素（扔掉被遮挡的）；混合——透明物体的颜色需要和背景颜色按透明度比例混合。

11.3.3 坐标空间变换链

11.3.3.1 一个顶点从模型到屏幕的完整旅程

// 五个坐标空间，四个矩阵
局部空间（Model Space）
  ↓ × World Matrix
世界空间（World Space）
  ↓ × View Matrix
相机/观察空间（View Space）
  ↓ × Projection Matrix
裁剪空间（Clip Space）
  ↓ ÷ w（透视除法，GPU 自动完成）
标准设备坐标 NDC（归一化到[-1,1]）
  ↓ Viewport Transform
屏幕空间（Screen Space）→ 最终像素坐标！

11.4 可编程图形管线

11.4.1 GPU 硬件架构

11.4.1.1 CPU vs GPU 的根本差异

11.4.1.2 SIMD vs SIMT

SIMD（Single Instruction, Multiple Data）： 一条指令同时处理多个数据（如 SSE 一次加 4 个 float）。SIMT（Single Instruction, Multiple Threads）： GPU 的概念——数千个"线程"同时执行相同的着色器程序，但每个线程处理不同的顶点或像素。如果一些线程走了 if 分支而另一些走了 else——所有线程都要等两个分支都执行完（这叫"线程发散"，性能杀手）。

11.4.2 图形 API

11.4.2.1 主流 API 对比

11.4.2.2 显式 API（DX12/Vulkan）的革命

DX11/OpenGL 时代，驱动程序帮你做了很多决策（内存管理、命令缓冲、多线程）。DX12/Vulkan 把这些控制权还给开发者——你需要手动管理 GPU 内存、手动构建命令缓冲、手动处理多线程同步。这是更难的开发体验换来更高的性能。现代 3A 引擎全部转向显式 API。

11.4.3 GPU 内存层级

11.4.3.1 GPU 的内存类型

11.5 管线管理：应用层

图11-3：三种可见性判断技术（Guizang流程生成）

11.5.1 渲染前的准备工作

11.5.1.1 一帧渲染的应用层工作流

// CPU 端每一帧的渲染管理流程
void RenderFrame() {
    // ① 可见性判断——只渲染相机能看到的东西
    VisibleSet visibleObjects;
    FrustumCull(allObjects, camera, visibleObjects);   // 视锥剔除
    OcclusionCull(visibleObjects);                      // 遮挡剔除

    // ② 排序——按材质/深度排序减少状态切换
    SortByMaterial(visibleObjects.opaqueObjects);       // 不透明：前→后
    SortByDepth(visibleObjects.transparentObjects);     // 透明：后→前

    // ③ 状态设置 + 绘制调用提交
    for (auto& obj : visibleObjects.opaqueObjects) {
        SetPipelineState(obj.material);                 // 着色器 + 混合模式
        SetRootSignature(obj.textures);                 // 绑定纹理
        SetConstantBuffer(obj.worldMatrix);             // 设置变换矩阵
        DrawIndexed(obj.mesh);                          // 绘制！
    }

    // ④ 透明物体后处理（单独 pass）
    for (auto& obj : visibleObjects.transparentObjects) {
        SetBlendState(AlphaBlend);
        DrawIndexed(obj.mesh);
    }
}

11.5.2 可见性判断

11.5.2.1 视锥剔除（Frustum Culling）

快速测试一个物体的包围盒（AABB 或球）是否和相机视锥体的六个平面相交。不相交 → 物体在屏幕外 → 完全跳过渲染。这是最基础也是最重要的性能优化——典型场景中可剔除 30-50% 的物体。

11.5.2.2 遮挡剔除（Occlusion Culling）

即使物体在视锥体内，如果被前面的物体完全挡住（如一栋楼后面的另一栋楼），也不需要渲染。两种实现方式：① 硬件遮挡查询（用前一帧的深度缓冲测试包围盒）；② 预计算的可见性集（PVS，把空间切成格子，预先算好"在格子A能看到哪些物体"）。室内场景用 PVS 极高效。

11.5.2.3 细节层次（LOD）

远处的物体用低精度版本（几百个三角形），近处的用高精度（几万个三角形）。LOD 切换基于物体到相机的距离。现代引擎（如 UE5 Nanite）将 LOD 做到像素级别——远处的一个三角形可能已经小到只有 1 像素，自动用更低精度的表示。

11.5.3 空间数据结构

11.5.3.1 BSP 树——室内场景之王

BSP（Binary Space Partitioning，二元空间分割）树递归地将空间切成两半。每个节点存储"用哪条线/面切"和"前后子空间"。特别适合室内场景——所有墙面天然是切平面。遍历 BSP 树可以按精确的前→后顺序生成物体列表——这是老式引擎（DOOM、Quake）的核心技术。现代更偏向用 BVH、八叉树和空间哈希。

11.5.3.2 四叉树与八叉树——室外场景的网格化

将 2D 平面递归四等分 = 四叉树（用于地形）。将 3D 空间递归八等分 = 八叉树（用于空间中的物体分布）。查询"相机附近有哪些物体"只需要遍历一小部分节点，而不是遍历全部物体。

11.6 几何处理与视觉效果

11.6.1 几何着色器与曲面细分

11.6.1.1 几何着色器——"凭空创造三角形"

几何着色器运行在图元装配之后，可以接受一个三角形，输出 0 个到多个三角形。用途：粒子系统（从一个点生成一个 Billboard 四边形）、草叶生成、阴影体（Shadow Volume）拉伸。

11.6.1.2 曲面细分——动态增加细节

曲面细分（Tessellation）在 GPU 上动态细分三角形——远处的山只用了 4 个三角形，走到近处自动细分成几千个。不需要存储高精度 Mesh——原始 Mesh 保持低精度，细节在渲染时动态生成。配合位移贴图（Displacement Map）可以产生真实的凹凸地形。

11.6.2 粒子系统

11.6.2.1 粒子的渲染方式

每个粒子是一个始终面朝相机的矩形（Billboard），贴上纹理（火焰/烟雾/火花），在像素着色器中做透明度混合。粒子系统通常用计算着色器或 CPU 更新位置/速度/生命周期，GPU 负责渲染——典型的 GPU 粒子系统可以同时处理数十万粒子。

11.6.3 后处理效果

11.6.3.1 常见的全屏后处理

11.6.4 调试与开发工具

11.6.4.1 渲染调试的三件套

① 线框模式： 只画三角形边线。② 过度绘制可视化： 亮色=被画了好几次（性能垃圾）。③ 逐 Pass 显示： "只看阴影贴图"、"只看法线"——逐 Pass 隔离调试。

本章核心洞察

📝 课后练习题（含答案）

🤖 qAagent 零基础问答区