Projection Matrix

要把3D物體投射到電腦2D的螢幕上，要辦到這件事情就是要靠我們的投影矩陣來達成，基本上就是把原本在觀察座標（View coordinate）的頂點轉換到裁剪座標（Clip coordinate）。

投影矩陣分為兩種，一種是正交投影（Orthogonal）和透視投影（Perspective）兩種，差別在於正交投影裡面的平行線就是平行線永不相交；而透視投影比較貼近現實，越遠的東西會越小，且也會逐漸聚在中心成一個點。

因為裁剪坐標是齊次座標（Homogeneous coordinate）的一種，所以除了x, y, z之外還會多一個 w 分量，接著要轉回常見的三維座標，這時會做透視除法（Perspective division），將 x, y 與 z 都除以 w 分量，才會變成標準設備座標（Normalize Device Coordinate），然後再經過所謂的視口變換（Viewport transform），才會是最後的螢幕座標（Screen Coordinate）。

投影矩陣通常都會需要6個參數，分別是： left, right, bottom, top, near, far。

特別注意，我們假設在裁剪空間的一點

$P_p(x_p,y_p,z_p,w_p)$，如果

$x_p,y_p,z_p$ 任數值大於

$w_p$ 或小於

$-w_p$ 都會被裁剪掉，所以就不會呈現在畫面上了。

那至於投影矩陣是如何生成的，這裡將講解其原理過程：

以下投影矩陣將是以 OpenGL 為範例說明，想了解 DirectX 的話請看這裡。

Perspective

先來探討透視投影，因為這比較難。
我們假設6個參數分別為：

$l,r,b,t,n,f$，這些參數的意思就是告訴我們要把在x軸

$[l,r]$ 映射到

$[-1,1]$；y軸

$[b,t]$ 映射到

$[-1,1]$ ;z軸

$[-n,-f]$ 映射到

$[-1,1]$ 的意思。

特別注意觀察空間是屬於右手座標系統，也就是說Z軸是朝攝影機（攝影機看向Z負軸），而NDC則是屬於左手座標系統，所以Z軸會是相反的，所以 near 和 far 要記得變負數。

可以知道的是說我們要把在觀察座標上的點映射到我們的近平面上，我們先不要管 y 的部分先看 z 軸，它的部分很簡單，就是統一變成

$-n$，但 x 怎麼處理呢？我們可以利用相似三角形（Similar Triangles），下圖中有咖啡色和紫色框起來的三角形，這兩個三角形的三個角度都一樣，只是長度不一樣，所以根據性質這兩個三角形的三個邊彼此是有比例關係的，所以算法如下：

$$\frac{x_p}{x_e}=\frac{-n}{z_e}=>x_p=-\frac{n}{z_e}{x}_e$$

所以說y軸的話同理，你只需要從不同角度去看（由x正軸向x負軸看去即可），得：

$$\frac{y_p}{y_e}=\frac{-n}{z_e}=>y_p=-\frac{n}{z_e}{y}_e$$

這時你會發現，

$x_p$ 和

$y_p$ 都是依賴於

$z_e$，因為它們都有除以

$-z_e$ ，我們也知道當裁剪空間要轉換成 NDC 時也會除以

$w_p$ ，所以我們可以讓

$w_p=-z_e$，這樣也可推導出投影矩陣的第四列:

$$\left[\begin{array}{cccc}\cdot & \cdot & \cdot & \cdot \\ \cdot & \cdot & \cdot & \cdot \\ \cdot & \cdot & \cdot & \cdot \\ 0& 0& -1& 0\end{array}\right]$$

而接下來換求

$x_{ndc}$ 和

$y_{ndc}$，因為

$x_p$ 和

$y_p$ 都是要映射至 NDC 的

$-1$ 到

$1$ 之間，我們就採用線性轉換的方式（y=ax+b），記住

$x$ 軸是

$[l,r]$ 變成

$[-1,1]$；

$y$ 軸是

$[b,t]$ 變成

$[-1,1]$：

$$x_{ndc}=\frac{1-(-1)}{r-l}{x}_p+\beta$$
帶入

