一篇文章理清WebGL繪制流程

轉自：https://www.jianshu.com/p/e3d8a244f3d9

目錄

1. 初始化WebGL環境
2. 頂點着色器（Vertex Shader）與片元着色器（Fragment Shader）
3. 頂點數組對象（VBO）、索引數值對象（IBO）
4. 繪制流程
5. 總結

初始化WebGL環境

關於HTML5、<canvas>標簽、WebGL的一些相關知識可以去MDN中查看，里面還有一些相關的學習干貨，初始化WebGL環境可以參考初識WebGL，我們這里按下不表。

頂點着色器與片元着色器

WebGL圖形渲染管線

介紹着色器之前，我們先過一下WebGL的圖形管線：

 

WebGL Rendering Pipeline Overview

 

我們可以把WebGL的渲染管線當做一條車間里的流水線，這個車間的原材料是一些圖形相關的數據（包括頂點坐標，頂點顏色等），這個車間生產的產品是我們屏幕上看到的各種圖形。

圖中綠色的兩個方塊就是我們要說的頂點着色器（Vertex Shader）和片元着色器（Fragment Shader）。

我們來一步一步簡單介紹下這個條流水線：
圖中最上面的藍色方塊Attribute可以看做是一條水管，一端連接頂點數據（Vertex Buffer Objects），另一端連接頂點着色器，這條水管的作用是把頂點數據輸送給頂點着色器處理。緊接着，頂點着色器把處理過的頂點數據交給片元着色器處理，最后經過片元着色器處理過的數據將被輸送到Framebuffer中去，為了便於理解，我們暫且、姑且可以把這個Framebuffer當做屏幕，而這最后的步驟，也就是把這些處理過的數據以圖形的方式顯示到屏幕上，至此，渲染管線也就完成了他的使命。

在這條流水線上，寫代碼的我們，扮演着的是流水線上的工人，所以我們做的事情是拿來數據，然后確保數據在這條流水線上，按照既定的流程，最終可以變成我們想要的圖形。

頂點着色器與片元着色器

由上所述，WebGL編程中，我們需要為渲染流水線構建好頂點着色器和片元着色器。

頂點着色器的功能是對傳進來的頂點數據通過矩陣進行換換位置、計算照明方程式以生成逐頂點的顏色以及生成或者變換紋理坐標。
片元着色器則是對即將送到屏幕上的像素內容進行更進一步的處理，包括一些特殊效果的定制等。

這兩者的內容會在之后的學習過程中加以說明，本文只需對它們的作用有個大致的了解即可，更多的內容可以參考《OpenGL編程指南》或者是《OpenGL ES 3.0編程指南》，我們這里重點只在於簡單整理下WebGL的渲染流程。

創建及使用着色器（Shader）

簡要梳理下shader的創建過程。shader的作用前文已經介紹過了，我們可以把shader當做一個程序，頂點數據輸入shader，輸出經過shader處理過的數據，用於之后的渲染流程。

創建和使用shader的過程分為以下步驟：

1. 首先創建並編譯好着色器對象
2. 將這些着色器對象鏈接為一個着色器程序。

對於着色器對象：

1. 創建一個着色器對象
2. 將着色器源代碼編譯為對象
3. 驗證着色器的編譯是否成功

創建着色器代碼如下：

// 創建一個着色器對象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);

// 指定着色器源代碼
gl.shaderSource(vertexShader , vertexshaderSourceCode);

// 將着色器源代碼編譯為對象
gl.compileShader(vertexShader );

// 驗證着色器的編譯是否成功
if (!gl.getShaderParameter(vertexShader , gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(vertexShader ));
    return;
}

// 以上的代碼創建了一個頂點着色器，對於片元着色器
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 以下代碼類似
// code gose here ...

創建完着色器對象后，我們得到了兩個着色器 vertexShader 和 fragmentShader

對於着色器程序：

1. 創建一個着色器程序
2. 將着色器對象關聯到着色器程序
3. 連接着色器程序
4. 判斷着色器的鏈接過程是否成功完成
5. 使用着色器來處理頂點和片元

創建着色器程序代碼如下：

// 創建一個着色器程序
var program = gl.createProgram();

// 將着色器對象關聯到着色器程序
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 連接着色器程序
gl.linkProgram(program);

// 判斷着色器的鏈接過程是否成功完成
if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
    alert("Could not initialise shaders");
}

//  使用着色器來處理頂點和片元
gl.useProgram(program);

在大致了解過這條渲染流水線后，我們接着將要介紹下頂點數組對象和索引數組對象。

