WebGL - 簡介

你好，未來的 WebGL 巔峰大師！歡迎來到我們令人興奮的 3D 網頁圖形世界之旅。我很興奮能成為你們的嚮導，一起探索 WebGL 的迷人領域。作為一個教學計算機圖形超過十年的老師，我可以向你們保證，雖然前面的道路可能看起來令人生畏，但同時也是非常有成就感的。所以，請繫好安全帶，我們一起跳進去吧！

WebGL - Introduction

什麼是 OpenGL？

在我們深入 WebGL 之前，讓我們先快速了解一下它的前輩，OpenGL。想像你是一位試圖創作出傑作的藝術家。OpenGL 就像你神奇的油彩和刷子，讓你能在計算機屏幕上創造出令人驚艷的視覺藝術。

OpenGL，全稱 Open Graphics Library，是一個跨平台的应用程序编程接口（API），用於渲染 2D 和 3D 向量圖形。自 1992 年以來，它一直存在，並成為無數遊戲、模擬和視覺應用程序的核心。

這裡有一個簡單的比喻：如果你的計算機屏幕是一塊畫布，那麼 OpenGL 就是幫助程序員以令人驚艷的細節和速度在這塊畫布上繪製的工具集。

什麼是 WebGL？

現在，讓我們將焦點轉移到我們節目的明星：WebGL。如果說 OpenGL 是桌面應用程序的畫筆，那麼 WebGL 就是網頁的畫筆。它是一個 JavaScript API，讓你能在網頁瀏覽器中直接創造出色的 3D 圖形，而無需任何插件。

WebGL 將 OpenGL ES 2.0（嵌入式系統的 OpenGL 版本）的強大功能帶到了網絡上，讓開發者能通過 JavaScript 直接利用 GPU（圖形處理單元）。

這裡有一個簡單的 "Hello, World!" WebGL 示例：

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("無法初始化 WebGL。您的瀏覽器或電腦可能不支持它。");
return;
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;
</script>

這段代碼在您的網頁上創建了一個黑色畫布。看起來可能沒有什麼，但這是您進入 WebGL 世界的第一步！

誰開發了 WebGL

WebGL 是由 Khronos 團隊開發的，這個團隊也是 OpenGL 的幕後推手。它首次在 2011 年推出，從那時起，它改變了我們對網絡圖形的看法。

有趣的事實：WebGL 的開發受到了 Mozilla 的 Vladimir Vukićević 所做實驗的啟發。他創建了一個暴露給 JavaScript 的 OpenGL ES 的 canvas 元素，這為 WebGL 的問世奠定了基礎。

渲染

渲染是從 2D 或 3D 模型生成圖像的過程。在 WebGL 中，這個過程是實時發生的，這意味著圖像是在您與之交互時即時生成的。

下面是一個渲染紅色三角形的簡單示例：

// 頂點著色器程序
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

// 片段著色器程序
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// ...（初始化代碼）

// 繪製場景
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);  // 清除為黑色，完全不透明
gl.clearDepth(1.0);                 // 清除所有內容
gl.enable(gl.DEPTH_TEST);           // 启用深度测试
gl.depthFunc(gl.LEQUAL);            // 近處的物體遮蔽遠處的物體

// 在開始繪製之前清除畫布
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// ...（設置場景）

{
const numComponents = 2;  // 每次迭代提取 2 個值
const type = gl.FLOAT;    // 缓冲区中的数据是 32 位浮点数
const normalize = false;  // 不归一化
const stride = 0;         // 从一组值到下一组值需要多少字节
const offset = 0;         // 缓冲区内部从哪里开始
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}

// 告诉 WebGL 在繪製時使用我們的程序
gl.useProgram(programInfo.program);

{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}

這段代碼設置了必要的著色器和緩冲区以在屏幕上渲染一個簡單的紅色三角形。

GPU

GPU 是圖形處理單元的縮寫。它是一種專門設計用於處理渲染圖形涉及的複雜數學計算的處理器。雖然 CPU 非常適合通用計算，但 GPU 則擅長平行執行許多簡單的計算，這對於圖形工作非常理想。

這樣想：如果渲染一個複雜的 3D 風景就像畫一幅巨大的壁畫，那麼 CPU 就像一位非常有才華的藝術家，而 GPU 則像数千名普通的藝術家一起工作。

GPU 加速計算

GPU 加速計算是指將 GPU 和 CPU 一起使用以加速科學、分析、工程、消費和企業應用程序。在 WebGL 的上下文中，這意味著您的圖形計算是卸載到 GPU 上，從而釋放 CPU 以執行其他任務，並導致更平滑、更快速的圖形。

支持的瀏覽器

WebGL 的美麗之處在於它在現代瀏覽器中的廣泛支持。截至 2023 年，WebGL 支持以下瀏覽器：

瀏覽器	版本
Chrome	9+
Firefox	4+
Safari	5.1+
Opera	12+
Internet Explorer	11+
Microsoft Edge	12+

WebGL 的優勢

WebGL 提供了許多優勢：

跨平台兼容性：一次編寫，到處運行（只要有瀏覽器）。
不需要插件：它內置在瀏覽器中。
硬件加速：利用 GPU 提高性能。
與網絡技術的整合：可以與其他網絡 API 一起使用，創造豐富的互動體驗。
開放標準：任何人都可以為其開發貢獻。

環境設置

設置您的 WebGL 環境出奇地簡單。您需要的是：

一個現代的網絡瀏覽器
一個文本編輯器（我推薦 Visual Studio Code）
一個本地網絡服務器（您可以使用 Python 的內置服務器或 Node.js 的 http-server）

以下是一個簡單的設置過程：

為您的項目創建一個新目錄
創建一個 HTML 文件（例如，index.html）和一個 JavaScript 文件（例如，script.js）
在您的 HTML 文件中，包含您的 JavaScript 文件並設置一個 canvas：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個 WebGL 項目</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="script.js"></script>
</body>
</html>

在您的 JavaScript 文件中，初始化 WebGL：

function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("無法初始化 WebGL。您的瀏覽器或電腦可能不支持它。");
return;
}

// WebGL 代碼在這裡
}

window.onload = main;

就这样！您現在已經準備好開始您的 WebGL 旅程了。記住，學習 WebGL 就像學習騎自行車一樣 - 一開始可能會晃晃悠悠，但隨著練習，您很快就能自由馳騁。祝您編程愉快！

Credits: Image by storyset