如何开始用 C++ 写一个光栅化渲染器？

要用 C++ 从头开始构建一个光栅化渲染器，这绝对是一个令人兴奋且富有挑战性的项目。它能让你深入理解图形学的底层原理，从像素的绘制到复杂的三维场景的呈现，每一步都充满了探索的乐趣。我将尽量为你详细梳理这个过程，让你感受到构建一个渲染器的“手动”乐趣。

第一步：准备你的战场——基础知识与工具

在真正动手写代码之前，你需要打好基础：

1. C++ 基础： 这就不用多说了。熟悉面向对象编程、内存管理（指针、引用、智能指针）、STL（容器、算法）是必不可少的。
2. 数学功底：
线性代数： 向量（加减、点乘、叉乘）、矩阵（乘法、变换——平移、旋转、缩放、投影）是渲染器的核心数学语言。你需要理解它们如何表示三维空间中的点、方向和变换。
几何学： 理解点、线、面、三角形等基本几何概念，以及它们之间的关系。
3. 计算机图形学入门： 了解光栅化渲染的基本流程是什么，例如：
模型转换（Model Transformation）： 将模型的局部坐标系转换为世界坐标系。
视图转换（View Transformation）： 将世界坐标系转换为相机（观察者）坐标系。
投影转换（Projection Transformation）： 将三维空间中的物体投影到二维屏幕空间（透视投影、正交投影）。
裁剪（Clipping）： 剔除不在观察视锥体（Frustum）内的几何体。
光栅化（Rasterization）： 将几何图元（主要是三角形）转换为屏幕上的像素。
着色（Shading）： 计算每个像素的颜色，包括光照模型（如漫反射、镜面反射、环境光）和纹理映射。
深度测试（Depth Testing）： 确保物体之间的遮挡关系正确，近的物体会覆盖远的物体。
颜色缓冲（Color Buffer）与深度缓冲（Depth Buffer）： 用于存储最终的像素颜色和深度信息。

推荐的学习资源：

《RealTime Rendering》： 这本书被誉为实时渲染的“圣经”，虽然有些部分可能对初学者来说有点深，但它的内容非常全面且权威。
《Fundamentals of Computer Graphics》： 另一本优秀的图形学教材，讲解清晰易懂。
在线教程和博客： 搜索“rasterization tutorial C++”、“write your own renderer”等关键词，你会找到大量优质资源。尤其是LearnOpenGL.com和Scratchapixel.com都是非常好的起点。

第二步：选择你的工具箱——开发环境与库

1. C++ 编译器： GCC、Clang、MSVC 都可以。确保你使用的是支持 C++11 或更高版本的编译器。
2. 开发环境（IDE）： Visual Studio, VS Code (搭配 C++ 插件), CLion 等，选择你用着顺手的即可。
3. 图形API（可选，但推荐用于更复杂的项目）：
OpenGL/OpenGL ES： 跨平台性好，生态成熟，学习曲线相对平缓。对于学习光栅化渲染的基础流程，你可以先尝试不使用OpenGL，直接操作像素，但最终要实现更复杂的场景，OpenGL会是你的好帮手。
Vulkan/DirectX 12： 更底层、性能更强，但也更复杂，适合有一定基础后再深入。
如果你想先“裸奔”体验： 可以直接操作内存缓冲区来绘制像素，这样更能体会光栅化的本质。

第三方库（可选，但能加速开发）：

数学库： GLM (OpenGL Mathematics) 是一个非常流行的 C++ 数学库，提供了向量、矩阵等类和操作函数，能够大大简化你的数学计算。
窗口和输入库： SDL (Simple DirectMedia Layer) 或 GLFW (Graphics Library Framework) 是用于创建窗口、处理用户输入（键盘、鼠标）的绝佳选择。它们能让你无需关心操作系统底层的窗口创建细节。
图像加载库： stb_image.h 是一个非常方便的单文件库，可以加载 PNG、JPEG 等常见图片格式，用于纹理。

第三步：搭建你的渲染管线——从无到有

想象一下，你现在要在一个空白的画布上画画。渲染器的核心就是这个“画画”的过程，我们称之为渲染管线（Render Pipeline）。虽然现代GPU有非常复杂的固定功能管线和可编程管线，但我们可以先自己实现一个简化的 CPUbased 的光栅化管线。

核心组件设计：

