计算机图形学笔记

参考图书:Digital Signal Processing(forth edition)
数学物理方法顾樵
部分图片选自网络,前面的数学基础是之前的笔记,侵权删

一点点数学基础

变换基础

光栅化

将一个图像用像素点矩阵表示出来的过程称之为光栅化，实际上光栅化的过程并不是现实设备完成的而是图像自己确定自己的展示方式。
这里区分两个概念
像素（pixel）：即组成光栅的最小点
物理像素：设备上每个实际在发光的点
一个图像可以表示为I(x,y):R−>VI(x,y):R->VI(x,y):R−>V
其中R∈R2R\in R^2R∈R2是平面上点的集合,V为色彩空间,以最简单的平面黑白图为例,每个平面上的点只有一个灰度值即V∈RV\in RV∈R
不过实际上除了要考虑像素点本身发出的光还要考虑像素点吸收和反射的光
我们终究是要把图像在一个屏幕上显示,屏幕可以认为是一个像素的二维数组,像素点总的个数称之为分辨率(如720p,1080p,2k等)
在二维平面上如何组织和表示这些像素点变得十分重要，一般我们把这些像素放在二维直角坐标系上，用每一个像素的中心点（我们认为每一个像素都是一个正方形，然而实际上要比正方形复杂得多,实际上每个像素点上还要细分成不同的RGB子像素不同子像素排列方式不同比如很火的周冬雨排列,钻石排列,贝尔排列等等）的位置来表示像素,最左下的像素的中心点坐标定义为(0,0)同时为坐标系的原点,最右上的像素点记为 (nx−1,ny−1)(n_x-1,n_y-1)(nx−1,ny−1),其中nx,nyn_x,n_ynx,ny为横纵像素点个数即屏幕的width与high.

上图中的建系方法是各像素中心点为参考表示的是相对位置,如果以整块屏幕为参考我们可以得出下面的坐标系,它表示的是每一个坐标在屏幕上的位置

那么如图蓝色像素的相对位置是(2,1)但是实际位置是(2.5,1.5),整个屏幕的空间为(0,nx)∗(0,ny)(0,n_x)*(0,n_y)(0,nx)∗(0,ny)像素点空间为(0,nx−1)∗(0,ny−1)(0,n_x-1)*(0,n_y-1)(0,nx−1)∗(0,ny−1)
对于一个实际的图像比如一个(−a,a)2(-a,a)^{2}(−a,a)2的正方形,如果想将其显示在一块(0,w)*(0,h)的屏幕上,我们要经过一个坐标变换才能够完成这个变换有两个方面
第一步:
第二步:

三角形

最基本的图形就是三角形,首先已知三个点他们一定能确定出一个平面,并且三角形的内外边界清晰,不存在内部奇点.所以其他复杂的多边形也可以由大量的三角形去构成.
那么么现在的问题是我们拿到一个经过视口变换的平面三角形如何将它光栅化的问题,这个问题的实质就是如何确定每一个像素的中心点,确定好中心点就可以知道每一个像素点和三角形的位置了.
采样即将一个函数离散化,也就是对于一个函数我们取不同的自变量得到不同的函数值称之为采样,在图形学中就是利用像素中心对屏幕空间(width*high)采样,即对于某一个函数在不同像素点中心他的值是多少.

