一、前言:走样的产生

上一篇我们谈到了光栅化，在讲述光栅化时我们得到了光栅化之后的这样一张图，如下图

显然，这和我们原本的三角形严重不符，原因是像素是方块，而无法完美的拟合三角形。

也就是说我们得到的图产生了严重的锯齿，学名：走样。

而以上的对于产生原因的说法是非常不专业不严谨的，想知道原理，我们需要从信号的角度去分析。

(预备知识:信号与系统/数字信号处理等)。

我们前面说了，光栅化实际上是一个采样的过程，如果将图像看作一个信号，那么分辨率可以看作采样的频率，那么本质上，走样就是一个采样率不足以跟上信号变化频率的问题，那么是否可以提高采样率呢？显然是不能的，屏幕的分辨率是受硬件条件制约的。那么就只能通过降低信号变化频率来实现了。

二、从信号角度看走样

前面我们说了，我们需要降低信号变化的频率那么怎么降低呢？这里我们通过时域和频域相关的知识可知，任何信号都是由不同频率的正余弦叠加拟合而成，那么只要在频谱上用滤波过滤掉高频信号，那么原本的信号变化频率就会降低。而实际上，这一步操作会导致图像模糊。这里先给出一个大概思路：

滤波 = 卷积 = 平均 = 模糊

滤波：

滤波实际上就是在频域上抹掉某些频率的一种方法，抹掉低频的叫做高通滤波，抹掉高频的叫做低通滤波

如图为一张图片在时域(左)和频域(右)的样子

经过高通滤波后的图片在时域和频域的样子

经过低通滤波后的图片在时域和频域的样子

可以明显的看出高频段对应着图片中的边界，而低频段则对应着图片也就是时域中变化没那么快的部分。

卷积的理解，时域与频域：

我们学过信号与系统/数字信号处理的相关知识可以知道，时域上做卷积等于频域上做乘积。

卷积操作图示，可理解为一种加权平均

我们把如下图的一张小女孩的图片和一个滤波分别做傅里叶变换到频域再乘积，然后再通过傅里叶反变换回时域，可以发现，这和我们时域上直接做卷积(模糊)是一样的。

那么采样到底是什么呢，在时域上我们可以理解为，一个需要采样的信号和一个采样信号的乘积。那么对应到频域上也就是，原信号和采样信号在频域上的卷积，也就是原信号在频域上的频率的重复，如下图：

如图左边a,c,e代表采样时，时域发生的变化，右边b,d,f表示采样时频域发生的变化

3.频谱的混叠：

时域与频域常常有着相反的对应，在时域上采样如果不够快，也就是采样函数的频率过低，那么频域上频率重复的就会变得过快，最终会造成频谱的混叠。如下图所示：

这个时候就要用到我们之前的低通滤波，抹去原频谱中的高频信息，也就是做一个模糊，这样在频域中，冲激信号和原信号做卷积时，也就是重复时，就不会发生混叠了。如下图：

综上，现在大家应该就对前面的 滤波 = 卷积 = 平均 = 模糊 这句话有一个更清晰的认知了。

三、反走样

通过上面的理论我们可以知道，只要在采样之前对三角形先做一遍模糊，那么就可以有效的抹去高频信息，从而进行反走样，如上图。

方法则是对于每个像素，计算三角形覆盖其中的面积，用滤波做一个平均，从而得到该像素的颜色。如下图所示：

MSAA

上述的做法听上去好像很容易，但是实际做起来并不容易，如何在一个像素内计算颜色的平均值呢？

在实际的操作中，我们会把每一个像素分成更小的部分，用更小更多的方块表示一个像素。如2X2。

这样，再用滤波来做卷积就可以得到每个像素的平均后的颜色了。这种方法叫做MSAA。

值得注意的是，MSAA并没有提高分辨率，也就是说并没有提高采样率，因为增加采样点只是为了合理的计算三角形对像素的覆盖率而已，这点不能混淆。

并且在实际的游戏中，开启MSAA并不会真的不会使性能开销变为2x2倍，因为实际应用中并不会真的把像素规则的分为n x n的次级像素，这样开销是非常大的，人们会根据实际情况制定划分，可能是不规则划分，而有的点还可以被邻近的像素复用，所以在游戏中开启MSAA也不会出现帧数暴跌的情况。

其他反走样：

除了MSAA(Multisample anti aliasing)还有许多其他反走样的方法：

这里不做详细介绍，具体参考如下或其他资料：

游戏反走样算法调研 | 英伟达最新 DLSS, TAA, FXAA, MSAA 原理及比较 - 知乎 ()

(1)FXAA（Fast Approximate Anti-Aliasing）

FXAA实际上是一种图像的后处理，先渲染出带有锯齿的图像，然后通过后处理的方式，通过图像匹配找到带有锯齿的边界，并把它们替换成无锯齿的边界。

(2)TAA（Temporal Anti-Aliasing）

TAA则是一个2帧复用的方法，用同一像素内不同的点感知是否在三角形内，相当于把MSAA中的样本分布在了时间上。即上一帧的信息在下一帧依然有用。

(3)DLSS（Deep Learning Super Samping）

通过深度学习的方法来猜出图像中缺失的细节信息。

参考资料：

GAMES101-现代计算机图形学入门-闫令琪_哔哩哔哩_bilibili

Lecture 06 Rasterization 2 (Antialiasing and Z-Buffering)_哔哩哔哩_bilibili