WebGL技術儲備指南

jopen 8年前發布 | 42K 次閱讀 WebGL

作者: 葉齋發表于: 2015-12-21

WebGL 是 HTML 5 草案的一部分，可以驅動 Canvas 渲染三維場景。WebGL 雖然還未有廣泛應用，但極具潛力和想象空間。本文是我學習 WebGL 時梳理知識脈絡的產物，花點時間整理出來與大家分享。

示例

WebGL 很酷，有以下 demos 為證：

尋找奧茲國
 賽車游戲
 劃船的男孩(Goo Engine Demo)

本文的目標

本文的預期讀者是：不熟悉圖形學，熟悉前端，希望了解或系統學習 WebGL 的同學。

本文不是 WebGL 的概述性文章，也不是完整詳細的 WebGL 教程。本文只希望成為一篇供 WebGL 初學者使用的提綱。

Canvas

熟悉 Canvas 的同學都知道，Canvas 繪圖先要獲取繪圖上下文：

var context = canvas.getContext('2d');

在context上調用各種函數繪制圖形，比如：

// 繪制左上角為(0,0)，右下角為(50, 50)的矩形
context.fillRect(0, 0, 50, 50);

WebGL 同樣需要獲取繪圖上下文：

var gl = canvas.getContext('webgl'); // 或 experimental-webgl

但是接下來，如果想畫一個矩形的話，就沒這么簡單了。實際上，Canvas 是瀏覽器封裝好的一個繪圖環境，在實際進行繪圖操作時，瀏覽器仍然需要調用 OpenGL API。而 WebGL API 幾乎就是 OpenGL API 未經封裝，直接套了一層殼。

Canvas 的更多知識，可以參考：

JS 權威指南的 21.4 節或 JS 高級程序設計中的 15 章

W3CSchool

阮一峰的 Canvas 教程

矩陣變換

三維模型，從文件中讀出來，到繪制在 Canvas 中，經歷了多次坐標變換。

假設有一個最簡單的模型：三角形，三個頂點分別為(-1,-1,0)，(1,-1,0)，(0,1,0)。這三個數據是從文件中讀出來的，是三角形最初始的坐標(局部坐標)。如下圖所示，右手坐標系。

WebGL技術儲備指南

模型通常不會位于場景的原點，假設三角形的原點位于(0,0,-1)處，沒有旋轉或縮放，三個頂點分別為(-1,-1,-1)，(1,-1,-1)，(0,1,-1)，即世界坐標。

WebGL技術儲備指南

繪制三維場景必須指定一個觀察者，假設觀察者位于(0,0,1)處而且看向三角形，那么三個頂點相對于觀察者的坐標為(-1,-1,-2)，(1,-1,-2)，(0,1,-2)，即視圖坐標。

WebGL技術儲備指南

觀察者的眼睛是一個點(這是透視投影的前提)，水平視角和垂直視角都是90度，視野范圍(目力所及)為[0,2]在Z軸上，觀察者能夠看到的區域是一個四棱臺體。

WebGL技術儲備指南

將四棱臺體映射為標準立方體(CCV，中心為原點，邊長為2，邊與坐標軸平行)。頂點在 CCV 中的坐標，離它最終在 Canvas 中的坐標已經很接近了，如果把 CCV 的前表面看成 Canvas，那么最終三角形就畫在圖中橙色三角形的位置。

WebGL技術儲備指南

上述變換是用矩陣來進行的。

局部坐標 –(模型變換)-> 世界坐標 –(視圖變換)-> 視圖坐標 –(投影變換)–> CCV 坐標。

以(0,1,0)為例，它的齊次向量為(0,0,1,1)，上述變換的表示過程可以是：

WebGL技術儲備指南

上面三個矩陣依次是透視投影矩陣，視圖矩陣，模型矩陣。三個矩陣的值分別取決于：觀察者的視角和視野距離，觀察者在世界中的狀態(位置和方向)，模型在世界中的狀態(位置和方向)。計算的結果是(0,1,1,2)，化成齊次坐標是(0,0.5,0.5,1)，就是這個點在CCV中的坐標，那么 (0,0.5)就是在Canvas中的坐標(認為 Canvas 中心為原點，長寬都為2)。

上面出現的(0,0,1,1)是(0,0,1)的齊次向量。齊次向量(x,y,z,w)可以代表三維向量(x,y,z)參與矩陣運算，通俗地說，w 分量為 1 時表示位置，w 分量為 0 時表示位移。

WebGL 沒有提供任何有關上述變換的機制，開發者需要親自計算頂點的 CCV 坐標。

關于坐標變換的更多內容，可以參考：

計算機圖形學中的5-7章

變換矩陣@維基百科

透視投影詳解

比較復雜的是模型變換中的繞任意軸旋轉(通常用四元數生成矩陣)和投影變換(上面的例子都沒收涉及到)。

關于繞任意軸旋轉和四元數，可以參考：

四元數@維基百科

一個老外對四元數公式的證明

關于齊次向量的更多內容，可以參考。

