373 lines
7.4 KiB
Markdown
373 lines
7.4 KiB
Markdown
## 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$）
|
||
```C++
|
||
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})$
|
||
- 这两个点所包起来的矩形区域就是三角形的包围盒
|
||
```C++
|
||
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$
|
||
```C++
|
||
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 变换用于将摄像头视锥里的各个模型投影到一个平面上，这里分为**正交投影**与**透视投影**，透视投影会产生近小远大的效果，而正交投影不会。
|
||
|
||
核心矩阵：
|
||
|
||
```text
|
||
Model
|
||
View
|
||
Projection
|
||
```
|
||
|
||
流程：
|
||
|
||
```text
|
||
model space
|
||
↓
|
||
world space
|
||
↓
|
||
view space
|
||
↓
|
||
clip space
|
||
↓
|
||
screen space
|
||
```
|
||
|
||
公式：
|
||
|
||
```text
|
||
screen_pos = MVP * vertex
|
||
```
|
||
|
||
这一步完成后：
|
||
|
||
你可以画一个 **旋转的立方体**。
|
||
|
||
---
|
||
|
||
## Step 3：深度测试（Z-buffer）
|
||
|
||
解决遮挡问题。
|
||
|
||
没有深度测试会出现：
|
||
|
||
```text
|
||
后面的三角形覆盖前面的
|
||
```
|
||
|
||
实现：
|
||
|
||
```text
|
||
depth_buffer[x][y]
|
||
```
|
||
|
||
核心逻辑：
|
||
|
||
```text
|
||
if z < depth_buffer
|
||
更新像素
|
||
```
|
||
|
||
这一步完成后：
|
||
|
||
**遮挡关系正确。**
|
||
|
||
---
|
||
|
||
## Step 4：重心插值（属性插值）
|
||
|
||
你已经有：
|
||
|
||
```text
|
||
α β γ
|
||
```
|
||
|
||
现在可以插值：
|
||
|
||
```text
|
||
颜色
|
||
深度
|
||
法线
|
||
纹理坐标
|
||
```
|
||
|
||
例如：
|
||
|
||
```text
|
||
color = α*c1 + β*c2 + γ*c3
|
||
```
|
||
|
||
这是 **GPU 的核心思想之一**。
|
||
|
||
---
|
||
|
||
## Step 5：Blinn-Phong 光照
|
||
|
||
实现经典光照模型：
|
||
|
||
公式：
|
||
|
||
```text
|
||
I = kaIa + kd(L·N) + ks(H·N)^n
|
||
```
|
||
|
||
组成：
|
||
|
||
```text
|
||
环境光 ambient
|
||
漫反射 diffuse
|
||
高光 specular
|
||
```
|
||
|
||
Blinn-Phong 用：
|
||
|
||
```text
|
||
H = normalize(L + V)
|
||
```
|
||
|
||
优点：
|
||
|
||
* 比 Phong 更高效
|
||
|
||
完成后：
|
||
|
||
你的模型会 **有光照效果**。
|
||
|
||
---
|
||
|
||
## Step 6：加载 OBJ 模型
|
||
|
||
支持真实模型。
|
||
|
||
实现：
|
||
|
||
```text
|
||
读取 obj 文件
|
||
解析：
|
||
v 顶点
|
||
vn 法线
|
||
f 面
|
||
```
|
||
|
||
然后：
|
||
|
||
```text
|
||
三角形 → renderer
|
||
```
|
||
|
||
推荐模型：
|
||
|
||
```text
|
||
teapot
|
||
bunny
|
||
```
|
||
|
||
这一步完成后：
|
||
|
||
你的 renderer 已经像一个 **小型渲染器**。
|
||
|
||
---
|
||
|
||
## Step 7：相机控制
|
||
|
||
实现一个简单 camera。
|
||
|
||
例如：
|
||
|
||
```text
|
||
鼠标旋转
|
||
WASD移动
|
||
```
|
||
|
||
核心：
|
||
|
||
```text
|
||
view matrix
|
||
```
|
||
|
||
这一步完成后：
|
||
|
||
renderer 就有 **交互能力**。
|
||
|
||
---
|
||
|
||
## 完成后的项目结构
|
||
|
||
最终 renderer 大概有这些模块：
|
||
|
||
```text
|
||
Renderer
|
||
├─ Rasterizer
|
||
├─ Shader
|
||
├─ Camera
|
||
├─ Math (Vec/Matrix)
|
||
├─ OBJLoader
|
||
└─ ZBuffer
|
||
```
|
||
|
||
核心代码量：
|
||
|
||
```text
|
||
1500 - 3000 行
|
||
```
|
||
|
||
就已经很不错。
|
||
|
||
---
|
||
|
||
## 简历怎么写（重点）
|
||
|
||
千万不要写：
|
||
|
||
```text
|
||
实现了 Blinn-Phong 光照
|
||
```
|
||
|
||
要写成：
|
||
|
||
```text
|
||
实现一个 CPU Software Renderer，
|
||
支持 MVP 变换、三角形光栅化、Z-buffer 深度测试，
|
||
并实现基于 Blinn-Phong 的光照模型。
|
||
```
|
||
|
||
如果再加一句：
|
||
|
||
```text
|
||
支持 OBJ 模型加载和相机交互
|
||
```
|
||
|
||
这个项目 **含金量就很高了**。
|
||
|
||
---
|
||
|
||
## 一个非常重要的小技巧
|
||
|
||
很多人做 renderer 只做到：
|
||
|
||
```text
|
||
作业级
|
||
```
|
||
|
||
但如果你再加 **一个小扩展**：
|
||
|
||
例如：
|
||
|
||
```text
|
||
MSAA 抗锯齿
|
||
```
|
||
|
||
或者：
|
||
|
||
```text
|
||
Texture Mapping
|
||
```
|
||
|
||
项目立刻就变成：
|
||
|
||
```text
|
||
进阶图形项目
|
||
```
|
||
|
||
面试官印象会非常好。
|
||
|
||
---
|
||
|
||
## 最后给你一个真实评价
|
||
|
||
如果你完成这个 renderer：
|
||
|
||
你的图形学水平大概是：
|
||
|
||
```text
|
||
超过 90% 游戏客户端校招生
|
||
```
|
||
|
||
因为大部分人只：
|
||
|
||
```text
|
||
看课程
|
||
```
|
||
|
||
而没有 **实现 pipeline**。
|
||
|
||
---
|
||
|
||
如果你愿意，我可以再给你一份 **“Renderer 项目 GitHub 结构模板”**（很多人照这个结构写，很容易做成一个漂亮的开源项目）。
|