WebGL學習筆記（一）：理解基本概念和渲染管線

WebGL 是以 OpenGL ES 2.0 爲基礎的 3D 編程應用接口。

渲染管線（圖形流水線）

渲染管線是指將數據從3D場景轉換成2D圖像，最終在屏幕上顯示出來的總過程。它分爲幾個階段：應用階段、幾何階段和光柵階段，關於這3個階段的詳細介紹能夠點這裏查看。

下面咱們來仔細看看 WebGL 中的每一個步驟：

1.頂點着色器

頂點着色器通常用來對模型的頂點進行矩陣變換，通常就是將模型的全部頂點乘於一個變換矩陣，使該模型位於相對於WebGL座標系中的某個位置。

頂點着色器是可編程的，使用的語言是 GLSL 來進行編寫，下面咱們主要說一下幾種經常使用的屬性類型：

• attribute變量：用戶自定義變量，通常是存儲頂點屬性的變量；
• uniform變量：恆值變量，通常表示每一個頂點都一致的變量，好比變換矩陣、光照等；
• varying變量：易變變量，將頂點着色器的數據傳遞給片斷着色器時使用；
• 內置常量：WebGL 內部的常量；

2.圖元裝配

這個階段，GPU會將咱們傳入的頂點裝配成三角形、線段或者點；裝配好以後，會自動截去不在可視區域內的信息；

3.光柵化

這個階段，GPU會將裝配好的三角形轉換成對應的像素，並將這些像素傳入下一個階段；

4.片斷着色器

獲得光柵化的片斷像素位置數據以後，就能夠經過片斷着色器爲這些像素進行上色了，這是第二個能夠編程的地方；

咱們能夠對圖片進行採樣以後，再這裏進行上色；

5.逐片斷操做

本步驟包含了多個子操做，每一個操做都會影響當前片斷最終的顯示效果，下面咱們看下幾個常見的子操做：

1.裁剪測試

會有一個裁剪的範圍，若是像素位於該範圍以外，會被剔除，不會到達繪製緩存；

2.多重採樣片斷操做

這一步會修改像素的alpha值和覆蓋值，主要用來實現抗鋸齒的效果；

3.背面剔除

剔除是一種經過避免渲染背對觀察者的幾何體面來提升性能的優化措施，好比一個立方體，你不會看到背離你的那一面（老是隻有一面在你的前方），所以咱們不須要繪製出背面；

4.alpha測試

指的是將一個像素點的alpha值和一個固定值比較，若是比較的結果失敗，像素將不會被寫到顯示輸出中；

5.模板測試

模板緩存與顏色緩存的大小一致，模板緩存中的像素點與後臺緩存的像素點是一一對應的。

模板緩存容許咱們動態地、有針對性地決定是否將某個像素寫入後臺緩存中。模板緩存用與得到某種特效，如鏡面效果或陰影效果。在實現鏡面效果時，咱們在「鏡子」這塊區域中繪製某個特定物體的映像，而使用模板緩存來阻止物體映像在「非鏡子」的區域中進行繪製；

爲了進行這種阻止，就須要使用模板測試。判斷是否將某個像素寫入後臺緩存的決策過程，稱爲模板測試；

6.alpha融合

融合技術能使咱們將當前要進行的光柵化的像素的顏色與先前已經光柵化並處於同一位置的像素的顏色進行合成，即將正在處理的圖元顏色值與存儲中後臺緩存中的像素顏色值進行合成。利用該技術，咱們能夠得到各類各樣的效果，尤爲是透明效果。不過值得注意的是，爲了場景中繪製透明物體，一般須要對物體按照由後到前的順序進行混合處理，若是按照任意順序進行處理將會產生嚴重的失真。因此在blending（混色）操做以前要來一次深度測試；

7.深度測試

這一步會進行深度測試，拋棄掉位置靠後的像素值，由於這個位置的像素自己就是被更前面的像素覆蓋的；

8.融合

這一步會將新的顏色值和已經存在的顏色值進行組合，得出融合後的顏色值，好比，老的顏色是紅色，新的是50%透明的黑色，那麼融合以後的顏色看起來就應該是暗紅色；

5.抖動（Dithering）

這一步是爲了解決可以使用的顏色過少會出現色帶的問題，經過較少的顏色來模擬較多顏色的技術，能夠查看這篇文章來理解；

幀緩存

數據通過整個渲染管線處理以後，最終會寫入到幀緩存中，幀緩存存儲了最終會顯示到屏幕上的顏色數據。

幀緩存包含了 3 個具體的緩存：

1.顏色緩存

存儲每一個像素點的具體顏色值的緩存，常見的具體格式能夠分爲：

• 16位：RGB565，紅色5位，綠色6位，藍色5位，不保存透明通道（之因此綠色多1位是由於人眼對綠色更加敏感）；
• 24位：RGB888，紅色8位，綠色8位，藍色8位，不保存透明通道；
• 32位：RGBA8888，紅色8位，綠色8位，藍色8位，透明通道8位；

2.Z-緩存（深度緩存）

存儲每一個像素點的深度，用來決定是丟棄當前像素顏色仍是保留，假設，新渲染的顏色在舊顏色的前面，那麼就覆蓋舊顏色，若是新顏色在舊顏色的後面（被遮擋了）則保留舊顏色。

3.模板緩存

用來控制顏色緩存某個位置的寫入操做，經常使用來處理陰影。