計算機圖形學的5.2節

齊次坐標@維基百科

著色器和光柵化

在 WebGL 中，開發者是通過著色器來完成上述變換的。著色器是運行在顯卡中的程序，以 GLSL 語言編寫，開發者需要將著色器的源碼以字符串的形式傳給 WebGL 上下文的相關函數。

著色器有兩種，頂點著色器和片元(像素)著色器，它們成對出現。頂點著色器任務是接收頂點的局部坐標，輸出 CCV 坐標。CCV 坐標經過光柵化，轉化為逐像素的數據，傳給片元著色器。片元著色器的任務是確定每個片元的顏色。

頂點著色器接收的是 attribute 變量，是逐頂點的數據。頂點著色器輸出 varying 變量，也是逐頂點的。逐頂點的 varying 變量數據經過光柵化，成為逐片元的 varying 變量數據，輸入片元著色器，片元著色器輸出的結果就會顯示在 Canvas 上。

WebGL技術儲備指南

著色器功能很多，上述只是基本功能。大部分炫酷的效果都是依賴著色器的。如果你對著色器完全沒有概念，可以試著理解下一節 hello world 程序中的著色器再回顧一下本節。

關于更多著色器的知識，可以參考：

GLSL@維基百科

WebGL@MSDN

程序

這一節解釋繪制上述場景(三角形)的 WebGL 程序。點這個鏈接，查看源代碼，試圖理解一下。這段代碼出自WebGL Programming Guide，我作了一些修改以適應本文內容。如果一切正常，你看到的應該是下面這樣：

WebGL技術儲備指南

解釋幾點(如果之前不了解 WebGL ，多半會對下面的代碼困惑，無礙)：

字符串 VSHADER_SOURCE 和 FSHADER_SOURCE 是頂點著色器和片元著色器的源碼。可以將著色器理解為有固定輸入和輸出格式的程序。開發者需要事先編寫好著色器，再按照一定格式著色器發送繪圖命令。
</li>
Part2 將著色器源碼編譯為 program 對象：先分別編譯頂點著色器和片元著色器，然后連接兩者。如果編譯源碼錯誤，不會報 JS 錯誤，但可以通過其他 API(如gl.getShaderInfo等)獲取編譯狀態信息(成功與否，如果出錯的錯誤信息)。
```
// 頂點著色器
var vshader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vshader, VSHADER_SOURCE);
gl.compileShader(vshader);
// 同樣新建 fshader
var program = gl.createProgram();
gl.attachShader(program, vshader);
gl.attachShader(program, fshader);
gl.linkProgram(program); 
```
</li>
program 對象需要指定使用它，才可以向著色器傳數據并繪制。復雜的程序通常有多個 program 對象，(繪制每一幀時)通過切換 program 對象繪制場景中的不同效果。
```
gl.useProgram(program); 
```
</li>
Part3 向正在使用的著色器傳入數據，包括逐頂點的 attribute 變量和全局的 uniform 變量。向著色器傳入數據必須使用 ArrayBuffer，而不是常規的 JS 數組。
```
var varray = new Float32Array([-1, -1, 0, 1, -1, 0, 0, 1, 0]) 
```
</li>

WebGL API 對 ArrayBuffer 的操作(填充緩沖區，傳入著色器，繪制等)都是通過 gl.ARRAY_BUFFER 進行的。在 WebGL 系統中又很多類似的情況。

// 只有將 vbuffer 綁定到 gl.ARRAY_BUFFER，才可以填充數據
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
// 這里的意思是，向“綁定到 gl.ARRAY_BUFFER”的緩沖區中填充數據
gl.bufferData(gl.ARRAY_BUFFER, varray, gl.STATIC_DRAW);
// 獲取 a_Position 變量在著色器程序中的位置，參考頂點著色器源碼
var aloc = gl.getAttribLocation(program, 'a_Position');
// 將 gl.ARRAY_BUFFER 中的數據傳入 aloc 表示的變量，即 a_Position
gl.vertexAttribPointer(aloc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aloc);

</li>

向著色器傳入矩陣時，是按列存儲的。可以比較一下 mmatrix 和矩陣變換一節中的模型矩陣(第 3 個)。
</li>
頂點著色器計算出的 gl_Position 就是 CCV 中的坐標，比如最上面的頂點(藍色)的 gl_Position 化成齊次坐標就是(0,0.5,0.5,1)。
</li>
向頂點著色器傳入的只是三個頂點的顏色值，而三角形表面的顏色漸變是由這三個顏色值內插出的。光柵化不僅會對 gl_Position 進行，還會對 varying 變量插值。
</li>
gl.drawArrays()方法驅動緩沖區進行繪制，gl.TRIANGLES 指定繪制三角形，也可以改變參數繪制點、折線等等。
</li> </ol>

關于 ArrayBuffer 的詳細信息，可以參考：
- ArrayBuffer@MDN
- 阮一峰的 ArrayBuffer 介紹
- 張鑫旭的 ArrayBuffer 介紹