1. Canvas/FrameBuffer：
我们需要一个数据结构来存储屏幕上每个像素的颜色。可以是一个二维数组或一维数组来表示颜色缓冲区。
每个像素通常用 RGB 值（红、绿、蓝）表示，也可以加上 Alpha（透明度）。常用的格式是 `unsigned char` 类型的三个分量，范围从 0 到 255。
为了进行深度测试，我们还需要一个深度缓冲区（Depth Buffer），存储每个像素的深度值（通常是浮点数）。

2. Vector 和 Matrix 类：
你需要自己实现或使用 GLM 库来处理向量（`vec2`, `vec3`, `vec4`）和矩阵（`mat3`, `mat4`）。
重点是实现向量的加减法、点乘、叉乘，以及矩阵的乘法、单位矩阵创建、以及一些常见的变换矩阵（平移、旋转、缩放）生成函数。

3. 模型数据结构：
你需要一种方式来存储三维模型的信息。最常见的模型是三角形网格（Triangle Mesh）。
每个顶点（Vertex）通常包含：
位置（Position）： 一个 `vec3` 表示它在三维空间中的坐标。
法线（Normal）： 一个 `vec3`，表示该顶点表面朝向，用于光照计算。
纹理坐标（UV）： 一个 `vec2`，用于采样纹理图像。
一个模型可以包含一个顶点列表和一组索引列表。索引列表指定了如何将顶点组合成三角形。例如，一个索引列表 `[0, 1, 2]` 就表示由顶点数组中的第 0、1、2 个顶点组成的第一个三角形。

4. 相机（Camera）结构：
相机定义了观察者的位置、朝向和视野。
它需要以下属性：
位置（Position）： `vec3`
朝向（Target/LookAt）： `vec3`，相机看向的方向。
向上向量（Up）： `vec3`，定义相机的“天花板”方向。
视场角（Field of View）： `float`，决定了相机的视野范围。
近裁剪面（Near Clip Plane）： `float`，小于此距离的物体将被裁剪。
远裁剪面（Far Clip Plane）： `float`，大于此距离的物体将被裁剪。

第四步：一步步构建渲染管线

现在，我们将组合这些组件，实现渲染流程。

1. 初始化：
创建窗口和图形上下文（如果使用 SDL/GLFW）。
分配颜色缓冲区和深度缓冲区。
设置清除颜色（背景色）和深度值。
加载或生成要渲染的模型数据。
创建相机对象并设置其参数。

