GAMES101 学习笔记03：变换

两类变换

• Modeling
• Viewing

2D 变换

线性变换 = 矩阵 同维矩阵

$$\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]$$$$x^{{}^{\prime }}=\mathbf{M}x$$

缩放矩阵（Scal Matrix）

$$\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right]=\left[\begin{array}{cc}{s}_x& 0\\ 0& s_y\end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]$$

反射矩阵（Reflection Matrix）

$$\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right]=\left[\begin{array}{cc}-1& 0\\ 0& 1\end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]$$

剪切矩阵（Shear Matrix）

$$\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right]=\left[\begin{array}{cc}1& a\\ 0& 1\end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]$$

旋转矩阵（Rotation Matrix）关于原点，默认逆时针

$$\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right]=\left[\begin{array}{cc}\cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]$$$${\mathbf{R}}_{\theta }=\left[\begin{array}{cc}\cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{array}\right]$$

TIP

对于顺时针旋转：

$${\mathbf{R}}_{-\theta }=\left[\begin{array}{cc}\cos \theta & \sin \theta \\ -\sin \theta & \cos \theta \end{array}\right]$$

不难看出：

$${\mathbf{R}}_{-\theta }={\mathbf{R}}_{\theta }^T={\mathbf{R}}_{\theta }^{-1}$$

${\mathbf{R}}_{\theta }$是一个正交矩阵，

齐次坐标与平移变换（Homogeneous coordinates and Translation）

平移变换（Translation）

$$\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right]=\left[\begin{array}{cc}1& 0\\ 0& 1\end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]+\left[\begin{array}{c}{t}_x\\ t_y\end{array}\right]$$

与上述所有变换不同，所以平移变换不是线性变换。

齐次坐标（Homogeneous coordinates）

作为一个解决办法，统一所有变换。

通过增加一维（$w$）：

$$2Dpoint=(x,y,1{)}^{\mathrm{T}}$$$$2Dvector=(x,y,0{)}^{\mathrm{T}}$$

INFO

向量中增加的$0$是对向量的一种「保护」，确保平移变换后向量本身没有改变。

$$vector+vector=vector$$$$point-point=vector$$$$point+vector=point$$

对于：

$$point+point$$

在齐次坐标系下：

$${\left[\begin{array}{ccc}x& y& w\end{array}\right]}^{\mathrm{T}}$$

是 2D 点：

$${\left[\begin{array}{ccc}x/w& y/w& 1\end{array}\right]}^{\mathrm{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]\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=\left[\begin{array}{c}x+t_x\\ y+t_y\\ 1\end{array}\right]$$

仿射变换（Affine Transformations）

上述变换的总称

所有的仿射变换：

$$\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]\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]$$

用一个矩阵统一了所有变换

INFO

注意，这里是先应用线性变换，再进行平移。3D 下同理。

INFO

缩放：

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

旋转：

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

平移：

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

其他变换

逆变换（Inverse Transform）

组合变换（Composing Transforms）

组合变换的顺序很重要！因为矩阵乘法不能交换。

WARNING

注意矩阵是从右到左应用的：

$$\mathbf{T}(t_x,t_y)\cdot \mathbf{R}(\alpha )\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=\left[\begin{array}{ccc}{s}_x& 0& 0\\ 0& s_y& 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{ccc}\cos \alpha & -\sin \alpha & 0\\ \sin \alpha & \cos \alpha & 0\\ 0& 0& 1\end{array}\right]\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]$$

虽然矩阵乘法没有交换律，但是有结合律。这就意味着可以做预乘，得到一个矩阵后再变换，优化性能。

分解复杂变换

如何围绕任意定点$c$旋转？

1. 将$c$平移至原点
2. 旋转
3. 将$c$平移回去

$$\mathbf{T}(c)\cdot \mathbf{R}(\alpha )\cdot \mathbf{T}(-c)$$

3D 变换

$$3Dpoint=(x,y,z,1{)}^{\mathrm{T}}$$$$3Dvector=(x,y,z,0{)}^{\mathrm{T}}$$

同样：

$$(x,y,z,w{)}^{\mathrm{T}}$$

也就是 3D 点：

$$(x/w,y/w,z/w,1{)}^{\mathrm{T}}$$

3D 仿射变换

$$\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]\left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]$$

INFO

与 2D 仿射变换相同，是先应用线性变换，再进行平移。

INFO

缩放：

$$\mathbf{S}(s_x,s_y,s_z)=\left[\begin{array}{cccc}1& 0& 0& 0\\ 0& \cos \theta & -\sin \theta & 0\\ 0& \sin \theta & \cos \theta & 0\\ 0& 0& 0& 1\end{array}\right]$$

平移：

$$\mathbf{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]$$

3D 旋转变换

旋转（关于$x,y,z$）是 3D 仿射变换中的一个难点：

