7.4 KiB
Step 1：画一个三角形（光栅化）
布雷森汉姆直线算法(bresenham's line algorithm)：
- 有两点
V_0(x_0, y_0)和V_1(x_1, y_1) - 定义决策变量
p_k并令 $p_0 = 2 \times dy - dx$，其中 $dy = y_1 - y_0$，dx = x_1 - x_0 - 当
p_k < 0时，$p_{k+1}=p_k+2\times dy$，取下方像素点（$y_{k+1}=y_k$） - 当
p_k \geq 0时，$p_{k+1}=p_k+2\times dy-2\times dx$，取上方像素点（$y_{k+1}=y_k+1$）
void DrawLine(Vector2 v0, Vector2 v1, Color color)
{
int32_t dx = v1.x - v0.x;
int32_t dy = v1.y - v0.y;
int32_t p = 2 * dy - dx;
int32_t y = v0.y;
for (int x = v0.x; x <= v1.x; x++)
{
frameBuffer[x][y] = color;
if (p >= 0)
{
p -= 2 * dx;
y++;
}
p += 2 * dy;
}
}
包围盒：
- 对于一个三角形 ABC
- 取出其每个顶点的坐标的最大值和最小值得到
V_0(x_{min},y_{min})和V_1(x_{max},y_{max}) - 这两个点所包起来的矩形区域就是三角形的包围盒
std::vector<Vector2> Bound(Vector2 v1, Vector2 v2, Vector2 v3)
{
return {
Vector2(std::min({v1.x, v2.x, v3.x}), std::min({v1.y, v2.y, v3.y})),
Vector2(std::max({v1.x, v2.x, v3.x}), std::max({v1.y, v2.y, v3.y}))
};
}
叉乘法判断点是否在三角形内：
- 三角形 ABC 有 3 条边向量 $\overrightarrow{AB}$、$\overrightarrow{BC}$、
\overrightarrow{CA} - 对于点 $P(x,y)$，与每个顶点结合可得到 3 条向量 $\overrightarrow{PA}$、$\overrightarrow{PB}$、
\overrightarrow{PC} - 对于每一组向量（例如
\overrightarrow{AB}与 $\overrightarrow{PA}$）做叉乘的结果的Z轴分量如果正负性相同，则表示这个点在三角形里 - 计算
Z轴分量可以简单表述为AB_x \times PA_y - AB_y \times PA_y
int32_t Cross(Vector2 v1, Vector2 v2, Vector2 p)
{
int64_t x1 = p2.x - p1.x;
int64_t y1 = p2.y - p1.y;
int64_t x2 = p3.x - p1.x;
int64_t y2 = p3.y - p1.y;
return x1 * y2 - y1 * x2;
}
bool IsInTriangle(std::vector<Vector2> triangle, Vector2 point)
{
int64_t c0 = cross(triangle[0], triangle[1], point);
int64_t c1 = cross(triangle[1], triangle[2], point);
int64_t c2 = cross(triangle[2], triangle[0], point);
bool hasNeg = (c0 < 0) || (c1 < 0) || (c2 < 0);
bool hasPos = (c0 > 0) || (c1 > 0) || (c2 > 0);
return !(hasNeg && hasPos);
}
Step 2：MVP 变换（3D → 2D）
Model 变换
Model 变换用于将模型从其自身的坐标空间变换到世界坐标空间，一般来说这个过程是被省略的，因为一般在定义模型时都会再定义一个位置和旋转，这里的定义就已经完成了 Model 变换的操作。
View 变换
View 变换用于将世界空间里的各个顶点坐标变换到相机坐标系，也可以说是我们规定了一个摄像机需要处于的位置（一般右手系定义目标位置是 $(0,0,0)$，目标朝向是 $(0,0,-1)$，也就是在世界原点看向 -z 方向），但目前摄像机没在那个位置，所以我们就需要对摄像机做 View 变换，把它变换到那个属于它的位置，同时又要保持所有的物体相对不变。具体到变换矩阵上就是先平移回目标点，再旋转到目标方向。（特别注意，右手系与左手系 View 矩阵结果不一致，这里是右手系下的结果）
M_{View}=M_{rotation}^{-1} \times M_{translation}^{-1}=\begin{bmatrix} right.x & right.y & right.z & -dot(right, position) \\ up.x & up.y & up.z & -dot(up, position) \\ back.x & back.y & back.z & -dot(back, position) \\ 0 & 0 & 0 & 1\end{bmatrix}其中：
M_{translation}^{-1}是由目标位置平移到当前摄像机位置的平移变换矩阵M_{rotation}^{-1}是由目标方向旋转到当前摄像机朝向的旋转变换矩阵
Projection 变换
Projection 变换用于将摄像头视锥里的各个模型投影到一个平面上，这里分为正交投影与透视投影，透视投影会产生近小远大的效果，而正交投影不会。
核心矩阵：
Model
View
Projection
流程：
model space
↓
world space
↓
view space
↓
clip space
↓
screen space
公式：
screen_pos = MVP * vertex
这一步完成后：
你可以画一个 旋转的立方体。
Step 3：深度测试（Z-buffer）
解决遮挡问题。
没有深度测试会出现：
后面的三角形覆盖前面的
实现：
depth_buffer[x][y]
核心逻辑：
if z < depth_buffer
更新像素
这一步完成后：
遮挡关系正确。
Step 4：重心插值（属性插值）
你已经有：
α β γ
现在可以插值：
颜色
深度
法线
纹理坐标
例如：
color = α*c1 + β*c2 + γ*c3
这是 GPU 的核心思想之一。
Step 5：Blinn-Phong 光照
实现经典光照模型：
公式：
I = kaIa + kd(L·N) + ks(H·N)^n
组成：
环境光 ambient
漫反射 diffuse
高光 specular
Blinn-Phong 用：
H = normalize(L + V)
优点：
- 比 Phong 更高效
完成后：
你的模型会 有光照效果。
Step 6：加载 OBJ 模型
支持真实模型。
实现：
读取 obj 文件
解析：
v 顶点
vn 法线
f 面
然后：
三角形 → renderer
推荐模型：
teapot
bunny
这一步完成后：
你的 renderer 已经像一个 小型渲染器。
Step 7：相机控制
实现一个简单 camera。
例如：
鼠标旋转
WASD移动
核心：
view matrix
这一步完成后：
renderer 就有 交互能力。
完成后的项目结构
最终 renderer 大概有这些模块：
Renderer
├─ Rasterizer
├─ Shader
├─ Camera
├─ Math (Vec/Matrix)
├─ OBJLoader
└─ ZBuffer
核心代码量：
1500 - 3000 行
就已经很不错。
简历怎么写（重点）
千万不要写：
实现了 Blinn-Phong 光照
要写成：
实现一个 CPU Software Renderer，
支持 MVP 变换、三角形光栅化、Z-buffer 深度测试，
并实现基于 Blinn-Phong 的光照模型。
如果再加一句：
支持 OBJ 模型加载和相机交互
这个项目 含金量就很高了。
一个非常重要的小技巧
很多人做 renderer 只做到：
作业级
但如果你再加 一个小扩展：
例如：
MSAA 抗锯齿
或者：
Texture Mapping
项目立刻就变成：
进阶图形项目
面试官印象会非常好。
最后给你一个真实评价
如果你完成这个 renderer：
你的图形学水平大概是：
超过 90% 游戏客户端校招生
因为大部分人只：
看课程
而没有 实现 pipeline。
如果你愿意，我可以再给你一份 “Renderer 项目 GitHub 结构模板”（很多人照这个结构写，很容易做成一个漂亮的开源项目）。