詳細講解了OpenGL\WebGL關于繪制場景的圖形變換過程，并推導了其圖形變換矩陣。主要包括模型變換、視圖變換以及投影變換。

1. 概述

通過之前的教程，對WebGL中可編程渲染管線的流程有了一定的認識。但是只有前面的知識還不足以繪制真正的三維場景，可以發現之前我們繪制的點、三角形的坐標都是[-1,1]之間，Z值的坐標都是采用的默認0值，而一般的三維場景都是很復雜的三維坐標。為了在二維視圖中繪制復雜的三維場景，需要進行相應的的圖形變換；這一篇教程，就是詳細講解WebGL的圖形變換的過程，這個過程同樣也適合OpenGL/OpenGL ES，甚至其他3D圖形接口。

可以用照相機拍攝照片來模擬這個圖形變換的過程，如果要對某個物體拍攝照片，大致過程如下：

1. 準備物體，把物體放置在某個合適的位置；這個過程就是模型變換（model transform）。
2. 準備照相機，把照相機移動到準備拍攝的位置；這個過程就是視圖變換（view transform）。
3. 設置相機的焦距，或者調整縮放比例；這個過程就是投影變換（projection transform）。
4. 對結果圖形進行拉伸或者擠壓，確定最終照片的大小；這個過程就是視口變換(viewport transform)。

而在WebGL/OpenGL中，具體的圖形變換流程如下所示^[3]：

其中模型變換、視圖變換、投影變換是我們自己在著色器里定義和實現的，而視口變換一般是WebGL/OpenGL自動完成的。這就好像我們拍照的時候，需要自己去調整位置，相機鏡頭焦距，而成像的過程就交給相機。所以模型變換、視圖變換、投影變換這三者特別重要，另外附一張WebGL/OpenGL矩陣變換的流程圖^[4]：

從上兩圖中可以發現，場景中的物體總是從一個坐標系空間轉換到另外一個坐標系空間。

1. 局部坐標系（Local Space）指的是物體最初開始的坐標系；而世界坐標系（World Space）指的是物體與WebGL/OpenGL相機建立聯系時的坐標系。這里的局部坐標系與世界坐標系跟通常意義的不同，只有與WebGL/OpenGL相機建立了聯系，才是這里規定的世界坐標系。為了建立聯系，經過的就是模型變換。
2. 進入世界坐標系空間之后，物體與WebGL/OpenGL相機雖然建立了聯系，但是并沒有進一步確定觀察物體的狀態。這個時候就需要調整相機位置姿態，也就是視圖變換，轉換成視圖坐標系（View Space），也可以簡稱為人眼坐標系（Eye Space），或者照相機坐標系（Camera Space）。
3. 在人眼坐標系空間中，雖然物體就在眼前了，但是還需要進一步去確定可視空間。就像人眼是把水平視角大約200度左右的場景投影到視網膜中，人才能看清物體的那樣，WebGL/OpenGL需要經過投影變換，才能正確的顯示場景。這個過程通常還順帶進行了場景的裁剪，將可視空間范圍外的東西去掉，所以投影變換后的坐標系就是裁剪坐標系（Clip Space）。
4. 最后一步就是通過視口變換，從裁剪坐標系轉換成屏幕坐標系，得到渲染結果。這一步由WebGL/OpenGL自動完成。

在參考文獻[2]中描述的WebGL/OpenGL整個圖形變換過程的坐標系和單位：

其流程與前文論述的基本一致，可以看到投影變換之后的過程不是那么簡單，還需要將得到的齊次裁剪坐標做透視除法（除以w），做剪切和視口/深度范圍變換，光柵化等。

其中，用戶/著色器變換（也就是教程要具體詳述的模型變換、視圖變換和投影變換）包含坐標系和單位如下所示：

2. 詳論

在一個三維軟件中瀏覽一個三維物體時候，總是會提供給用戶平移、縮放和旋轉的交互操作，而這正是模型變換的內容。在圖形學的范疇當中，平移變換、旋轉變換屬于剛體變換，縮放和旋轉屬于線性變換，剛體變換和線性變換又屬于仿射變換，而仿射變換也可以看成投影變換的一種^[5]。

