Games101 课堂笔记 光栅化（抗锯齿，反走样）

---

回顾：在上节课中我们介绍了在经过MVP变换，并且进行了一个视口变换之后（也就是将[-1,1] ^3这么一个标准立方体给映射到屏幕空间上去），当所有的三角形已经在屏幕上之后，将东西画在屏幕上的过程就是光栅化。我们要利用像素中心对屏幕空间进行采样,也就是算出inside函数在不同的像素中心所求出的函数值是多少,是0则在三角形外部,是1则在三角形内。并且在上节课结尾引入了锯齿的概念，下面我门对锯齿的概念和如何抗锯齿进行学习。

---

---

我们采样是在每个像素的中心进行采样，通过求出inside函数在不同像素中心时的函数值,然后判断这个函数值判断像素中心是否在三角形内，如果是三角形内就对其进行上色如果是三角形内就对其像素点进行上色填充：

在将三角形所覆盖的像素点进行上色填充之后，我们会发现得到是不是一个三角形：

这种现象叫做锯齿现象，学名叫做走样（Alisaing），锯齿在平常很常见，比如对一张图片放大，就可以明显看到锯齿，或者在游戏中，如果关闭了抗锯齿的选项，也能够看到很明显的锯齿。

那么为什么会形成锯齿呢？

我们首先要从采样的理论开始谈起：

---

1）采样理论：

a)采样在图形学中广泛存在:

把连续信号转换成离散信号的过程称为采样过程（sampling process）。

光栅化 = 在2D的位置上进行采样

---

图片 = 对图像传感器平面进行采样

其是通过将所有到达感光原件所在平面上的光学信息离散成图像上的一系列像素的这么一个采样。

---

视频 = 在时间上进行采样

采样不止发生在不同的位置上，也可以发生在不同的时间上。
视频或者动画就是我们把一系列的吐按照一定的时间放出来,从而形成了一个光滑的过渡过程或者叫动画.这个动画实际上来说是在时间中进行的采样,因为本质上来说不存在任何连续意义上的动画,其本质均为一帧一帧也就是一张一张图.

假设每秒放出24帧,也就是每秒放出24张图象,连在一起我们认为这是一个光滑的过度过程或者称之为动画,但是其每一帧都是处于在一个特定的时间点上的,并非是连续存在的.也就是将时间点看为横轴,而y轴得到的值,是在这个时间点上所对应的那一帧图像.

我们可以把每一帧都叠在一起从而得到下面一张千手观音一样的图片,这张图片就很明显的告诉了我们这个挥拍击球的动作是由一连串的图像构成的,吗,每一帧我们可以明显的看出离散的球拍的位置,这就是对时间的采样.

---

b)图形学中的采样错误（Sampling Artifacts in Computer Graphics）

采样会产生一系列的问题，其中有

i)锯齿：

ii)莫尔纹

图像中的莫尔纹（Moiré Patterns in Imaging），也是一种采样错误。如下图所示，左边是原图，右边在采样时跳过了图像中的奇数行和列，再将其剩下的组合在一起成为了一个比原图小的图，但在显示时仍和原图一样大，就出现了右图的莫尔纹效果。

iii)车轮效应

我们在看高速运转的车轮时，会发现车轮有时顺时针旋转，有时逆时针旋转，这也是一种采样错误。这是我们人眼在时间中的采样出现了问题，人眼在时间上的采样跟不上旋转的速度，因此出现了车轮效应。

总而言之，信号变化的速度太快（主要指高频信号变化太快），而采样的速度太慢，最终结果就是会导致采样错误，我们称其为走样。

---

2）反走样主要思想

反走样的主要思想是，在采样之前进行模糊处理（Antialiasing idea:bluring before sampling）.
如果不对其进行模糊处理直接采样，就会出现下图的效果：

由于我们通过像素中心点来采样三角形，得到的就是要么在三角形内像素点纯红，要么在三角形外像素点纯白，画出来之后产生了走样（锯齿现象）。

而我们在做了一遍模糊操作在进行采样后：

可以看到采样点增加了，并且在边缘处有一些颜色比较淡的点，也就是采样到了模糊三角形的边界。