頂點數組對象（VBO）、索引數值對象（IBO）

頂點數組對象（VBO）

頂點數組對象（VBO）對應着圖中最上方的紅色的方塊。頂點數組對象包含着WebGL要渲染的圖形的數據。可以看成是流水線上的原材料。在WebGL的渲染過程中，這些圖形的數據往往通過頂點進行儲存和輸送，頂點數組對象包含的數據一般包括頂點位置信息、頂點位置上的法線向量、紋理坐標等。

索引數組對象（IBO）

在圖形的繪制過程中，我們把每3個頂點繪制成一個三角形，即圖形學中“面”（surface）的含義，而后通過成千上萬的面組成了我們空間中的三維模型。索引數組對象（IBO）的作用是告訴WebGL要通過什么樣的順序來將我們傳入的頂點數據連接成面。為了便於理解，我們舉個栗子:

 

繪制一個梯形

當我們按照如圖所示的方式繪制一個梯形時，我們弄來了5個頂點(0, 0)、(10, 10)、(20, 0)、(30, 10)、(40, 0)分別對應從0-4的五個索引。而當我們繪制圖形時，定義的索引數組[0, 2, 1, 1, 2, 3, 2, 4, 3]的意思就是告訴WebGL，把索引為0、2、1的三個頂點組成一個三角形，索引為1、2、3的三個頂點組成另一個三角形，索引為2、4、3的頂點也組成一個三角形（可參照圖示）。
索引數組對象的作用就是保存這些索引數組的數據，用以傳輸給WebGL渲染管線。

創建頂點數組對象&索引數組對象

WebGL狀態機

在介紹如何創建這兩個對象前，我們要先知道，WebGL是個狀態機。我們可以這么理解，假設WebGL中的屬性P的值為1，你在某一次操作中，把P的值設置成了2，那么在你下一次設置P的值之前，P的值永遠是2。

更直觀一點的表述，你可以想象WebGL像KFC套餐，有個套餐A，里面包含一個香辣雞腿堡，一杯百事可樂。你每次點A套餐，都會得到一個香辣雞腿堡，一杯百事可樂，而你在每次用餐的過程中，吃的漢堡都是香辣雞腿堡，喝的可樂都是百事可樂。直到某一天，KFC把A套餐的內容改成了一個奧爾良烤雞腿堡，一杯可口可樂。在那天之后，同樣是A套餐，但是你吃的漢堡就變成了奧爾良烤雞腿堡，喝的可樂變成了可口可樂，除非KFC對A套餐的內容再進行調整，不然點A套餐的你只能喝上一輩子的可口可樂（本人比較喜歡百事可樂）。

所以你可以把WebGL上下文想象成是A套餐，WebGL中的一些屬性選項的對應的是漢堡、可樂，而香辣雞腿堡、奧爾良烤雞腿堡、百事可樂、可口可樂對應的是屬性當前的值。類比一下。

頂點數組對象的創建

接下來插播一段代碼：

var vertices = [
-50.0, 50.0, 0.0,
-50.0,-50.0, 0.0,
50.0,-50.0, 0.0,
50.0, 50.0, 0.0
];

// 調用gl.createBuffer()創建了一個塊內存空間，並讓 vertexBufferObject  變量指向這塊空間
var vertexBufferObject = gl.createBuffer();

// 把WebGL中用於繪制的數組數據的屬性(ARRAY_BUFFER)的值的地址指向上文我們創建的 vertexBuffer 內存空間。
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBufferObject );

// bufferData 函數對 ARRAY_BUFFER 屬性對應的空間填充值
// WebGL 狀態機概念出場！
// 由於我們在上一個語句中，修改了 ARRAY_BUFFER 的值，由於狀態機的性質，所以我們調用該函數進行傳值時，
// 傳入的值是會給此時gl中的 ARRAY_BUFFER 屬性指向的空間，也就是
 vertexBufferObject 的內存空間。
// 此處調用把 vertices 中的頂點數據傳入了 vertexBufferObject 對象
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 傳值完畢，恢復 ARRAY_BUFFER 的值為空
gl.bindBuffer(gl.ARRAY_BUFFER, null);

所以這段代碼就創建了一個名為 vertexBufferObject 的頂點數組對象。代碼中具體的API可以查閱相關的資料。

索引數組對象的創建

索引數組對象的創建與頂點數組對象的創建大同小異

var indices = [
0, 2, 1, 
1, 2, 3
];
var indicesBufferObject = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBufferObject );
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices),
gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

