GAMES 101计算机图形学笔记[1]

Arzie100 · 发表于 2022-6-30 20:26

课程地址：

https://sites.cs.ucsb.edu/~lingqi/teaching/games101.html

渲染（Rendering）流程

Vertex -> Pixel

Vertex Processing：输入三维空间中的顶点（Vertex）
Triangle Processing：对顶点进行处理，构成三角形、四边形
Rasterization：光栅化处理，将三维三角形描述变为二维像素描述，可以打印在屏幕上
Z-buffering：深度缓存处理，比较不同物体的遮挡关系
Shaded fragment：着色，利用二维纹理图、纹理坐标数据进行着色，根据法向量进行插值、光线追踪等
Framebuffe操作
显示二维图片（Pixels）

空间变换

作用：三维顶点、相机位置、相机取景投影等过程，涉及较多关于空间坐标变换的知识
齐次坐标（Homogeneous Coordinates）

在原本坐标维度上增加一维，方便描述位移变换
2D点定义： $(x,y,1)^T$
2D向量定义： $(x,y,0)^T$
3D点定义： $(x,y,z,1)^T$
3D向量定义： $(x,y,z,0)^T$
齐次坐标下的位移变换：

$\begin{bmatrix}x'\\y'\\1\end{bmatrix}= \begin{bmatrix}1&0&t_x\\0&1&t_y\\0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\1\end{bmatrix}= \begin{bmatrix}x+t_x\\y+t_y\\1 \end{bmatrix}$
叉乘运算

$\vec{a}\times\vec{b}=\begin{bmatrix} y_az_b-y_bz_a \\ z_ax_b-x_az_b\\ x_ay_b-y_ax_b \end{bmatrix}$
2D仿射变换（Affine Transform）

$\begin{bmatrix}x'\\y'\\1\end{bmatrix}= \begin{bmatrix}a&b&t_x\\c&d&t_y\\0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\1\end{bmatrix}$

尺度变换

$\begin{bmatrix}x'\\y'\\1\end{bmatrix}= \begin{bmatrix}s_x&0&0\\0&s_y&0\\0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\1\end{bmatrix}$

旋转变换

$\begin{bmatrix}x'\\y'\\1\end{bmatrix}= \begin{bmatrix}\cos \alpha&-\sin \alpha&0\\\sin\alpha&\cos\alpha&0\\0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\1\end{bmatrix}$

位移变换

$\begin{bmatrix}x'\\y'\\1\end{bmatrix}= \begin{bmatrix}1&0&t_x\\0&1&t_y\\0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\1\end{bmatrix}$
3D放射变换

$\begin{bmatrix}x'\\y'\\z'\\1\end{bmatrix}= \begin{bmatrix}a&b&c&t_x\\d&e&f&t_y\\g&h&i&t_y\\0&0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\z\\1\end{bmatrix}$

沿轴旋转

$\begin{bmatrix}x'\\y'\\z'\\1\end{bmatrix}= \begin{bmatrix}1&0&0&0\\ 0&\cos\alpha&-\sin\alpha&0\\ 0&\sin\alpha&\cos\alpha&0\\ 0&0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\z\\1\end{bmatrix}$

沿轴旋转

$\begin{bmatrix}x'\\y'\\z'\\1\end{bmatrix}= \begin{bmatrix}\cos\alpha&0&\sin\alpha&0\\ 0&1&0&0\\ -\sin\alpha&0&\cos\alpha&0\\ 0&0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\z\\1\end{bmatrix}$

沿 $z$ 轴旋转

$\begin{bmatrix}x'\\y'\\z'\\1\end{bmatrix}= \begin{bmatrix} \cos\alpha&-\sin\alpha&0&0\\ \sin\alpha&\cos\alpha&0&0\\ 0&0&1&0\\ 0&0&0&1 \end{bmatrix}\cdot \begin{bmatrix}x\\y\\z\\1\end{bmatrix}$

使用沿三个轴的旋转描述复杂的空间旋转（三个Euler角）：

$R_{xyz}(\alpha, \beta, \gamma)=R_x(\alpha)R_y(\beta)R_z(\gamma)$

Rodrigues旋转公式：描述沿轴旋转 $\alpha$ 角

$R(n,\alpha)=\cos\alpha I+(1-\cos\alpha)nn^T+\sin\alpha \begin{bmatrix} 0 & -n_z&n_y \\ n_z&0&-n_x \\ -n_y & n_x &0 \end{bmatrix}$
MVP变换（模型变换->视图变换->投影变换）

MVP变换：model、view、projection transform
相机参数：
- 位置 $\vec{e}$
- 视线方向
- 向上方向：表示相机自己的转角、镜头的顺时针/逆时针旋转

