Game101现代计算机图形学入门学习笔记（三）

1、为什么学习变换

动画、游戏、3D、2D中都要用到变换

2、2D变换

缩放矩阵
$\left[\begin{array}{cc}s& 0\\ 0& s\end{array}\right]$
反射矩阵
$\left[\begin{array}{cc}-1& 0\\ 0& 1\end{array}\right]$
错切矩阵
$\left[\begin{array}{cc}-1& a\\ 0& 1\end{array}\right]$
旋转矩阵
$\left[\begin{array}{cc}cos(\theta )& -sin(\theta )\\ sin(\theta )& cos(\theta )\end{array}\right]$
以上都是线性变换，都可以用以下式子统一表示：
$$\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right]=\left[\begin{array}{cc}a& b\\ c& d\end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]\text{\hspace{1em}(1)}$$

3、齐次坐标

1、为什么使用齐次坐标？

• 平移不能用(1)统一表示
  $\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right]=\left[\begin{array}{cc}a& b\\ c& d\end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]+\left[\begin{array}{c}{t}_x\\ t_y\end{array}\right]$
  平移不是线性变换

2、解决方法

• 增加第三项坐标（w坐标）
• 2维点：$(x,y,1{)}^T$
• 2维向量：$(x,y,0{)}^T$
  $\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ w^{{}^{\prime }}\end{array}\right)=\left(\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right)\cdot \left(\begin{array}{c}x\\ y\\ 1\end{array}\right)+\left(\begin{array}{c}x+t_x\\ y+t_y\\ 1\end{array}\right)$
  $\left(\begin{array}{c}x\\ y\\ w\end{array}\right)$是2维点$\left(\begin{array}{c}x/w\\ y/w\\ 1\end{array}\right)(w\ne 0)$

3、仿射变换

• 仿射变换=线性变换+平移
  $\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right)=\left(\begin{array}{cc}a& b\\ c& d\end{array}\right)\left(\begin{array}{c}x\\ y\end{array}\right)+\left(\begin{array}{c}{t}_x\\ t_y\end{array}\right)$
• 使用齐次坐标
  $\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ 1\end{array}\right)=\left(\begin{array}{ccc}a& b& t_x\\ c& d& t_y\\ 0& 0& 1\end{array}\right)\cdot \left(\begin{array}{c}x\\ y\\ 1\end{array}\right)$

4、2维变换

1、缩放

$S(s_x,s_y)=\left(\begin{array}{ccc}{s}_x& 0& 0\\ 0& s_y& 0\\ 0& 0& 1\end{array}\right)$

2、旋转(证明)

$R(\alpha )=\left(\begin{array}{ccc}cos(\alpha )& -sin(\alpha )& 0\\ sin(\alpha )& cos(\alpha )& 0\\ 0& 0& 1\end{array}\right)$

3、平移

$T(t_x,t_y)=\left(\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right)$

5、逆（反）变换

$M^{-1}$同时是M变换在代数上和几何上的逆

4、变换组合

• 矩阵相乘不具有交换性
  $R(45)\cdot T(1,0)\ne T(1,0)\cdot R(45)$
• 矩阵是从右到左应用到矩阵上的
• $T(1,0)\cdot R(45)\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=\left[\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right]\left[\begin{array}{ccc}cos(45^{\circ })& -sin(45^{\circ })& 0\\ sin(45^{\circ })& cos(45^{\circ })& 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]$

5、3维变换

1、齐次坐标

3维点：$(x,y,z,1{)}^T$
3维向量：$(x,y,z,0{)}^T$

2、仿射变换

$\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ z^{{}^{\prime }}\\ 1\end{array}\right)=\left(\begin{array}{cccc}a& b& c& t_x\\ d& e& f& t_y\\ g& h& i& t_z\\ 0& 0& 0& 1\end{array}\right)\cdot \left(\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right)$

3、3维变换

1、缩放

$S(s_x,s_y,s_z)=\left(\begin{array}{cccc}{s}_x& 0& 0& 0\\ 0& s_y& 0& 0\\ 0& 0& s_z& 0\\ 0& 0& 0& 1\end{array}\right)$

2、旋转