也就是說這些圖形變換，本質上可以看成是同一種變換；在數學上，可以使用矩陣來描述這種變換。并且，為了兼容各種變換的特殊性，會在3維的基礎上再加一維，使用4維的向量和矩陣。4維向量表述一個點（x,y,z,w）等價于三維向量（x/w,y/w,z/w），這就是前面提到的齊次坐標。

具體來說，對于空間某個點v0(x0,y0,z0,1),經過空間圖像變換后得到新的點v1(x1,y1,z1,1),那么存在這樣一個4行4列的矩陣M：

$$ M= \left[ \begin{matrix} a & b & c & d \\ e & f & g & h\\ i & j & k & l\\ m & n & o & p\\ \end{matrix} \right] $$

滿足： $$ M*V0=V1 $$ 展開這個式子，有式(1)： $$ \left[ \begin{matrix} a & b & c & d \\ e & f & g & h\\ i & j & k & l\\ m & n & o & p\\ \end{matrix} \right] * \left[ \begin{matrix} x0\\y0\\z0\\1\\ \end{matrix} \right] = \left[ \begin{matrix} x1\\y1\\z1\\1\\ \end{matrix} \right] \tag{1} $$ 根據矩陣乘法，有方程組式(2): $$\begin{cases} a*x0 +b*y0 +c*z0 + d =x1\\ e*x0 +f*y0 +g*z0 +h =y1\\ i*x0 +j*y0 +k*z0 + l =z1\\ m*x0 +n*y0 +o*z0 + p =1 \end{cases} \tag{2} $$ 通過以上式子，就可以求得各種不同圖形變換矩陣。

1) 模型變換

模型變換包括平移變換、縮放變換和旋轉變換。從內容上來講，這幾種變換正好應對的三維交互操作的平移、變換和縮放。通過鼠標操作調整模型變換矩陣就可以實現一種簡單三維交互操作。

(1) 平移變換

對于一個點(x,y,z,1)，平移之后，得到的點就是（x+Tx,y+Ty,z+Tz,1），其中Tx、Ty、Tz分別表示點在X軸、Y軸、Z軸方向上移動的距離。那么將其代入方程組式(2)的兩邊，有：

$$\begin{cases} a*x +b*y +c*z + d =x+Tx\\ e*x +f*y +g*z +h =y+Ty\\ i*x +j*y +k*z + l =z+Tz\\ m*x +n*y +o*z + p =1 \end{cases} $$

那么根據多項式相等的原理，可以求得每個多項式系數，繼而可得平移矩陣T： $$ T= \left[ \begin{matrix} 1 & 0 & 0 & Tx \\ 0 & 1 & 0 & Ty\\ 0 & 0 & 1 & Tz\\ 0 & 0 & 0 & 1\\ \end{matrix} \right] $$

(2) 縮放變換

對于一個點(x,y,z,1)，以原點為中心縮放，在X方向縮放Sx倍，在Y方向縮放Sy倍，在Z方向縮放Sz倍，那么新的坐標值為（x*Sx,y*Sy,z*Sz,1）。將其代入方程組式(2)的兩邊，有：

$$\begin{cases} a*x +b*y +c*z + d =x*Sx\\ e*x +f*y +g*z +h =y*Sy\\ i*x +j*y +k*z + l =z*Sz\\ m*x +n*y +o*z + p =1 \end{cases} $$

同樣根據多項式相等的原理，求得縮放矩陣S： $$ S= \left[ \begin{matrix} Sx & 0 & 0 & 0 \\ 0 & Sy & 0 & 0\\ 0 & 0 & Sz & 0\\ 0 & 0 & 0 & 1\\ \end{matrix} \right] $$

(3) 旋轉變換

旋轉變換就稍微復雜一點，對旋轉變換而言，必須知道旋轉軸、旋轉方向和旋轉角度。可以繞X軸，Y軸和Z軸旋轉，所以一般都會有三個旋轉矩陣。以繞Z軸旋轉為例，在Z軸正半軸沿著Z軸負方向進行觀察，如果看到的物體是逆時針旋轉的，那么就是正旋轉，旋轉方向就是正的，旋轉值就是正數；反之如果旋轉值為負數，說明旋轉方向就是負的，沿著順時針旋轉。用更加通用的說法來說，正旋轉就是右手法則旋轉：右手握拳，大拇指伸直并使其指向旋轉軸的正方向，那么右手其余幾個手指就指明了旋轉的方向。

