# 第三課： 矩陣
引擎完全沒有推動飛船。飛船靜止在原處，而引擎推動了環繞著飛船的宇宙。
*《飛出個未來》(一部美國科幻動畫片)*
> 這一課是所有課程中最重要的。請至少看八遍。
## 齊次坐標（Homogeneous coordinates）
目前為止，我們仍然把三維頂點視為三元組(x, y, z)。現在引入一個新的分量w，得到向量(x, y, z, w)。
請先記住以下兩點（稍后我們會給出解釋）：
若w==1，則向量(x, y, z, 1)為空間中的點。
若w==0，則向量(x, y, z, 0)為方向。
`（事實上，要永遠記著。）`
這有什么不同呢？對于旋轉，二者沒什么不同。當你旋轉點和方向時，結果是一樣的。但對于平移（將點沿著某個方向移動），情況就不同了。『平移一個方向』是毫無意義的。
齊次坐標使我們能用同一個公式對點和方向作運算。
## 變換矩陣（Transformation matrices）
### 矩陣簡介
簡而言之，矩陣就是一個行、列數固定的，縱橫排列的數表。比如，一個2×3矩陣看起來像這樣：
三維圖形學中我們只用到4×4矩陣，它能對頂點(x, y, z, w)作變換。這一變換是用矩陣左乘頂點來實現的：
矩陣x頂點（記住順序！！矩陣左乘頂點，頂點用列向量表示）= 變換后的頂點
這看上去復雜，實則不然。左手指著a，右手指著x，得到ax。 左手移向右邊一個數b，右手移向下一個數y，得到by。依次類推，得到cz、dw。最后求和ax + by + cz + dw，就得到了新的x！每一行都這么算下去，就得到了新的(x, y, z, w)向量。
這種重復無聊的計算就讓計算機代勞吧。
**用C++，GLM表示：**
~~~
glm::mat4 myMatrix;
glm::vec4 myVector;
// fill myMatrix and myVector somehow
glm::vec4 transformedVector = myMatrix * myVector; // Again, in this order ! this is important.
~~~
**用GLSL表示：**
~~~
mat4 myMatrix;
vec4 myVector;
// fill myMatrix and myVector somehow
vec4 transformedVector = myMatrix * myVector; // Yeah, it's pretty much the same than GLM
~~~
`（還沒把這些復制到你的代碼里跑跑嗎？趕緊試試！）`
### 平移矩陣（Translation matrices）
平移矩陣是最簡單易懂的變換矩陣。平移矩陣是這樣的：
其中，X、Y、Z是點的位移增量。
例如，若想把向量(10, 10, 10, 1)沿X軸方向平移10個單位，可得：
`（算算看！一定要動手算算！！）`
這樣就得到了齊次向量(20, 10, 10, 1)！記住，末尾的1表示這是一個點，而不是方向。經過變換計算后，點仍然是點，很合理。
下面來看看，對一個代表Z軸負方向的向量，作上述平移變換會得到什么結果：
即還是原來的(0, 0, -1, 0)方向，這也很合理，正好印證了前面的結論：“平移一個方向是毫無意義的”。
那怎么用代碼表示平移變換呢？
**用C++，GLM表示：**
~~~
#include <glm/transform.hpp> // after <glm/glm.hpp>
glm::mat4 myMatrix = glm::translate(10,0,0);
glm::vec4 myVector(10,10,10,0);
glm::vec4 transformedVector = myMatrix * myVector; // guess the result
~~~
**用GLSL表示：**呃，實際中我們幾乎不用GLSL做。大多數情況下在C++代碼中用glm::translate()算出矩陣，然后把它傳給GLSL。在GLSL中只做一次乘法：
~~~
vec4 transformedVector = myMatrix * myVector;
~~~
### 單位矩陣（Identity matrix）
單位矩陣很特殊，它什么也不做。我提到它是因為，知道它和知道A*1.0=A一樣重要。
用C++表示：
~~~
glm::mat4 myIdentityMatrix = glm::mat4(1.0);
~~~
### 縮放矩陣（Scaling matrices）
縮放矩陣也很簡單：
例如把一個向量（點或方向皆可）沿各方向放大2倍：
w還是沒變。你也許會問：“縮放一個向量”有什么用？嗯，大多數情況下是沒什么用，所以一般不會去做；但在某些罕見情況下它就有用了。（順便說一下，單位矩陣只是縮放矩陣的一個特例，其(X, Y, Z) = (1, 1, 1)。單位矩陣同時也是旋轉矩陣的一個特例，其(X, Y, Z)=(0, 0, 0)）。
**用C++表示：**
~~~
// Use #include <glm/gtc/matrix_transform.hpp> and #include <glm/gtx/transform.hpp>
glm::mat4 myScalingMatrix = glm::scale(2,2,2);
~~~
### 旋轉矩陣（Rotation matrices）
旋轉矩陣比較復雜。這里略過細節，因為日常應用中，你并不需要知道矩陣的內部構造。想了解更多，請看[矩陣和四元組常見問題](http://www.cs.princeton.edu/~gewang/projects/darth/stuff/quat_faq.html)（這個資源很熱門，應該有中文版吧）。
**用C++表示：**
~~~
// Use #include <glm/gtc/matrix_transform.hpp> and #include <glm/gtx/transform.hpp>
glm::vec3 myRotationAxis( ??, ??, ??);
glm::rotate( angle_in_degrees, myRotationAxis );
~~~
### 復合變換
前面已經學習了如何旋轉、平移和縮放向量。要是能將它們組合起來就更好了。只需把這些矩陣相乘即可，例如：
~~~
TransformedVector = TranslationMatrix * RotationMatrix * ScaleMatrix * OriginalVector;
~~~
！！！千萬注意！！！這行代碼最先執行縮放，接著旋轉，最后才是平移。這就是矩陣乘法的工作方式。
變換的順序不同，得出的結果也不同。體驗一下：
- 向前一步（小心別磕著愛機）然后左轉；
- 左轉，然后向前一步
實際上，上述順序正是你在變換游戲人物或者其他物體時所需的：先縮放；再調整方向；最后平移。例如，假設有個船的模型（為簡化，略去旋轉）：
`錯誤做法：`
-
按(10, 0, 0)平移船體。船體中心目前距離原點10個單位。
-
將船體放大2倍。以原點為參照，每個坐標都變成原來的2倍，就出問題了。……最后你是得到一艘放大的船，但其中心位于2*10=20。這可不是你想要的結果。
`正確做法：`
-
將船體放大2倍，得到一艘中心位于原點的大船。
-
平移船體。船大小不變，移動距離也正確。
矩陣-矩陣乘法和矩陣-向量乘法類似，所以這里也會省略一些細節，不清楚的請移步“矩陣和四元數常見問題”。現在，就讓計算機來算：
**用C++，GLM表示：**
~~~
glm::mat4 myModelMatrix = myTranslationMatrix * myRotationMatrix * myScaleMatrix;
glm::vec4 myTransformedVector = myModelMatrix * myOriginalVector;
~~~
**用GLSL表示：**
~~~
mat4 transform = mat2 * mat1;
vec4 out_vec = transform * in_vec;
~~~
## 模型（Model）、視圖（View）和投影（Projection）矩陣
*在接下來的課程中，我們假定已知繪制Blender經典三維模型：小猴Suzanne的方法。*
利用模型、視圖和投影矩陣，可以將變換過程清晰地分解為三個階段。這個方法你可以不用（我們在前兩課就沒用），但最好要用。我們即將看到，它們把整個流程劃分得很清楚，故被廣為使用。
### 模型矩陣
這個三維模型，和我們心愛的紅色三角形一樣，是由一組頂點定義的。頂點的XYZ坐標是相對于物體中心定義的：也就是說，若某頂點位于(0, 0, 0)，它就在物體的中心。
也許玩家需要用鍵鼠控制這個模型，所以我們希望能夠移動它。這簡單，只需學會：縮放*旋轉*平移就行了。在每一幀中，用算出的這個矩陣，去乘（在GLSL中乘，不是C++中！）所有的頂點，物體就動了。唯一不動的就是世界坐標系（World Space）的中心。
現在，物體所有頂點都位于世界坐標系。下圖中黑色箭頭的意思是：*從模型坐標系（Model Space）（頂點都相對于模型的中心定義）變換到世界坐標系（頂點都相對于世界坐標系中心定義）。*
下圖概括了這一過程：
### 視圖矩陣
這里再引用一下《飛出個未來》：
引擎完全沒有推動飛船。飛船靜止在原處，而引擎推動了環繞著飛船的宇宙。
仔細想想，相機的原理也是相通的。如果想換個角度觀察一座山，你可以移動相機也可以……移動山。后者在生活中不可行，在計算機圖形學中卻十分方便。
起初，相機位于世界坐標系的原點。移動世界只需乘上一個矩陣。假如你想把相機向右（X軸正方向）移動3個單位，這和把整個世界（包括網格）向左（X軸負方向）移3個單位是等效的！腦子有點亂？來寫代碼：
~~~
// Use #include <glm/gtc/matrix_transform.hpp> and #include <glm/gtx/transform.hpp>
glm::mat4 ViewMatrix = glm::translate(-3,0,0);
~~~
下圖展示了：從世界坐標系（頂點都相對于世界坐標系中心定義）到觀察坐標系（Camera Space，頂點都相對于相機定義）的變換。
**在腦袋撐爆前，來欣賞一下GLM偉大的glm::LookAt函數吧：**
~~~
glm::mat4 CameraMatrix = glm::LookAt(
cameraPosition, // the position of your camera, in world space
cameraTarget, // where you want to look at, in world space
upVector // probably glm::vec3(0,1,0), but (0,-1,0) would make you looking upside-down, which can be great too
);
~~~
下圖解釋了上述變換過程：
還沒完呢。
### 投影矩陣
現在，我們處于觀察坐標系中。這意味著，經歷了這么多變換后，現在一個坐標為(0,0)的頂點，應該被畫在屏幕的中心。但僅有x、y坐標還不足以確定物體是否應該畫在屏幕上：它到相機的距離（z）也很重要！兩個x、y坐標相同的頂點，z值較大的一個將會最終顯示在屏幕上。
這就是所謂的透視投影（perspective projection）：
好在用一個4×4矩陣就能表示這個投影1 :
~~~
// Generates a really hard-to-read matrix, but a normal, standard 4x4 matrix nonetheless
glm::mat4 projectionMatrix = glm::perspective(
FoV, // The horizontal Field of View, in degrees : the amount of "zoom". Think "camera lens". Usually between 90° (extra wide) and 30° (quite zoomed in)
4.0f / 3.0f, // Aspect Ratio. Depends on the size of your window. Notice that 4/3 == 800/600 == 1280/960, sounds familiar ?
0.1f, // Near clipping plane. Keep as big as possible, or you'll get precision issues.
100.0f // Far clipping plane. Keep as little as possible.
);
~~~
最后一個變換：
*從觀察坐標系（頂點都相對于相機定義）到齊次坐標系（Homogeneous Space）（頂點都在一個小立方體中定義。立方體內的物體都會在屏幕上顯示）的變換。*
最后一幅圖示：
再添幾張圖，以便大家更好地理解投影變換。投影前，藍色物體都位于觀察坐標系中，紅色的東西是相機的視域四棱錐（frustum）：這是相機實際能看見的區域。
用投影矩陣去乘前面的結果，得到如下效果：
此圖中，視域四棱錐變成了一個正方體（每條棱的范圍都是-1到1，圖上不太明顯），所有的藍色物體都經過了相同的形變。因此，離相機近的物體就顯得大一些，遠的顯得小一些。和真實生活中一樣！
讓我們從視域四棱錐的“后面”看看它們的模樣：
這就是你得出的圖像了！看上去太方方正正了，因此，還需要做一次數學變換使之適合實際的窗口大小：
這就是實際渲染的圖像啦！
### 復合變換：模型視圖投影矩陣（MVP）
… 再來一串親愛的矩陣乘法：
~~~
// C++ : compute the matrix
glm::mat3 MVPmatrix = projection * view * model; // Remember : inverted !
// GLSL : apply it
transformed_vertex = MVP * in_vertex;
~~~
## 總結
**第一步：創建模型視圖投影（MVP）矩陣。任何要渲染的模型都要做這一步。**
~~~
// Projection matrix : 45° Field of View, 4:3 ratio, display range : 0.1 unit 100 units
glm::mat4 Projection = glm::perspective(45.0f, 4.0f / 3.0f, 0.1f, 100.0f);
// Camera matrix
glm::mat4 View = glm::lookAt(
glm::vec3(4,3,3), // Camera is at (4,3,3), in World Space
glm::vec3(0,0,0), // and looks at the origin
glm::vec3(0,1,0) // Head is up (set to 0,-1,0 to look upside-down)
);
// Model matrix : an identity matrix (model will be at the origin)
glm::mat4 Model = glm::mat4(1.0f); // Changes for each model !
// Our ModelViewProjection : multiplication of our 3 matrices
glm::mat4 MVP = Projection * View * Model; // Remember, matrix multiplication is the other way around
~~~
**第二步：把MVP傳給GLSL**
~~~
// Get a handle for our "MVP" uniform.
// Only at initialisation time.
GLuint MatrixID = glGetUniformLocation(programID, "MVP");
// Send our transformation to the currently bound shader,
// in the "MVP" uniform
// For each model you render, since the MVP will be different (at least the M part)
glUniformMatrix4fv(MatrixID, 1, GL_FALSE, &MVP[0][0]);
~~~
**第三步：在GLSL中用MVP變換頂點**
~~~
in vec3 vertexPosition_modelspace;
uniform mat4 MVP;
void main(){
// Output position of the vertex, in clip space : MVP * position
vec4 v = vec4(vertexPosition_modelspace,1); // Transform an homogeneous 4D vector, remember ?
gl_Position = MVP * v;
}
~~~
**完成！三角形和第二課的一樣，仍然在原點(0, 0, 0)，然而是從點(4, 3, 3)透視觀察的；相機的上方向為(0, 1, 0)，視場角（field of view）45°。**
第6課中你會學到怎樣用鍵鼠動態修改這些值，從而創建一個和游戲中類似的相機。但我們會先學給三維模型上色（第4課）、貼紋理（第5課）。
## 練習
**試著替換glm::perspective**
**不用透視投影，試試正交投影（orthographic projection ）（glm::ortho）**
**把ModelMatrix改成先平移，再旋轉，最后放縮三角形**
**其他不變，但把模型矩陣運算改成平移-旋轉-放縮的順序，會有什么變化？如果對一個人作變換，你覺得什么順序最好呢？**
*附注*
*1 : [...]好在用一個4×4矩陣就能表示這個投影：實際上，這句話并不對。透視變換不是仿射（affine）的，因此，透視投影無法完全由一個矩陣表示。向量與投影矩陣相乘之后，它齊次坐標的每個分量都要除以自身的W（透視除法）。W分量恰好是-Z（投影矩陣會保證這一點）。這樣，離原點更遠的點，被除了較大的Z值；其X、Y坐標變小，點與點之間變緊，物體看起來就小了，這才產生了透視效果。*
