矩陣變換總結（模型矩陣，視圖矩陣，投影矩陣）
最近在開發項目的時候，常常用到Three.js，用起來很方便。可是，當引擎迭代升級的時候，以前的很多的技巧，並不一定使用最新的引擎。我認爲應當對底層的原生API有很深入的認識並掌握3D開發相關的數學知識才能成爲一個合格的3D開發人員。最近在參與編輯WebGL2.0的書籍，也趁着這個機會好好學習下計算及圖形學。
今天對變換流程做一個簡單的概述，後面的博客我將會和我的同學一起爲大家結合線性代數和計算機圖形學來講解每種變換矩陣的推導。
在《WebGL編程指南》序中，有一句話我非常喜歡，並分享給大家：
接下來，我們來看一下WebGL中的變換流程，或者說是Opengl es 3.0中的變換流程（以下圖片來源自網絡）：
1.模型變換及模型矩陣
局部（物體）座標系或者局部（物體）空間：
物體空間比較容易理解，就是需要繪製的3D物體所在的原始座標系代表的空間。例如在進行設計時，物體的幾何中心是擺放到座標系原點的，這個座標系代表的就是物體空間。
世界座標系或者世界空間：
世界空間也不難理解，就是物體在最終3D場景中的擺放位置對應的座標所屬的座標系代表的空間。
模型變換指的是將物體座標系下的物體變換到世界座標系下。模型變換通過乘以模型矩陣來實現。模型矩陣包含這平移，旋轉，縮放的信息。模型矩陣也可以稱作基本總變換矩陣。
我們需要注意的是：模型變換針對是整個局部座標系，或者說同一局部座標系下的所有物體，或者說所有座標。
2.視變化及視圖矩陣
攝像機座標系或者攝像機空間：物體經攝像機觀察後，進入攝像機空間。
視變化，是將世界座標系下的座標變化到攝像機座標系，視變換是通過乘以視圖矩陣實現的。
首先，我們要知道視並不存在真正的攝像機，只不過是在世界座標系裏面選擇一個點，作爲攝像機的位置。然後根據一些參數，在這個點構建一個座標系。然後通過 視圖矩陣將世界座標系的座標變換到攝像機座標系下。
WebGL成像採用的是虛擬相機模型。在場景中你通過模型變換，將物體放在場景中不同位置後，最終哪些部分需要成像，顯示在屏幕上，主要由視變換和後面要 介紹的投影變換、視口變換等決定。其中視變換階段，通過假想的相機來處理矩陣計算能夠方便處理。對於WebGL來說並不存在真正的相機，所謂的相機座標空 間(camera space 或者eye space)只是爲了方便處理，而引入的座標空間。
基於WebGL 2.0的視圖矩陣推導：https://blog.csdn.net/weixin_37683659/article/details/79830278
3.投影變換及投影矩陣
剪裁座標系或者剪裁空間：並不是攝像機空間中所有的物體都能最終被觀察到，只有在攝像機空間中位於視景體內（投影範圍內）的物體才能最終被觀察到。因此，將攝像機空間內視景體內的部分獨立出來經過處理後就成爲了剪裁空間。
投影變換是將攝像機座標系下的物體變換到剪裁座標系，投影變換是通過乘以投影矩陣實現。
投影方式有兩種，一種是正交投影，一種透視投影。
正交投影：投影到近平面上相同尺寸大小的圖形大小相同，不會有真實世界那種近大遠小的感覺。
透視投影：同樣尺寸的物體，近處的物體投影出來大，遠處的物體投影出小，會產生與真實世界一樣近大遠小的感覺。
在乘以投影矩陣後，任何一個點的座標[x,y,z,w]中的下x,y,z的分量將在-w~w內。
4.透視除法
標準設備座標系或者標準設備空間：對剪裁空間執行透視除法後得到的就是標準設備空間了，對於WebGL而言標準設備空間3個軸的座標範圍都是-1.0～1.0。
從剪裁座標系到標準設備座標系的變換是通過執行透視除法來完成的。所謂透視除法其實很簡單，就是將齊次座標[x,y,z,w]的4個分量都除以w，結果爲[x/w,y/w,z/w,1]，本質上就是對齊次座標進行了規範化。
需要指出，剪裁空間之後的變換就不歸開發人員管了，是由管線自動完成的。包括透視除法以及後面的視口變換。
6.視口變換
屏幕座標系或者窗口空間：實際窗口空間也很容易理解，其一般代表的是設備屏幕上的一塊矩形區域，用於呈現渲染結果，其座標以像素爲單位。
視口變換是從標準設備座標系到屏幕座標系變換，主要工作是將執行透視除法後的X、Y座標分量轉換爲屏幕座標系的XY像素座標。主要的思路是將標準設備空間的XY平面對應到視口上，將-1.0～1.0範圍內的X、Y座標折算爲視口上的像素座標。當然，這個部分也是由管線自動完成。視口範圍僅需要調用glViewPort這個函數進行設置即可。
7.總結
這裏只是做了一個變換流程簡單的概述，哪裏寫的不好，請多指教。