$(r,1)$ 進去

$(x_p,x_{ndc})$ 化簡得：

$$1=\frac{2r}{r-l}+\beta$$
之後求

$\beta$：

$$\beta =1-\frac{2r}{r-l}=\frac{r-l}{r-l}-\frac{2r}{r-l}=\frac{-l-r}{r-l}=-\frac{r+l}{r-l}$$
所以我們得出式子：

$$x_{ndc}=\frac{2x_p}{r-l}-\frac{r+l}{r-l}$$

y軸基本上也同理：

$$y_{ndc}=\frac{1-(-1)}{t-b}{y}_p+\beta$$
帶入

$(t,1)$ 進去

$(y_p,y_{ndc})$ 化簡得：

$$1=\frac{2t}{t-b}+\beta$$
之後求

$\beta$：

$$\beta =1-\frac{2t}{t-b}=\frac{t-b}{t-b}-\frac{2t}{t-b}=\frac{-b-t}{t-b}=-\frac{t+b}{t-b}$$
所以我們得出式子：

$$y_{ndc}=\frac{2y_p}{t-b}-\frac{t+b}{t-b}$$

接著，代入我們剛剛算好的

$x_p$ 和

$y_p$：

$$x_{ndc}=\frac{2\cdot \frac{n{x}_e}{-z_e}}{r-l}-\frac{r+l}{r-l}=\frac{2n\cdot x_e}{(r-l)(-z_e)}-\frac{r+l}{r-l}$$

$$=\frac{\frac{2n}{r-l}\cdot x_e}{-z_e}+\frac{\frac{r+l}{r-l}\cdot z_e}{-z_e}=\left(\underset{x_c}{\underbrace{\frac{2n}{r-l}\cdot x_e+\frac{r+l}{r-l}\cdot z_e}}\right)\cdot \frac{1}{-z_e}$$

---

$$y_{ndc}=\frac{2\cdot \frac{n{y}_e}{-z_e}}{t-b}-\frac{t+b}{t-b}=\frac{2n\cdot y_e}{(t-b)(-z_e)}-\frac{t+b}{t-b}$$

$$=\frac{\frac{2n}{t-b}\cdot y_e}{-z_e}+\frac{\frac{t+b}{t-b}\cdot z_e}{-z_e}=\left(\underset{y_c}{\underbrace{\frac{2n}{t-b}\cdot y_e+\frac{t+b}{t-b}\cdot z_e}}\right)\cdot \frac{1}{-z_e}$$

如此一來我們就可以推導出我們的投影矩陣的第一二列了：

$$\left[\begin{array}{cccc}\frac{2n}{r-l}& 0& \frac{r+l}{r-l}& 0\\ 0& \frac{2n}{t-b}& \frac{t+b}{t-b}& 0\\ \cdot & \cdot & \cdot & \cdot \\ 0& 0& -1& 0\end{array}\right]$$

現在我們只要找出第三列即可，但與先前不一樣的是，因為我們把觀察空間中的

$z$ 值統一映射到近平面

$-n$ 上，但我們還是需要獨一的

$z$ 值來進行後續的深度測試（Depth test）。這邊

$z$ 值並不依賴於

$x$ 和

$y$ 值，所以我們只能借助

$w$ 來取得

$z_{ndc}$ 與

$z_e$ 之間的關係：

$$\left[\begin{array}{c}{x}_c\\ y_c\\ z_c\\ w_c\end{array}\right]=\left[\begin{array}{cccc}\frac{2n}{r-l}& 0& \frac{r+l}{r-l}& 0\\ 0& \frac{2n}{t-b}& \frac{t+b}{t-b}& 0\\ 0& 0& A& B\\ 0& 0& -1& 0\end{array}\right]\cdot \left[\begin{array}{c}{x}_e\\ y_e\\ z_e\\ w_e\end{array}\right],z_{ndc}=z_c/w_c=\frac{A{z}_e+B{w}_e}{-z_e}$$

在觀察空間，

$w_e$等於1，所以說等式會變成這樣：

$$z_{ndc}=\frac{A{z}_e+B}{-z_e}$$