2. 主渲染循环：
你的程序会进入一个循环，不断地：
处理输入： 检测键盘、鼠标事件，用于相机控制或模型变换。
清除缓冲区： 将颜色缓冲区填充为背景色，深度缓冲区填充为最大深度值。
设置变换矩阵：
模型矩阵（Model Matrix）： 如果需要移动、旋转或缩放你的模型，就需要一个模型矩阵。
视图矩阵（View Matrix）： 根据相机的位置和朝向计算。
投影矩阵（Projection Matrix）： 根据相机的视场角、宽高比、近远裁剪面计算（透视投影或正交投影）。
MVP 矩阵（ModelViewProjection Matrix）： 将模型矩阵、视图矩阵和投影矩阵相乘得到最终的 MVP 矩阵。
顶点处理（Vertex Processing）：
遍历模型的所有顶点。
对于每个顶点：
将其局部坐标与 MVP 矩阵相乘，得到裁剪空间坐标（Clip Space Coordinates）。
透视除法（Perspective Division）： 将裁剪空间坐标的 x, y, z 分量分别除以 w 分量，得到规范化设备坐标（Normalized Device Coordinates, NDC），范围通常是 [1, 1]。
NDC 的 x 映射到屏幕的左侧到右侧，y 映射到屏幕的底部到顶部（或者顶部到底部，取决于约定），z 映射到深度。
将 NDC 坐标转换为屏幕坐标（Screen Space Coordinates）。
`screenX = ndcX screenWidth / 2.0 + screenWidth / 2.0`
`screenY = ndcY screenHeight / 2.0 + screenHeight / 2.0` (注意 Y 轴方向可能需要翻转)
将处理后的顶点数据（屏幕坐标、颜色、法线等）存储起来，供下一步光栅化使用。
三角形绘制（Triangle Rasterization）：
这是渲染器的核心部分。你需要遍历模型的索引列表，每次取出三个顶点来组成一个三角形。
基本光栅化： 对于每个三角形，你需要确定哪些屏幕像素被这个三角形覆盖。最简单的方法是使用边缘函数（Edge Function） 或 Barycentric 坐标（重心坐标）。
重心坐标法： 对于屏幕上的一个像素 `(px, py)`，计算它相对于三角形三个顶点 `v0, v1, v2` 的重心坐标 `(alpha, beta, gamma)`。如果 `alpha + beta + gamma = 1` 且 `alpha, beta, gamma >= 0`，则该像素在三角形内部。
`alpha = ((y1 y2) px + (x2 x1) py + x1 y2 x2 y1) / ((y1 y2) x0 + (x2 x1) y0 + x1 y2 x2 y1)`
类似地计算 `beta` 和 `gamma`。注意分母是三角形的面积乘以一个常数，分子则与像素到三角形某条边的关系有关。
深度测试（Depth Test）：
在绘制像素之前，你需要知道这个像素应该覆盖的深度。可以通过重心坐标插值计算出该像素的深度值 `z = alpha z0 + beta z1 + gamma z2`。
将这个 `z` 值与深度缓冲区中对应像素当前存储的深度值进行比较。
如果新的 `z` 值小于深度缓冲区中的值（表示更近），则更新颜色缓冲区和深度缓冲区，并继续着色。否则，跳过该像素。
着色（Shading）：
如果像素通过了深度测试，你需要计算它的颜色。
插值属性： 使用重心坐标插值计算该像素的法线、纹理坐标等属性。
`interpolatedNormal = normalize(alpha normal0 + beta normal1 + gamma normal2)`
`interpolatedUV = alpha uv0 + beta uv1 + gamma uv2`
光照计算（Lighting）：
如果你有光源（比如一个方向光），你需要计算这个像素的颜色。
一个简单的漫反射（Lambertian）光照模型是：`color = materialColor lightColor max(0.0, dot(interpolatedNormal, lightDirection))`。
如果你有纹理，需要使用插值后的纹理坐标去采样纹理图像，得到纹理颜色，然后和材质颜色、光照计算结果结合。
将最终计算出的颜色（通常是 `vec3` 或 `vec4`）写入颜色缓冲区对应像素的位置。
显示帧缓冲区： 将颜色缓冲区的内容绘制到实际的屏幕上（通过 SDL/GLFW 的函数）。
交换缓冲区： 如果你使用了双缓冲（double buffering），则需要交换前后缓冲区。

第五步：进阶与优化

当你能够绘制一个基本的三角形后，就可以开始添加更多功能和进行优化了：

1. 高级光照模型： 实现 BlinnPhong、Phong 等光照模型，加入材质属性（漫反射颜色、镜面反射颜色、高光系数）。
2. 纹理映射： 加载图片作为纹理，并使用纹理坐标进行采样，为物体表面增加细节。
3. 多重纹理： 叠加多种纹理，实现更复杂的效果。
4. 背面剔除（Backface Culling）： 对于不面向相机的三角形，可以直接忽略它们，节省计算资源。这可以通过检查三角形的法线和观察方向的点乘结果来实现。
5. 视锥体裁剪（Frustum Clipping）： 在顶点处理阶段，更精细地裁剪掉完全在视锥体外的几何体。
6. 扫描线填充（Scanline Filling）： 对于三角形光栅化，扫描线算法是另一种常见的技术，它沿着屏幕的扫描线逐像素绘制。
7. 抗锯齿（Antialiasing）： 消除像素化边缘的“锯齿”感，如多重采样抗锯齿（MSAA）。
8. 模型加载： 实现 OBJ、FBX 等模型格式的加载器，以便导入更复杂的 3D 模型。
9. 性能优化： CPU 光栅化在处理大量顶点和三角形时性能会受限。可以考虑：
SIMD 指令： 利用 SSE/AVX 等指令并行处理多个顶点数据。
多线程： 将渲染任务分配给多个 CPU 核心。
缓存优化： 合理组织数据，提高缓存命中率。

一个简单的开始示例（Pseudocode 风格）：