视图变换（View Transformation）

将整个空间变换到以相机位置为原点，轴方向为相机向上方向，轴方向为视线方向，轴方向为 $\vec{g}\times\vec{t}$ 方向
视图变换 $M_{view}=R_{view}T_{view}$
其中，位移变换将相机移动到坐标原点：

$T_{view}=\begin{bmatrix} 1 & 0 & 0 & -x_e \\ 0 & 1 & 0 & -y_e \\ 0 & 0 & 1 & -z_e \\ 0 & 0 & 0 & 1 \end{bmatrix}$

旋转变换将变换到轴，将 $\vec{g}\times \vec{t}$ 变换到轴，考虑将 $(1,0,0,0)^T,(0,1,0,0)^T,(0,0,1,0)^T$ 变换到相机坐标，得到逆变换：

$R_{view}^{-1}=\begin{bmatrix} x_{\vec{g}\times\vec{t}} & x_{\vec{t}} & x_{-\vec{g}} &0\\ y_{\vec{g}\times\vec{t}} & y_{\vec{t}} & y_{-\vec{g}} &0\\ z_{\vec{g}\times\vec{t}} & z_{\vec{t}} & z_{-\vec{g}} &0\\ 0 & 0 & 0 & 1 \end{bmatrix}$
转置得到旋转变换：
$R_{view}=\begin{bmatrix} x_{\vec{g}\times\vec{t}} &y_{\vec{g}\times\vec{t}} &z_{\vec{g}\times\vec{t}} &0\\ x_{\vec{t}}& y_{\vec{t}} & z_{\vec{t}} &0\\ x_{-\vec{g}} &y_{-\vec{g}}& z_{-\vec{g}} &0\\ 0 & 0 & 0 & 1 \end{bmatrix}$

其他物体跟着相机一起变换

投影变换（Projection Transformation）

投影变换的目标是将空间中的物体投影到一个成像平面，如上左图所示，采用的方法如下：
- 透视投影（Perspective Projection）：将左图所示多面体变换为长方体
- 正交投影（Orthographic Projection）：将该长方体通过平移、尺度缩放变成以原点为中心立方体，再去掉z坐标，压到二维平面

透视投影（Perspective Projection）

成像平面 $A'B'C'D'$ 到原点的距离为，最远平面 $ABCD$ 到原点的距离为 $f$
对于成像空间内任意一点，将其与原点 $O$ 相连，得到其在成像平面的投影点 $(x',y',z')$
采用相似三角形对投影点坐标进行分析：

由此得到变换矩阵：

$\begin{bmatrix} n & 0 & 0 & 0 \\ 0 & n & 0 & 0\\ ? & ? &? & ? \\ 0 & 0 & 1 & 0 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix} \rightarrow \begin{bmatrix} nx \\n y \\ ? \\ z \end{bmatrix} \rightarrow \begin{bmatrix} nx/z \\ ny/z \\ ? \\ 1 \end{bmatrix}$
上式最后一个步骤保证坐标第四维度为1

考虑到经过变换后得到，考虑到经过变换后得到，代入确定透视投影矩阵：

$M_{persp\rightarrow otrho}\begin{bmatrix} n & 0 & 0 & 0 \\ 0 & n & 0 & 0\\ 0 & 0 & n+f& -nf \\ 0 & 0 & 1 & 0 \end{bmatrix}$
正交投影（Orthographic Projection）

将立方体进行平移，归一化：

将一个 $[l,r]\times[b,t]\times[n,f]$ 的方块平移、尺度缩放为的方块

$M_{ortho}= \left[ \begin{matrix} \frac{2}{r-l}&0&0&0\\ 0&\frac{2}{t-b}&0&0\\ 0&0&\frac{2}{n-f}&0\\ 0&0&0&1 \end{matrix} \right] \left[ \begin{matrix} 1&0&0&-\frac{r+l}{2}\\ 0&1&0&-\frac{t+b}{2}\\ 0&0&1&-\frac{n+f}{2}\\ 0&0&0&1 \end{matrix} \right]$

得到最终的投影变换矩阵：

$M_{persp}=M_{ortho}M_{persp\rightarrow ortho}$

将得到的方块转换到屏幕坐标

$M_{viewport}= \left[ \begin{matrix} \frac{width}{2}&0&0&\frac{width}{2}\\ 0&\frac{height}{2}&0&\frac{hegiht}{2}\\ 0&0&1&0\\ 0&0&0&1 \end{matrix} \right]$
光栅化（Rasterization）

将空间中的点、图像转换为二维屏幕上的点：转化为像素点
依次判断像素点是否在三角形中：

