WebGL簡易教程(一)：第一個簡單示例
1. 概述
不得不說現在三維圖形渲染技術更新換代實在是太快,OpenGL很多資料還沒來得及學習就已經有點落伍了。NeHe的學習教程還有之前用的《OpenGL編程指南》第七版（也就是紅寶書）都非常好，可惜它們都是從固定管線開始講起的;而現在可編程管線的技術已經是非常常見的基礎技術了。后來我還看過《OpenGL編程指南》第八版（白皮書），這本教程是從可編程管線（著色器）開始講起的，看的時候就覺得沒有前面的基礎打底，顯得非常的晦澀，遠不如紅寶書易懂。羞愧的說，我已經多次入門失敗了。
這也正是我寫這篇教程的原因，希望從繁雜的資料中總結真正有用的知識（當然也希望能幫助到你）。我覺得WebGL是學習OpenGL系列三維圖形渲染技術很好的入門點。WebGL是OpenGL的瀏覽器版本，基本上可以認為是OpenGL的子集，能被WebGL保留而不剔除的技術，必須是三維圖形渲染技術的精華。在這里給大家強烈推薦《WebGL編程指南》這本書，我這篇教程正是在這本書的基礎之上總結出來的。
在學習OpenGL/WebGL的時候，我還感覺到很多資料舉得例子往往都太簡單了，確實是一看就懂，但是在實際遇到的問題的時候卻往往解決不了。我還是認為在實際中解決問題，更能加深對知識的理解。正好最近我在研究GIS中地形的繪制，那么我就通過一步一步繪制地形的示例，來總結WebGL的相關知識。如果你不懂GIS這些術語也不要緊，只需要知道我這里的最終目的是想繪制的是一個大地高程模型，是一個包含XYZ坐標的點集，表達了地形的情況。
2. 示例：繪制一個點
編寫WebGL程序跟編寫Web前端程序的步驟是一樣的，包含HTML和JavaScript兩個部分，通過瀏覽器進行調試。
1) HelloPoint1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw a point (1)</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="HelloPoint1.js"></script>
</body>
</html>
這一段HTML非常簡單，從實際表現上來說就是創建了一個畫布<canvas>。<canvas>是HTML5引入的的一個繪制標簽，可以在畫布中繪制任意圖形。WebGL正是通過<canvas>元素進行繪制的。
除此之外，這段代碼還通過<script>標簽引入了幾個外部JS文件。其中lib目錄中的幾個JS文件是一些通用的組件（來自《WebGL編程指南》的源碼），可以先暫時不用關心其具體實現；最后一個導入的HelloPoint1.js正是我們編寫的繪制模塊。而在<body>標簽中定義的onload事件屬性綁定的正是HelloPoint1.js中的main()函數。
2) HelloPoint1.js
// 頂點著色器程序
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
// 片元著色器程序
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';
function main() {
// 獲取 <canvas> 元素
var canvas = document.getElementById('webgl');
// 獲取WebGL渲染上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// 初始化著色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// 指定清空<canvas>的顏色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 繪制一個點
gl.drawArrays(gl.POINTS, 0, 1);
}
這段JS代碼的主要內容就是前面提到的main函數，一旦HTML被瀏覽器加載成功，這段腳本就會執行。在main函數中主要有一下幾步：
(1) 準備工作
document.getElementById('webgl')：文檔對象模型DOM的函數，獲取到HTML頁面的<canvas>元素。
getWebGLContext(canvas)：獲取WebGL渲染上下文，保存在gl變量中。因為不同瀏覽器獲取函數不太一樣，所以通過組件cuon-utils提供的函數來統一行為。
(2) 著色器
initShaders：初始化著色器。
首先要知道什么是著色器。如果你只學習過固定管線或者其他的二維繪圖組件（如GDI），就會非常困惑著色器是什么，為什么要用著色器。比如說在固定管線中，繪制點就是drawPoint，繪制線就drawLine。而在WebGL中，繪制工作則主要被分解成頂點著色器和片元著色器兩個步驟了。
在啟動JS程序后，繪制工作首先進入的是頂點著色器，在頂點著色器中描述頂點特性（如位置、顏色等），頂點就是三維空間的點，比如三角形的三個頂點；然后進入到片元著色器，在片元著色器中逐片元處理像素（如光照、陰影、遮擋）。最后片元傳入到顏色緩沖區，進行顯示。渲染過程如下：
這個過程是一個類似水流的流向過程，所以這個過程被稱為渲染管線（Pipeline）。并且，這個過程是需要我們去編程控制的，比如觀察者的視角變化需要在頂點著色器去調控；光線對顏色的變化需要在片元著色器去調控等；因此，這個過程就是可編程管線。通過著色器程序，三維圖像渲染就更加的靈活強大。
在initShaders()函數中,傳入了預先定義的JS字符串VSHADER_SOURCE和FSHADER_SOURCE。需要說明是，著色器程序是以字符串的形式嵌入到JS文件中運行的。這個函數同樣是cuon-utils組件提供的，調用之后就告訴WebGL系統著色器已經建立好了并可以隨時使用。
(3) 頂點著色器
頂點著色器的定義如下：
// 頂點著色器程序
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
前面說到頂點著色器程序是嵌入在JS中的程序，所以雖然傳入的是字符串，但其實本質是著色器描述語言（GLSL:OpenGL Shading Language）。既然是語言也就有自己的函數與變量定義。main（）函數是每個著色器程序定義的入口。在main函數中，將頂點的坐標賦值給內置變量gl_Position,點的尺寸賦值給內置變量gl_PointSize。
注意這里的gl_Position是必須賦值的，否則著色器不會正常工作。賦值的類型是vec4，也就是一個四維矢量。一般來說，描述點位只需要三維矢量就可以了，但是很多情況下需要四個分量的齊次坐標。齊次坐標（x,y,z,w）等價于三維坐標（x/w,y/w,z/w）。所以如果第四個分量是1，那么就是普通的三維坐標；如果第四分量為0，就表示無窮遠的點。
(4) 片元著色器
片元著色器的定義如下：
// 片元著色器程序
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';
如同頂點著色器一樣，片元著色器將點的顏色賦值給gl_FragColor變量，gl_FragColor是片元著色器唯一的內置變量，控制像素在屏幕上的最終顏色。
(5) 清空緩沖區
gl.clearColor()：設置清空的背景色。
gl.clear(gl.COLOR_BUFFER_BIT)： 清空顏色緩沖區。
(6) 繪制操作
gl.drawArrays(gl.POINTS, 0, 1):繪制一個點。
頂點著色器只是指定了繪制的頂點，還需要指定頂點到底成點、成線還是成面，gl.drawArrays()就是這樣一個函數，這里告訴WebGL系統應該繪制一個點。
3. 結果
最終的運行結果很簡單，在Chrome打開HelloPoint1.html，頁面顯示了一個繪制一個點的窗口：
4. 參考
本來部分代碼和插圖來自《WebGL編程指南》。
浙公網安備 33010602011771號