WebGL 進入三維世界

1.觀察目標點和上方向

    爲了肯定觀察者的狀態，你須要獲取兩項信息：視點，即觀察者的位置；觀察目標點（look-at point），即被觀察目標所在的點，它能夠用來肯定視線。此外，由於咱們須要把觀察到的景象繪製到屏幕上，還須要知道上方向（up direction）。有了這三項信息，就能夠肯定觀察者的狀態了。

    視點：觀察者所在的三維空間中位置，視線的起點。視點座標通常用(eyeX, eyeY, eyeZ)表示。
    觀察目標點：被觀察目標所在的點。只有同時知道觀察目標點和視點，才能算出視線方向。觀察目標點的座標用（atX、atY、atZ）表示。
    上方向：最終繪製在屏幕上的影像中的向上方向。用（upX，upY，upZ）表示。

2.建立視圖矩陣（view matrix）

    咱們能夠用視點、觀察目標點、上方向三個矢量建立一個視圖矩陣。coun-matrix.js提供的Matrix4.setLookAt()函數能夠根據上述三個矢量，建立出視圖矩陣。函數定義爲Matrix4.setLookAt(eyeX, eyeY, eyeZ, atX, atY, atZ, upX, upY, upZ)。參數：
    eyeX,eyeY, eyeZ:指定視點
    atX, atY, atZ:指定觀察者
    upX, upY, upZ：指定上方向，若是上方向是Y軸正方向那麼矢量就是（0， 1， 0）。

3.模型矩陣

    咱們知道，若是想旋轉圖形，就須要用旋轉矩陣乘以旋轉前的頂點座標：
    <旋轉後頂點座標> = <旋轉矩陣> * <原始頂點座標>

    用視圖矩陣乘以旋轉後的頂點座標，就能夠得到「從視點看上去」的旋轉後的頂點座標：

    <‘從視點看上去’的旋轉後頂點座標> = <視圖矩陣> * <旋轉矩陣> * <原始頂點座標>

    除了旋轉矩陣，還能夠用平移、縮放等基本變換矩陣或它們的組合，這時矩陣被稱爲模型矩陣（model matrix）。這樣就能夠寫成：

    <視圖矩陣>*<模型矩陣>*<原始頂點座標>

4.模型視圖矩陣

    視圖矩陣和模型矩陣相乘的積被稱爲模型視圖矩陣（model view matrix）。變換後結果可寫爲：

    <模型視圖矩陣>*<頂點座標>

5.可視空間

    除了水平和垂直範圍內的限制，WebGL還限制觀察者的但是深度，即「可以看多遠」。全部這些限制，包括水平視角、垂直視角、可視深度，定義了可視空間（view volume）。若是咱們沒有顯示地指定可視空間，默認的但是深度又不夠圓，因此有些圖形某些部分看不到。

    有兩種類型的可視空間：

    長方形但是空間，也稱盒狀空間，由正射投影（orthogrphic projection）產生。

    四棱錐/金字塔但是空間，由透視投影（perspective projection）產生。

6.盒狀可視空間

    盒狀可視空間以下圖所示。可視空間由先後兩個矩形表面肯定，分別稱爲近裁剪面（near clipping plane）和遠裁剪面（far clipping plane），前者的四個頂點爲（right、top、-near）、（-left、top、-near）、（-left、-bottom，-near）、（right、-bottom、-near），然後者的四個頂點爲（right、top、far）、（-left、top、far）、（-left，-bottom、far）、（right、-bottom、far）。

7.正射投影矩陣和視圖矩陣運算

    若是程序涉及兩個矩陣。在頂點着色器中，咱們須要用視圖矩陣乘以頂點座標，獲得頂點在視圖座標系下的座標，再左乘正射投影矩陣並賦值給gl_Position。計算過程以下：

    <正射投影矩陣> * <視圖矩陣> * <頂點座標>

