图形学基础-变换

图形学基础-变换

• 2D transformations: rotation, scale, shear

• Homogeneous coordinates（齐次坐标）

• Composite transform（变换复合）

• 3D transformations（3D变换）

• Viewing (观测) transformation（视图变换相关）

  • View (视图) /Camera transformation （视图变换）
  • Projection (投影) transformation
    • Orthographic (正交) projection （正交投影）
    • Perspective (透视) projection (透视投影)

2D线性变换

缩放（Scale）
$$\begin{gathered} Scale(s_x,s_y)=\left[\begin{array}{cc}{s}_x& 0\\ 0& s_y\end{array}\right] \\ \left[\begin{array}{cc}{s}_x& 0\\ 0& s_y\end{array}\right]\ast \left[\begin{array}{c}x\\ y\end{array}\right]=\left[\begin{array}{c}{s}_{x}x\\ s_{y}y\end{array}\right] \end{gathered}$$
错切（Shear)
$$\begin{gathered} shear\_x(s)=\left[\begin{array}{cc}1& s\\ 0& 1\end{array}\right],shear\_y(s)=\left[\begin{array}{cc}1& 0\\ 0& 1\end{array}\right] \\ \left[\begin{array}{cc}1& 0\\ s& 1\end{array}\right]\ast \left[\begin{array}{c}x\\ y\end{array}\right]=\left[\begin{array}{c}x\\ sx+y\end{array}\right] \end{gathered}$$
旋转(rotation)
$$\begin{gathered} rotation(\varphi )=\left[\begin{array}{cc}\cos \varphi & -\sin \varphi \\ \sin \varphi & \cos \varphi \end{array}\right] \\ \left[\begin{array}{cc}\cos \varphi & -\sin \varphi \\ \sin \varphi & \cos \varphi \end{array}\right]\ast \left[\begin{array}{c}x\\ y\end{array}\right]=\left[\begin{array}{c}x\cos \varphi -y\sin \varphi \\ x\sin \varphi +y\cos \varphi \end{array}\right] \end{gathered}$$
这旋转矩阵表示将向量(或点)绕原点逆时针旋转$\varphi$。

翻转（reflection)

$$\begin{gathered} reflect\_x=\left[\begin{array}{cc}-1& 0\\ 0& 1\end{array}\right],reflect\_y=\left[\begin{array}{cc}1& 0\\ 0& -1\end{array}\right] \\ \left[\begin{array}{cc}-1& 0\\ 0& 1\end{array}\right]\ast \left[\begin{array}{c}x\\ y\end{array}\right]= \end{gathered}$$

平移(Translation)

平移能否使用2维矩阵表示吗？

**对于任意一个点的平移(向量具有平移不变性)**它有如下形式
$$x_t=x+t_x;y_t=y+t_y$$
平移无法使用一个2x2的矩阵来表示！因此引入齐次坐标

齐次坐标（Homogeneous coordinates）

给二维点或向量增加一个维度：

2D向量：$(x,y{)}^T=>(x,y,0{)}^T$

2D点 ：$(x,y{)}^T=>(x,y,1{)}^T$

对于2D点 ：$(x,y,w{)}^T=>(x/w,y/w{)}^{T}w!=0$。

则平移可以表示为：
$$\begin{gathered} Translation=\left[\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right] \\ \left[\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right]\ast \left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=\left[\begin{array}{c}x+t_x\\ y+t_y\\ 1\end{array}\right](point) \\ \left[\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right]\ast \left[\begin{array}{c}x\\ y\\ 0\end{array}\right]=\left[\begin{array}{c}x\\ y\\ 0\end{array}\right](vector) \end{gathered}$$

这样就可以将旋转，平移，错切等等放入同一个维度的矩阵去表示。

仿射变换（Affine Transformations）

