WebGL 入門
WebGL 使 Web 內容可以使用基於 OpenGL ES 2.0 的 API，在支援它的瀏覽器中，透過 HTML canvas 執行 2D 和 3D 渲染，而無需外掛。
WebGL 程式由 JavaScript 編寫的控制程式碼和在計算機圖形處理單元 (GPU) 上執行的著色器程式碼 (GLSL) 組成。WebGL 元素可以與其他 HTML 元素混合，並與其他頁面部分或頁面背景進行合成。
本文將向您介紹 WebGL 的基礎知識。假設您已經瞭解 3D 圖形涉及的數學知識，本文並不試圖自己教授 3D 圖形概念。
本教程中的程式碼示例也可以在 GitHub 上的 webgl-examples 資料夾 中找到。
值得注意的是，這一系列文章介紹的是 WebGL 本身；但是，有許多可用的框架可以封裝 WebGL 的功能，從而更輕鬆地構建 3D 應用程式和遊戲，例如 THREE.js 和 BABYLON.js。
準備 3D 渲染
首先，建立兩個新檔案
- "index.html"
- "webgl-demo.js"
"index.html" 檔案應包含以下內容
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WebGL Demo</title>
<script src="webgl-demo.js" type="module"></script>
</head>
<body>
<canvas id="gl-canvas" width="640" height="480"></canvas>
</body>
</html>
請注意，這聲明瞭一個我們的示例將繪製的 canvas。
準備 WebGL 上下文
將以下程式碼新增到 "webgl-demo.js" 檔案中
main();
//
// start here
//
function main() {
const canvas = document.querySelector("#gl-canvas");
// Initialize the GL context
const gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (gl === null) {
alert(
"Unable to initialize WebGL. Your browser or machine may not support it.",
);
return;
}
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
}
當我們的指令碼載入時，會呼叫 main() 函式。它的目的是設定 WebGL 上下文並開始渲染內容。
我們在這裡做的第一件事是獲取對 canvas 的引用，並將其分配給名為 canvas 的變數。
一旦我們有了 canvas，我們就嘗試透過呼叫 getContext() 並傳入字串 "webgl" 來獲取它的 WebGLRenderingContext。如果瀏覽器不支援 WebGL，getContext() 將返回 null，在這種情況下，我們會向用戶顯示一條訊息並退出。
如果上下文成功初始化，變數 gl 就是我們的引用。在這種情況下，我們將清除顏色設定為黑色，並將上下文清除為該顏色（用背景色重繪 canvas）。
此時，您已經有了足夠多的程式碼，可以成功初始化 WebGL 上下文，並且您將得到一個大的黑色空白框，已準備好接收內容。
另見
- WebGL 基礎知識
- 現代 OpenGL 入門：Joe Groff 撰寫的一系列關於 OpenGL 的精彩文章，清晰地介紹了 OpenGL 的歷史和重要的圖形管線概念，幷包含一些示例來演示 OpenGL 的工作原理。如果您對 OpenGL 一無所知，這是一個很好的起點。