三角形的原锯齿边缘的像素取了一个介于红色和白色之间的像素值，离边界近就接近红色，离边界远就接近白色，再进行染色时，边缘的像素点就会染色为中间值，边缘就能够获得一些更加平滑的效果，起到抗锯齿的作用。

这也就是对原始的函数或者信号进行了一个模糊或者滤波的处理，然后再去做采样。从而解决了锯齿的问题，也就是如下图所示：

下面左图为直接采样，右图为先模糊后采样的效果：

先采样后模糊，会得到什么效果呢？

可以看出并不能实现抗锯齿的效果，其仍然得到的是一个走样的结果，只不过在走样之后又进行了模糊操作。

那么问题来了：
1）为什么采样不足会导致锯齿？

2）为什么先模糊后采样能够抗锯齿，而先采样后模糊不行？
因此就要引入频域方面的知识进行讲解：

3）频域

首先我们来解释什么是频域，频域是描述信号在频率方面特性时用到的一种坐标系。自变量是频率,即横轴是频率,纵轴是该频率信号的幅度,也就是通常说的频谱图。

从最简单的正弦余弦图像来解释：

正弦和余弦有什么好处呢？

我们可以看出，通过调整函数的系数，我们会得到不同的余弦波，他们的区别在于 频率（f） 不同.

由上图可知，f=2时函数图像变化的要比f=1时候快，f = 1 / T ,Cos2π每隔1重复一次，Cos4π则是每隔0.5重复一次，也就是周期变小，变化变快。

傅里叶变换（Fourier Transform）

傅里叶级数展开就是说，一个函数f(x)，能够分解成许多不同的正弦波或者余弦波的和。

我们可以看出，从第一个函数图像看，只有一个余弦波，将这个波加上一个数，让其整体向上位移，但是与目标函数f(x)相差很远，但当分解的余弦波或正弦波足够多的时，其组合在一起所产生的函数图像无限接近于原函数f(x)。

傅里叶变换的作用： 将信号从时域转换到频域。（时域并不是说就一定是时间的信息。图像并不带任何时间的信息，但我们认为空间上的信息也算是时域，时域只是一个单纯的名字。这里指把图像从图像的空间变换到频率的空间）

如图所示，傅里叶变换是将左边的f(x)在经过一系列复杂的操作之后变为了右边的F(x)。
（时域 --------> 频域）

傅里叶逆变换则是将右边的F(x)在经过一系列复杂的操作之后变为了左边的f(x)。
（频域 --------> 时域）

我们将f(x)分解为下图的五个函数，五个函数各有不同的频率，从上到下函数频率从低到高。

垂直的虚线为采样点，绿色为函数图像，从上到下频率依次增高，黑点为在函数上采样的点，蓝色的虚线是将采样的点链接一起。

f1(x)中，采样的点的线连起来比较接近原来的图像，而下面随着频率的升高，连起来的蓝色的虚线无法再还原成原来的函数图像。这就是导致采样出错的原因。

我们采样也是有一定频率的，在图中我们以这个间隔代表采样频率，如果间隔很小则代表采样非常密，因此可以还原出高频率的函数，而当我们的采样频率低于函数变化频率时候，就无法将原始信号恢复出来，因此出现了采样错误。

通过频率解释什么是走样：

由图中我么可以得出两种函数理解：
第 1 种情况：蓝色是原函数，进行采样，采样结果是黑色线。

第 2 种情况：黑色是原函数 ，对其进行采样，采样结果仍为黑色线。

我们可以得出结论：使用同样的采样方法，采样频率不同的信号，得到的采样结果可能相同。

同样的采样方法采样两种不同频率的函数，得到的结果我们无法区分，这就叫做走样。

4）滤波 = 抛弃特定频率的内容（Filtering = Getting rid of certain frequency contents）

滤波，从频域的角度说，就是把特定的频率抹掉。

傅里叶变换可以把一个函数从时域变到频域。如这个图片就是一个对应过程。对于右边的频域图，从中心到外围，频率由低到高。然后再通过每一个位置的亮度来定义信息的多少。

