计算机图形学笔记(1)：变换

变换（Transformation）

1 2D 变换

2D变换矩阵（齐次坐标系）如下：

• 缩放：

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

• 切变：

  $$\mathbf{\text{H}}(a_x,a_y)=\left[\begin{array}{ccc}1& a_x& 0\\ a_y& 1& 0\\ 0& 0& 1\end{array}\right]$$

• 旋转：

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

• 平移：

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

1.1 缩放（scale）

对于一个 2D 图像的点 $$$$ 相对于原点按照 $$$$ 轴的缩放，可以表示为以下公式：

$$$$

转化为缩放矩阵乘向量的形式可表示为：

$$$$

如果 $$$$ ，图像水平对称；$$$$ 则垂直对称。

1.2 切变（shear）

对于一个 2D 图像的点 $$$$ 相对于原点按照 $$$$ 或 $$$$ 轴的切变，可以表示为以下公式：

$$$$

转化为缩放矩阵乘向量的形式可表示为：

$$$$

1.3 旋转（rotation）

对于一个 2D 图像的点 $$$$ 相对于原点逆时针旋转（CCW， counterclockwise），设旋转矩阵 $$$$：

$$$$

则 $$$$表示为：

$$$$

带入上图中特殊点 $$$$ 可得：

$$$$

所以得旋转矩阵 $$$$ ：

$$$$

此外可知 $$$$ 为: $$$$ 所以旋转矩阵是正交矩阵。

1.4 平移（translation）

对于一个 2D 图像的点 $$$$ 相对于原点进行位移可以通过 仿射变换（仿射映射）表示为：

$$$$

可以发现，仅用一个二维矩阵无法表示平移，因此引入 齐次坐标，用三阶矩阵来表示变换矩阵，定义如下：

• 对于点 $$$$ ：
  • 添加一个维度表示为 $$$$
  • 此外在齐次坐标中 $$$$ 表示一个 2D 点 $$$$ ($$$$)
• 对于向量 $$$$
  • 添加一个维度表示为 $$$$ (向量没有位置属性，所以第三个维度值为0)

所以用齐次坐标位移可以表示为：

$$$$

同理，齐次坐标下的缩放、切变和旋转可以表示为本节开头所给出的矩阵。

此外，经过以上定义，齐次坐标中的向量和点仍然满足二维坐标中的性质：

• 向量 + 向量 = 向量
• 点 - 点 = 向量
• 点 + 向量 = 点 （点沿着向量的方向移动）

此外还具有一个特殊性质：

• 点 + 点 = 两点之间中点

2 逆变换和复合变换

2.1 逆变换

由矩阵本身的性质可知：矩阵 $$$$ 是 矩阵 $$$$ 所产生变换的逆变换。

2.2 复合变换

当缩放、切变、旋转和位移这些变换组合在一起时，形成了图形的复合变换。

比如：将一个 2D 图形旋转 $$$$ 然后沿着 $$$$ 轴正方向移动1个单位距离

需要注意的是，在复合变换中，交换不同变换的顺序是会产生截然不同的结果的，这一点也与矩阵乘法性质相吻合。

如下等式所示，复合变换的先后顺序是从第一个与点/向量相乘的矩阵开始的：

$$$$

由于矩阵乘法符合结合律，可用只用一个矩阵 $$$$ 来表示一系列的变换操作：

$$$$

2.3 分解复合变换

如上图所示，需要将一个图形一个固定点旋转时，直接使用旋转变换是不起作用的（旋转变换以原点位中心）。

因此可以把这个变换分解为：

• 将旋转中心移动至圆心（当然图像也要一起移动）
• 绕圆心旋转对应角度
• 重新将旋转中心移动至原处

其复合变换 $$$$

3 3D 变换

与 2D 变换的齐次坐标矩阵类似，3D 变换矩阵定义如下：

• 点表示为 $$$$

• 矢量表示为 $$$$

• $$$$ 表示点 $$$$

• 缩放矩阵：

  $$$$

• 平移矩阵：

  $$$$

旋转矩阵在 3D 变换中比较特殊，分为三种旋转：

• 绕 $$$$ 轴旋转

  $$$$

• 绕 $$$$ 轴旋转

  xy = z

  yz = x

  zx = -xz = y

  $$$$

• 绕 $$$$ 轴旋转

  $$$$

将三种旋转复合，被称作欧拉角：

$$$$

以前后方向的轴旋转叫做 Roll

