WebGL - 繪製點

Hello, 有志者們！今天，我們將踏上一段令人興奮的旅程，進入 WebGL 的世界，特別聚焦於繪製點。作為你們友好的鄰居電腦老師，我會一步步地引導你們進行這次冒險。別擔心如果你從未編過程 - 我們會從最基本的開始，然後逐步提升。所以，拿起你的虛擬鉛筆，讓我們一起跳水吧！

WebGL - Drawing Points

WebGL 是什麼？

在我們開始繪製點之前，讓我們先了解 WebGL 是什麼。WebGL（Web 圖形庫）是一個強大的 JavaScript API，讓我們能在網頁瀏覽器中創建 2D 和 3D 圖形。它就像一支神奇的畫筆，可以直接在你的網頁上繪圖！

所需步驟

要使用 WebGL 繪製點，我們需要遵循一系列步驟。把它當作創作數字藝術的配方。這裡有一個總結這些步驟的表格：

步驟	描述
1	獲取 canvas 元素
2	獲取 WebGL 繪製上下文
3	定義幾何形狀（頂點）
4	創建頂點著色器
5	創建片段著色器
6	創建著色器程序
7	將數據加載到 GPU
8	設置視口
9	清除畫布
10	繪製點

現在，讓我們分解每一步驟，看看它們是如何共同創作出我們的傑作！

範例 - 使用 WebGL 繪製三個點

讓我們通過一個範例，在其中我們將在畫布上繪製三個彩色點。我會詳細解釋代碼的每一部分，讓你完全理解發生了什麼。

步驟 1：設置 HTML

首先，我們需要創建一個 HTML 文件，其中包含一個 canvas 元素：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個 WebGL 點</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
您的瀏覽器不支援 canvas 元素。
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>

這將創建一個將成為我們繪圖板的 canvas。我們下一步將創建的 JavaScript 文件將負責所有魔法！

步驟 2：創建 JavaScript 文件

現在，讓我們創建一個名為 webgl-points.js 的文件並開始編寫我們的 WebGL 應用程序：

// 步驟 1：獲取 canvas 元素
const canvas = document.getElementById('myCanvas');

// 步驟 2：獲取 WebGL 繪製上下文
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL 不支援');
throw new Error('WebGL 不支援');
}

// 步驟 3：定義幾何形狀（頂點）
const vertices = new Float32Array([
0.0, 0.5,    // 點 1
-0.5, -0.5,  // 點 2
0.5, -0.5    // 點 3
]);

// 步驟 4：創建頂點著色器
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 步驟 5：創建片段著色器
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 步驟 6：創建著色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 步驟 7：將數據加載到 GPU
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 步驟 8：設置視口
gl.viewport(0, 0, canvas.width, canvas.height);

// 步驟 9：清除畫布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 步驟 10：繪製點
gl.drawArrays(gl.POINTS, 0, 3);

現在，讓我們分解這段代碼並了解每一部分的作用：

代碼理解

步驟 1 和 2：設置 WebGL

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

在這裡，我們獲取 canvas 元素和 WebGL 繪製上下文。這就像準備我們的畫筆和調色板！

步驟 3：定義幾何形狀

const vertices = new Float32Array([
0.0, 0.5,    // 點 1
-0.5, -0.5,  // 點 2
0.5, -0.5    // 點 3
]);

我們定義了三個在 2D 空間中的點。坐標範圍從 -1 到 1，在 x 軸和 y 軸上。想像一下我們的 canvas 分成四個象限，中心為 (0,0)。

步驟 4 和 5：創建著色器

著色器是運行在 GPU 上的特殊程序。我們有两种：

頂點著色器：確定我們點的位置。
片段著色器：確定我們點的顏色。

const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

頂點著色器設定了我們點的位置和大小。片段著色器將顏色設定為紅色（RGB 中的 1.0, 0.0, 0.0）。

步驟 6 和 7：創建程序和加載數據

這些步驟涉及創建著色器程序和將我們的頂點數據加載到 GPU 的內存中。

步驟 8 和 9：設置視口

我們將視口設置為與 canvas 大小匹配，並將畫布清空為黑色。

步驟 10：繪製點

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

最後，我們繪製我們的三個點！

結論

恭喜你！你剛剛創建了你自己的第一個 WebGL 應用程序，用於繪製點。這只是你進入引人入勝的計算機圖形世界的開始。隨著你繼續探索，你將能夠創建更複雜的形狀，添加動畫，甚至進入 3D 圖形。

記住，學習 WebGL就像學習繪畫一樣 - 它需要練習和耐心。如果第一次不能完美運作，不要氣餒。繼續實驗，很快你就能創作出數字傑作！

在我們的下一課中，我們將探索如何為我們的點添加不同的顏色並創建更複雜的形狀。到時候見，快樂編程！

Credits: Image by storyset