WebGL學習筆記（五）：變換庫

在WebGL開始繪製以前，咱們須要經過本身對3D空間進行矩陣和向量的運算，使用網上已經成熟的轉換庫，能夠避免本身去實現這些複雜的數學運算。

咱們這裏選擇的是gl-matrix庫，下載地址： https://github.com/toji/gl-matrix

變換運算

在最終開始繪製以前，咱們須要把3D世界中的物體的座標系轉換爲WebGL的座標系，肯定最終繪製的位置。

模型變換（頂點着色器階段處理）

模型變換用來肯定一個模型在世界座標系中的位置，全部的模型都有一個世界座標系的矩陣，保證全部模型都處於同一個座標系（即世界座標系）之中，模型變換包括平移，旋轉和縮放；

視圖變換（頂點着色器階段處理）

有了世界座標系以後還不夠，還須要一個一樣位於該座標系之中的攝像機的矩陣，用來表示觀察者觀看的位置和角度；

模型視圖變換（頂點着色器階段處理）

該變換就是模型變換和視圖變換相乘以後的變換矩陣；

 

投影變換（頂點着色器階段處理）

咱們在這一步獲得了物體在攝像機中看起來的最終座標，可是和咱們人眼能夠看見的景象仍是有所區別，好比咱們看世界上的東西都是由一種近大遠小的透視效果，投影變換就是用來實現這些效果的變換；

正交投影

正交投影，能夠看作是一種平行投影，正交投影下的物體沒有近大遠小的視覺效果，不管遠近看起來都是同樣大的，該投影通常用在2D或2.5D（通常是3D角色2D場景）遊戲中，3D遊戲的UI實現也會用到該投影；

使用gl-matrix庫建立正交投影代碼以下：

1 var m4 = glMatrix.mat4.create();
2 // 經過設定每一個面的大小肯定投影區域
3 glMatrix.mat4.ortho(m4, -100, 100, -100, 100, -100, 100);

透視投影

透視投影，能夠模擬人眼所看見的3D世界的近大遠小的視覺效果，該投影通常用在3D遊戲中；

使用gl-matrix庫建立透視投影代碼以下：

1 var m4 = glMatrix.mat4.create();
2 // 方法1：經過垂直範圍、高寬比和近遠面肯定投影區域
3 glMatrix.mat4.perspective(m4, 1, 1, 0, 100);
4 // 方法2：經過設定每一個面的大小肯定投影區域
5 glMatrix.mat4.frustum(m4, -100, 100, -100, 100, -100, 100);

透視除法（圖元裝配階段處理）

透視除法即便用w份量除以x,y,z份量（w默認值是1），產生三維的透視效果。

更多的信息能夠參考：https://www.jianshu.com/p/7e701d7bfd79

視口變換（圖元裝配階段處理）

視口變換主是將三維空間中的物體投影到二維的平面上，在計算機圖形學中，它的定義是將通過幾何變換，投影變換和裁剪變換後的物體顯示於屏幕指定區域內。

用戶能夠經過調用兩個方法來控制這個步驟的變換：

gl.viewPort

肯定最終顯示的位置和尺寸，單位爲像素；

gl.depthRange

肯定最終能夠顯示出來的深度區域，可選範圍[0-1]；

完整的變換管線（變換流水線）以下圖所示

變換順序的重要性

3D應用中矩陣的乘法很是重要，咱們須要注意的是，矩陣的兩個乘數交換以後，獲得的結果是不同的。

MN≠NM

能夠看下面的圖直觀的瞭解下不一樣的變換順序獲得不一樣的結果：

 

變換矩陣堆棧

通常說來，矩陣堆棧經常使用於構造具備繼承性的模型，即由一些簡單目標構成的複雜模型。例如，一輛自行車就是由兩個輪子、一個三角架及其它一些零部件構成的。它的繼承性表如今當自行車往前走時，首先是前輪旋轉，接着是後輪旋轉，而後整個車身向前平移，如此進行下去，這樣自行車就往前走了。

另外當咱們須要實現複雜模型繪製時，會須要全局座標和本地座標的概念，好比，一個桌子放在全局座標的某個位置上，這個桌子內部包含了一個桌面和四個腿，這5個模型的矩陣的數據是相對桌子的本地座標，而不是記錄全局座標，咱們但願，在桌子的矩陣改變時，內部的5個模型的本地矩陣不須要改變。

入棧

當前矩陣乘於棧頂矩陣以後的值，做爲新的棧頂矩陣壓入棧中，能夠理解爲當前棧頂矩陣就是的本地座標使用的矩陣；

出棧

彈出棧頂的矩陣，當前的棧頂矩陣就是上一個本地座標的父級座標矩陣；

經過變換矩陣堆棧繪製桌子：

1. 壓入桌子的矩陣；
2. 用棧頂矩陣乘於桌面的矩陣，獲得桌面位於全局座標的矩陣；
3. 壓入桌面的矩陣，當桌面上須要繪製物體時，可使用該棧頂矩陣乘於須要繪製的物體的矩陣；
4. 桌面已經沒有物體須要繪製了，彈出棧頂的矩陣（即桌面的矩陣）；
5. 此時棧頂的矩陣即桌子的矩陣，用棧頂的矩陣乘於第一個腿的矩陣，獲得第一個腿的全局座標的矩陣；

如此往復，直到繪製完全部的模型；

示例

https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_3/index.html