WebGL - 繪製一個四邊形
你好，有志於網頁開發的們！今天，我們將踏上一段令人興奮的旅程，進入WebGL的世界，學習如何繪製一個四邊形（簡稱為"quad"）。別擔心你對編程是新手——我會像一個有耐心的老師一樣，帶領你一步步學習，我已經幫助無數學生像你一樣。
WebGL是什麼？
在我們深入繪製四邊形之前，讓我們先來了解WebGL是什麼。WebGL（Web圖形庫）是一個強大的JavaScript API，它讓我們能在網頁瀏覽器中創建令人驚艷的2D和3D圖形。它就像一支神奇的畫筆，能夠將你的想象力在網頁上呈現出來！
繪製四邊形的步驟
現在，讓我們將繪製quad的過程分解成可管理的步驟。把它想成蓋房子——我們從基礎開始，然後逐步建造。
步驟1：設置HTML畫布
首先，我們需要一個畫布來繪圖。在HTML中，我們使用<canvas>元素。這就像為繪畫設置一個畫架。
<canvas id="myCanvas" width="600" height="400">
您的瀏覽器不支持HTML5 canvas標籤。
</canvas>步驟2：初始化WebGL環境
接下來，我們需要獲得WebGL環境。這就像拿起我們神奇的WebGL畫筆。
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL不支持，轉而使用experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('您的瀏覽器不支持WebGL');
}步驟3：創建頂點著色器
現在，我們將創建一個頂點著色器。這告訴WebGL我們的quad的角落應該在哪裡。
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);步驟4：創建片段著色器
片段著色器決定我們的quad會是什麼顏色。讓我們選擇一個愉快的藍色！
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);步驟5：創建並鏈接程序
現在，我們將創建一個程序並將我們的著色器鏈接到它。這就像將我們的畫筆和顏料放在一起。
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);步驟6：創建緩存並加載頂點數據
該定義我們quad的角落了！
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);步驟7：將位置緩存連接到屬性
我們需要告訴WebGL如何讀取我們的位置數據。
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);步驟8：繪製四邊形
終於到了我們期待已久的時刻——讓我們繪製我們的quad！
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);繪製四邊形的範例
現在，讓我們將所有內容整合到一個完整的範例中：
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL 四邊形</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
您的瀏覽器不支持HTML5 canvas標籤。
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的瀏覽器不支持WebGL');
}
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>那就這樣！你自己的WebGL quad。當你在瀏覽器中打開這個HTML文件時，你應該會在畫布上看到一個漂亮的藍色四邊形。
結論
恭喜你繪製了自己的第一個WebGL quad！今天我們學習了很多，從設置畫布到創建著色器，最後繪製我們的形狀。記住，學習WebGL就像學習繪畫一樣——它需要練習和耐心。如果一開始不能立即掌握，不要氣餒。繼續嘗試，很快你就能在網頁上創造出令人驚艷的3D圖形！
在我們的下一課中，我們將探索如何為我們的WebGL作品添加互動性。在那之前，祝你編程愉快！
Credits: Image by storyset