以左右方向的轴旋转叫做 Pitch

以上下方向的轴旋转叫做 Yaw

3.1 罗德里格旋转公式

罗德里格旋转公式（Rodrigues’ rotation formula），是计算三维空间中，一个向量绕任意过原点旋转轴旋转后得到的新向量的计算公式。 $$$$

$$$$ 矩阵是向量 $$$$ 的叉乘矩阵

4 视图变换（View/Camera Transformation）

先定义相机：

• 位置：$$$$

• 面朝向：$$$$

• 向上方向：$$$$

为了方便计算，约定相机在原点，面朝 $$$$ ，上朝 $$$$，同时对相机拍摄的物体应用相机的移动（即物体跟随相机移动）

相机的变换矩阵定义为：

$$$$

$$$$

由于直接求相机转到约定朝向的旋转矩阵不好求，为此利用旋转矩阵是正交矩阵的特点，先求从约定朝向转到当前朝向的旋转矩阵。

$$$$

然后将其转置就可以得到我们需要的旋转矩阵了。

$$$$

5 投影变换（Projection Transformation）

投影变换的目的是将 3D 投影为 2D 画面，主要分为

• 正交投影（orthographic projection）：两个平行边保持平行。
• 透视投影（perspective projection）：两个平行延长后会相交在一个点。会有近大远小的效果

为什么要有远平面？定义远平面是为了让在远平面外的物体直接被裁剪掉，节约运算资源

5.1 正交投影变换

将上图的正交投影定义为一个长方体，$$$$，然后将其映射到一个正则化的正方体上，$$$$。

具体步骤：

• 将长方体的中心平移到原点
• 将长方体缩放到长宽高为 2 的正方体

变换矩阵（没有考虑旋转）如下：

$$$$

由于约定是看向 -Z ，所以 n > f

5.2 透视投影变换

将截锥体挤到以近平面（投影平面）为基准的长方体（当然这个变换要应用到截锥体空间内的所有物体），然后进行正交投影。这样就完成了透视投影。

这样挤压有三个特点：

• 近平面所有点的位置不变
• 远平面所有点在 Z 轴的值不变
• 远平面中点的位置不变

从侧面看，对于任意点的位置变化，可以通过相似三角形的性质得到：

$$$$ 同理 $$$$

由于没有任何矩阵能实现 $$$$ 在此可以利用齐次坐标下的特性

这样问题就变成： $$$$

$$$$

带入近平面上的点（即 z = n）可知： $$$$ 所以第三行的计算与 x, y 无关，得到 $$$$ 为了算出 A，B 的值，带入远平面上的点可以得到二元一次方程 $$$$ 解得 $$$$ 最后透视投影矩阵可以表示为 $$$$

需要注意的是，经过透视变换后，物体的 z 坐标和变换前的已经不是线性关系了。 $$$$ 为了方便观察，对 $$$$ 取正。可以得到下图：

可以看出，经过透视投影后，物体 z 坐标变大了，即远离摄像头的位置（$$$$）。

此外，我们还可以发现，靠近近平面的 z 坐标精度比靠近远平面的更高（z 能够表示的范围更大）。这一个特点可以解决近处明显的 z-fighting 问题。

z-fighting 是指两个三角形距离过于靠近，而浮点型的精度不够，最后无法准确判断两者前后关系，导致图像闪烁的问题。

详细信息可见：<渲染基础>-3D渲染中的Z-fighting现象

此外，我们可以注意到经过透视投影变换后，点的向量已经变为 $$$$ 。此时 $$$$ 中存储的值正式原始的深度坐标，对于后续需要用到原始深度坐标的计算，我们直接使用 $$$$ 即可。

5.3 视角（FOV）和纵横比（aspect ratio）

在投影变换中，我们通过 $$$$ 定义了投影平面，但是实际生产中，人们使用的最多的参数是：

• 视角（field of view，FOV）：视角分为垂直视角和水平视角（游戏中水平视角用的比较多）。
• 纵横比（aspect ratio)：即我们实际所看到的画面的比例，如 1920 : 1080、1200 : 720等。

通过视角和纵横比我们就可以计算出 l，r，b，t。

这里用的是垂直视角，水平视角和垂直视角可以藉由纵横比相互转换

设相机位于原点，上朝 Y 轴正方向，面朝 Z 轴负方向。利用三角函数和边的关系可以得到： $$$$

$$$$

$$$$