對于一個點p(x,y,z,1),繞Z軸旋轉，因為旋轉后的Z值不變，所以可以忽略Z值的變換，只考慮XY空間的變化。此時設r為原點到點p的距離，α是X軸旋轉到該點的角度。如圖所示：

那么p點的坐標表示為式(3)：

$$\begin{cases} x=r*cosα\\ y=r*sinα\\ \end{cases} \tag{3} $$

同樣的繞Z軸旋轉后，得到新的點p’，X軸旋轉到該點的角度為(α+β),其坐標值為： $$\begin{cases} x'=r*cos?(α+β)\\ y'=r*sin?(α+β)\\ \end{cases} $$ 根據三角函數兩腳和公式，可得式(4): $$\begin{cases} x'=r*(cos?α*cosβ-sinα*sinβ)\\ y'=r*(sin?α*cosβ+cosα*sinβ)\\ \end{cases} \tag{4} $$ 將式(3)代入到式(4),可得式(5)： $$\begin{cases} x'=x*cosβ-y*sinβ\\ y'=x*sinβ+y*cosβ\\ z'=z \end{cases} \tag{5} $$ 將式(5)代入到方程組式(2)的兩邊，有： $$\begin{cases} a*x +b*y +c*z + d =x*cosβ - y*sinβ\\ e*x +f*y +g*z +h = x*sinβ + y*cosβ\\ i*x +j*y +k*z + l = z\\ m*x +n*y +o*z + p =1\\ \end{cases} $$ 同樣根據多項式相等的原理，求得繞Z軸旋轉β角度時的旋轉矩陣Rz： $$ Rz= \left[ \begin{matrix} cosβ & -sinβ & 0 & 0 \\ sinβ & cosβ & 0 & 0\\ 0 & 0 & 1& 0\\ 0 & 0 & 0 & 1\\ \end{matrix} \right] $$ 用同樣的方式可以推導，繞X軸旋轉β角度時的旋轉矩陣Rx： $$ Rx= \left[ \begin{matrix} 1 & 0 & 0 & 0 \\ 0 & cosβ & -sinβ & 0\\ 0 & sinβ & cosβ & 0\\ 0 & 0 & 0 & 1\\ \end{matrix} \right] $$ 繞Y軸旋轉β角度時的旋轉矩陣Ry： $$ Ry= \left[ \begin{matrix} cosβ & 0 & sinβ & 0 \\ 0 & 1 & 0 & 0\\ -sinβ & 0 & cosβ & 0\\ 0 & 0 & 0 & 1\\ \end{matrix} \right] $$

(4) 組合變換

使用矩陣來描述圖形變換的好處之一就是能夠將以上所有的變換組合起來，例如如下式(6)：

表達的圖形變換是對于點v0，首先經過平移變換，再經過旋轉變換，最后再進行縮放，得到新的點v1。
根據矩陣乘法的結合律，式(6)可以寫成：

那么模型矩陣M就可以表示為：

注意上述模型矩陣的SRT順序并不是固定的，需要根據實際的情況采取合適的矩陣，否則會達不到想要的效果。一個重要的原則就是記住縮放變換總是基于原點的，旋轉變換總是基于旋轉軸的，在進行縮放變換和旋轉變換之前往往需要先平移變換至原點位置(不是絕對)。

2) 視圖變換

(1) 原理

視圖變換其實就是模型變換的逆變換。試想一下，拿一個物體給相機拍攝，其實也就是拿相機去拍攝一個物體，視圖變換和模型變換的結果并沒有顯著的區別，有些情況下兩者甚至可以合并成一個模型-視圖變換（model-view transform）。兩者之所以需要分開進行完全是由實際的交互操作決定的：旋轉、縮放到合適的位置其實是很難設置的，很多交互操作需要在視空間/攝像機空間中設置才比較合適，這個時候就需要視圖變換了。

視圖變換其實就是構建一個視空間/攝像機空間，需要三個條件量：

