图形学基础笔记II：多边形光栅化算法和显卡三角形光栅算法

为什么三角形就够了

实际对于 3D 来说肯定全是基于三角形的 geometry - OpenGL: Is it more efficient to use GL_QUADS or GL_TRIANGLES? - Stack Overflow，显卡也全部用重心坐标和 AABB 来填充三角形的。

三角形线框模式和非三角形线框模式（GUI、CAD），也很容易实现，使用 bresenham 中点算法就行了。

点就更简单了，如果没有涉及 Anti A 直接取整写显存就行了。

整理一下就是说:

• 线框模式各种形状：应用的话比如 CAD，GUI，不管什么多边形，什么样子都能用 bresenham 画线给你画出来。对于圆的话也是用 bresenham（midpoint）。
• 实体填充各种形状：由于屏幕像素是离散的，所以三角形足够拟合各种形状，只需要 AABB 重心填充算法。

所以下面讲的多边形扫描填充算法不是一个必要的东西（然而考试还是占挺多分值的，就当学一个算法+数据结构思路吧）。然而，他在 GUI 和 CAD 还是有用处的，不过是 GUI 里面基本都是用的盒子模型，最多多一个圆角，其实更多是矩形+圆角处理，所以纯粹的矩形扫描线就够用了。而画图软件的填充算法常用的是边界填充或者 flood-fill（DFS、BFS，O(n) 本来就是必要的）。

---

扫描线的问题在于他并行度有限，用了 ET + AET 的话数据依赖更加是拉跨，CPU 能撑起来，对于适合 SIMD 的 GPU 来说，还是用基于 AABB 的三角形的重心坐标比较靠谱（快）。而且求中心坐标的过程能同时完成三角形的 uv 纹理插值、颜色插值、法线插值等（总之就是插值各种属性），反而一举两得。

---

UE5 NANITE

Unreal Engine 5 的最新软光栅 nanite 技术（这个软不是指 CPU 运算，而是指用显卡的通用运算而不是管线自带的不可变成的光栅模块）是基于这样的事实：小三角形可能刚好一个 quad，这样的话每次为了求 mipmap 要用的那个梯度信息仍然要基于一个 quad 来光栅化，反而导致每次四倍的内存消耗。

首先要讲一下 compute shader ，这个东西是新显卡引入的通用计算单元在 OpenGL 里面的模块。就像 OpenGL 和 CUDA 能够请求通用计算那样。（其实在 D3D 里面 shader 多种多样，还有 mesh shader、primitive shader 各种名字的 shader）。

如果不基于 quad 来求梯度的话，就要用别的并发，nanite 用的是在渲染好的 buffer 进行差分。Visibility Buffer Rendering with Material Graphs – Filmic Worlds 具体这里不看了。

---

多边形光栅化填充算法

矩形填充要点

• 共享边界问题：左闭右开，下闭上开
• 原理都是常识

多边形扫描线填充算法

• 逐点射线法：偶数交点说明在外面，奇数说明在里面。没用太慢了。
• 步骤：
  • 求交：计算扫描线与多边形各边的交点；
  • 排序：把所有交点按x值递增顺序排序；
  • 配对：每两个点进行线性填充。

• 扫描边界确定：顶点重复计数，仍然是半闭半开原则。（每个顶点都有两条边，如果顶点在扫描线上会重复计数）。但是可以发现，重复的时候虽然 x 是一样的，y 是不一样的，此时只取 P1 P0 的边的结果因为 P0 更大，或者只取。

• 边界重复扫描：左闭右开。

• 内部取点：收缩取整

 

Edge table  和 Active edge table

• 基于这样的事实引入的增量算法：

• 1     2     3     4     5     6     7     8     9    10    11    12

  void polyfill (polygon, color) {      //建立全局边表ET;         for (各条扫描线i )  { 把ymin == i 的边结构－>边表ET [i]  }      将扫描线i的初值置为ET中非空元素的最小序号；      初始化活动边表AET为空；      for (各条扫描线i )     {         (1) 把边表ET[i]中的边结点插入AET表;             (2) 遍历AET表，把y max== i 的结点从AET中删除，并按x坐标值增序排列各边；             (3) 把配对交点区间(左闭右开)上的象素(x, i)，用WritePixel (x, i, color)改写颜色值；             (4) 把AET中每条边结点的x值递增△x；             (5) i++;         } }

---

三角形光栅化算法一笔

这个部分比较简单，games 101 里面讲了。最基本的算法是利用叉积的关系，AABB 扫描构建 edge equation 。games 的作业里面也有这部分软光栅代码。一个点就是实际进行三角形内部插值的中心坐标和这个 edge equation 其实是一样的，所以可以同时实现插值输出，这样对于 Vertex shader 的输出的拼图就完整了，实际 rasterization 部分会把插值和 AABB 内像素光栅化给一起做了。

重心坐标我一开始没有很理解几何意义，其实这个东西就是两条边的向量求三角形内点的向量运算之后的不那么显然的变形而已，意义是用面积比做的线性组合关系。比如重心就真好是 1/3,1/3,1/3 他的插值也真好是平均。

当然插值的时候必须考虑 perspective correct ，具体来说就是因为此时的 frame buffer 是 2D 的，但是插值必须用 3D 的， 这个我在 Games101 作业手稿 III： 框架解释 重心坐标的一些注意事项_我说我谁呢 --CSDN博客_games101作业3 这里写了一下草稿。不过里面有公式，实现的时候可以直接参考，不用再推（不过理解思路更加重要吧）。

就像在多边形光栅化里面的分析，这个是每个点独立的并行算法，所以 GPU 任务随便分发，没有数据依赖。

但是也和多边形扫描里面说的那样，必须考虑相邻三角形公共边的重叠光栅化的问题，解决方案也是类似的，人为规定一些规则就行了。经典的是 top left rule。

Rasterization Rules - Win32 apps | Microsoft Docs

公共边问题的解决，实现的时候这里有很好的参考代码：

(3 封私信) 三角形填充算法的主要实现细节和注意点是什么？ - 知乎 (zhihu.com)

别人写的比我好，这里就不重复造了，实现的时候这个文章下半部分可以作为很好的参考资料：

图形学底层探秘 - 更现代的三角形光栅化与插值算法的实现与优化 - 知乎 (zhihu.com)

 

---

提一下这个栏目的笔记主要是为了给实现软光栅渲染器做一些前期的知识整理，包括各种细节要点，避免之后踩坑。

这一篇里主要实现光栅部分上的一些注意的要点我都列出来了，就是三角形的光栅和重心插值要一起做，然后中心坐标要进行 perspective correct，对于边界上要进行认为规定 Top-Left rule。