WebGL 入門

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

這篇文章將會向你介紹 WebGL 的基礎。這篇文章假設你已經對於三維圖學涉及的數學有所了解，並且它將不會被佯裝為三維圖學的教材。在我們的學習區域內有初學者指南讓你完成編程任務：Learn WebGL for 2D and 3D graphics.

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

準備三維渲染

首先你需要一個 canvas 元素讓 WebGL 進行渲染。下面的 HTML 定義的 canvas 元素供後續的範例繪製。

html
<body>
  <canvas id="glCanvas" width="640" height="480"></canvas>
</body>

準備 WebGL 背景資料

備註： 背景資料為 Context 翻譯而來

在下面的 JavaScript 程式碼，當指令完成讀取後會執行 main() 函式。目的是為了設定 WebGL 背景資料並且開始渲染內容。

js
main();

// 從這開始
function main() {
  const canvas = document.querySelector("#glCanvas");
  // 初始化 GL context
  const gl = canvas.getContext("webgl");

  // 當 WebGL 有效才繼續執行
  if (gl === null) {
    alert("無法初始化 WebGL，你的瀏覽器不支援。");
    return;
  }

  // 設定清除色彩為黑色，完全不透明
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 透過清除色來清除色彩緩衝區
  gl.clear(gl.COLOR_BUFFER_BIT);
}

在此我們做的第一件事是取得 canvas 元素的參考，並存入 canvas 變數中。

一旦我們取得了 canvas ，我們透過呼叫 getContext 並傳入 "webgl" 字串來取得 WebGLRenderingContext。若瀏覽器不支援 webgl getContext 會回傳 null 同時會顯示訊息給使用者並且離開。

如果成功初始化， gl 就會成為一個 WebGL 背景資料的參考。在這裡我們設置清除色為黑色，並透過該色清除 context (用背景色重新繪製 canvas )。

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

檢視完整程式碼 | 開啟新頁面來檢視結果

亦可參考

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