图形学基础知识：光栅化和采样

前言

在前面的学习中，我们已经可以通过MVP变换，把摄像机观测的空间压缩成了一个标准立方体。而接下来我们要做的是把这个标准立方体绘制到屏幕上，这样才能最终被我们所看见。在做这步操作之前，我们首先要知道如下一些定义：

 

一些定义

屏幕（Screen）

在图形学中，我们把屏幕抽象为一个二维数组，数组中的每个元素称之为像素（pixel，picture element的缩写）。这个数组的大小，就是屏幕的分辨率（Resolution），例如我们常说的屏幕分辨率为1920*1080，就是说有这么些个像素。屏幕是一个典型的光栅成像设备（Raster display）。

光栅设备

示波器（Oscilloscope），阴极射线管（Cathode Ray Tube，早期的显示器），液晶显示器（Liquid Crystal Display，LCD，利用了光的波动性，液晶的扭曲），发光二极管（Light Emitting Diode，LED），墨水屏（Electrophoretic Display，刷新率很低）。

 

光栅与光栅化

光栅（Raster）在德语中就是屏幕的意思，光栅化（Rasterize）就是把东西画在屏幕上的过程。这个过程非常的复杂，也是本文的重点，会在后面进行介绍。

 

像素

像素，最小单位，我们可以把它理解为一个个小方块，像素内的颜色可以用rgba来定义，一个像素（小方块）内只存在一种颜色。

当然随着科技的发展，像素的内容以及分布也越来越复杂，例如下图为两个手机屏幕的像素分布：

左图的苹果手机屏幕中，一个像素拥有三种颜色。

右图三星手机的这种分布我们称之为Bayer pattern，从中可以发现绿色的点比红蓝更多，这是因为人眼对绿色最敏感，人眼看上去可以更舒服。

在文本中依旧认为每个像素中只存在一种颜色。

 

定义屏幕空间

前面说了，我们要把标准立方体绘制到屏幕上，那么首先我们要定义一下屏幕空间，然后把标准立方体变换到这个空间上。

定义屏幕空间相当于在屏幕上建立一个坐标系，这里我们以屏幕的左下角为原点，向右为x轴方向，向上是y轴方向（注，定义的方法有很多种，例如我们也可以左上角为原点，在后续的操作中遵循自己的定义即可）。

 

前面说到屏幕是有一个个像素所组成的，例如我们像素的二维数组为 w*h，那么就表示在x轴方向有w列，在y轴方向有h行。这里我们设每个像素的大小为1*1，那么整个屏幕的大小即为 w*h。如上图，一个个小方块即代表一个像素。

这样我们就可以通过坐标的方式来定义每个像素的位置了，即(x, y)，可以当做是图中每个小方块左下角点的坐标。例如坐标(0, 0)就表示屏幕最左下角的那个像素，由于坐标从0开始，因此最右上角的那个像素坐标为(w-1, h-1)。

此外我们说过像素是一个个小方块，那么自然有它的中点（即图中小方块中间的点），因此像素(x, y)的中点即为(x+0.5, y+0.5)。

 

视口变换（Viewport Transform）

在前面我们定义好了屏幕空间，那么我们要把MVP变换后的标准立方体绘制到屏幕上，首先要做的就是把其变换到这个w*h的空间上，这个变换我们称之为视口变换。

该变换我们主要分为如下两步：

1. 将x轴和y轴长度为2的标准立方体缩放为x轴和y轴长度分别为w和h长方体。
2. 将该立方体从原点平移到 

注：此处我们先不考虑z轴的变换，后续会有它的作用。

这个变换矩阵很简单，就不过多推导了，其结果如下：

 

光栅化

在上面视口变换后，我们的标准立方体虽然变成了一个xy方向和屏幕一样大的空间，但是空间中依旧还是我们的三维物体，例如人，建筑，植物等。前面我们知道屏幕是由一个个像素组成的，也就是说我们通过屏幕看见的二维画面其实都是由无数个像素构成的。因此接下来我们要做的就是把空间中的那些三维物体全部打散成像素，而这个过程，我们就可以称之为光栅化。

 

Mesh与三角形

在生活中我们知道，不管是相机拍照还是人眼看，我们仅仅只能看见物体的表面，因此我们要显示在屏幕上的，也仅仅是这些三维物体的表面。而对于表面，我们可以把它理解成由多个不同平面所组成，例如长方体即是六个长方形所组成的。在图形学中，我们需要把表面分解成无数个不同的小三角形（Triangle），这些三角形像网一样编织在一起，就可以形成任何我们想要的三维物体表面，这些由三角形所构成的表面我们称之为Mesh。例如长方体就是有12个三角形组成，因为一个长方形可以分解成两个三角形。更复杂的物体表面分解可见下面几个示