WebGL入門

次頁 »

WebGL 讓網頁內容能藉由一種基於 OpenGL ES 2.0 的 API 的幫助，於支援此 API 的瀏覽器環境中，不需使用外掛程式就能在HTML的 canvas 元素中實現三維渲染。 WebGL 程式包含了由 JavaSrcipt 撰寫的控制碼以及在電腦的圖形處理器( GPU )上執行的特效程式碼(著色器程式碼)。WebGL 元素可以加入其他 HTML 元素之中並與網頁或網頁背景的其他部分混合。

這篇文章將會向您介紹 WebGL 的基礎。這篇文章假設您已經對於三維圖學涉及的數學有所了解，並且它將不會被佯裝為 OpenGL 的教材。

在此教學中的程式碼範例都能在 webgl-examples GitHub repository 之中找到。

準備三維渲染

利用WebGL進行三維渲染所需的第一件事就是一個 canvas 元素。下面的 HTML 片段建立了一個 canvas 元素，並設置了一個用來初始化WebGL背景資料的 onload 事件處理式。

<body onload="start()">
  <canvas id="glcanvas" width="640" height="480">
    Your browser doesn't appear to support the 
    <code>&lt;canvas&gt;</code> element.
  </canvas>
</body>

準備 WebGL背景資料

在我們的 JavaScript 程式碼之中的 start() 函式會在網頁文件被載入時呼叫。其任務是設置 WebGL 背景資料及啟動渲染的內容。

var gl; // 一個WebGL的全域變數

function start() {
  var canvas = document.getElementById("glcanvas");

  // 初始化 GL 背景資料
  gl = initWebGL(canvas);
  
  // 只在 WebGL 可取得且運行時繼續
  if (!gl) {
    return;
  }

  // 設定清除色為黑，完全不透明
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 開啟景深測試
  gl.enable(gl.DEPTH_TEST);
  // 近物存在使遠物模糊
  gl.depthFunc(gl.LEQUAL);
  // 清除色彩以及景深緩衝區
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}

在此我們做的第一件事是取得一個 canvas 元素的參考，並將其放入一名為 canvas 的變數中。明顯地如果您不需要重複地參照此 canvas，您應該避免將此值儲存在全域下，而是存於一個局部變數或一個物件的成員欄位。

一旦我們取得了 canvas ，我們就可呼叫 initWebGL() 函式；這是個我們將會短暫定義的函式；其使命為初始化 WebGL 背景資料。

如果成功初始化有成功， gl 就會成為一個 WebGL背景資料的參考。在這裡我們設置清除色為黑色並清除背景為該顏色。在那之後，背景資料將會藉設定參數而被配置。在此我們也啟動了景深測試以及規定了近物將會使遠物模糊。

以上是我們為了以下的初次測試所需要完成的部分。接著來看看如何實際開始做些事情。

創建 WebGL 背景資料

initWebGL() 函式看起來就像這樣:

function initWebGL(canvas) {
  gl = null;
  
  // 嘗試獲得標準背景資料。如果失敗，退而獲取試驗版本
  gl = canvas.get背景資料("webgl") || canvas.get背景資料("experimental-webgl");
  
  // 如果再次失敗則放棄
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser may not support it.");
  }
  
  return gl;
}

為了幫 canvas 獲取 WebGL 背景資料, 我們從 canvas 要求名為 "webgl" 的背景資料。如果失敗，則再次嘗試 "experimental-webgl"。如果再次失敗，我們向使用者表示警告以告知其瀏覽器似乎不支援 WebGL。那就是以上的內容。在這個階段， gl 不是 null (意味著沒有 WebGL 背景資料可用) 就是一個我們將要在其中渲染的 WebGL 背景資料的參考。

至此，您已經有足夠初始化 WebGL 背景資料的程式碼，並且準備好了等待接收內容的一個容器。

View the complete code | Open this demo on a new page

調整 WebGL 背景大小

在獲取一個新的 WebGL 背景時，預設將設定其視口解析度為 canvas 的高度及寬度，不使用 CSS。編輯 canvas元素將會改變其呈現之大小但渲染解析度將不變。在背景創建之後編輯 canvas 的寬度及高度屬性也將不會改變將產生的像素數。要改變 WebGL 渲染的解析度的話，例如當使用者調整視窗大小或是您希望提供應用程式內的可調整式圖像設定，您將會需要呼叫 WebGL 背景資料之viewport() 函式以適應該變動。

如果要改變 WebGL背景的渲染解析度，且其變數命名如上述範例時:

gl.viewport(0, 0, canvas.width, canvas.height);

當以和其 CSS style定義之不同解析度渲染時，一個 canvas將會受到縮放。以 CSS 調整大小是在以低解析度節省資源之下最有用的，並且允許瀏覽器放大尺寸。縮小尺寸也可以達成，且可能產生"超級取樣抗鋸齒效果"( SSAA )(儘管會產生的結果及嚴重的效能損耗。) 假如可用且合適的話，最好還是仰賴重取樣抗鋸齒( MSAA ) 以及使用者瀏覽器之紋理過濾的實作，至少比起依靠電腦的運算能力來做，然後希望瀏覽器的圖像縮小演算法能產生漂亮的結果。

亦可參考

An introduction to WebGL: 由 Luz Caballero 撰寫，並出版在 dev.opera.com。這篇文章點出了 WebGL 的意義，解釋了其運作(包含渲染管路的觀念)，並介紹了一些 WebGL libraries。
WebGL Fundamentals
An intro to modern OpenGL: 由 Joe Groff 撰寫的一系列關於 OpenGL 的好文章，提供了 OpenGL清楚的簡介，從其歷史到重要的圖像管路概念，以及一些展示其原理的範例。如果您完全不懂OpenGL，這將是一個好的入門介紹。