仿射变换就是指线性变换与平移的组合：
$$\left[\begin{array}{cc}a& b\\ c& d\end{array}\right]\ast \left[\begin{array}{c}x\\ y\end{array}\right]+\left[\begin{array}{c}{t}_x\\ t_y\end{array}\right]=\left[\begin{array}{c}ax+by+t_x\\ cx+dy+t_y\end{array}\right]$$
利用齐次坐标可以写成一个三维矩阵：
$$\left[\begin{array}{ccc}a& b& t_x\\ c& d& t_y\\ 0& 0& 1\end{array}\right]\ast \left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=\left[\begin{array}{c}ax+by+t_x\\ cx+dy+t_y\\ 1\end{array}\right](point)$$

变换的组合与分解

对于任意多个变换可以表示成一个矩阵.试想对一个点或向量不断左乘变换矩阵，然后将变换矩阵结合就变成一个了：
$$(Scale\ast \dots \dots \ast Rotation(\varphi ))\ast \left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=A\ast \left[\begin{array}{c}x\\ y\\ 1\end{array}\right]$$

对于变换的顺序：从右往左进行变换。矩阵乘法没有交换律，因此不能随意交换变换顺序。

变换的分解：

eg：绕给定点旋转？

先平移到原点，再旋转，再进行平移。（转换成已有的变换）

3D空间中的变换

使用齐次坐标：

2D向量：$(x,y,z{)}^T=>(x,y,z,0{)}^T$

2D点 ：$(x,y,z{)}^T=>(x,y,z,1{)}^T$

对于3D点 ：$(x,y,w{)}^T=>(x/w,y/w{)}^{T}w!=0$。

那么3D空间中的仿射变换为：
$$\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]\ast \left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]=\left[\begin{array}{c}ax+by+cz+t_x\\ dx+ey+fz+t_y\\ gx+hy+iz+t_z\\ 1\end{array}\right](point)$$
3D空间中变换与2D中的类似，但是旋转比较特殊，由此总结如下。

3D空间中的旋转

2D中的旋转表示为绕点旋转，而3D中的旋转表示为绕轴逆时针旋转。

绕x轴，y轴，z轴（坐标轴如下所示为右手坐标系）：
$$\begin{gathered} R_x(\varphi )=\left[\begin{array}{cccc}1& 0& 0& t_x\\ 0& \cos \varphi & -\sin \varphi & t_y\\ 0& \sin \varphi & \cos \varphi & t_z\\ 0& 0& 0& 1\end{array}\right](绕x轴) \\ {R}_y(\varphi )=\left[\begin{array}{cccc}\cos \varphi & 0& \sin \varphi & t_x\\ 0& 1& 0& t_y\\ -\sin \varphi & 0& \cos \varphi & t_z\\ 0& 0& 0& 1\end{array}\right](绕y轴) \\ {R}_z(\varphi )=\left[\begin{array}{cccc}\cos \varphi & -\sin \varphi & 0& t_x\\ \sin \varphi & \cos \varphi & 0& t_y\\ 0& 0& 1& t_z\\ 0& 0& 0& 1\end{array}\right](绕z轴) \end{gathered}$$

对于绕任意轴的旋转，同样是可以转成绕x,y,z轴的旋转。

分解公式(Rodrigues’s Rotation Formula)：
$$R(n\text{n}n,\alpha )=\cos (\alpha )I\text{I}I+(1-\cos \alpha )n\text{n}n{n\text{n}n}^T+\sin \alpha \text{α}\alpha \left[\begin{array}{ccc}0& -{n\text{n}n}_z& {n\text{n}n}_y\\ {n\text{n}n}_z& 0& -{n\text{n}n}_x\\ -{n\text{n}n}_y& {n\text{n}n}_x& 0\end{array}\right]$$
NOTE:默认$n\text{n}n$经过原点，对于轴来说需要指定起点，这里默认的起点为原点。如若遇到起点不在原点，可先平移到原点，在进行旋转，在平移回去。