旋转矩阵是正交矩阵
$R_x(\alpha )=\left(\begin{array}{cccc}1& 0& 0& 0\\ 0& cos(\alpha )& -sin(\alpha )& 0\\ 0& sin(\alpha )& cos(\alpha )& 0\\ 0& 0& 0& 1\end{array}\right)$
$R_y(\alpha )=\left(\begin{array}{cccc}cos(\alpha )& 0& sin(\alpha )& 0\\ 0& 1& 0& 0\\ -sin(\alpha )& 0& cos(\alpha )& 0\\ 0& 0& 0& 1\end{array}\right)$
因为$z\times x$得到$y$
$R_z(\alpha )=\left(\begin{array}{cccc}cos(\alpha )& -sin(\alpha )& 0& 0\\ sin(\alpha )& cos(\alpha )& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$

3、平移

$T(t_x,t_y,t_z)=\left(\begin{array}{cccc}1& 0& 0& t_x\\ 0& 1& 0& t_y\\ 0& 0& 1& t_z\\ 0& 0& 0& 1\end{array}\right)$

4、3维旋转

$R(\alpha ,\beta ,\gamma )=R_x(\alpha )R_y(\beta )R_z(\gamma )$
被称为欧拉旋转。
会有万向节死锁（Gimbal Lock）
可以改用四元数(Quaternion)来避免

5、罗德里格斯公式

（证明）

• 绕任意轴旋转$\alpha$度
  $R(n,\alpha )=cos(\alpha )I+(1-cos(\alpha ))n{n}^T+sin(\alpha )\left(\begin{array}{ccc}0& -n_z& n_y\\ n_z& 0& -n_x\\ -n_y& n_x& 0\end{array}\right)$

6、模型变换

利用基础的变换矩阵将世界当中的物体调整至我们想要的地方(旋转，平移，缩放)。

7、视图变换

1、什么是视图变换

得到物体与摄像机的相对位置

• 如何拍照

1. 找到一个好地方并安排好人的站位（模型变换 model transformation）
2. 找到一个好的角度取放置相机（视图变换 view transformation）
3. 拍照（投影变换 projection transformation）

2、如何表示视图变换

• 定义相机
  1、所在位置$\vec{e}$
  2、视线方向$\hat{g}$
  3、朝上方向 $\hat{t}$
  （垂直于视线方向）
  • 如何变换相机
    将相机放到原点，朝上方向为Y轴，视线方向放在-Z

3、数学中的$M_{view}$

• 将$\vec{e}$放到原点
• 将$\hat{g}$旋转到-Z
• 将 $\hat{t}$旋转到Y
• 旋转（ $\vec{g}\times \hat{t}$ ） 到X
  $M_{view}=R_{view}{T}_{view}$
• 将$\vec{e}$放到原点
  $T_{view}=\left(\begin{array}{cccc}1& 0& 0& -x_e\\ 0& 1& 0& -y_e\\ 0& 0& 1& -z_e\\ 0& 0& 0& 1\end{array}\right)$
  因为直接求$R_{view}$很困难，反过来求从原点旋转到相机的位置 $R_{view}^{-1}$。
  因为$R_{view}$旋转矩阵为正交矩阵，所以$R_{view}^{-1}=R_{view}^T$
  $R_{view}^{-1}=\left(\begin{array}{cccc}{x}_{\hat{g}\times \hat{t}}& x_t& x_{-g}& 0\\ y_{\hat{g}\times \hat{t}}& y_t& y_{-g}& 0\\ z_{\hat{g}\times \hat{t}}& z_t& z_{-g}& 0\\ 0& 0& 0& 1\end{array}\right)$
  所以
  $R_{view}=\left(\begin{array}{cccc}{x}_{\hat{g}\times \hat{t}}& y_{\hat{g}\times \hat{t}}& z_{\hat{g}\times \hat{t}}& 0\\ x_t& y_t& z_t& 0\\ x_{-g}& y_{-g}& z_{-g}& 0\\ 0& 0& 0& 1\end{array}\right)$

4、总结

1、将物体与相机一起变换
2、让相机位于原点，朝上方位为Y轴，视线方向为-Z轴
3、也被称为模型视口变换
4、为什么需要该变换？
为了投影变换

8、投影变换

1、计算机图形学中的投影变换

将三维物体投影到二维中

2、正交投影

坐标的相对位置不变，光线是平行的，将物体变换到$[-1,1{]}^3$的立方体中（即坐标范围为[-1,1]）。

$M_{ortho}=\left(\begin{array}{cccc}\frac{2}{r-l}& 0& 0& -\frac{r+l}{r-l}\\ 0& \frac{2}{t-b}& 0& -\frac{r+b}{r-b}\\ 0& 0& \frac{2}{n-f}& -\frac{n+f}{n-f}\\ 0& 0& 0& 1\end{array}\right)$

3、透视投影

类似人眼看到的真实世界，近大远小。平行线在远处会相交于一点。(如何求出下列矩阵)
$M_{pres\to ortho}=\left(\begin{array}{cccc}n& 0& 0& 0\\ 0& n& 0& 0\\ 0& 0& n+f& -nf\\ 0& 0& 1& 0\end{array}\right)$
$M_{pres}=M_{ortho}{M}_{pres\to ortho}$
$M_{pres}=\left(\begin{array}{cccc}\frac{2n}{r-l}& 0& \frac{l+r}{l-r}& 0\\ 0& \frac{2n}{t-b}& \frac{b+t}{b-t}& 0\\ 0& 0& \frac{n+f}{n-f}& -\frac{nf}{n-f}\\ 0& 0& 1& 0\end{array}\right)$

• 下图灰色平面为近平面。
  Vertical Field of View(fovY) 是垂直可视角度
  Aspect ratio是宽高比
  
  -将fovY 和aspect转换成l,r,n,t
  

9、将标准立方体投影到屏幕

MVP：
Model transformation (placing objects)
View transformation (placing camera)
Projection transformation

MVP之后我们需要把标准立方体投影到屏幕上去。

什么是屏幕

像素的二维数组，大小是固定的。
是一种典型的光栅成像设备。

Raster在德语中就是screen的意思。 Rasterize表示drawing onto the screen

屏幕空间

本课程的定义：
原点位于左下角
每个像素坐标值由(x,y)表示，x,y为整数
像素中心点是$(x+0.5,y+0.5)$
屏幕覆盖范围是 $(0,0)(width,height)$

视口变换

将$[-1，1{]}^2$空间变成$[0,width]\times [0,height]$
1、拉伸成屏幕一样的aspect ratio
2、平移到中心位置
视口变换矩阵：
$M_{viewport}=\left(\begin{array}{cccc}\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{array}\right)$
$M=M_{viewport}{M}_{per}{M}_{view}{M}_{model}$
​

10、参考和引用

来自bilibili：GAMES101-现代计算机图形学入门-闫令琪
来自变换（二维与三维）.pdf
来自变换（模型、视图、投影）.pdf
来自罗德里格斯公式证明.pdf
来自CSDN：计算机图形学一：基础变换矩阵总结(缩放，旋转，位移)
来自CSDN：计算机图形学二：视图变换(坐标系转化，正交投影，透视投影，视口变换)
来自CSDN:Game101课程笔记_lecture03_transformation变换
来自知乎：【GAMES101-现代计算机图形学课程笔记】Lecture 05 光栅化（三角形）