到目前为止，我们已经创造了一个有形状、有颜色的三角形。但要让它在画布上移动，我们现在唯一的办法就是……回去修改 JavaScript 里的顶点坐标数组。
// 如果想让三角形向右移动一点...
const positionsAndColors = [
0.1, 0.5, 1.0, 0.0, 0.0, // 把 x 从 0.0 改成 0.1
-0.4, -0.5, 0.0, 1.0, 0.0, // 把 x 从 -0.5 改成 -0.4
0.6, -0.5, 0.0, 0.0, 1.0 // 把 x 从 0.5 改成 0.6
];
// 然后重新上传整个 buffer 的数据...
gl.bufferData(...);
这太笨拙了！如果要让它旋转呢？天哪，那我们得拿出三角函数来手算每个点的新坐标。这种方式不仅效率低下，而且完全违背了 GPU 的设计初衷。
GPU，这位图形处理专家，最擅长的工作就是——疯狂地进行数学运算，尤其是矩阵运算。而变换 (Transformation)，无论是平移、旋转还是缩放，本质上都是数学运算。
魔法咒语：矩阵 (Matrix)
想象一下，你有一个点的坐标 (x, y)。现在，我给你一个神奇的“咒语”——矩阵，你用这个点的坐标去乘以这个咒语，就能得到一个新的坐标 (x', y')。
- 如果这个咒语是“平移咒语”，新坐标就是点平移后的位置。
- 如果这个咒语是“旋转咒语”，新坐标就是点围绕原点旋转后的位置。
- 如果这个咒语是“缩放咒语”，新坐标就是点缩放后的位置。
更神奇的是，这些咒语可以叠加！你可以先旋转，再平移，只需要把两个咒语矩阵先乘起来，得到一个更复杂的“复合咒语”，然后用这个终极咒语去处理所有的点，一步到位。
这就是 2D 变换的核心思想：定义一个物体的形状一次（比如一个以原点为中心的三角形），然后通过向 GPU 发送不同的“变换咒语”（矩阵），来控制它在屏幕上的最终状态。
新伙伴登场：uniform 变量
我们如何把这个“咒语矩阵”发送给 GPU 呢？
回顾一下，attribute 是给每个顶点都不同的数据。但变换矩阵对于一个物体的所有顶点来说，都是一样的，是统一的。因此，我们需要 GLSL 变量家族的最后一位成员：uniform。
uniform 变量就像一个全局指令，从 JavaScript 发出，顶点着色器（有时片元着色器也会用）里的每一次执行都能接收到这份完全相同的数据。
开始施法：代码改造
1. 顶点着色器：接收并使用矩阵
我们的顶点着色器需要一个 uniform 变量来接收 2D 变换矩阵（它是一个 3x3 的矩阵，所以类型是 mat3）。然后，在计算 gl_Position 之前，用它来变换顶点的位置。
attribute vec2 a_position;
attribute vec4 a_color;
uniform mat3 u_transformMatrix; // 新增：接收变换矩阵
varying vec4 v_color;
void main() {
// 核心改动：
// 1. 把 a_position (vec2) 扩展成 vec3，因为 mat3 需要和 vec3 相乘。
// 我们加一个 1.0，这在图形学中称为齐次坐标，是矩阵运算的要求。
// 2. 将位置向量与变换矩阵相乘，得到变换后的新位置。
// 3. 取新位置的 x, y 分量，构建最终的 gl_Position。
vec2 transformedPosition = (u_transformMatrix * vec3(a_position, 1.0)).xy;
gl_Position = vec4(transformedPosition, 0.0, 1.0);
v_color = a_color;
}
2. 片元着色器：无需改动！
颜色逻辑和变换无关，所以我们的片元着色器保持原样。
3. JavaScript：动画循环与矩阵计算
JavaScript 的部分将是改动最大的。我们需要：
- 恢复顶点数据：让三角形的坐标变回最原始、最简单的状态，比如以
(0,0)为中心。所有变换都交给矩阵。 - 添加矩阵数学函数：在现实项目中，你通常会使用一个成熟的库（如
gl-matrix）。但为了教学，我们手动实现几个简单的函数来创建平移、旋转和缩放矩阵。这样能让你更清楚地看到底层发生了什么。 - 获取
uniform的位置：就像getAttribLocation一样，我们需要用getUniformLocation来找到着色器中uniform变量的地址。 - 创建动画循环：使用
requestAnimationFrame，这是一个浏览器提供的 API，能让我们以最优的帧率来重复执行绘制函数，从而形成流畅的动画。在每一帧中，我们都会更新变换（比如改变旋转角度），计算新的矩阵，并重新绘制。
下面是集成了所有改动的完整代码。这次，你会看到一个在原地不停旋转的彩色三角形！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebGL 教程 3：动态变换</title>
<style>
body { background-color: #333; color: #eee; text-align: center; }
canvas { background-color: #000; border: 1px solid #555; }
</style>
</head>
<body onload="main()">
<h1>让图形动起来 - WebGL 2D 变换</h1>
<canvas id="webgl-canvas" width="500" height="500"></canvas>
<!-- 顶点着色器代码 (已更新) -->
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec4 a_color;
// 新增：接收一个 3x3 的变换矩阵
uniform mat3 u_transformMatrix;
varying vec4 v_color;
void main() {
// 将 2D 位置乘以 3x3 矩阵
// a_position 是 vec2，需要扩展成 vec3 (x, y, 1) 才能与 mat3 相乘
vec2 transformedPosition = (u_transformMatrix * vec3(a_position, 1.0)).xy;
gl_Position = vec4(transformedPosition, 0.0, 1.0);
v_color = a_color;
}
</script>
<!-- 片元着色器代码 (无变化) -->
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
</script>
<script>
// --- 简单的矩阵数学帮助函数 ---
// 在实际项目中，你会使用像 gl-matrix 这样的库
const matrixUtils = {
createIdentity: () => [
1, 0, 0,
0, 1, 0,
0, 0, 1
],
createTranslation: (tx, ty) => [
1, 0, 0,
0, 1, 0,
tx, ty, 1
],
createRotation: (angleInRadians) => {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1
];
},
createScale: (sx, sy) => [
sx, 0, 0,
0, sy, 0,
0, 0, 1
],
// 矩阵乘法 (matA * matB)
multiply: (matA, matB) => {
const a00 = matA, a01 = matA, a02 = matA;
const a10 = matA, a11 = matA, a12 = matA;
const a20 = matA, a21 = matA, a22 = matA;
const b00 = matB, b01 = matB, b02 = matB;
const b10 = matB, b11 = matB, b12 = matB;
const b20 = matB, b21 = matB, b22 = matB;
return [
b00 * a00 + b01 * a10 + b02 * a20,
b00 * a01 + b01 * a11 + b02 * a21,
b00 * a02 + b01 * a12 + b02 * a22,
b10 * a00 + b11 * a10 + b12 * a20,
b10 * a01 + b11 * a11 + b12 * a21,
b10 * a02 + b11 * a12 + b12 * a22,
b20 * a00 + b21 * a10 + b22 * a20,
b20 * a01 + b21 * a11 + b22 * a21,
b20 * a02 + b21 * a12 + b22 * a22
];
}
};
function main() {
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
if (!gl) { alert('WebGL not supported!'); return; }
const vertexShaderSource = document.getElementById('vertex-shader').text;
const fragmentShaderSource = document.getElementById('fragment-shader').text;
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = createProgram(gl, vertexShader, fragmentShader);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
const colorAttributeLocation = gl.getAttribLocation(program, "a_color");
// 新增: 获取 uniform 变量的位置
const matrixUniformLocation = gl.getUniformLocation(program, "u_transformMatrix");
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// 顶点数据恢复到以原点为中心的简单版本
const positionsAndColors = [
0.0, 0.25, 1.0, 0.0, 0.0,
-0.25,-0.25, 0.0, 1.0, 0.0,
0.25,-0.25, 0.0, 0.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionsAndColors), gl.STATIC_DRAW);
gl.useProgram(program);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.enableVertexAttribArray(colorAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const FSIZE = (new Float32Array()).BYTES_PER_ELEMENT;
const STRIDE = 5 * FSIZE;
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, STRIDE, 0);
gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, STRIDE, 2 * FSIZE);
let currentAngle = 0;
// 动画循环
function animate() {
// 1. 更新状态 (例如：角度)
currentAngle += 0.02;
// 2. 计算矩阵
let matrix = matrixUtils.createIdentity();
// 注意乘法顺序：先缩放，再旋转，最后平移
// matrix = matrixUtils.multiply(matrix, matrixUtils.createScale(1.0, 1.0));
matrix = matrixUtils.multiply(matrix, matrixUtils.createRotation(currentAngle));
matrix = matrixUtils.multiply(matrix, matrixUtils.createTranslation(0.5, 0.0));
// 3. 绘制
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 将计算好的矩阵发送给顶点着色器
// gl.uniformMatrix3fv(location, transpose, value)
// transpose 必须是 false
gl.uniformMatrix3fv(matrixUniformLocation, false, matrix);
gl.drawArrays(gl.TRIANGLES, 0, 3);
// 4. 请求下一帧
requestAnimationFrame(animate);
}
// 启动动画！
animate();
}
// --- 辅助函数 (与之前相同) ---
function createShader(gl, type, source) { /* ... */ }
function createProgram(gl, vertexShader, fragmentShader) { /* ... */ }
// For brevity, I'm hiding the unchanged helper functions here.
// They are the same as in the previous article.
function createShader(gl, type, source) {const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; console.error("Shader compile error:", gl.getShaderInfoLog(shader)); gl.deleteShader(shader);}
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)) return program; console.error("Program link error:", gl.getProgramInfoLog(program)); gl.deleteProgram(program); }
</script>
</body>
</html>
总结与展望
太棒了！我们成功地让三角形“活”了起来。它先是围绕自己的中心旋转，然后作为一个整体平移到了画布的右半边。
今天我们解锁了 WebGL 中极为强大的能力：
- 理解了变换的意义：将形状定义与位置状态分离，让控制更灵活。
- 认识了矩阵：它是实现平移、旋转、缩放的数学工具，是 GPU 的“母语”。
- 掌握了
uniform变量：学会了如何向着色器传递对所有顶点都一致的全局数据。 - 创建了动画循环：使用
requestAnimationFrame让我们的场景动了起来。
现在，我们的 2D 图形已经相当完备了。但 WebGL 的魅力远不止于此。在下一篇中，我们将为我们的图形穿上华丽的“外衣”——纹理贴图。我们将学习如何加载一张图片，并把它精准地“贴”到我们的三角形表面上，让它不再是简单的颜色渐变。
准备好进入更丰富多彩的视觉世界了吗？敬请期待 《第 4 篇：赋予表面生命 - WebGL 纹理贴图》！
5235
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
