標籤：webgl
註：文章譯自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的初期化。
剛才的代碼，在head標籤中引用了外部js檔案script.js，那麼來看一下這個檔案中的代碼。首先，通過getElementById來取得canvas。
var c = document.getElementById(‘canvas‘);這樣，c就表示canvas對象，接下來定義canvas的大小。
c.width = 500;c.height = 300;這樣就把canvas的大小設定成了寬500px，高300px了。當然，這個canvas的大小可以根據你的需求自由的設定。我這裡是隨便設定的，沒有什麼特別的意思。
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進位的顏色。
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，然後使用黑色將canvas清空一下而已，所以畫面只是一片黑色。但是如果畫面可以運行出來的話，WebGL的準備工作就算基本完成了。
這一次，只是擷取一下WebGL的context，然後將使用黑色將畫面清空一下。但是事實上，這樣就可以開始使用WebGL了。
接下來，會更具體更詳細的介紹WebGL相關的處理，但不管做什麼，基礎都是很重要的，這次的內容還是需要徹底理解一下的。
下次，介紹一下著色器相關的基礎知識。
轉載請註明：轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