1. 視點eye：也就是觀察者/攝像機的位置；
2. 觀察目標點at：被觀察者目標所在的點，確定了視線方向；
3. 上方向up：最終繪制在屏幕上的影像中的向上的方向，通俗來講，就是用來控制是正著拍、橫著拍還是斜著拍。

通過上述三個條件量，就可以構建一個視圖矩陣。這個矩陣一般可以通過圖形矩陣庫的LookAt()函數進行設置，例如在WebGL的cuon-matrix.js中，其設置函數為：

(2) 推導

由前文得知，視圖變換構建了一個視空間/攝像機空間坐標系，為了對應于世界坐標系的XYZ，可以將其命名為UVN坐標系，它由之前提到的三個條件量構建而成：

1. 選取視線的方向為N軸：N = eye–at；并歸一化N。
2. 選取up和N的叉積為U軸： U= up×N，并歸一化U。
3. 選取N和U叉積得到V軸：V = N×U，并歸一化V。

如圖所示^[7]：

由于視圖變換是模型變換的逆變換，以上視圖變換的效果，等價于進行一個旋轉變換，再進行一個平移變換。故有視圖矩陣V：

根據之前平移矩陣的定義，那么有：

這里的(Tx,Ty,Tz)就是視點eye(eyeX, eyeY, eyeZ)。經過平移變換之后，相機的原點就和世界原點重合，剩下的操作就是通過旋轉矩陣R，將世界坐標系XYZ的點轉換到成UVN坐標系上的點。令：

則有：

又由旋轉矩陣R為正交矩陣，所以有：

最后即可得視圖矩陣：

$$ V=R^{-1} T^{-1}= \left[ \begin{matrix} Ux & Uy & Uz & 0 \\ Vx & Vy & Vz & 0 \\ Nx & Ny & Nz & 0 \\ 0 & 0 & 0 & 1 \\ \end{matrix} \right] * \left[ \begin{matrix} 1 & 0 & 0 & -Tx \\ 0 & 1 & 0 & -Ty\\ 0 & 0 & 1 & -Tz\\ 0 & 0 & 0 & 1\\ \end{matrix} \right] = \left[ \begin{matrix} Ux & Uy & Uz & -U·T \\ Vx & Vy & Vz & -V·T \\ Nx & Ny & Nz & -N·T \\ 0 & 0 & 0 & 1 \\ \end{matrix} \right] $$

3) 投影變換

投影變換定義的是一個可視空間，決定了哪些物體顯示，哪些物體不顯示，以及物體如何顯示。常用的可視空間有兩種：

• 四棱椎/金字塔可視空間，由透視投影產生；
• 長方體可視空間，由正射投影產生。

(1) 透視投影

a) 原理

投影投影模擬的就是人眼成像或者攝像機成像的過程，試想一下，攝像機拍攝的總是取景器方位內的物體，并且呈現近大遠小的效果。在WebGL/OpenGL中，透視投影就決定了一個視點、視線、近裁剪面、遠裁剪面組成的四棱椎可視空間。如圖所示：

在實際使用中，圖形矩陣庫(我這里用的WebGL的cuon-matrix.js)一般都會提供類似setPerspective()的函數，具體定義如下：

b) 推導

如圖所示，已知視空間坐標系XYZ，坐標系原點（視點）為O，視椎體近截面與視點距離為n，遠平面與視點的距離為f。已知視椎體空間中有一點為P(x0,y0,z0),那么要求的就是射線OP與近截面的投影點P1(x1,y1,z1)。如圖所示：

近截面與平面XOY平行，那么z1 = -near，那么問題可以簡化為：已知空間上點P的坐標，存在點P與坐標O連線上一點P1，P1的Z值已知，求P1坐標。如圖所示：

顯然這是一個三角形相似的問題,P1點在視空間坐標系的XY坐標為：

根據前文論述，投影變換得到的4維度齊次坐標(x1,y1,z1,w1),會除以w1使得x1和y1的值歸一化到-1到1之間。那么可設l和r分別為近截面左、右邊框的x坐標，那么就是l映射到-1，r映射到1。這是一個線性變換問題:存在兩組點（l，-1）（r，1）滿足方程y=kx+b。

解方程組：

那么P1歸一化后的x坐標xn為：

