现代计算机图形学基础二：光栅化（Rasterization）

引言：

光栅化（Rasterization）这一词在计算机图形学中经常出现，很多相关书籍都给出了自己的定义。不过我看闫神对这个光栅化（Rasterization）这一词做了一个新娘娘腔水千丞颖的解读：Raster在德语中是屏幕的意思（Raster == screen in German），dna的复制而光栅化就是把东西画在屏幕上的一个过程（Rasterize == drawing onto the screen ），也就是把名词变成动词^{[1]。其实谈到光栅化（Rasterization）我们就不得不提一下实时渲染的核心组件——图形渲染管线（The Graphics Rendering Pipeline），它的主要功能是在给定一个虚拟相机、 三维物体、光源等等的情况下生成或渲染二维图像（如下图）。}

在左图中，一个虚拟相机位于锥体的顶端（四条线汇合处）。只有视景体内的图元会被渲染。右图显示了相机所“看到”的内容。请注意，左图中的红色甜甜圈形状物体不在右图中，因为它位于视锥体外部。左图中扭曲的蓝色棱柱也被裁剪于视锥体的顶面上。

实时渲染管线（Real-Time Rendering Pipeline）的各阶段是并行执行的，每个阶段都取决于上一阶段的结果。大致分为四个主要阶段：应用程序阶段（Application），几何处理阶段（Geometry Processing），光栅化阶段（Rasterization）和像素处理阶段（Pixel Processing）^{[2]如下图所示。红气球}

不过我们今天的重点不是详细阐述实时渲染管线（Real-Time Rendering Pipeline），而是要重点阐述光栅化（三角形的离散化）和光栅化（深度测试与抗锯齿）这两大内容。

1、Rasterrization—光栅化（三角形的离散化）

