WebGL - 開發範例：初學者指南

你好，未來的 WebGL 巫師們！我很興奮能成為你們在這個令人興奮的 WebGL 世界的引路人。作為一名有多年經驗的計算機科學教師，我見過無數學生在他們在網頁上創造出第一個 3D 圖形時眼睛發光。今天，我們將一起踏上同樣的冒險之旅。所以，請繫好安全帶，讓我們一起潛入水中！

WebGL - Sample Application

WebGL 是什麼？

在我們開始編程之前，讓我們先來了解 WebGL 是什麼。WebGL（Web 圖形庫）是一個 JavaScript API，它允許我們在網頁瀏覽器中不使用插件就能渲染互動式的 3D 和 2D 圖形。這就像給你的網頁頁面賦予超能力，創造出令人驚艷的視覺效果！

WebGL 應用程序的結構

一個 WebGL 應用程序通常由幾個關鍵組成部分。讓我們一一分解：

1. HTML Canvas

畫布是我們的繪圖板。所有的魔法都在這裡發生！

<canvas id="myCanvas" width="640" height="480">
你的瀏覽器不支持 HTML5 canvas 標籤。
</canvas>

這會在網頁上創建一個 640x480 像素的畫布。把它想像成藝術家的畫架，準備好創作你的傑作！

2. JavaScript 代碼

這是我們寫入 WebGL 指令的地方。這就像給我們的虛擬藝術家發出指示。

3. 頂點著色器和片段著色器

這些是在 GPU 上運行的特殊程序。它們就像我們 3D 圖形的畫筆和顏料調色板。

4. 缓冲区

缓冲区存储了我們 3D 对象的数据。可以把它们想象成我們 3D 雕塑的原料。

現在我們知道了原料，讓我們來烹飪一個美味的 WebGL 應用程序！

範例應用程序

讓我們創建一個簡單的 WebGL 應用程序來繪製一個彩色三角形。我們將詳細走過每一步。

步驟 1：設置 HTML

首先，我們需要創建一個帶有 canvas 元素的 HTML 檔案：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
你的瀏覽器不支持 HTML5 canvas 標籤。
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

這創建了我們的畫布，並鏈接到我們下一步將創建的 JavaScript 檔案。

步驟 2：初始化 WebGL

現在，讓我們創建我們的 webgl-demo.js 檔案並設置 WebGL：

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

if (!gl) {
alert("你的瀏覽器不支持 WebGL！");
return;
}

// WebGL 已經準備好使用！
}

window.onload = main;

這個函數獲取我們的畫布，初始化 WebGL，並檢查是否支持。這就像在開始之前檢查我們是否有所有的藝術用品。

步驟 3：創建著色器

現在，讓我們創建我們的頂點和片段著色器：

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('編譯著色器時發生錯誤: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

這些著色器定義了我們三角形的位置和顏色。頂點著色器定位我們的三角形，而片段著色器為它提供了一個漂亮的粉紅色。

步驟 4：創建程序

現在，讓我們將我們的著色器鏈接到一個程序：

function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('無法初始化著色器程序: ' + gl.getProgramInfoLog(program));
return null;
}

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

這就像組裝我們的藝術工具並準備好繪畫！

步驟 5：創建缓冲区

現在，讓我們創建一個缓冲区來存储我們三角形的顶点：

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

這定義了我們三角形的形状。這就像在我們開始繪畫之前草擬出基本的形状。

步驟 6：渲染三角形

最後，讓我們繪製我們的三角形：

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3);

這裡就是魔法發生的地方！我們清除畫布，設置我們的程序和缓冲区，最後繪製我們的三角形。

結論

恭喜你！你剛剛創建了你自己的第一個 WebGL 應用程序。你已經邁出了進入網頁上更大 3D 圖形世界的第一步。記住，就像任何藝術形式一樣，精通 WebGL 需要練習和耐心。但是，隨著每行代碼的編寫，你正在創造一個更加豐富和多互動的網絡。繼續探索，繼續創造，最重要的是，玩得開心！

這裡是一個總結我們使用的主要方法的表格：

方法	描述
`getContext("webgl")`	初始化 WebGL
`createShader()`	創建著色器
`shaderSource()`	定義著色器源代碼
`compileShader()`	編譯著色器
`createProgram()`	創建程序
`attachShader()`	將著色器附加到程序
`linkProgram()`	鏈接程序
`createBuffer()`	創建缓冲区
`bindBuffer()`	綁定缓冲区
`bufferData()`	用數據填充缓冲区
`viewport()`	設置視口
`clearColor()`	設置清除顏色
`clear()`	清除畫布
`useProgram()`	使用程序
`getAttribLocation()`	獲取屬性位置
`enableVertexAttribArray()`	启用顶点属性数组
`vertexAttribPointer()`	指定顶点数据的布局
`drawArrays()`	渲染图元

將這個表格放在手邊，以方便你在 WebGL 之旅中繼續前進。快樂編程！

Credits: Image by storyset