現在我們只需要找出A跟B的值就好，我們代入

$(z_e,z_{ndc})=(-n,-1)\mathrm{和}(-f,1)$，我們會得到以下方程式：

$$\begin{gathered} \frac{-An+B}{n}=-1=>-An+B=-n \\ \frac{-Af+B}{f}=1=>-Af+B=f \end{gathered}$$
我們藉由等式1可知：

$$B=An-n$$
代入等式2後可得：

$$-Af+(An-n)=f=>-(f-n)A=f+n$$

$$A=-\frac{f+n}{f-n}$$
然後再把A代回等式1求B：

$$\begin{gathered} \frac{f+n}{f-n}n+B=-n \\ =>B=-n-\frac{f+n}{f-n}n \\ =-(1+\frac{f+n}{f-n})n \\ =-\frac{f-n+f+n}{f-n}n \\ =-\frac{2fn}{f-n} \end{gathered}$$

恭喜，我們將整個透視矩陣求出來啦：

$$\left[\begin{array}{cccc}\frac{2n}{r-l}& 0& \frac{r+l}{r-l}& 0\\ 0& \frac{2n}{t-b}& \frac{t+b}{t-b}& 0\\ 0& 0& -\frac{f+n}{f-n}& -\frac{2fn}{f-n}\\ 0& 0& -1& 0\end{array}\right]$$

然而我們可以再化簡，通常投射矩陣的方錐體（Frustum）通常是對稱的，所以說

$r=-l$,

$t=-b$，所以我們可以得出以下結論:

$$r+l=0,r-l=2r;t+b=0;t-b=2t;$$

所以最終的透視矩陣為：

$$\left[\begin{array}{cccc}\frac{n}{r}& 0& 0& 0\\ 0& \frac{n}{t}& 0& 0\\ 0& 0& \frac{-(f+n)}{f-n}& \frac{-2fn}{f-n}\\ 0& 0& -1& 0\end{array}\right]$$

特別注意

$z_e$ 和

$z_{ndc}$ 的關係，它們彼此之間是一個非線性的關係，所以說當一個物體很近時它的

$z$ 精度會很高，但距離一拉長精度卻會大幅降低。

Field Of View

而現今的透視投影需要的是四個參數：視野廣度（FOV）、畫面比例（Aspect Ratio）、近平面

$n$ 以及遠平面

$f$。視野廣度可以代表人眼睛的可見範圍，通常指的是【垂直視野的夾角】，通常設定為

${45}^{\circ }$，因為看起來比較正常，FOV越小可見範圍就會越小，所以畫面看起來就像是放大（Zoom In）的感覺，而數值越大看起來畫面就會開始變形。注意：FOV不可大於等於180度。

人的垂直視野大概是

${40}^{\circ }$，最大可到

${70}^{\circ }$。

所以說知道了FOV我們就可以求出投影矩陣需要的

$t$ 與

$b$，我們使用三角函數的方式來推算：

我們如果要求

$t$ 值，就需要知道

$\overline{BC}$ 長度為何，而我們可以發現，它是

$\mathrm{\angle }CAB$ 的對邊（Opposite），所以

$\overline{AB}$ 為鄰邊（Adjacent）、

$\overline{AC}$ 為斜邊（Hypotenuse）；而我們知道

$\tan$ 是對邊除以鄰邊，那我們只要將

$\tan$ 與鄰邊相乘幾可求出對邊長，至於鄰邊長為何，我們可以知道它就是

$n$ ，公式如下：

$$\begin{gathered} \tan (\frac{FOV}{2})=\frac{\overline{BC}}{\overline{AB}}=\frac{t}{n} \\ =>t=\tan (\frac{FOV}{2})\cdot n \end{gathered}$$
因為是相呼對稱，所以

$b=-t$，如此一來我們垂直高度已經求出了！。

再來，就是要求水平寬度，如果你的畫面（攝影機、螢幕、視窗大小）是正方形的，那恭喜你很簡單，寬度等於高度，所以：