我们可以通过傅里叶变换来得知任意一个信号在任意频率中的是什么情况（帮助我们可以看到图像在不同频率下的样子。），这个其实就是频谱。

那我们做一个实验，把中间遮住，把低频的信息过滤掉，只留下高频的信号（高通滤波），会有什么结果呢？

通过逆傅里叶变换后，可以看到之前的人物图像只留下了内容上的边界。

那为什么是对应到边界呢？

首先我们要确定什么是边界：并非四边的这个边界，而是图像内容上的边界因为某一点是边界点的话，那么该点的上下、或者左右的变化就会非常大，所以该点的信号变化就会非常大。所以高频信息代表着图像的边缘。

下图是高通滤波，也就是只剩下了高频信息。

另一个实验，我们只把中间的留下，抹掉所有高频信息，只留下低频信息（低通滤波）。那最后我们可以得到一张模糊的图，在逆变换后，我们很难再找到边界的位置。原因其实和上面一样，是因为我们通过低通滤波去掉了高频信息，那对于时域来说，就是去掉了边界信息，那图片本身自然就变得模糊了。

另一个实验是只留下某一段频率的信息（即带通滤波）的效果。

a)滤波器 = 卷积 = 平均 （Filtering = Convolution = Averaging

从图形学角度来说，卷积就是一个一维数组，图中的filter（滤波器）就像是一个窗口一个可以进行左右滑动，窗口的大小是三个格子，而且覆盖着三个块（signal）。

卷积就是将滤波器与其所覆盖的三个signal数字做点乘，再将求到的结果写到中间的格子里。

如图所示，3 x (1/4) + 5 x (1/2) + 3 x (1/4) = 4,再将结果4写入到滤波器中间所对应的result上的格子。

其实就是信号在任何一个地方,在他周围的一个区域做的一个平均而已.

卷积定理有一个联系起时域和频域中操作的定理。卷积定理是傅立叶变换满足的一个重要性质。

卷积定理指出，函数卷积的傅立叶变换是函数傅立叶变换的乘积。结合上时域和频域，那就是在时域上，如果需要对两个信号进行卷积，其实对应到两个信号各自频域上，是两个信号的乘积。
也就是

时域上两个信号的卷积 = 频域上两个信号的乘积

时域上两个信号的乘积 = 频域上两个信号的卷积.

所以通过卷积定理，我们可以知道我们该如何做一个卷积。

第一种方式是我们像上面的过程，直接通过一个卷积滤波器对图像做卷积操作。

第二种方式就是也可以把这个图做傅里叶变换变到频域上，然后再把这个卷积滤波器变到频域上，然后让两者相乘，乘完之后得到频域的结果，再把它逆傅里叶变换，变回到时域上。

b)卷积的运算方式：

1）直接用卷积核在时域上进行卷积运算

2）先将图像通过傅里叶变换转换到频域,得到一个频谱，再将卷积核通过傅里叶变换转换到频域，得到第二个频谱，然后将两个频谱相乘，将最后得到的结果通过逆傅里叶变换转换到时域。

c)卷积核 / 滤波器（Convolution Kernel / Box Filter）

上图为卷积操作，卷积核求周围像素平均值操作也是一样的，找一点像素，然后找他周围一周的像素点，正好对应其卷积核的九个数字，最后得到的值写在新的正中心位置，就象在上文说过的,其实就是信号在任何一个地方,在他周围的一个区域做的一个平均而已.。

这个卷积核就是求图像上某一点周围像素的平均值，然后将最后得到的结果作为中心点的像素。 前面的系数 之所以是1/9 是为了将卷积核内的最后求得的数字之和后得1。

卷积核内的数字之和 = 1,则代表亮度与原来一样.

卷积核内的数字之和 < 1,则代表比原来的暗.

卷积核内的数字之和 > 1,则代表比原来的亮.

Box filter由于在经过傅里叶变换之后得到的频域上只有低频,因此我们称它未低频滤波器.左图为时域上,右图为频域上.

