1 Transform

文本统计：约 1833 个字

1.1 2D Transforms

1.1.1 Some typical Transforms

Scale Matrix

Reflection Matrix

Shear Matrix

Rotate

1.1.2 Homogeneous Coordinates

二维的矩阵只能完成旋转的操作，当我需要完成平移操作的时候，我就需要引入第三个坐标了。

We add a third coordinate(w-coordinate)

点坐标我们的第三个坐标记为1，向量的话就记为0（这样的话，我们向量在平移的时候就不会变了）。

\[ \text{2D point} \rightarrow (x,y,1)^T \quad\text{2D vector} \rightarrow (x,y,0)^T \]

\[ \begin{pmatrix} x' \\ y' \\ w' \end{pmatrix} = \begin{pmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{pmatrix} \cdot \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} = \begin{pmatrix} x + t_x \\ y + t_y \\ 1 \end{pmatrix} \]

Meanwhile, valid operation if w-coordinate of result is 1/0

• vector+vector=vector
• point-point=vector
• point+vector=point

However, point+point is meaningless at some point. In homogeneous coordinates,

\(\left( \begin{matrix} x\\y\\w\end{matrix} \right) \tag{2}\)is the \(2D\) point\(\left( \begin{matrix} x/w\\y/w\end{matrix} \right) \tag{2}\),\(w\neq0\). Therefore point+point means the midpoint.

Affine Transformation（仿射变换）

\(\text{Affine map = linear map + translation}\)

\[ \begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} a & b \\ c & d \end{pmatrix} \cdot \begin{pmatrix} x \\ y \end{pmatrix} + \begin{pmatrix} t_x \\ t_y \end{pmatrix} \]

\(\text{Using Homogenous Coordinates}\)

\[ \begin{pmatrix} x' \\ y' \\ 1 \end{pmatrix} = \begin{pmatrix} a & b & t_x \\ c & d & t_y \\ 0 & 0 & 1 \end{pmatrix} \cdot \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} \]

What's the Order? Linear Transforms first or Translation first?

The former

Inverse Transform（逆变换）

\(M^{-1}\) is the inverse of transform in both a matrix and geometric sense

1.1.3 Composing and Decomposing

Composing Transforms

Sequence of affine transforms \(A_1,A_2,A_3,\dots\)

\[ A_n(\dots A_2(A_1(x)))=A_n\dots A_2\cdot A_1\cdot\left( \begin{matrix} x\\y\\1\end{matrix} \right) \]

we can obtain a single matrix representing combined transform.

Decomposing Complex Transforms

How to rotate around a given point c

1.2 3D Transforms

3D Transforms is just like 2D transforms. We use 4*4 matrices for affine transformation

