前情提要
- 模型变换
- 视图变换
- 投影变换（正交投影、透视投影）
- 物体会缩放到\([-1,1]^3\)的立方体内
接下来，我们需要把物体放画到屏幕上，即光栅化
屏幕
- 有一组像素
- 像素的多少（分辨率）
- 一种光栅成像设备
Raster在德语中就表示屏幕
所以光栅化就是把物体画在屏幕上的意思
像素
-
Pixel是”picture element“的缩写
-
最小颜色单位
-
一个正方形内部颜色均匀，这整个正方形只能有一种颜色（红、绿、蓝）。
屏幕空间
- 像素的索引为形式为（x，y），其中x和y都是整数
- 像素的索引从（0，0）到（宽度-1，高度-1）
- 像素（x，y）在（x+0.5，y+0.5）的中心
- 屏幕覆盖范围（0，0）到（宽度，高度）
视口变换
-
与z无关
-
把前面视图变换后获得的\([x,y]2\)缩放到\([0,width]\)和\([0,height]\)的屏幕空间中去
视口变换矩阵
\[M_{viewport}=\begin{pmatrix}\frac{width}{2}&0&0&\frac{width}{2}\\0&\frac{height}{2}&0&\frac{height}{2}\\0&0&1&0\\0&0&0&1 \\ \end{pmatrix}
\]
光栅化
我们已经把图像缩放到了屏幕大小，接下来呢？
接下来，我们需要把图像打散成像素，使其真正在屏幕上显示
光栅显示设备
- 示波器
- CRT显示器（控制电子打到屏幕成像）
- LCD（液晶显示器，根据液晶的原理，控制一个像素显示什么颜色）
- LED（发光二极管）
- 上图是CRT的显示设备
- 控制一行电子一行电子成像
- 引申出隔行扫描（上一帧显示1、3、5..行，下一帧显示2、4、6..行），但容易造成画面撕裂
三角形光栅化
- 三角形是最基础的最小的面
- 其他所有多边形都能拆解成三角形
- 根据三角形内部任意一个点与三个顶点的关系，可以插值出渐变效果
如何判断一个点与三角形的关系？
1.采样法
定义：将一个函数离散化的过程。
- 判断这个像素的中心点是否在三角形内部。在这里采样表示遍历所有的像素点。
- 遍历所有的像素点与三角形的位置关系（是否在三角形内部，是则1，否则0）
- 要是某个像素点正好在三角形的边界上，这种情况一般是特殊处理或者不做处理，这些可以是自己定义的。
for(let i=0;i<xMax;i++){
for(let j=0;j<yMax;j++){
image[x][y]=inside(tri,x+0.5,y+0.5)
}
}
2.叉乘法
优化采样流程
包围盒
- 是对采样法的一个优化
- 包围盒的范围是三角形的最大范围（AABB）
- 不用遍历每一个像素点，利用包围盒缩小检测的范围。
增量三角形遍历
- 每一行找出三角形的边界，相当于每一行找到一个包围盒
- 然后再在每一个包围盒内进行检测点是否在内
实际屏幕光栅化
- 实际屏幕的像素不一定是正方形
- 学习过程中假设为1平方大小的，内部颜色均匀的小方块
光栅化后的效果以及问题
- 现在我们已经完成了光栅化，判断好了，点是否在三角形内，三角形内的像素变成了红色
- 屏幕上的效果如下
- 这是我们期望的效果
- 这是怎么回事呢？
- 引入”反走样“