```cpp
// 假设我们有 Canvas 类，Vertex 结构体，Matrix4x4 类，Camera 类

// 初始化
Canvas canvas(screenWidth, screenHeight);
Camera camera; // 设置相机的位置、朝向等
std::vector vertices; // 加载你的模型顶点
std::vector indices; // 加载模型索引

// 设置初始变换
Matrix4x4 modelMatrix = Matrix4x4::identity();
// modelMatrix = modelMatrix.translate(x, y, z);
// modelMatrix = modelMatrix.rotate(angle, axis);

Matrix4x4 viewMatrix = camera.getViewMatrix();
Matrix4x4 projectionMatrix = camera.getProjectionMatrix();
Matrix4x4 mvpMatrix = projectionMatrix viewMatrix modelMatrix;

// 渲染循环
while (running) {
// 处理输入，更新 modelMatrix, viewMatrix, camera

// 清除缓冲区
canvas.clearColorBuffer(backgroundColor);
canvas.clearDepthBuffer(infinity);

// 遍历模型
for (size_t i = 0; i < indices.size(); i += 3) {
// 获取三角形的三个顶点索引
unsigned int i0 = indices[i];
unsigned int i1 = indices[i + 1];
unsigned int i2 = indices[i + 2];

// 获取顶点数据
Vertex v0 = vertices[i0];
Vertex v1 = vertices[i1];
Vertex v2 = vertices[i2];

// 顶点处理
// 将顶点坐标变换到裁剪空间
Vector4 clipPos0 = mvpMatrix Vector4(v0.position, 1.0f);
Vector4 clipPos1 = mvpMatrix Vector4(v1.position, 1.0f);
Vector4 clipPos2 = mvpMatrix Vector4(v2.position, 1.0f);

// 透视除法，得到 NDC
Vector4 ndcPos0 = clipPos0 / clipPos0.w;
Vector4 ndcPos1 = clipPos1 / clipPos1.w;
Vector4 ndcPos2 = clipPos2 / clipPos2.w;

// 裁剪 (可选，但重要)
// 如果顶点在视锥体外，进行裁剪

// 光栅化与着色
// 将 NDC 映射到屏幕空间坐标
float screenX0 = (ndcPos0.x screenWidth / 2.0f) + screenWidth / 2.0f;
float screenY0 = (ndcPos0.y screenHeight / 2.0f) + screenHeight / 2.0f; // Y 轴翻转
float screenX1 = (ndcPos1.x screenWidth / 2.0f) + screenWidth / 2.0f;
float screenY1 = (ndcPos1.y screenHeight / 2.0f) + screenHeight / 2.0f;
float screenX2 = (ndcPos2.x screenWidth / 2.0f) + screenWidth / 2.0f;
float screenY2 = (ndcPos2.y screenHeight / 2.0f) + screenHeight / 2.0f;

// 计算重心坐标的倒数（用于插值）
float invDenominator = 1.0f / ((screenY0 screenY2) screenX1 + (screenX2 screenX1) screenY0 + screenX1 screenY2 screenX2 screenY0);

// 遍历屏幕上的像素
for (int y = minY; y <= maxY; ++y) { // minY/maxY 是三角形在屏幕上的包围盒
for (int x = minX; x <= maxX; ++x) {
// 计算重心坐标 alpha, beta, gamma
float alpha = ((screenY1 screenY2) x + (screenX2 screenX1) y + screenX1 screenY2 screenX2 screenY1) invDenominator;
float beta = ((screenY2 screenY0) x + (screenX0 screenX2) y + screenX2 screenY0 screenX0 screenY2) invDenominator;
float gamma = 1.0f alpha beta;

// 如果像素在三角形内部
if (alpha >= 0 && beta >= 0 && gamma >= 0) {
// 深度测试
// 插值深度
float interpolatedDepth = alpha ndcPos0.z + beta ndcPos1.z + gamma ndcPos2.z; // 使用 NDC 的 Z 值
// 或者直接用原始深度，根据 NDC 的 Z 值插值，然后转换到正确的深度范围

if (interpolatedDepth < canvas.getDepth(x, y)) { // 检查深度是否更近
// 着色
// 插值其他属性（如法线、UV）
Vector3 interpolatedNormal = normalize(alpha v0.normal + beta v1.normal + gamma v2.normal);
Vector2 interpolatedUV = alpha v0.uv + beta v1.uv + gamma v2.uv;

// 进行光照计算，采样纹理等...
Color pixelColor = calculatePixelColor(interpolatedNormal, interpolatedUV, / material properties /);

// 更新颜色和深度缓冲区
canvas.setPixelColor(x, y, pixelColor);
canvas.setDepth(x, y, interpolatedDepth);
}
}
}
}
}

// 将 canvas 的颜色缓冲区显示到屏幕上
canvas.display();
}
```