如果左图的盒子在时域上变大,与之对应的频域上的反而变小.用我们的使用33的滤波器能够达到一个使图像模糊的效果，如果用21 * 5， 7 * 7 ,21 * 21,6363的,甚至更大的滤波器，会随着滤波器大小的增大，图像会变得越来越模糊(因为对于任一像素,我们取了更大一片区域的来求他的平均值),取平均值的范围越大，那么这个范围内的像素的区别就会越小，图像也就会越模糊；

盒子越大,模糊越强.

与之相反，如果用一个1 *1 或者是超级小(比像素还要小)的滤波器,那就相当于没有进行滤波,它在频域上就会无限大,图像也就不会变模糊。

d）采样 = 重复频率（频域）上的内容

上图a是一个连续函数的图像，b是a经过傅里叶变换之后得到的频域的图像,之所以为三角形是为了方便演示,不要在意其频谱是什么图形。我们要对函数a进行采样，如何进行采样呢？

采样就是对函数进行离散化的过程，只保留函数上某些特定位置的函数值，其余不要。这就相当于 一个函数 乘以 另一个函数。 反应到上图就是 a × c （c是冲激函数）, 得到的结果e就是对a采样的结果，可以看到这个采样能够还原函数a的图像。

我们说，时域上的乘积 （a × c ）= 频域上的卷积 （b 卷积 d），也就是说我在时域上对 a×c的操作，在频域上要把b和d进行卷积。

b卷积d的结果就是f，就可以发现在时域上对一个连续函数进行采样，而在频域上，则是对该连续函数的频谱进行了一个复制粘贴的操作（函数e经过傅里叶变换得到的结果是函数f）。所以说采样是什么，采样就是重复一个原始信号的频谱。也就是说在时域上进行采样 等价于 在频域上进行周期延拓。

我们得知采样就是不断重复一个原始信号的频谱，因此可以知道走样是如何得出的：

采样间隔对应频率的倒数，采样相当于连续函数乘一个冲激函数，而冲激函数的间隔就是在时域上采样的间隔，因为冲激函数在频域里的间隔是时域里的倒数，所以时域越宽，频域越窄。

采样的不同间隔，会引起频谱以另外一个不同的间隔来进行移动，当你采样的比较稀疏，意味着采样点之间的距离很大，对应到频谱复制粘贴上就是复制粘贴的频谱之间的间隔很小，也就是搬移的密集，密集会导致原始频谱与新复制的频谱会发生混合，这就是发生了走样现象。

以三角形光栅化为例，如果三角形内部的像素点很多，那么一个个去采样，表示采样密集了，因此时域上采样点之间的距离小，对应到频谱上就是搬移间隔大，就很难发生走样现象。

相反可知，像素点少，则代表采样慢，采样点间的距离变大，搬移的密集，因此会容易发生走样现象。*

5） 反走样

如何减少走样？

1 : 提高采样率

提高显示器分辨率。如果用一个640*480的显示器，光栅化一个三角形，就能够明显发现锯齿很严重，但是如果使用1920 * 1080的显示器就能够明显改善这种情况，采样的密集了，走样现象也就会减少。

但是这种情况需要依赖于高分辨率的显示器，若是显示器分辨率不能改变时，这种方法就不行了

2 : 反走样（先进行模糊操作，在进行采样）

模糊就是低通滤波，也就是先把高频信息抹除，然后再采样。

稀疏的采样会发生频谱的复制与原频谱发生重合从而产生走样现象，那么在采样之前，先用滤波器（虚线框）抹除掉高频率的信息(我们认为虚线方框外的是高频信号，要进行抹除)，然后再对图像以原本的稀疏采样率进行采样,这时候就不会发生走样现象了。

也就是通过滤波器先做一个模糊操作，砍掉高频，减少了频谱复制的面积，这时候在用原本的稀疏采样率进行采样，再以原本的复制间隔去复制，由于面积的减小，就不会发生重合了。

可以看到，如果不用滤波器进行滤波，那么就会像之前一样，在高频段的部分会导致频谱的叠加，然后发生走样。

用滤波器进行滤波之后，就不会在发生频谱的叠加，也就减少了走样。这就先进行模糊操作，在进行采样的原理。

然后再回到我们的做法当中，先模糊 再采样 = 抗走样‘

在实际中我们如何进行滤波操作或者说是模糊操作呢？