四元数：主要是为了进行旋转的插值。

观测变换(view/camera transfrom)

介绍之前变换的目的是为了讨论虚拟相机的成像。给定一个3D场景，我们如何将其最终渲染到屏幕上（如何拍一张照片）。

1. 站好位置（模型变换）
2. 调好相机位置（视图变换，view/camera transfrom）
3. 成像，拍照（投影变换，3维变2维，Projection (投影) transformation ）

视图变换

如何定义相机的位置，与摆放？

1. 位置。
2. 朝向（看向的方向）
3. 向上的方向。

通过这些可以确定一个相机。

为了方便起见。可以将相机变换到原点（位置），向上方向为y轴方向，看向z轴的负方向（朝向）。然后将所有其他物体进行同样的变换。

相机变换

为了将一个任意相机（位置,朝向，向上的方向分别为（$e\text{e}e,\hat{g},\hat{t}$）变换到我们预想的位置。

1. 将位置变换到原点$e\text{e}e=>o\text{o}o$
2. 将朝向变换到$Z\text{Z}Z$轴负方向$\hat{g}=>-Z\text{Z}Z$
3. 将向上方向变换到$Y\text{Y}Y$轴的正方向$\hat{t}=>Y$。

那么变换矩阵该怎么写呢？

1. 平移2. 旋转

$M_{view}=R_{view}{T}_{view}$

平移变换矩阵很好写：
$$T_{view}=\left[\begin{array}{cccc}1& 0& 0& -x_{e\text{e}e}\\ 0& 1& 0& -y_{e\text{e}e}\\ 0& 0& 1& -z_{e\text{e}e}\\ 0& 0& 0& 1\end{array}\right]$$
旋转的做法：

1. 将$\hat{g}=>-Z\text{Z}Z,\hat{t}=>Y,\hat{g}\times \hat{t}=>X$(如下图所示)

对于旋转矩阵来说非常难写。但是从反向来(逆变换)看比较简单(旋转矩阵是正交矩阵，其对称矩阵便是它的逆矩阵)。

将$X\text{X}X=>\hat{g}\times \hat{t},Y\text{Y}Y=>\hat{t},-\hat{Z}=>g\text{g}g$
$$\begin{gathered} R_{view}^{-1}=\left[\begin{array}{cccc}{x}_{g\times t}& x_t& x_{-g}& 0\\ y_{g\times t}& y_t& y_{-g}& 0\\ z_{g\times t}& z_t& z_{-g}& 0\\ 0& 0& 0& 1\end{array}\right] \\ {R}_{view}=\left[\begin{array}{cccc}{x}_{g\times t}& y_{g\times t}& z_{g\times t}& 0\\ x_t& y_t& z_t& 0\\ x_{-g}& y_{-g}& z_{-g}& 0\\ 0& 0& 0& 1\end{array}\right] \end{gathered}$$

对于view/camera transfrom，观测变换，由于相机与模型的相对位置关系，也叫做ModelView Transform。

投影变换

关于正交投影与透视投影的区别如下图。

透视投影符合近大远小的规律。

正交投影

定义一个空间的立方体($[l,r]\times [b,t]\times [f,n]$)，（分别表示在x,y,z轴上的范围）。

把其映射到标准立方体(中心在原点，大小$[-1,1{]}^3$),由于看向z轴的负方向，那么离相机越近，z值越大，越远越小。

则其变换矩阵：