$${\mathbf{R}}_x(\alpha )=\left[\begin{array}{cccc}1& 0& 0& 0\\ 0& \cos \theta & -\sin \theta & 0\\ 0& \sin \theta & \cos \theta & 0\\ 0& 0& 0& 1\end{array}\right]$$$${\mathbf{R}}_y(\alpha )=\left[\begin{array}{cccc}\cos \theta & 0& \sin \theta & 0\\ 0& 1& 0& 0\\ -\sin \theta & 0& \cos \theta & 0\\ 0& 0& 0& 1\end{array}\right]$$$${\mathbf{R}}_z(\alpha )=\left[\begin{array}{cccc}\cos \theta & -\sin \theta & 0& 0\\ \sin \theta & \cos \theta & 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right]$$$${\mathbf{R}}_{xyz}(\alpha ,\beta ,\gamma )={\mathbf{R}}_x(\alpha ){\mathbf{R}}_y(\alpha ){\mathbf{R}}_z(\alpha )$$

$(\alpha ,\beta ,\gamma )$被称为欧拉角。

INFO

有关围绕$y$旋转，$-\sin \theta$的位置略有不同。事实上，这和三位向量叉乘的循环对称性有关。

• $\overrightarrow{x}\times \overrightarrow{y}=\overrightarrow{z}$

• $\overrightarrow{y}\times \overrightarrow{z}=\overrightarrow{x}$

• $\overrightarrow{z}\times \overrightarrow{x}=\overrightarrow{y}$

  • ($\overrightarrow{x}\times \overrightarrow{z}=-\overrightarrow{y}$)

Rodrigues’ Rotation 公式

将围绕任意轴$n$旋转$\alpha$进行分解，得到围绕$x,y,z$旋转的矩阵$\mathbf{N}$。