对于如图所示的三角形,我们可以先构建这样一个函数inside()他的作用是判断给定的像素中心是在三角形内部还是在三角形的外部(这里边界也算内部) 即
inside(t,x,y)=={1if point(x,y)int0if point(x,y)notintinside(t,x,y)== \begin{cases} 1 &\text{if }\ point(x,y)\ in \ t \\ 0 &\text{if }\ point(x,y)\ not \ in \ t \end{cases}inside(t,x,y)=={10if point(x,y) in tif point(x,y) not in t
有了这个函数我们可以写出通过采样来输出这个三角形的代码:

for(int x=0;x<width;x++)
for(int y=0;y<high;x++)
//像素点坐标系
image[x][y]=inside(tri,x+0.5,y+0.5);
//屏幕坐标系

那么这个inside函数应该如何实现呢?假设有一个三角形p1,p2,p3p_1,p_2,p_3p1,p2,p3和一个点QQQ

这个三角形由三个向量构成以向量p1p2\bm{p_1p_2}p1p2为例,若p1Q\bm{p_1Q}p1Q与p1p2\bm{p_1p_2}p1p2做外积运算(p1p2×p1Q\bm{p_1p_2}\times\bm{p_1Q}p1p2×p1Q),若结果指向纸面外那么QQQ在p1p2\bm{p_1p_2}p1p2的左侧,同理可以对p1p0,p2p0\bm{p_1p_0},\bm{p_2p_0}p1p0,p2p0进行判断
为了方便判断,我们一般选取一个点作为起始点,然后顺时针选取向量,这样只要结果都为指向纸面外那么这个点就在三角形的外部.
对于边界上的点结果为0,那么他们就不是指向纸面外的,我们正好可以不作处理,当然也可以特殊处理(就是可以点亮).
现在我们可以思考另一个问题,就是我们在采样过程中一定必须要遍历所有的像素点吗?
这显然是是没有必要的如图
超出蓝色部分的像素点是完全没有必要遍历的,所以为了提高效率,我们可以取各个点x,y坐标的最大值只在这部分区域采样,这样取出的区域称之为包围和.
除了包围和以外还有其他提高采样效率的方法.

抗锯齿

观察之前生成的三角形我们可以发现他似乎并不像是一个完美的三角形,明显这是因为我们采样频率很小,产生了一个光栅化的常见问题-----锯齿(走样).

想要理解走样及其解决方法就必须取分析采样
我们知道对于一个函数可以用一个三角级数来对它进行展开,这种展开方法称之为傅里叶展开(这部分涉及到一些DSP的相关知识,傅里叶展开和变换是极其重要的数学知识不会的一定要去看),我们展开的项数越多(每一项的频率越高)那么曲线的拟合就越好如图:

对于一个曲线(信号)我们可以将他们分离成不同频率的三角函数(信号)的和,对于分离出的信号进行采样我们可以得出下面的结论:

对于分离出的不同信号我们进行采样的间隔(频率)如果一致的话,原信号频率越高我们采样完还原的就越不好即走样即对两个不同函数采用相同的采样方法得到的曲线相同如下图所示对黑色和蓝色曲线采样的结果是一致的.

滤波:去掉信号中特定频率的部分
一般来说如果将一张图片看做一个信号那么这张图片上的边界属于这个信号中的高频部分,因为边界部分是剧烈变化的对应信号就是高频部分.那么当我们对一个图片(信号)做傅里叶变换得到的信号分离出高频部分,就可以得到模糊的图片的框架,这种滤波方式称之为高通
当我们去除信号中的高频信号,会去除掉边界这样我们得到了一张模糊的图片,这种滤波方式称之为低通.
只留下中间段的频率可以获得一些不明显的边界信息.
对一个图片做如下的卷积操作(实际上就是对每一个像素点与其周围的像素做平均)就会的到一个模糊的图片

这种频域相乘的的操作相当于只保留了低频的部分,所以这种卷积操作相当于是一种低通滤波,滤波器称之为低通滤波器,如果我们选的滤波器越大那么他保留的频率就越低.
现在我们观察下面的图片,将a和c相乘可以得到e(相当于在时域上进行采样),相当于频域上的卷积得到f
观察发现,f实际上是对原函数的一个重复操作,所以我们可以得到一个重要的结论即采样等同于平移重复频率的内容.

这样我们就可以知道为什么采样会导致走样了,因为按照不同频率采样(即选取不同的冲击函数)会导致其在频域上以不同方式平移重复,如果采样频率过低那么得到的函数就会出现交叠的部分也就是所说的走样.

除了锯齿以外还会有其他因为采样所产生的问题,摩尔纹和车轮错觉
解决采样问题的方法
1.滤波(模糊)

如图我们可以先将图片模糊化处理(滤波),之后再采样这样形成的图片就和原来的图片还原度变得高了很多.
结合之前说的采样频率的相关知识我们知道模糊的处理就是做一个低通滤波,即去除高频的部分,那么低频信号在重叠的时候就不会出现混叠的效果.

在实际操作中,低通滤波器的选取很重要,一般我们可以取一像素大小的低通滤波器来进行滤波.

实际上取平均的方法比较麻烦,实际上我们会采用近似的方法(MSAA),对于任何一个像素我们继续对像素继续进行划分,在对所有的子像素进行取平均合成一个像素点的值.
其他抗锯齿方法:FXAA,TAA,DLSS