8.透視投影可視空間

    透視投影可視空間如圖所示。就像盒狀可視空間那樣，透視投影可視空間也有視點、視線、近裁剪面、遠裁剪面。

    不管是透視投影可視空間仍是盒狀可視空間，咱們都用投影矩陣來表示它，可是定義矩陣的參數不一樣。Matrix4對象的setPerspective()方法可用來定義透視投影可視空間。

    定義了透視投影可視空間的矩陣被稱爲透視投影矩陣（perspective projection matrix）。

9.隱藏面消除

    WebGL提供了隱藏面消除（hidden surface removal）功能。這個功能會幫助咱們消除那些被遮擋的表面（隱藏面），你能夠放心地繪製場景而沒必要估計個物體在緩衝區中的順序。開啓隱藏面消除功能。須要遵循如下兩步：

    1.開啓隱藏面消除功能

    gl.enable(gl.DEPTH_TEST);

    2.在繪製以前，清除深度緩衝區

    gl.clear(gl.DEPTH_BUFFER_BIT);

    在清理深度緩衝區的同時還要清理顏色緩衝區，全部能夠用按位或（|）鏈接gl.DEPTH_BUFFER_BIT和gl.COLOR_BUFFER_BIT:

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

10.gl.enable(cap)

    開啓cap表示的功能（capability）。參數：

    cap:指定須要開啓的功能，有多是如下幾個：gl.DEPTH_TEST隱藏面消除，g.BLEND混合，gl.POLYGON_OFFSET_FILL多邊形移位等

11.gl.diable(cap)

    關閉cap表示的功能。參數：

    cap：與gl.enable()相同

12.深度衝突（Z fighting）

    當幾何圖形或物體的兩個表面極爲接近時，使得表面看上去斑斑駁駁的。這種現象被稱爲深度衝突。下圖左邊是深度衝突的效果：

    WebGL提供一種被稱爲多邊形偏移（polygon offset）機制解決這個問題。該機制自動在Z值加上一個偏移量。啓動該機制只須要兩行代碼：

    1.啓動多邊形編譯

gl.enable(gl.POLYGON_OFFSET_FILL);

    2.在繪製以前指定用來計算偏移量的參數

gl.polygonOffset(1.0, 1.0);

13.gl.polygonOffset(factor, units)

    指定加到每一個頂點繪製後的Z值上的偏移量，偏移量按照公式「m*factor+r*units」計算，其中m表示頂點所在表面相對於觀察者的視線的角度，而r表示硬件可以區分兩個z值之差的最小值。

14.gl.drawElements(mode, count, type, offset)

    執行着色器，按照mode參數指定的方式，根據綁定到gl.ELEMENT_ARRAY_BUFFER的緩衝區中的頂點索引值繪製圖形。參數：

    mode：指定繪製的方式，可接收如下常量符號：gl.POINTS、gl.LINES、gl.LINE_STRIP、gl.LINE_LOOP、gl.TRIANGLES、gl.TRIANGLES_STRIP、gl.TRIANGLES_FAN

    count:指定繪製頂點的個數（整形數）

    type:指定索引數組類型：gl.UNSIGNED_BYTE或gl.UNSIGNED_SHORT

    offset:指定索引數組開始繪製的位置，以字節爲單位

15.gl.readPixels(x, y, width, height, format, type, pixels)

    從顏色緩衝區中讀取由x、y、width、height參數肯定的矩形塊中的全部像素值，並保存在pixels指定的數組中。參數：

    x,y:指定顏色緩衝區中矩形塊左上角的座標，同時也是讀取的第一個像素的座標

    width，height：指定矩形塊的寬度和高度，以像素爲單位

    format：指定像素值得顏色格式，必須爲gl.RGBA

    type：指定像素值的數據格式，必須爲gl.UNSIGNED_BYTE

    pixels:指定用來接收像素數據的Uint8Array類型化數組

    讀取的x,y的原點是從左下角開始，而不是從左上角開始。加入canvas長、寬分別爲100、30，那麼右下角的座標爲(100, 0)。