首先平移中心，后缩放。则有：
$$\begin{gathered} M_{project}=\left[\begin{array}{cccc}2/(r-l)& 0& 0& 0\\ 0& 2/(t-b)& 0& 0\\ 0& 0& 2/(n-f)& 0\\ 0& 0& 0& 1\end{array}\right]\left[\begin{array}{cccc}1& 0& 0& -(l+r)/2\\ 0& 1& 0& -(b+t)/2\\ 0& 0& 1& -(f+n)/2\\ 0& 0& 0& 1\end{array}\right] \\ =\left[\begin{array}{cccc}\frac{2}{(r-l)}& 0& 0& -\frac{r+l}{r-l}\\ 0& \frac{2}{(r-b)}& 0& -\frac{t+b}{t-b}\\ 0& 0& \frac{2}{(n-f)}& -\frac{n+f}{n-f}\\ 0& 0& 0& 1\end{array}\right] \end{gathered}$$
物体确实会被拉伸（后续会做视口变换）。

透视投影

1. 近大远小
2. 平行线不再平行

如图所示为了更好的得到变换矩阵，可以先压缩放，经四棱台压缩成立方体，后利用正交投影来做。

1. 近平面不变。
2. z值不变。
3. 任意切面上的中心点位置不变。

基于几个假设来推导透视投影的矩阵。

近平面上的点映射到立方体上，坐标不变。

远平面上的点映射到立方体上,z值不变，中心点坐标不变。

透视投影的矩阵推导

压缩

利用相似三角形，如图所示，对于一个初始点$(x,y,z)$将其映射到立方体上。有如下相似三角形。

则变换后的$y^{{}^{\prime }}=\frac{n}{z}y$。同理$x^{{}^{\prime }}=\frac{n}{z}x$。

那么对于任意$(x,y,z)$在其次坐标下有：
$$\left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]=>\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ \text{unkown}\\ 1\end{array}\right]=\left[\begin{array}{c}\frac{n}{z}x\\ \frac{n}{z}y\\ \text{unkown}\\ 1\end{array}\right]=\left[\begin{array}{c}nx\\ ny\\ \text{unkown}\\ z\end{array}\right]\text{齐次坐标下的点}$$
那么可以得到构造矩阵：
$$\left[\begin{array}{cccc}n& 0& 0& 0\\ 0& n& 0& 0\\ ？& ？& ？& ？\\ 0& 0& 1& 0\end{array}\right]\ast \left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]=\left[\begin{array}{c}nx\\ ny\\ \text{unkown}\\ z\end{array}\right]$$

为了得到第三行的元素：利用之前的假设

近平面上的点映射到立方体上，坐标不变。

远平面上的点映射到立方体上,z值不变，中心点坐标不变。

则有：
$$\begin{gathered} \left[\begin{array}{cccc}n& 0& 0& 0\\ 0& n& 0& 0\\ A& B& C& D\\ 0& 0& 1& 0\end{array}\right]\ast \left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ n\\ 1\end{array}\right]=\left[\begin{array}{c}n{x}^{{}^{\prime }}\\ n{y}^{{}^{\prime }}\\ n^2\\ n\end{array}\right]==\left[\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ n\\ 1\end{array}\right] \\ \left[\begin{array}{cccc}n& 0& 0& 0\\ 0& n& 0& 0\\ A& B& C& D\\ 0& 0& 1& 0\end{array}\right]\ast \left[\begin{array}{c}cente{r}_x\\ cente{r}_y\\ f\\ 1\end{array}\right]=\left[\begin{array}{c}f\ast cente{r}_x\\ f\ast cente{r}_y\\ f^2\\ f\end{array}\right] \\ Ax+By+Cn+D=n^2 \\ A\ast cente{r}_x+B\ast cente{r}_y+Cf+D=f \end{gathered}$$

对于任意近平面的任意(x,y)都有$Ax+By+Cn+D=n$，因此$A=0,B=0$.

因此联立$Cn+D=n^2,Cf+D=f^2$

则可以解得：$C=n+f,D=-nf$

因此可以得到
$$\begin{gathered} M_{presp->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}_{presp}=M_{ortho}{M}_{presp->ortho} \end{gathered}$$

Reference

1. https://www.bilibili.com/video/BV1X7411F744?t=4503&p=4
2. https://sites.cs.ucsb.edu/~lingqi/teaching/games101.html