WebGL - 旋轉：讓你的圖形動起來

Hello, 有志於WebGL的開發者們！今天，我們將深入計算機圖形中最令人興奮的方面之一：旋轉。作為你們親切鄰居的計算機科學老師，我將指導你們進入旋轉三角形和翻轉形狀的神奇世界。所以，戴上你們的虛構3D眼鏡，我們開始吧！

WebGL - Rotation

理解 WebGL 中的旋轉

在我們跳進代碼之前，讓我們花一會兒時間理解在WebGL的背景下旋轉意味著什麼。想像你手中拿著一張紙飛機。當你旋轉它時，你正在改變它在空間中的方向。在WebGL中，我們做同樣的事情，但具有數學上的精確度！

WebGL中的旋轉涉及到圍繞中心軸改變頂點（構成我們形狀的點）的位置。這可以是X、Y或Z軸，甚至是它們的組合。

矩陣的魔力

現在，我知道你們在想什麼："矩陣？難道那不是《黑客帝國》電影中的東西嗎？" 嗯，不完全是，但它們同樣酷炫！在WebGL中，我們使用矩陣來高效地執行旋轉。別擔心這聽起來複雜 - 我們會一步步分解。

範例 - 旋轉一個三角形

讓我們從一個簡單的範例開始：旋轉一個三角形。我們將從一個基本的三角形開始，然後讓它像幾何芭蕾舞者一樣旋轉！

步驟 1：設定我們的 WebGL 環境

首先，我們需要設定我們的 WebGL 環境。這裡是一個基本的 HTML 構架：

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
// 我們的 WebGL 代碼將放在這裡
</script>

步驟 2：初始化 WebGL

現在，讓我們初始化 WebGL：

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

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

這段代碼獲取我們的畫布元素並嘗試獲取 WebGL 環境。如果 WebGL 不被支援，我們會看到一條錯誤訊息。

步驟 3：創建我們的著色器

著色器是運行在 GPU 上的特殊程序。我們需要兩種類型：頂點著色器和片段著色器。這裡有一個簡單的集合：

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
`;

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

頂點著色器應用我們的旋轉矩陣，而片段著色器則將我們的三角形染成紅色。

步驟 4：編譯和鏈接著色器

接下來，我們需要編譯和鏈接我們的著色器：

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

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

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

這段代碼創建了我們的著色器程序，我們將用它來渲染我們旋轉的三角形。

步驟 5：創建我們的三角形

現在，讓我們定義我們的三角形：

const positions = [
0, 0.5,
-0.5, -0.5,
0.5, -0.5
];

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

這創建了一個以原點為中心的簡單三角形。

步驟 6：旋轉魔法

這裡是真正的魔法發生的地方。我們將創建一個函數來生成我們的旋轉矩陣：

function createRotationMatrix(angleInRadians) {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1
];
}

這個函數接受一個弧度角並返回一個 3x3 的旋轉矩陣。

步驟 7：渲染我們旋轉的三角形

最後，讓我們把所有東西放在一起並讓我們的三角形旋轉：

let angleInRadians = 0;

function render() {
angleInRadians += 0.01;

gl.clearColor(0, 0, 0, 1);
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);

const matrixLocation = gl.getUniformLocation(program, "u_matrix");
const matrix = createRotationMatrix(angleInRadians);
gl.uniformMatrix3fv(matrixLocation, false, matrix);

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

requestAnimationFrame(render);
}

render();

這個函數做了以下幾件事：

增加我們的旋轉角度
清除畫布
設置我們的著色器程序和屬性
創建並應用我們的旋轉矩陣
繪製三角形
請求下一個動畫帧

瞧！我們有了一個旋轉的三角形！

結論

恭喜你！你剛剛創造了你第一個旋轉的形狀在WebGL中。記住，這只是個開始。有了這些基本原理，你可以創建有多个旋轉物體的複雜3D場景。

當我們結束時，我想到一個學生曾經說的："我以為計算機圖形只是關於花哨的軟件，但現在我發現它更像是數字木偶師！" 她說得對 - 用WebGL，你就是拉動你自己數字木偶秀的線。

繼續練習，繼續嘗試，最重要的是，繼續在WebGL中享受樂趣。在你意識到之前，你將創造出讓最經驗豐富的開發者都會說 "哇！" 的驚艷3D視覺化。

方法	描述
`createShader(gl, type, source)`	創建和編譯著色器
`createRotationMatrix(angleInRadians)`	生成一個2D旋轉矩陣
`render()`	繪製旋轉的三角形
`gl.clearColor(r, g, b, a)`	設置用於清除畫布的颜色
`gl.clear(gl.COLOR_BUFFER_BIT)`	清除畫布
`gl.useProgram(program)`	設置當前的著色器程序
`gl.getAttribLocation(program, name)`	獲取屬性的位置
`gl.enableVertexAttribArray(location)`	啟用頂點屬性數組
`gl.bindBuffer(gl.ARRAY_BUFFER, buffer)`	綁定緩衝區
`gl.vertexAttribPointer(location, size, type, normalized, stride, offset)`	指定頂點數據的佈局
`gl.getUniformLocation(program, name)`	獲取統一變量的位置
`gl.uniformMatrix3fv(location, transpose, value)`	設置矩陣統一值
`gl.drawArrays(mode, first, count)`	從數組數據渲染原始圖形
`requestAnimationFrame(callback)`	請求下一個動畫帧

開心編程，願你的三角形總是朝正確的方向旋轉！

Credits: Image by storyset