$$\mathbf{R}(\mathbf{n},\alpha )=\cos (\alpha )\mathbf{I}+(1-\cos (\alpha )){\mathbf{nn}}^{\mathrm{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]$$$$\mathbf{N}=\left[\begin{array}{ccc}0& -n_z& n_y\\ n_z& 0& -n_x\\ -n_y& n_x& 0\end{array}\right]$$

默认轴$n$过原点。

INFO

此处的矩阵$\mathbf{n}$实际上就是叉乘中提到的：笛卡尔坐标系下向量的叉乘中使用的矩阵。

观测变换（Viewing transformation）

视图/摄像机变换（View/Camera transformation）

定义一个摄像机：

• 位置（Position）$\overrightarrow{e}$
• 目光方向（Gaze direction）$\hat{g}$
• 向上方向（Up direction）$\hat{t}$

当相机与物体一同运动（没有相对运动），「相片」是相同的：

因此，我们总是把相机放在原点（向上方向为 y，目光方向为 -z），并随着相机变换物体：

对于一个位于$(\overrightarrow{e},\hat{t},\hat{g})$的相机，我们使用${\mathbf{M}}_{view}$将其变换至原点：

1. 将$\overrightarrow{e}$移动到原点
2. 将$\hat{g}$旋转到 -z
3. 将$\hat{t}$旋转到 y
4. 将$\hat{g}\times \hat{t}$旋转到 x

对于一个矩阵${\mathbf{M}}_{view}$：

$${\mathbf{M}}_{view}={\mathbf{R}}_{view}{\mathbf{T}}_{view}$$

WARNING

因为齐次坐标是「先线性变换，再平移变换」，与我们所需要的效果相反，所以此处将${\mathbf{M}}_{view}$拆分成了两个矩阵，其中负责平移的${\mathbf{T}}_{view}$在最右侧，最先生效。

其中${\mathbf{T}}_{view}$将$\overrightarrow{e}$移动到原点：

$${\mathbf{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]$$

而${\mathbf{R}}_{view}$完成相应的旋转变换：

INFO

• 将$\hat{g}$旋转到 -z
• 将$\hat{t}$旋转到 y
• 将$\hat{g}\times \hat{t}$旋转到 x

$${\mathbf{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]$$

TIP

将轴旋转到$(x,y,-z)$比较抽象，不妨反过来思考。对于逆旋转变换：

$${\mathbf{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]$$

进而可以得到${\mathbf{R}}_{view}$。

视图/摄像机变换也被成为模型视图（ModelView）变换，它将应用于后面提到的透视投影

投影变换（Projection transformation）

投影：3D 到 2D 的过程

正交投影（Orthographic projection）

一种简单的理解：

• 摄像机位于原点，朝向 -z，向上方向为 y
• 丢弃 z 坐标
• 得到的图形平移缩放至矩形$[-1,1{]}^2$

图形学上正式的做法：

• 定义一个空间上的立方体$[l,r]\times [b,t]\times [f,n]$，将其映射到一个空间上的标准立方体$[-1,1{]}^3$。
• 过程（与简单理解中丢弃 z 的做法不同）：
  1. 平移到原点
  2. 缩放至标准立方体

变换矩阵：

受限平移到原点，然后缩放（长宽高为2）

$${\mathbf{M}}_{ortho}=\left[\begin{array}{cccc}\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{array}\right]\left[\begin{array}{cccc}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{array}\right]$$

TIP

• 因为目光方向为 -z，所以近大于远（n > f）
  • 这是就是为什么类似 OpenGL 等图形 API 使用左手系的原因。

透视投影（Perspective projection）

TIP

回顾一下齐次坐标：

$$(x,y,z,1)$$

与

$$(kx,ky,kz,k)k\ne 0$$

表示的是同一个点，那么自然

$$(xz,yz,z^2,z)z\ne 0$$

表示的也是同一个点。

透视投影过程：

1. 将 Frustum 挤压成长方体（n->n, f->f,${\mathbf{M}}_{persp\to ortho}$）
2. 进行正交投影

WARNING

这里与之前接触的图形学内容不太一样，闫老师的解读是将一个透视投影的空间挤压成立方体，然后进行正交投影，得到透视投影的 2D 图像。

找到一个变换关系：

这实际上是一个相似三角形

对于 x 和 y，皆有这一关系，在其次坐标下有：

$$\left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]\Rightarrow \left[\begin{array}{c}\frac{nx}{z}\\ \frac{ny}{z}\\ unknown\\ 1\end{array}\right]{=}_{\mathrm{乘}\mathrm{以}z}=\left[\begin{array}{c}nx\\ ny\\ stillunknown\\ z\end{array}\right]$$

因此，我们可以找到这个变换矩阵的一部分：

$${\mathbf{M}}_{persp\to ortho}=\left[\begin{array}{cccc}n& 0& 0& 0\\ 0& n& 0& 0\\ ?& ?& ?& ?\\ 0& 0& 1& 0\end{array}\right]$$

INFO

对于第三行的确定，我们可以立下几点规定：

• 近平面上的点永远不变
• 远平面上的点 z 值不变
• 远平面中心点位置不变

因此对于近平面，用 n 代替 z，可以得到：

$$\left[\begin{array}{c}x\\ y\\ n\\ 1\end{array}\right]{\Rightarrow }_{\mathrm{近}\mathrm{平}\mathrm{面}\mathrm{上}\mathrm{的}\mathrm{点}\mathrm{永}\mathrm{远}\mathrm{不}\mathrm{变}}\Rightarrow \left[\begin{array}{c}x\\ y\\ n\\ 1\end{array}\right]{=}_{\mathrm{乘}\mathrm{以}z(n)}=\left[\begin{array}{c}nx\\ ny\\ n^2\\ n\end{array}\right]$$

因此我们知道${\mathbf{M}}_{persp\to ortho}$的第三行必须是$(0,0,A,B)$的形式，即：

$$\left[\begin{array}{cccc}0& 0& A& B\end{array}\right]\left[\begin{array}{c}x\\ y\\ n\\ 1\end{array}\right]=n^2$$

$n^2$与$x,y$无关。

但这还不够，我们还要考虑远平面。远平面中心点永远不变，因此有：

$$\left[\begin{array}{c}0\\ 0\\ f\\ 1\end{array}\right]\Rightarrow \left[\begin{array}{c}0\\ 0\\ f\\ 1\end{array}\right]==\left[\begin{array}{c}0\\ 0\\ f^2\\ f\end{array}\right]$$

同样可以知道${\mathbf{M}}_{persp\to ortho}$的第三行必须是$(0,0,A,B)$的形式，即：

$$\left[\begin{array}{cccc}0& 0& A& B\end{array}\right]\left[\begin{array}{c}0\\ 0\\ f\\ 1\end{array}\right]=f^2$$

于是得到方程组：

$$\left[\begin{array}{cc}n& 1\\ f& 1\end{array}\right]\left[\begin{array}{c}A\\ B\end{array}\right]=\left[\begin{array}{c}{n}^2\\ f^2\end{array}\right]$$

解出结果：

$$A=n+f$$$$B=-nf$$

至此，得到：

$${\mathbf{M}}_{persp\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]$$

接下来只需要再进行正交投影即可，即：

$${\mathbf{M}}_{persp}={\mathbf{M}}_{ortho}{\mathbf{M}}_{persp\to ortho}$$

近平面的定义

• 明确指定宽高
• 给定垂直视野和纵横比（对于对称的情况：$l=-r$, $b=-t$）

纵横比到$l,r,b,t$的转换：

$$\tan \frac{fov\mathrm{Y}}{2}=\frac{t}{|n|}$$$$aspect=\frac{r}{t}$$