本文已参与[新人创作礼]活动,一起开启掘金创作之路

图形学的数学基础（十五）：mvp变换(下)

透视投影（$perspective projection$）

透视投影满足透视关系，即近大远小的效果。平行的线可能在远处相较于某一点。符合人眼视觉系统。计算机图形学中绝大部分都是使用透视投影，来模拟人自然看到物体的样子。

视锥体（$Frustum$）定义

和正交投影不同,透视投影的视景体是个截锥体(Frustum)

视锥体由以下几个参数定义：

• fov（field of view）: 视角范围
• aspectRatio（长宽比）：定义近平面的宽高比
• n（近平面距离）：近平面距离原点距离

由视锥体的参数可以推导出$l,r,b,t$：

$\tan\dfrac{fov}{2} = \dfrac{t}{|n|}$

$aspectRatio = \dfrac{r}{t}$

推导原理

观察上图我们发现,透视投影远平面比近平面要大些,除了这些两个视景体几乎是一样的。所以在我们做透视投影变换时，不妨先将其转换为右侧的长方体，然后再做一次正交投影变换即可。

$\textbf{M}_{perspective} = \textbf{M}_{orthographic}\textbf{M}_{persp->ortho}$

“挤压变换”

任选一点P，如果将其“挤压”至P1点，我们观察$\triangle{OPR}和\triangle{NPP1}$,不难发现两个三角形是相似三角形，根据相似三角形定律: $y^丶 = \dfrac{ny}{z}$,同理 $x^丶 = \dfrac{nx}{z}$.

在齐次坐标下：

$\textbf{M}_{persp->ortho}\begin{bmatrix} x\\ y\\ z\\ 1\\ \end{bmatrix} = \begin{bmatrix}\dfrac{nx}{z}\\ \dfrac{ny}{z}\\ unknown \\1 \end{bmatrix} = \begin{bmatrix}nx\\ ny\\ unknown \\z \end{bmatrix}$

$\textbf{M}_{persp->ortho} = \begin{bmatrix} n&0&0&0\\ 0&n&0&0\\ ?&?&?&?\\ 0&0&1&0\\ \end{bmatrix}$

近平面的任意一点在挤压后的z值不会改变：

$\begin{bmatrix}\dfrac{nx}{n}\\ \dfrac{ny}{n}\\ n \\1 \end{bmatrix} = \begin{bmatrix}nx\\ ny\\ n^2 \\n\end{bmatrix}$

$\begin{bmatrix} 0&0&A&B \end{bmatrix}\begin{bmatrix}x\\ y\\ n\\ 1\\ \end{bmatrix} = n^2$

$An + B = n^2$

远平面的任意一点挤压后z值不会改变,更特殊的是，远平面的中心点（0，0，f）在挤压后仍然在（0，0，f），根据这一特性我们能够得到：

$\begin{bmatrix}0\\ 0\\ f \\1 \end{bmatrix} = \begin{bmatrix}0\\ 0\\ f^2 \\f\end{bmatrix}$

$Af + B = f^2$

解二元一次方程组：

$An + B = n^2$

$Af + B = f^2$

$A = n+f$

$B = -nf$

$\textbf{M}_{persp->ortho} = \begin{bmatrix} n&0&0&0\\ 0&n&0&0\\ ?&?&?&?\\ 0&0&1&0\\ \end{bmatrix} \begin{bmatrix} n&0&0&0\\ 0&n&0&0\\ 0&0&A&B\\ 0&0&1&0\\ \end{bmatrix} = \begin{bmatrix} n&0&0&0\\ 0&n&0&0\\ 0&0&n+f&-nf\\ 0&0&1&0\\ \end{bmatrix}$

$\textbf{M}_{perspective} = \textbf{M}_{orthographic}\textbf{M}_{persp->ortho} = \begin{bmatrix} \dfrac{2}{r-l}&0&0&0\\ 0&\dfrac{2}{t-b}&0&0\\ 0&0&\dfrac{2}{n-f}&0\\ 0&0&0&1\\ \end{bmatrix}\begin{bmatrix} 1&0&0&-\dfrac{r+l}{2}\\ 0&1&0&-\dfrac{t+b}{2}\\ 0&0&1&-\dfrac{n+f}{2}\\ 0&0&0&1\\ \end{bmatrix}\begin{bmatrix} n&0&0&0\\ 0&n&0&0\\ 0&0&n+f&-nf\\ 0&0&1&0\\ \end{bmatrix}$

视口变换($viewport$)

经过复杂的投影变换后，我们将空间中的一个视景体映射到了$[-1,1]^3$的标准立方体中，接下来我们将通过视口变换将其映射到屏幕空间中。

屏幕空间（$screenSpace$）定义

• 屏幕左下角为原点（0，0）
• 向右为x，向上为y
• 像素（pixel）的坐标以（x，y）表示，xy均为整数
• 像素坐标的范围 （0，0） ~ （width - 1，height - 1）
• Pixel（x，y）的中心点位于（x+0.5，y+0.5）
• 每个像素形成单位宽高的“正方体”
• 屏幕空间覆盖范围为（0，0）~（width，height）

从$[-1,1]^2 到 [0,width] [0,height]$

原地缩放 $\begin{bmatrix} \dfrac{width}{2}\\ \dfrac{height}{2} \end{bmatrix}$，然后平移到$\begin{bmatrix} \dfrac{width}{2}\\ \dfrac{height}{2} \end{bmatrix}$

$\textbf{M}_{viewport} = \begin{bmatrix} \dfrac{width}{2}&0&0&\dfrac{width}{2}\\ 0&\dfrac{height}{2}&0&\dfrac{height}{2}\\ 0&0&1&0\\ 0&0&0&1\\ \end{bmatrix}$

参考

《3D数学基础》图形和游戏开发(第二版)

GAMES101 -现代计算机图形学入门-闫令琪

fundamentals-of-computer-graphics