《WebGL程式設計指南》---從示例程式碼中學習WebGL之初識【1】

阿新 • • 發佈：2019-01-18

寫在前面

筆者希望學習WebGL很久了，但是鑑於種種的事一直沒有開展，恰好研究生複試過了，在這空檔時間段內想學一門新技術，於是想到了WebGL，經前同事推薦，果斷買了《WebGL程式設計指南》這本書，於是，我的學習之旅就開始了。對於程式設計人員來說，案例程式碼是最好的教科書了。即將與讀者見面的這一系列短文章是我在學習過程中的一些記錄和感想，這一系列的短文章，通過解讀書中的示例程式碼來記錄學習WebGL之旅。文章中用到的程式碼段絕大部分出自《WebGL程式設計指南》這本書,彩色的程式碼段表示下方會有相關的說明，在這期間會引用很多書中的話語，因為是引用，所以難免會有所簡略，想知道更多知識細節的讀者，建議找原書來通讀，你們也可以上書本的幫助網站

https://sites.google.com/site/webglbook/檢視相關的例子。若有讀者對此有疑問，希望你們多多與我交流和指正，我的郵箱：[email protected]，謝謝大家。

簡單認識WebGL

WebGL可以理解為Web版的OpenGL，WebGL程式在螢幕上同時使用HTML和JavaScript來建立和顯示三維圖形，此外還會用到GLSL ES（著色器程式碼）。所以說要入門WebGL，讀者最好是掌握一定的程式語言基礎，不一定是HTML、JavaScript，很多直接從C++轉過來的人也可以學得很好，此外，如果讀者有一定的圖形學基礎，那學習起來會輕鬆很多。WebGL採用HTML5中新引入的<canvas>元素（標籤），它定義了網頁上的繪圖區域。有了WebGL，JavaScript就能在canvas上面繪製三維圖形了，否則就只能繪製二維圖形。WebGL程式使用3種語言進行開發：HTML、JavaScript和GLSL ES,但是著色器程式碼GLSL ES是可以內嵌在JavaScript中的，所以WebGL網頁的檔案結構和傳統網頁一樣，只用到HTML和JavaScript兩種檔案。接下來我們會通過程式碼示例，一步步走向WebGL的殿堂。

1.初識canvas

DrawRectangle.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw a blue retangle</title>
</head>
<body onload="main()">
<canvas id="example" width="400" height="400">
    Please use a browser that supports "canvas"
</canvas> 

<script src="DrawRectangle.js">
</script>
</body>
</html>

在這行程式碼中，<body>標籤指定onload屬性，main()函式作為JavaScript程式的入口，然後讓瀏覽器載入JavaScript檔案，而main()函式在JavaScript檔案中定義。使用如下語句來載入js檔案：

<script src="DrawRetangle.js"></script>

HTML檔案中引入了<canvas>標籤，允許JavaScript動態地繪製圖形。<canvas>元素提供一些簡單的繪製函式，用來繪製點、線、矩形、圓等等。

<canvas id="example" width="400" height="400"></canvas>

在這行程式碼中，id屬性為<canvas>指定了唯一的識別符號，在對應的JavaScript檔案中會用到這個id，width和height屬性規定了它的區域，比如，上面表示400x400畫素的區域。預設的<canvas>是透明的，如果不通過JavaScript程式碼畫東西，<canvas>一般不可見。使用<canvas>要求瀏覽器支援<canvas>，但有些老的瀏覽器就不支援，此時會忽略此行程式碼。所以可以在標籤中加入一行程式碼，用於提醒。如下所示：

<canvas id="example" width="400" height="400">

Please use a browser that supports "canvas"

</canvas>

DrawRectangle.js

function main() {

    var canvas=document.getElementById('example');
    if(!canvas){
        console.log('Failed to retrieve the <canvas> element');
        return;
    }

    var ctx=canvas.getContext('2d');
    if(!ctx){
        console.log('Failed to retrieve the <ctx> context');
        return;
    }
    ctx.fillStyle='rgba(0,0,255,1.0)';
    ctx.fillRect(120,10,150,150);
}

在上面的程式碼中，作為HTML檔案中<body>元素中的onload屬性值的main()函式，完成了在<canvas>上繪製藍色矩陣的三步：

<1>獲取<canvas>元素；

var canvas=document.getElementById('example');

if(!canvas){console.log('Failed to retrieve the <canvas> element');return;}

上述程式碼獲取獲取<canvas>元素並做錯誤判斷，在專案中執行此步是一個很好的程式設計習慣，特別是寫一些底層程式碼的時候，這一步很重要，對於排查程式錯誤點很有幫助。

<2>向該元素請求二維“圖形的上下文”；

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

if(!ctx){console.log('Failed to retrieve the <ctx> context');return;}

上述的程式碼向<canvas>元素請求二維“圖形的上下文”,canvas.getContext()方法的引數指定上下文的型別（2d的還是3d的）。

注：若是三維圖形，就要獲取三維“圖形的上下文”。

<3>在“圖形的上下文”上呼叫相應的繪圖函式繪製圖形

ctx.fillStyle='rgba(0,0,255,1.0)';

此行程式碼設定了填充顏色為藍色，也可以根據自己的喜好修改rgba()的前3個引數來改變顏色，rbga()指定了r(紅)、g(綠)、b(藍)、a(alpha：透明度)，前三者的範圍是0-255，最後一個的範圍是0.0-1.0，這種顏色格式為RGBA格式。