$$r=t,l=-r$$
但現今的螢幕通常是長方形的，比例也不完全相同，所以我們需要長寬比（Aspect Ratio），透過它來推算我們的寬應該要是多少：

$$r=t\cdot Aspect,l=-r;$$

注意我們這邊所講的長寬比，預設都是寬除以高哦！

所以說，我們的透視矩陣變為：

$$\left[\begin{array}{cccc}\frac{n}{\tan (FOV/2)\cdot n\cdot Aspect}& 0& 0& 0\\ 0& \frac{n}{\tan (FOV/2)\cdot n}& 0& 0\\ 0& 0& \frac{-(f+n)}{f-n}& \frac{-2fn}{f-n}\\ 0& 0& -1& 0\end{array}\right]$$
然後化簡最終就變成：

$$\left[\begin{array}{cccc}\frac{1}{\tan (FOV/2)\cdot aspect}& 0& 0& 0\\ 0& \frac{1}{\tan (FOV/2)}& 0& 0\\ 0& 0& \frac{-(f+n)}{f-n}& \frac{-2fn}{f-n}\\ 0& 0& -1& 0\end{array}\right]$$

因為 FOV 度數會除以 2，所以當 FOV 為

${180}^{\circ }$ 時，會變成

$\tan {90}^{\circ }$，注意這在數學是無意義的，而當度數大於180時，

$\tan$ 出來的數值都會是負的，這也不合邏輯。

Code

程式碼如下（Implement on C++）：

glm::mat4 GetPerspectiveProjMatrix(float fovy, float ascept, float znear, float zfar) {
	
	glm::mat4 proj = glm::mat4(1.0f);

	proj[0][0] = 1 / (tan(fovy / 2) * ascept);
	proj[1][0] = 0;
	proj[2][0] = 0;
	proj[3][0] = 0;

	proj[0][1] = 0;
	proj[1][1] = 1 / (tan(fovy / 2));
	proj[2][1] = 0;
	proj[3][1] = 0;

	proj[0][2] = 0;
	proj[1][2] = 0;
	proj[2][2] = -(zfar + znear) / (zfar - znear);
	proj[3][2] = (-2 * zfar * znear) / (zfar - znear);

	proj[0][3] = 0;
	proj[1][3] = 0;
	proj[2][3] = -1;
	proj[3][3] = 0;

	return proj;
}

注意要此程式要 include glm，另外 OpenGL 採用的矩陣是 Column-Major Order（指的是記憶體的 Layout）。

Orthogonal

正交投影相對來說就簡單了許多，它就像是一個長方體你直接擷取，裡面所有東西都要投射到近平面上，但完全不會產生越遠的物體越小這種視覺效果，平行線就是平行，原理如下：

所以說三軸基本上都是簡單的線性轉換，

$x$ 軸是

$[l,r]$ 變成

$[-1,1]$；

$y$ 軸是

$[b,t]$ 變成

$[-1,1]$；

$z$ 軸是

$[-n,-f]$ 變成

$[-1,1]$：

$$\begin{gathered} x_{ndc}=\frac{1-(-1)}{r-l}{x}_e+\beta \\ {y}_{ndc}=\frac{1-(-1)}{t-b}{y}_e+\beta \\ {z}_{ndc}=\frac{1-(-1)}{-f-(-n)}{z}_e+\beta \end{gathered}$$

基本上就是各別帶入

$(r,1)$、

$(t,1)$、

$(-f,1)$ 去計算，這邊過程就不特別贅述了，最後求出的式子為：

$$\begin{gathered} x_{ndc}=\frac{2x_e}{r-l}-\frac{r+l}{r-l} \\ {y}_{ndc}=\frac{2y_e}{t-b}-\frac{t+b}{t-b} \\ {z}_{ndc}=\frac{-2z_e}{f-n}-\frac{f+n}{f-n} \end{gathered}$$
而

$w$ 值對於正交投影也不用有什麼特殊計算，就繼續等於 1 即可，所以正交投影矩陣為：

$$\left[\begin{array}{cccc}\frac{2}{r-l}& 0& 0& -\frac{r+l}{r-l}\\ 0& \frac{2}{t-b}& 0& -\frac{t+b}{t-b}\\ 0& 0& -\frac{2}{f-n}& -\frac{f+n}{f-n}\\ 0& 0& 0& 1\end{array}\right]$$