使用一个一定大小的低通滤波器对三角形进行卷积，就可以得到模糊的效果。

也就是我们对于每个像素,把三角形求平均值,然后在做采样.

6) 计算平均像素值实现抗走样（Antialiasing by Computing Average Pixel Value）

我们可以从图中知道对于任何一个像素，被三角形覆盖的情况只有三种：

1.完全被覆盖

2.完全不被覆盖

3.部分被覆盖

对于任何一个被覆盖的像素，我们要计算这个像素的平均值就是看被覆盖的面积占整个像素多少比例，比如图1，三角形覆盖了1/8，未覆盖7/8，那么这个点的平均像素就是 1/8的黑色+7/8的白色作为最终的像素值。 就是说把像素内部的值给平均一下，这就是所作的卷积操作。

求三角形在单个像素点的覆盖面的平均,就是卷积操作.

7)反走样方法:MSAA（Antialiasing By Supersampling）

MSAA是一个对反走样的近似因为按照上面的那种求每个像素中的区域百分比十分困难，所以就有了MSAA这种反走样的方法，其思想也是如上面的那种方法，但是取的是一个近似的求区域像素平均值的方法。

之前我们划分了很多个像素来,在MSAA中,我们将以划分的每个像素在进行划分,将原有的一个像素分为更多个小像素.如下图,我们将原来的一个像素的区域又重新划分为了4*4 = 16 个像素的新区域.

而重新划分的每一个小像素也都有一个像素中心，然后可以对这个小像素进行采样，判断这些小像素在不在三角形内，然后将最后的结果平均起来，就能够求的三角形对一个像素的区域的近似的覆盖。比如：

可以看到一个三角形覆盖了若干个很大的原像素.

现在假设说我们将原有的一个大像素分为四个小像素，也就是在像素内部多加一些采样点,这就导致了时域上我们采样的间隔变小,频域上的频谱搬移空间变大,从而进行了反走样.

然后每个点都可以判断是否在三角形内，如果四个点都在三角形内就是100%覆盖,也就是100%的红色，如果只有三个点在三角形内，则三角形对这个像素就是75%覆盖,其颜色也就是75%的红色+25%的白色。于是就可以得出每个像素的覆盖结果:

MSAA通过更多的样本，来近似的进行反走样的第一步，模糊这个过程。模糊完了之后就相当于每一个像素内部都已经知道了三角形的覆盖率，求了平均之后是什么，就会得到上图的结果。

1.到了这一步，就相当于模糊做完了，就相当于用卷积核对图像进行了一次卷积得到了模糊的效果。

2.然后再采样，这时采样就会十分简单，因为我们规定像素是最小的单位格子,每个格子的颜色都是平均的(像素内的颜色都是一样的)，采样完也就会得到上图的结果。

注意!!!
1.MSAA所进行的是一个模糊的操作,而采样这一步隐含在了MSAA的过程中.
2.MSAA并不是一个提升分辨率直接解决的走样问题. (我们增加采样点只是为了近似一个合理的三角形在像素点上的覆盖率,并没有真的提升分辨率.)

MSAA的缺陷就是,我们增加了采样点也就是增加了计算量,将一个像素划分为多个区域，就要对每个区域进行多次计算，最后就提高了计算的成本。

8) 其他反走样方式

• FXAA (Fast Approximate AA)

  是一个图像的后期处理,先把一个有锯齿的图的出来,然后通过图像匹配的方法找到有锯齿的边界,并且将这些有锯齿的边界换成没有锯齿的边界.此方法与采样无关,是在图像处理的一种抗锯齿.

• TAA (Temporal AA)

  此操作是去复用上一帧的信息,我们用像素内的一个点来感知是否在三角形内,在一个静止的场景上,相邻的两帧,我们可以用一个像素内部不同位置上的点来感知是否在三角形内,我们会发现在时间范围内得到的静态场景的图会各不相同,有一些出现了边界吗,有一些没有出现边界,TAA就是复用上一帧感知到的结果,上一帧里每个像素的值在这一帧继续发挥作用.
  相当于我们把MSAA对应的样本分布在了时间上,并且在当前这一帧来说,我们没有引入任何操作.