ctx.fillRect(120,10,150,150);

此行程式碼使用ctx.fillRect()函式來繪製矩形，它的引數決定了矩形在<canvas>中的位置和寬高，前兩個引數指定矩形的左上頂點在<canvas>的座標，後兩個引數決定寬和高。

注：<canvas>的座標系統原點在螢幕左上方，以橫軸為x軸（正方向朝右），縱軸為y軸（正方向朝下），均以畫素為單位。

執行HTML檔案，我們在網頁上得到如下的顯示：

2.最簡單的WebGL程式

這個程式的功能就是用背景色清空（填充）了<canvas>標籤的繪圖區。在寫這個程式之前，讀者可以到網上先下載好相關的WebGL通用函式庫。

HelloCanvas.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clear canvas</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="HelloCanvas.js"></script>
</body>
</html>

<canvas id="webgl" width="400" height="400">

Please use a browser that supports "canvas"

</canvas>

在上面的程式碼中，<canvas>標籤的id設為了webgl，在對應的JavaScript檔案中可以通過id來獲取到<canvas>。

<script src="lib/cuon-utils.js"></script>

上面的程式碼引入一些專門為WebGL準備的、事先定義好的函式庫。在示例專案中，將函式庫的資料夾放在了與HTML和JavaScript檔案的同一目錄下src路徑是相對路徑。

HelloCanvas.js

function main() {
    var canvas=document.getElementById('webgl');
    if(!canvas){
        console.log('Failed to retrieve the <canvas> element');
        return;
    }

    var gl=getWebGLContext(canvas);
    if(!gl){
        console.log('Failed to get the rendering context for WebGL');
        return;
    }
    gl.clearColor(0.0,0.0,0.0,1.0);

    gl.clear(gl.COLOR_BUFFER_BIT);
}

在這個檔案中，開始真正使用WebGL來繪製三維圖形。它依然遵循著上面示例程式碼的三個步驟：

<1>獲取<canvas>元素；

與HTML 檔案對應，document.getElementById()函式的引數變為了webgl字串。

<2>獲取繪圖上下文；

var gl=getWebGLContext(canvas);
if(!gl){
console.log('Failed to get the rendering context for WebGL');
return;

}

在上面的程式碼中，一般來說，要用canvas.getContext()函式來獲取繪圖上下文，但是在獲取WebGL的繪圖上下文的時候，canvas.getContext()函式接收的引數在不同的瀏覽器中會有所不同，所以書本的作者寫了一個函式getWebGLContext()來隱藏不同瀏覽器之間的差異，傳入的引數是<canvas>元素。它被定義在cuon-utils.js檔案中，可以通過該js檔案檢視該函式的規範原型。此時，三維的繪圖上下文就儲存在了gl這個變數中。

<3>進行繪圖，包括設定背景色和清空<canvas>；

gl.clearColor(0.0,0.0,0.0,1.0);gl.clear(gl.COLOR_BUFFER_BIT);

學過OpenGL的讀者可能會對這兩行程式碼感到熟悉，沒錯，它們對應的就是OpenGL或者OpenGL ES 2.0的glClearColor()和glClear()函式。gl.clearColor()負責清空背景色，以RGBA格式來設定背景色，一旦指定背景色後，在下一次呼叫gl.clearColor()方法前背景色都不會改變；gl.clear()負責用之前指定的背景色清空<canvas>，gl.clear()的引數是緩衝區，緩衝區有深度緩衝區DEPTH_BUFFER_BIT（對應gl.clearDepth()，引數預設值為1.0）、顏色緩衝區COLOR_BUFFER_BIT（對應gl.clearColor()，引數預設值為(0.0,0.0,0.0,0.0)）和模板緩衝區STENCIL_BUFFER_BIT（對應gl.clearStencil()，引數預設值為0）。在本示例程式碼中是清空背景色，我們可以隨意更改gl.clearColor()的引數來變換<canvas>背景色。

示例程式碼效果如圖所示：

好了，這一節就只有這麼多。Have a good day!

《WebGL程式設計指南》---從示例程式碼中學習WebGL之初識【1】

《WebGL程式設計指南》---從示例程式碼中學習WebGL之初識【1】

Netty 從零到一學習系列之初識篇

機器學習-常見問題積累【1】

Linux學習之命令【1】

利用 Python學習資料探勘【1】

openCV學習之路【1】---VS2017+openCV3.4.1配置教程

禁止在堆中例項化的類【1】

Qt學習之路【1】：QT顯示中文問題

ZooKeeper學習之配置【1】基本配置

【筆記】《WebGL程式設計指南》學習-第4章高階變換與動畫基礎(1-平移然後旋轉）)

從Linux核心程式碼中學習獲得結構體成員偏移量的方法

從別人的程式碼中學習golang系列--01

從別人的程式碼中學習golang系列--02

從別人的程式碼中學習golang系列--03

從實例中學習grid布局

貝葉斯網（2）Netica：從數據中學習CPT

python程式設計：從入門到實踐學習筆記-Django開發使用者賬戶（一）

python程式設計：從入門到實踐學習筆記-Django入門（四）

python程式設計：從入門到實踐學習筆記-Django入門（二）

python程式設計：從入門到實踐學習筆記Django入門（一）

《WebGL程式設計指南》---從示例程式碼中學習WebGL之初識【1】

相關推薦