\[ \left(\begin{matrix}x'\\y'\\z'\\1 \end{matrix}\right)=\left(\begin{matrix}a&b&c&t_x\\d&e&f&t_y\\g&h&i&t_z\\0&0&0&1 \end{matrix}\right)\cdot \left(\begin{matrix}x\\y\\z\\1 \end{matrix}\right) \]

Rotation around x-,y- or z-axis

\[ \mathbf{R}_x(\alpha) = \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos \alpha & -\sin \alpha & 0 \\ 0 & \sin \alpha & \cos \alpha & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \]

\[ \mathbf{R}_y(\alpha) = \begin{pmatrix} \cos \alpha & 0 & \sin \alpha & 0 \\ 0 & 1 & 0 & 0 \\ -\sin \alpha & 0 & \cos \alpha & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \]

\[ \mathbf{R}_z(\alpha) = \begin{pmatrix} \cos \alpha & -\sin \alpha & 0 & 0 \\ \sin \alpha & \cos \alpha & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \]

it looks like different when rotate around y-axis

we can compose any 3D rotation from \(R_x(\alpha)\ R_y(\beta)\ R_z(\gamma)\),

Rodrigues’ Rotation Formula

计算绕一个旋转轴旋转一个角度的结果

\[ \mathbf{R}(\mathbf{n}, \alpha) = \cos(\alpha) \mathbf{I} + (1 - \cos(\alpha)) \mathbf{n} \mathbf{n}^T + \sin(\alpha) \underbrace{\begin{pmatrix} 0 & -n_z & n_y \\ n_z & 0 & -n_x \\ -n_y & n_x & 0 \end{pmatrix}}_{\mathbf{N}} \]

1.3 View/Camera Transformation

We need to define the camera first.

• Position \(\vec e\) 相机在哪个位置
• Look at / gaze direction \(\hat g\) 相机朝哪个地方拍
• Up direction \(\hat t\) 相机是横着拍还是竖着拍等等

To let the problem be easy, we can move the camera and the object together.

Usually, we transform the camera to the origin, up at Y, look at -Z. Let the transform matrix be \(M_{view}\).

How to get \(M_{view}\) in math?

1. translate \(\vec e\) to origin then rotate \(\hat g\) to \(-Z\), \(\hat t\) to \(Y\), \(\hat g\times \hat t\) to \(X\)
2. \(M_{view}=R_{view}T_{view}\)

3. \(T_{view}= \left[ \begin{matrix} 1 & 0 & 0 & -x_e \\ 0 & 1 & 0 & -y_e\\ 0 & 0 & 1 & -z_e \\ 0 & 0 & 0 & 1\end{matrix} \right]\)

4. \(R^{-1}_{view}= \left[ \begin{matrix} 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{matrix} \right]\)\(\Rightarrow\) \(R_{view}= \left[ \begin{matrix} 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{matrix} \right]\)

1.4 Projection transformation (MVP transformation)

Perspective projection vs. orthographic projection

Orthographic Projection （正交投影）

We can drop Z coordinate and translate and scale the resulting rectangle to \([-1,1]^2\)

However, in general, we want to map a cuboid \([l,r]\times[b,t]\times[f,n]\) to the “canonical” cube \([-1,1]^3\)

The transformation matrix: Translate first, then scale （一定要注意是先平移后放缩，右边的矩阵是先乘的）

\[ 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] \]

Perspective Projection（透视投影）

Perspective Projection is common in Computer Graphics and so on, featuring that further objects are smaller and parallel lines not parallel.

How to do perspective projection?

1. “squish” the frustum in to cuboid(\(M_{persp\rightarrow ortho}\)) 我先将这个棱台压缩成一个长方体
2. do orthographic projection 再进行正交投影

According to the similar triangle 相当于xy方向直接成比例缩放了

\[ \left\{ \begin{aligned} x'&=\frac{n}{z}x\\ y'&=\frac{n}{z}y \end{aligned} \right. \]

so the ”squish” projection does this

\[ M^{(4\times 4)}_{persp\rightarrow ortho}\left(\begin{matrix}x\\y\\z\\1 \end{matrix}\right)=\left(\begin{matrix}nx\\ny\\\text{unknown}\\z \end{matrix}\right) \]

then we can get

\[ M^{(4\times 4)}_{persp\rightarrow ortho}=\left(\begin{matrix}n&0&0&0\\0&n&0&0\\?&?&?&?\\0&0&1&0 \end{matrix}\right) \]

Through observation, we find any point on the near plane will not change and any point’z on the far plane also not change. So we can use this two special to solve the third row of the matrix.

\[ \left(\begin{matrix}x\\y\\n\\1\end{matrix}\right)\Rightarrow \left(\begin{matrix}x\\y\\n\\1\end{matrix}\right) \equiv \left(\begin{matrix}nx\\ny\\n^2\\n\end{matrix}\right) , \left(\begin{matrix}0\\0\\f\\1\end{matrix}\right)\Rightarrow \left(\begin{matrix}0\\0\\f\\1\end{matrix}\right) \equiv \left(\begin{matrix}0\\0\\f^2\\f\end{matrix}\right) \]

by the first equation we know that the third row must be \(\left(\begin{matrix}0&0&A&B\end{matrix}\right)\)

so we can the equation set \(\begin{cases} An+B =n^2\\Af+B=f^2\end{cases}\) \(\rightarrow\begin{cases} A=n+f\\b=-nf\end{cases}\)

\[ M^{(4\times 4)}_{persp\rightarrow ortho}=\left(\begin{matrix}n&0&0&0\\0&n&0&0\\0&0&n+f&-nf\\0&0&1&0\end{matrix}\right) \]

从而可以得到

\[ M_{\text{persp}}=M_{\text{ortho}}M_{\text{persp}\rightarrow \text{ortho}} \]

Which planes is closer to the point in frustum that is not on the n and f planes after the squish?

f planes

How to define such a frustum?

• define width and height \(\rightarrow\) Aspect ratio = width/height
• define vertical field of view: \(fovY\)

it is easy to know

\[ \tan\frac{fovY}{2}=\frac{t}{|n|} \]

\[ \text{aspect}=\frac{r}{t} \]

ViewPort Transformation（视口变换）

什么是视口变换？

在我们做完投影变换后所有物体都映射在标准坐标系中，但是屏幕会有各种各样的分辨率，所以视口变换是为了将正常设备坐标映射到屏幕坐标。

怎么做视口变换？

假设屏幕的宽为width，高度为height，那么视口变换就是把 \([-1,1]^2\) 的 \(xy\) 平面变到 \([0,width]\times [0,height]\)，这里为什么没有考虑z轴的变换是因为z轴在之后的其他地方有用。

\[ M_{viewport}=\left(\begin{matrix}\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{matrix}\right) \]

Summary

总的来说就是我们先要做的是摄像机的变换，让摄像机位于原点，up at Y，look at -Z，同时注意物体要随着摄像机一起变换，这样才能保证照片不会发生变化。然后我们得到了变换后的物体，然后我取一个视锥，定义了相关的fovY, respect ratio, Znear, Zfar，然后我需要把他变换到 \([-1,1]^3\) 这样一个标准立方体以方便进行接下来的步骤（注意这个变换跟前面那个摄像机的变换不要搞混了，这两次变换目的是不同的），我们如何将一个视锥变换为 \([-1,1]^3\) 的标准立方体，先进行透视投影，然后再进行正交投影。最后我们需要将物体投影到屏幕上，再做一次视口变换即可。

步骤如下图：

评论区

对你有帮助的话请给我个赞和 star =>
欢迎跟我探讨！！！