這里需要注意的是，索引數組對象對應的屬性為ELEMENT_ARRAY_BUFFER。而傳入的數組類型是Uint16Array。

繪制流程

最后，我們要把前面提到的內容按照渲染管線的圖示結合起來。再看一眼我們的地圖：

 

WebGL Rendering Pipeline Overview

好，上代碼：

// 按照圖示來看，要繪制一個圖形，首先我們需要原材料：
// 1. 一個頂點數組對象（VBO），用於存儲相關的頂點數據, 
// 同時需要一個表示頂點組合順序的索引數組對象（IBO）。

// 2. 需要兩個着色器（vertex shader 及 fragment shader）和一個着色器程序，用來保證管線的順利進行。
// 好了，開工！

// 先來VBO和IBO
var vertices =  [
    -0.5,0.5,0.0, 
    -0.5,-0.5,0.0,
    0.5,-0.5,0.0, 
    0.5,0.5,0.0
];  

var indices = [3,2,1,3,1,0];

// 創建VBO
var vertexBufferObj = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBufferObj );
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

// 創建IBO
var indexBufferObj = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferObj );
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

// 創建頂點着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader , vertexshaderSourceCode);
gl.compileShader(vertexShader );
// 驗證着色器的編譯是否成功
if (!gl.getShaderParameter(vertexShader , gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(vertexShader ));
}

// 同理創建片元着色器
var fragmentShader= gl.createShader(gl.FRAGMENT_SHADER);
/* so many balabalabala... */

// 創建着色器程序
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// 判斷着色器的鏈接過程是否成功完成
if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
    alert("Could not initialise shaders");
}

目前為止，我們已經准備好了繪制圖形的所有原料了，接下里就是如何通過WebGL繪制出圖形了。

// 先獲取頂點數據進入着色器的入口（后文會講解）
program.vertexPosition = gl.getAttribLocation(program, "aVertexPosition");

// 繪制場景的函數
function drawScene(){
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
    
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.viewport(0, 0, c_width, c_height);

    // 指定繪制時使用的頂點數據
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBufferObj );
    // 一下這兩行代碼對應的作用是將頂點數據讀入着色器中，后文會加以解釋
    gl.vertexAttribPointer(program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(program.vertexPosition);

    // 指定繪制時使用的索引數組
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferObj);
    // 以給定的形式繪制圖形
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
}

這樣我們就實現了圖形的繪制。
由於本文重點在於梳理繪制流程，並沒有深入介紹着色器相關的內容，所以對於gl.vertexAttribPointer函數和gl.enableVertexAttribArray會有疑惑。
為了解釋一下這個問題，我們先看一段頂點着色器的代碼

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;

    void main(void) {
        gl_Position = vec4(aVertexPosition,1.0); 
    }
</script>

其中代碼中的aVertexPosition表示的是頂點數據從這個變量進入着色器。

就像我們前文比喻的那樣，這個aVertexPosition就像一端連接頂點數據（Vertex Buffer Objects），另一端連接頂點着色器的水管的開關。

我們執行program.vertexPosition = gl.getAttribLocation(program, "aVertexPosition");時，相當於把這個開關的位置記錄在program.vertexPosition上面。

以下代碼：

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBufferObj );
gl.vertexAttribPointer(prg.vertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(program.vertexPosition);

bindBuffer指定當前WebGL繪制的數據為vertexBufferObj中的頂點數據。

vertexAttribPointer函數則把頂點數據通過水管接到着色器"aVertexPosition"的位置上，也就是我們記錄下來的program.vertexPosition的位置。

gl.enableVertexAttribArray(program.vertexPosition)則是最后一步把水管的閥門打開，讓頂點數據流入着色器。

總結

本文主要目的是簡單梳理了下WebGL繪制圖形的大致編程流程，並沒有做很深入的講解。WebGL基於OpenGL ES 2.0，而早先的OpenGL用的都是固定的渲染管線，之前學OpenGL一開始都是glBegin，glEnd，glVertex2d啥的一堆東西，精簡版的OpenGL ES一上來就拋棄了之前固定渲染管線的東西，使用了可編程的渲染管線，一上來就要求要編寫Shader，所以繪制一個圖形就變得比較繁瑣一點。於是有了這篇筆記，以供剛開始學習WebGL的玩家們參考。
對於文中的一些API並沒有進入詳細的講解，需要的同學可以查閱相關的資料書籍。

相關資料

《OpenGL編程指南》
《OpenGL ES 3.0編程指南》
《WebGL Beginner's Guide》