那如果說是相互對稱的話，

$r=-l$,

$t=-b$，所以我們可以得出以下結論:

$$r+l=0,r-l=2r;t+b=0;t-b=2t;$$

所以最終的正交投影矩陣為：

$$\left[\begin{array}{cccc}\frac{1}{r}& 0& 0& 0\\ 0& \frac{1}{t}& 0& 0\\ 0& 0& -\frac{2}{f-n}& -\frac{f+n}{f-n}\\ 0& 0& 0& 1\end{array}\right]$$

Code

程式碼如下（Implement on C++）：

glm::mat4 GetOrthoProjMatrix(float left, float right, float bottom, float top, float near, float far) {
	glm::mat4 proj = glm::mat4(1.0f);

	proj[0][0] = 2 / (right - left);
	proj[1][0] = 0;
	proj[2][0] = 0;
	proj[3][0] = - (right + left) / (right - left);

	proj[0][1] = 0;
	proj[1][1] = 2 / (top - bottom);
	proj[2][1] = 0;
	proj[3][1] = - (top + bottom) / (top - bottom);

	proj[0][2] = 0;
	proj[1][2] = 0;
	proj[2][2] = -2 / (far - near);
	proj[3][2] = - (far + near) / (far - near);

	proj[0][3] = 0;
	proj[1][3] = 0;
	proj[2][3] = 0;
	proj[3][3] = 1;

	return proj;
}

Inverse Depth buffer

我們可以在片段著色器中獲取深度值，該值介於0到1之間：

gl_FragCoord.z

一般來說我們的投影矩陣就會把物品的

$z$ 值映射到近平面與遠平面之間，預設就是非線性的，如果想要將深度值改為線性模式，我們就必須要先反轉掉投影矩陣的轉換。
首先我們先將深度值從 Screen coordinates 轉為 NDC，這邊只是做做簡單的域值轉換，

$[0,1]$ 到

$[-1,1]$:

$$z_{ndc}=2z_w-1;$$

目前我們只是從 Window Coordinates 轉換成 Normalized Device Coordinates，而我們必須逆轉換投影矩陣對

$z_e$ 的非線性轉換，我們知道它的公式為：

$$z_{ndc}=(\frac{f+n}{n-f}\cdot z_e+\frac{2fn}{n-f})\cdot \frac{1}{-z_e}$$
化簡後得：

$$z_{ndc}=-\frac{z_e(f+n)+2fn}{z_e(n-f)}$$

接著開始逆向推倒：

$$\begin{gathered} z_{ndc}\cdot z_e(n-f)=-(z_e(f+n)+2fn) \\ =>z_{ndc}{z}_{e}n-z_{ndc}{z}_{e}f=-z_{e}f-z_{e}n-2fn \\ =>z_{ndc}{z}_{e}n-z_{ndc}{z}_{e}f+2fn=-z_{e}f-z_{e}n \\ =>2fn=-z_{e}f-z_{e}n-z_{ndc}{z}_{e}n+z_{ndc}{z}_{e}f \\ =>2fn=-z_e(f+n+z_{ndc}n-z_{ndc}f) \\ =>\frac{2fn}{(f+n+z_{ndc}n-z_{ndc}f)}=-z_e \\ =>z_e=-\frac{2fn}{(f+n-z_{ndc}(f-n))} \end{gathered}$$

最後，我們所求出來的

$z_e$ 是在觀察世界，相機面向負

$z$ 軸，所以

$z_e$ 為負，但用於計算深度時，我們要將其乘上

$-1$，所以實作於 code 時語法如下：

float z = gl_FragCoord.z * 2.0 - 1.0;
float linearDepth = (2.0 * far * near) / (far + near - z * (far - near));

Reference

http://www.songho.ca/opengl/gl_projectionmatrix.html
https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix/opengl-perspective-projection-matrix
https://learnopengl.com/Advanced-OpenGL/Depth-testing

tags: OpenGL