最终的感受：

从零开始构建一个渲染器，是一段充满调试、学习和惊喜的旅程。你会发现之前看起来理所当然的图形效果，背后是精密的数学计算和巧妙的算法。每当你的渲染器能够正确绘制出更复杂的场景时，那种成就感是无与伦比的。不要害怕从最基础的三角形开始，一步步迭代，你会逐渐掌握光栅化渲染的精髓。祝你玩得开心！

2018.09.05:

以我秋招面试经验来看，除非从事游戏相关的工作，这个项目对于找工作没什么用处，但它确实很有意思。所以如果你是为了简历上写项目时有亮点，同时你又不搞游戏，渲染器不是一个放在简历上的好项目。

原回答：

这是我正在写的路径追踪器，C++11/14实现，Linux环境（Ubuntu 16.04），写了有4个月了。很喜欢图形学，感觉特别有意思。

UncP/Giraffe，它的中文名字是长颈鹿，与Graphics有那么一点谐音。

在写光线追踪器之前写过一个很小的渲染器，很不满意自己的实现所以开始写Giraffe这个光线追踪器。渲染器!=光线追踪器，但是渲染器和光线追踪器有很多共通的地方，虽然一个面向物体，一个面向像素。渲染器里面的Z-Buffer在光线追踪器里其实是不断更新的距离。其余的坐标系变换、光照、纹理映射、相交检测是一样的。光线追踪器实现起来更加优雅但缺点是运行速度稍慢。

走了不少弯路，看了很多资料，尝试了很久，现在完成了

• 多种表面的BSDF
• 全局光照
• 路径追踪
• 蒙特卡洛积分
• Russian Roulette
• 纹理（Solid，Procedural，Cellular）
• 反走样
• Depth of field
• 光源（点光源，方向光，区域光，纹理光）
• 物体（平面，三角形，球，四棱柱，圆柱，圆盘）
• 加速数据结构（BVH）
• Giraffe光线追踪语言

这个光线追踪器我会一直写下去因为图 形 学 太 好 玩 了 ！

别看我列了这么多但是如果你想深入学习离线渲染的话我建议先去接触各种算法——PT，LT，BPT，MLT，PM，SPPM，Radiosity…

以下是光线追踪器的部分效果图。

下面三张是最近跑的。

这张是长颈鹿（虽然不怎么像，花纹使用了Worley Noise）

我觉得图形学代码写起来非常舒服，模块间的耦合度非常低，尤其是当把基本框架搭起来之后，每次实现新的特性完全不需要进行模块测试，直接跑就行（这只是个人感觉，仅供参考）。

推荐一些参考资料（只有英文资料）：
smallpt: Global Illumination in 99 lines of C++，这是一个只有99行的光线追踪器。

Scratchapixel，这是一个图形学网站，每章都有两三百行的C++11编写可以直接编译运行的图形学代码，非常适合入门。

第一第二个比较简单，耐心点慢慢来，如果有一定基础了一定要去下面这个CMU的课程主页，真的很棒（从渲染到光线追踪再到动画模拟）！

http://15462.courses.cs.cmu.edu/fall2015/
15年CMU的15-462，别去16年的，16年质量比较低。

Computer Graphics
15年MIT的6.837。
这两个图形学课程的主页上有课程PPT，参考书，还有很多辅助代码（空间几何，图片I/O等等）。

GitHub - mmp/pbrt-v3: Source code for pbrt, the renderer described in the third edition of &amp;quot;Physically Based Rendering: From Theory To Implementation&amp;quot;, by Matt Pharr, Wenzel Jakob, and Greg Humphreys.，著名的开源渲染器，是书《Physically Based Rendering》的具体实现。

《Realistic Ray Tracing》，一本讲光线追踪具体实现的书，每章后面都有代码，这本书的作者就是《Fundamentals of Computer Graphics》的作者。

《Real Time Rendering》，这本书可以作为一本百科参考书，可以在具体实现某个模块时去阅读一下相关章节。

路径追踪器的地址：Giraffe: Distributed Monte Carlo Path Tracer

另外这个路径追踪器不再更新，已升级为一个离线渲染器，地址在这：UncP/Zebra