在谈光栅化之前，我们不妨来简单梳理一下如何用相机拍好一张照片，第一步我们要摆放好物体的位置（Model transformation）；第二步我们要找到一个好的角度去放置相机（View transformation）；第三步就是进行投影变换（View transformation），无论是正交投影（Orthographic projection）还是透视投影（Perspective proj重庆月嫂工资ection），我们的目的都是要把这个空间的物体转换到单位立方体里面来(cuboid to “canonical” cube [-1, 1]3）^{[1][3]；然后就是要把单位立方体映射到屏幕空间（Canonical Cube to Screen）}

既然我们要把物体画到屏幕上来，那就需要先了解屏幕（Screen）是什么？在图形学中我们可以把它抽象为一个二维数组，其中二维数组中的每个元素是像素（ pixel ）。这其实也很好理解，我们平常大家看到屏幕都会说它的分辨率（resolution ）是1920 * 1080，这就是表示这个屏幕有这么多像素并且这些像素形成了一个二维数组。

然后我们还需要定义什么是屏幕空间（screen space），我们可以从下面的图中看到：屏幕覆盖的范围是从(0, 0) 到 (width, height)，而像素可以用一个个的方格表示它们索引的范围是从(0, 0)到 (width - 1, height - 1)，比如这个蓝色的像素就可以用（2,1）表示，并且像素 (x, y)的中心在(x + 0.5, y + 0.学习的力量5)，其中x和y都是整型的。

定义屏幕空间

在了解完了什么是屏幕（Screen）和屏幕空间（ screen space）以后，我们就要解决怎么把这个单位立方体映射到屏幕空间（Canonical Cube to Screen）？我们知道单位立方体的x和y在平面上的范围是 [-1, 1]2，而像素平面的范围是[0, width] x [0, height]，为了把单位立方体里面的所有物体画在屏幕黑色衣服上（Canonical Cube to Screen）我们首先必然要做一个视口变换，但是怎么确定这个视口变化矩阵（Viewport transform matrix）呢？这也很好理解原来我们单位立方体的x和y都是2，现在x要变成width那就需要乘width /2，而y要变成height那就需要乘height/2，而z保持不变则为1（这个z值后面会详细介绍用来做深度测试），然后我们不要忘了此时立方体的中心点还在（0,0）而屏幕的中心点在（width /2，height/2）因此还需要平移（width /2，height/2）个单位（概括为先缩放再平移）。这样我们就可以算出视口变化矩阵（Vie刁亦男wport transform matrix）（如下图）：

视口弱智吧变化矩阵（Viewport transform mat宠物狗训练rix）

通过视口变化矩阵（Viewport transform matrix）把单位立方体映射到屏幕空间（如下图）

xy平面中的变换： [-1, 1]2 to [0, width] x [0, height]

到这一步的时候大家不要忘了我们此时得到的不过是屏幕空间中的一些三角而已，但是这远远不够我们需要把这些三角形打碎打成像素并且告诉每个像素的值是多少然后显示在屏幕上，这一个完整的过深水炸弹程我们称之为光栅化（Rasterization）。

顺便提一下大家对于李安在2012年导演的《少年派的奇幻漂流》中的这个栩栩如生的老虎很有影响吧，很多人以为这是一只真的老虎实际上不是的，这样精彩的视觉效果当然就有我们计算机图形学的贡献了（该整站片在第85届奥斯卡奖颁奖礼上获得了最佳视觉效果）。

电影少年派的奇幻漂流-电影中的老虎不是真的，是通过计算机图形学及相关技术实现的

这样栩栩如生的老虎要在屏幕上显示出来，必然要先经过一系列的空间变换（Model transformation、View transformation、Projection transformation），然后把单位立方体里面的物体映射到屏幕空间（Canonical Cube to Screen），这个omp时候屏幕上得到的不过是一系列屏幕空间的三角形，但是这远远不够我们要把这些三角形打碎成一个个的像素并且给每一个像素赋值，也就是光栅化（Rasterization）。

这里稍微解释一下为什么经过一系列的空间变换和视口变换得到的是一系列屏幕空间的三角形 ？这是因为三角形在图形学中可以看做是几何体的基本形状（Triangles - Fundamental Shape Primitives），那可能又有人会想为什么是三角形呢？因为三角形在图形学中有很多很好的性质：(1)三角形是最基本的多边形，并且任何其他的多边形都可以拆分为三角形。（2）三个点可以保证他在一个平面如果是四边形四个点就不能保证。（3）它可以很好地用叉积判断一个点是不是在三角形内部（三角形的内外定义特别清晰）^{基础一：线性代数与空间变换" data-url="zhuanlan.zhihu/p/449575856" data-numero="4" data-draft-node="inline" data-draft-type="reference" data-tooltip="现代计算机图形学基础一：线性代数与空间变换 zhuanlan.zhihu/p/449575856" data-tooltip-preset="white" data-tooltip-classname="ztext-referene-tooltip">[4]。}

Triangles - Fundamental Shape Primitives

上面我们已经说到我们需要把屏幕空间的一系列三角形打碎成一个一个的像素并告诉它们像素值，那这一步怎么判断三角形里面有哪些像素呢？也就是说我们给定一个屏幕空间中三角形的三个顶点坐标怎么确定里面有哪些像素呢？（这样是光栅化中最重要的一个概念，判断一个像素与三角形之间的关系，更确却的来说我们考虑像素的中心点与三角形的位置关系）。

1.1、Sampling—(采样）

采样就是给定一个连续的函数，在不同的点求它的值，也可以认为，采样是把一个连续的函数离散化的过程。

我们这里的采样是指利用像素的中心对屏幕空间进行采古典音乐入门样。因此我们王菲的微博需要定义一个 inside(tri, x, y)函数判断这个像素的中心是否在三角形内，这个函数的定义这就涉及到 上一章讲的叉积了（Cross Products）——如果这个点一直在三角形三条边的左边或右边那么就可以认为这个点在这个三角形的内部^[4]。

如果这个点在三角形的内部那么我们就定义它为1，不在内部就定义为0（这里的像素只考虑是显示还是不显示的问题，不考虑像素内部颜色的变化，像素内部本身还是很有讲究的）。这样我们就可以确定inside(tri, x, y)这个函数了（如下图）

定义inside(tri, x, y)函数

接下来我们就可以用一个最笨的方法就是遍历整个屏幕中的像素，然后判断像素的中心点是否在三角形内部，如果在就赋值为1并显示。

遍历整个屏幕像素，如果每个像素中心位于三角形内，则进行采样

可能大家一样就看的出来遍历整个屏幕空间的像素太浪费了，因为三角形可能只是屏幕中很小的一部分，因此我们可以进一步优化，只要判断这个三角形包围盒里面的像素就可以了（如下图）

采样优化的一种：对三角形包围盒里面的函数进行采样

采样完成后，我们自然知道有哪些像素的中心点在三角形内，那我们自然而然的可以把这些像素填成三角形对应的颜色，我们又知道像素是一个小方块并且它内部的颜色是均匀的，所以下图左边三角形内的像素中心点对应在不同的像素上会变成右边这样（如下图）

左边三角形内的像素中心点对应在不同的像素上会变成右边这样

这样我们就会发现一个问题，我们想要得到的是一个三角形，但是实际得到的不完完全是一个三角形，不过的它的形状和三角形大概类似，这就是我们所说的锯齿（Jaggies!）。有两个原因导致锯齿：一是像素本身有一定的大小，二是采样的速度更不上信号变化的速度（高频信号采样不足）。

我们想要得到的是一个三角形，但是实际得到的不完完全是一个三角形，不过的它的形状和三角形大概类似，这就是我们所说的锯齿（Jaggies!）1.2、Sampling Artifacts in Computer Graphics—（采样所产生的瑕疵）

前面我们已经知道，采样在图形学中广泛存在。光栅化的过程其实就是在屏幕空间离散的像素中心点上进行采样来判断像素是否在三角形内的采样。

一张照片其实就是所有达到感光元件的光学信息，通过把它离散成图像的过程，其实这也是采样。采样不仅可以发生在不同的位置，也可以发生在不同的时间，视频就是在时间中进行采样的。因此采样是广泛存在的，同样采样带来的问题也是广泛存在的。

a、采样产生的第一个问题就是我们刚刚提到的锯齿问题（Jaggies）

在光栅化中表现为锯齿（Jaggies!）。我们可以看到右边的图中三角形有明显的凹凸锯齿。

b、Moiré Patterns in Imaging—（摩尔纹）

如果我们把下面图片左图中的奇数行和列的像素剔除，就会出现摩尔纹效果。当我们拿手机拍显示屏的屏幕时也会出现类似的的效果，这些都是采样带来的问题。

c、Wagon Wheel Illusion (车轮错觉)

接着是车轮效应，当我们顺时针旋转纸片时，如下图所示：有些条纹显得在逆时针旋转，在生活中我们也经常能看到类似的现象，比如高速行驶的汽车，其轮子看上去在反向旋转，这是因为人眼在时间中的采样速度更不上运动的速度造成的。

2、Antialiasing —反走样2.1、Antialiasing Idea: Blurring (Pre-Filtering) Before Sampling—（先模糊再采样）

如何进行反走样呢？可以在采样之前先做模糊再采样（模糊也可以认为是低通滤波器，把三角形边界的这种高频信号给过滤掉）。

先模糊再采样2.2、Fourier Transform-傅里叶变换

上面我们出现了走样（Aliasing）问题，我们是通过先模糊后采样的进行反走样（Antialiasing ）去优化它的。这里我们不仅不思考几个问题： 1、为什么采样速度更不上信号变化的速度就会产生走样问题？2、为什么先模糊后采样就可以解决锯齿问题？

要探究其根本原因，我们就需要了解一点信号原理里面的傅里叶变换（Fourier Transform），傅里叶变换可以将信号分解为频率，并且能将满足一定条件的某个函数表示成三角函数（正弦和/或余弦函数）或者它们的积分的线性组合（如下图）。

傅里机动战舰nadesico叶变换将信号分解为频率

上面我们说了出现走样的原因之一是因为对高频信号采样不足，但是有人会说高频信号采样不足为什么会导致走样（Aliasing）呢？我们看下面这张图你就可以恍然大悟了，对于蓝色的高频信号与黑色的低频信号它们有相同的采样点，这个时候就出现了高频信号产品造型设计采样不足：采样错误地显示为来自低频信号，在给定采样点的时候无法区分的两个频率速率称为“别名”。

Two frequencies that are indistinguishable at a given sampling rate are called “aliases

前面我们提及到反走样常见的办法之一就是在采用（Sampling）之前进行模糊（Blurring/Pre-Filtering ），然后有人会问为什么模糊（预过滤）然后采样可以进行抗锯齿？

这个时候我们就要知道模糊（Blurring/Pre-Filtering ）就是要剔除某些特定频率的内容，Filtering = Getting rid of certain frequency contents。

我们开始提及到傅里叶变换可以把函数从实域变到频域，如下图所示，左图的人像是实域，右图是傅里叶变换后对应的频率。高通滤波器（High-pass filter）就是只保留高频信号（可以理解为图形内容中的细节，或者说边界-变化大的地方）；反过来如果把高频信号全部去除只保留低频信号，我们就会得到一张相对模糊的图。我们之前光栅化抗锯齿做的先模糊就是采用了低通滤波器（Low-pass filter），使其高频信号边界去除然后图形就会变得模糊。

Filtering 包氏父子= Getting rid of certain frequency contents。2.3、Filtering = Convolution(= Averaging)

我们说的滤波其实就是剔除特定频率的信号，从另一个角度看，滤波Filtering也可以看做卷积（Convolution）。或者说是平均。我们前面提及到的模糊就是采用了低通滤波器，也可以认为是一种平均操作。平均我们都知道，卷积是什么呢？

如下图所示，对于一系列信号，滤波器就好像一个窗口，它可以左右移动，窗口的大小是一个3*3的格子，这其实是要做一个卷积（Convolution）操作，也就是说移动窗口的时候，窗口三个数所对应的信号的三个数做一个点积的操作。

卷积（Convolution）

我们或许可以了解一点卷积理论来深入了解Convolution,在实域北师大二附上的卷积等同于在频率上的乘积，反之亦然（Convolution in the spatial domain is equal to multiplication in the frequency domain, and vice versa）

下图我们用了一个33的卷积核在实域做了一个卷积，因此图片变得模糊了。如果我用一个更大的卷积核（9*9）做卷积图片会变得更模糊（我们这里可以用极限的思想来想一想，如果这个卷积核无限大比图片像素还大，那是不是每个点积值几乎都是一样的，保留的信息就越少了越接近低频。如果我们用一个无限小比图片像素还小的卷积核去做卷积，那是不是意味着它相当于没有做滤波，值没有改变，也就是说把所有的频率信息都保留下来了）。

实域上的卷积等同于在频率上的乘积2.4、Sampling = Repeating Frequency Contents（从频率的角度看采样）

接下来我们从频域的角度来看什么是采样？采样其实就是在重复频率上的内容（Sampling = Repeating Frequency Contents）

我们可以看到连续函数（a）,它的频域对应的是（b），假设我们要采样函数（a）我们就需要取一系列的离散点，让函数（a）去乘离散点的函数（c）得到冲击函数（e）。在频域上我们可以看到S(f)—采样就是在重复原始信号的频谱。

我们要知道密集采样（Dense sampling）是没有问题的，但是如果采样的数量很少，这就会导致频谱之间的距离减少，这就导致了原始的信号与我复制粘贴的信号产生了混红酒保质期多久叠（也就是走样）如下图：。

采样频率过小导致的信号混叠（走样）

知道了这个走样的原理，我们就可以解释为什么先做一个模糊再进行采样可以进行反走样。模糊就是一个低通滤波先把高频的信息拿掉，这样做的原因就是让频谱覆盖的面小一些然后我们再以原本的间隔去采样它，这个时候我们发现它就不会产生信号重叠了。

模糊就是一个低通滤波先把高频的信息拿掉（把两边尖尖的去掉，原来的梯形变成了正方形与梯形相交的那一块），这样做的原因就是让频谱覆盖的面小一些然后我们再以原本的间隔去采样它，这个时候我们发现它就不会产生信号重叠了。

先模糊后采样，让频谱覆盖的面小一些然后我们再以原本的间隔去采样它，这个时候我们发现它就不会产生信号重叠了（如下图）。

2.5、MSAA—（More Sampling/Super Sampling Anti-Aliasing）

我们开篇已经提到了可以通过先模糊再采样来解决抗锯齿走样的问题，它的原理我们也知道模糊是通过低通滤泼器把高频信号剔除从而不会产生信号混叠，从而来解决反走样的问题。

但是在实际工程中，我们如何对图像进行模糊呢？答案就是用一个一定大小的低通滤波器来做卷积操作。最简单的卷积核就是一个像素。

我们开始在光栅化的时候利用一个二值函数f(x,y)来判定像素只有在三角形内和外，这也就是会导致边界的锯齿。如果我们对每一个像素进行卷积操作，我们的卷积核是像素本身一样的大小，而卷积的值就是等于每个像素的覆盖面积。

卷积的值就是等于每个像素的覆盖面积。

然而怎么计算出每个像素的覆盖面积？实现起来并不容易，因此人们研究出一种近似算法也就是所谓的超采样MSAA,MSAA只是一个反走样的近似，并不能严格的解决反走样的问题。

MSAA的算法是将一个像素划分成许多个小像素，每个小像素都有一个中心，算面积覆盖率就是可以等同于有几个采样点在这个三角形，如果像素点足够多的话就可以取得比较好的结果。

MSAA

MSAA可以取得不错的反走样，但是使用了更多色q网站的点来计算三角形的覆盖面积，付出了很多倍的计算量。

其他的具有里程碑意义的方法有：FXAA (Fast Approximate AA) 和TAA (Temporal AA)。这个后面再仔细探讨

参考^^{abGAMES101-现代计算机图形学入门-闫令琪 www.bilibili/video/BV1X7411F744?p=5^实时渲染（第四版）Real-Time Rendering (Fourth Edition) blog.csdn/qq_27534999/article/details/103148234^正交/透视投影-从模型顶点到屏幕的变换 zhuanlan.zhihu/p/410548236^ab现代计算机图形学基础一：线性代数与空间变换 zhuanlan.zhihu/p/449575856}