[WebGL入門]七，context的初始化

lufy發表於2014-08-01
WebContext

注：文章譯自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的額外說明，我會加上［lufy：］，另外，鄙人webgl研究還不夠深入，一些專業詞語，如果翻譯有誤，歡迎大家指正。


非常重要的初始化

從這次開始，開始著手WebGL的處理。首先是WebGL的初始化，完成渲染前的所有準備。
前面的文章也給過HTML的雛形，還記得吧，像下面的程式碼這樣。

<html>
    <head>
        <title>WebGL TEST</title>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>
這一次，從這個程式碼開始說明，這個HTML程式碼，純粹只是在頁面上放置一個canvas，從這個canvas中獲取context，然後進行WebGL的初期化。

獲取context

剛才的程式碼，在head標籤中引用了外部js檔案script.js，那麼來看一下這個檔案中的程式碼。首先，通過getElementById來取得canvas。

var c = document.getElementById('canvas');
這樣，c就表示canvas物件，接下來定義canvas的大小。
c.width = 500;
c.height = 300;
這樣就把canvas的大小設定成了寬500px，高300px了。當然，這個canvas的大小可以根據你的需求自由的設定。我這裡是隨便設定的，沒有什麼特別的意思。
接著，獲取WebGL的context，需要使用getContext函式，getContext函式是從canvas中獲取context物件，引數是字串，指定你想要獲取的context的名稱。
本文寫的時候（2012年2月），WebGL的context，還不能通過正式的名稱webgl來獲取，必須使用experimental-webgl來獲取context物件。
但是，以後也有可能通過正式的名稱來獲取context，所以，在獲取context物件的時候，使用或運算（||）來按照名稱的順序來執行。
var gl = c.getContext('webgl') || c.getContext('experimental-webgl');
如果瀏覽器支援的話，這個時候gl就是你獲取到的WebGL的context，接下來就通過gl來操作WebGL。

畫面的初始化

WebGL的context和之前的context（開始WebGL之前，先了解一下canvas）一樣，都是包含了繪圖相關的各種各樣的處理的物件，裡面有非常多的函式，常量和屬性。
在這些函式裡，有一個是用來清除畫面的，函式名叫做clear，其實看名字就知道了吧......
這個函式將畫面清空，回到一個全新的狀態。引數是要清空的物件，或者是WebGL中定義的常量。這一次，只是清空一下畫面上的顏色，所以使用COLOR_BUFFER_BIT這個常量，這個常量是為了使用canvas裡面指定的顏色來清空畫面而定義的。

gl.clear(gl.COLOR_BUFFER_BIT);
如果要清空畫面所使用的顏色的話，就必須得另外定義了。這個函式是clearColor。clearColor函式的引數有四個，就是單純的RGBA，很直觀吧，使用方法如下。
gl.clearColor(0.0, 0.0, 0.0, 1.0);
像上面這樣，clear方法執行的時候，就會使用黑色將畫面初期化。引數的數值的指定範圍是0 ～ 1之間，注意不可以像普通的HTML中那樣使用16進位制的顏色。
上面的處理整理一下的話，就是下面的script.js程式碼，因為要在頁面載入完才能執行，所以把程式碼寫在onload中。
onload = function(){
    // canvasエレメントを取得
    var c = document.getElementById('canvas');
    c.width = 500;
    c.height = 300;

    // webglコンテキストを取得
    var gl = c.getContext('webgl') || c.getContext('experimental-webgl');
    
    // canvasを黒でクリア(初期化)する
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
};
點選下面的連線，可以看一下實際的demo。
獲取WebGL的context，然後進行初期化的demo

這個例子，只是純粹的獲取一下WebGL的context，然後使用黑色將canvas清空一下而已，所以畫面只是一片黑色。但是如果畫面可以執行出來的話，WebGL的準備工作就算基本完成了。


總結

這一次，只是獲取一下WebGL的context，然後將使用黑色將畫面清空一下。但是事實上，這樣就可以開始使用WebGL了。
接下來，會更具體更詳細的介紹WebGL相關的處理，但不管做什麼，基礎都是很重要的，這次的內容還是需要徹底理解一下的。

下次，介紹一下著色器相關的基礎知識。

轉載請註明：轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend

相關文章