for(int x=0; x<xmax; x++)
for(int y=0; y<ymax; y++)
image[x][y]=inside(tri, x+0.5, y+0.5);

应用叉乘判断
可以只对bouding box里面的像素进行判断，进行提速

抗锯齿（Anti-aliasing）光栅化

先滤波再采样

具体实施时，考虑根据像素三角形的覆盖率，确定灰度值

对像素进行再次划分，分为 $4\times 4$ ，分别判断每个点是否在三角形内，计算点在三角形内的占比（MSAA方法）

深度缓存（Z-Buffering）

区分物体的远近、遮挡关系
采用深度缓存的方式，存储当前像素点的最近深度，一旦遇到更近的点，则更新该深度缓存
- frame buffer：保存当前渲染图像的像素值
- depth buffer（z-buffer）：保存当前图像每个像素位置的深度值

着色模型（Shading）

Blinn-Phong Reflection Model

考虑环境光照（Ambient）、漫反射（Diffuse）、高光（Specular）

输入变量：面片法线 $\vec{n}$ 、观测方向 $\vec{v}$ 、光线方向 $\vec{l}$ 、平面参数（颜色）

漫反射（Diffuse Reflection）

根据光线与法线的夹角确定反射强度： $\cos\theta=\vec{l}\cdot \vec{n}$
能量辐射：呈球形往外扩展，越往外，单位面积的能量越弱

得到漫反射强度计算式：

$L_d=k_d(I/r^2)\max(0,\vec{n}\cdot\vec{l})$
其中， $k_d$ 表示像素点纹理/颜色（rgb）， $I$ 表示光源颜色（rgb）
2. 高光（Specular）

镜面反射：观察方向与镜面反射方向足够接近时，可以看到高光，即法线方向与半程向量方向接近

其中， $k_s$ 为高光颜色（rgb），通常为白色
指数 $p$ 用于控制反射光强对夹角的敏感度

3. 环境光照（Ambient）

所有点接收到的环境光相同

$L_a = k_aI_a$
其中， $k_a$ 为环境光系数（rgb）， $I_a$ 为环境光强度（rgb）
着色频率（Shading Frequencies）

考虑着色应用于哪些点？
- 直接应用于平面
- 先应用于顶点，再对顶点插值得到平面内每个像素点的着色
- 对法线插值，得到平面内每个像素点的法线值，再根据着色模型和每个像素点的法线得到着色结果

平面着色（Flat Shading）

着色频率：面

顶点着色（Gouraoud Shading）

着色频率：顶点
先对顶点着色，根据顶点颜色对平面上的像素值进行插值

顶点法线的计算方法：对相邻面的法线进行加权平均：

$\vec{N}_v=\frac{\sum_i \vec{N}_i}{\Vert \sum_i \vec{N}_i \Vert}$

法线着色（Phong Shading）

着色频率：像素
先对法线进行插值，再根据着色模型着色
像素点法线计算方法：Barycentric插值

纹理映射

每个3D顶点对应2D纹理图上的坐标点

三角形内部点的纹理坐标采用重心坐标（Barycentric coordinate）插值：

$(x,y)=\alpha A+\beta B+\gamma C, ~\alpha+\beta+\gamma=1$

$\alpha=\frac {-(x-x_B)(y_C-y_B)+(y-y_B)(x_C-x_B)} {-(x_A-x_B)(y_C-y_B)+(y_A-y_B)(x_C-x_B)}$

$\beta=\frac {-(x-x_C)(y_A-y_C)+(y-y_C)(x_A-x_C)} {-(x_B-x_C)(y_A-y_C)+(y_B-y_C)(x_A-x_C)}$

$\gamma=1-\alpha-\beta$

纹理图过小时，需要处理非整数点坐标，采用Bilinear interpolation
纹理图过大时，可以使用超采样方法，将像素扩展为方格，取方格内的均值（范围查询、Mipmap查询、各向异性查询

凹凸贴图（Bump Mapping）

纹理可以用于定义点的相对高度，根据相对高度，改变每个点的切线方向，影响后续的着色过程，制造出凹凸不平的假象

对于二维纹理图上的点，其原始法线方向为 $n(p)=(0,0,1)$
先求两个方向的切线：
- $dp/du=c1*[h(u+1)-h(u)]$
- $dp/dv=c2*[h(v+1)-h(v)]$
得到扰动后的法线方向： $n=(-dp/du,-dp/dv,1)$

位移贴图（Displacement Mapping）

根据纹理，对顶点位置做移动

相关代码

GitHub - kiyoxi2020/computer-graphics

对应Assignment0~4

		自动登录	找回密码
密码			立即注册

GAMES 101计算机图形学笔记[1]

本帖子中包含更多资源