同理可得，P1歸一化之后y 坐標yn為：

可以發現，歸一化的坐標xn、yn都存在一個乘數因子（-1/z0），那么可以令投影變換后的w1=-z0，這樣就可以滿足歸一化之后的wn=1，并且滿足上面xn、yn的表達式。即有裁剪坐標系的點P1(x1,y1,z1,w1)：

代入到式(2)中，得：

繼續求上式的投影矩陣的第三行。投影轉換后得到的z1是一個深度值，它是一個與x0，y0無關的值，所以I=0，J=0。并且在歸一化之后，z1會成為一個-1到1之間的值：當z0=-n時（近截面），z1=-1；當 z0=-f時（遠截面），z1=1。代入上式，有：

得到：

綜合，可得透視投影矩陣P：

注意，通過類似setPerspective()的函數定義的矩陣是對稱的視錐體，視點在近截面的投影點為近截面的中心，因而有：

代入透視投影矩陣P，得到對稱透視投影矩陣P：

(2) 正射投影

a) 原理

正射投影一個很常見的應用就是地圖。無論是紙質地圖還是谷歌地圖，甚至于室內設計的戶型圖、工程設計的工程圖，無一例外全部都是正射投影。正射投影能夠很方便的比較場景中物體的大小，并且每個地方的所代表的大小都是一樣的（分辨率一致）。當然，在這種投影下是沒有深度感的，就像你在衛星地圖上是看不出一座山有多高的。

正射投影同樣也是近裁剪面和遠裁剪面組成的可視空間，只不過這個可視空間是個長方體，如圖所示：

同樣的，可以使用類似setOrtho()函數來設置正射投影：

b) 推導

在正射投影的盒狀可視空間中，XYZ三個方向上都是等比例的。設盒狀可視空間中某一物體點P(x0,y0,z0)，那么P點在近截面的投影點為P1(x0,y0,z0’),僅僅只是Z值不同。

同透視變換的推導一樣，將P1的X、Y坐標(x0,y0)映射到-1到1的范圍(xn,yn)。即有兩組點(l,-1)和(r,1)滿足式子(線性關系y=kx+b):

有兩組點(b,?1)和(t,1)滿足式子(線性關系y=kx+b)：

分別代入解方程組，可得：

同樣的，在Z方向上，將z0映射成-1到1直接的值：當點在近截面時，映射成-1；當點在遠截面時，映射成1。故也有兩組點(-n,-1)和(-f,1)滿足線性關系y=kx+b，同理可求得：

對于正射變換而言，w變量是不必要的，可直接令w=1。那么裁剪坐標P1(x1,y1,z1,w1)就是經過透視除法的標準化設備坐標(xn,yn,zn,1)。故有：

代入到式(2)的兩邊，可得正射投影矩陣：

3. 綜合運用

綜上所述，模型矩陣M，視圖矩陣V，投影矩陣P，同時作用于物體的頂點，使得最終的物體能后被看見或者進行UI操作。根據之前教程內容，逐頂點的操作可以將其放入到頂點著色器。一般而言，先進行模型變換，再進行視圖變換，最后進行投影變換：

$$ v1=P*V*M*v0 $$

根據矩陣乘法的結合律：

$$ v1=(P*V*M)*v0 $$

這個P*V*M矩陣合并得到的模型視圖投影矩陣（model view projection matrix），簡稱為MVP矩陣。在實際使用過程中，只需要將這個MVP矩陣傳入到頂點著色器，就能根據設置的矩陣得到想要的渲染效果：

gl_Position = u_MvpMatrix * a_Position;

這一篇教程是純理論知識，相對來說不太容易理解。如果是初次接觸，至少應該先做大致的了解，后續會大量用到這里的知識。

4. 參考

[1]《WebGL編程指南》
[2]《OpenGL編程指南》第八版
[3] OpenGL學習腳印: 投影矩陣和視口變換矩陣(math-projection and viewport matrix)
[4] OpenGL矩陣變換的數學推導
[5] 基本圖像變換：線性變換,仿射變換，投影變換
[6] 旋轉變換（一）旋轉矩陣
[7] 視圖矩陣的推導

5. 其他

代碼和數據地址

上一篇
目錄
下一篇