跳到主要内容WebGL 基础教程：矩阵变换原理与 3D 动画实战 | 极客日志JavaScript大前端算法
WebGL 基础教程：矩阵变换原理与 3D 动画实战
介绍 WebGL 中矩阵变换的核心原理与实战应用。涵盖平移、旋转、缩放的 4x4 矩阵构建方法，以及如何在顶点着色器中应用这些矩阵实现 3D 动画。通过对比纯矩阵运算与 gl-matrix 库的使用，详解复合变换的顺序逻辑（缩放→旋转→平移）。内容包含完整 HTML 代码示例，帮助开发者理解 GPU 渲染管线中的坐标转换机制，避免常见开发误区。
DotNetGuy6 浏览 1. 核心概念：WebGL 与矩阵的关系
WebGL（Web Graphics Library）是浏览器原生的 3D/2D 渲染 API，无需插件、直接调用 GPU 加速。想要玩转 WebGL 动画，矩阵乘法是绕不开的核心。
核心优势
- 统一变换逻辑：平移、旋转、缩放都通过「矩阵 × 顶点坐标」实现，完全符合 GPU 渲染规范
- GPU 友好：矩阵运算可被 GPU 高效并行处理，动画更丝滑
- 复合变换灵活：多个矩阵相乘就能实现「平移 + 旋转 + 缩放」组合效果，扩展无压力
2. WebGL 与矩阵工作原理
WebGL 基于 OpenGL ES，核心是着色器；而矩阵是连接「JavaScript 逻辑」和「GPU 渲染」的桥梁：
- 开发者在 CPU 端构建变换矩阵（平移 / 旋转 / 缩放 / 复合）
- 将 4x4 矩阵传入顶点着色器的
uniform 变量
- GPU 通过「矩阵 × 顶点坐标」的乘法运算，计算顶点最终位置并完成渲染
关键：WebGL 中所有变换的标准写法是 gl_Position = 变换矩阵 * 顶点坐标，而非直接修改顶点 x/y 分量！
2.1 平移变换
平移是最基础的仿射变换，用 4x4 矩阵表示后，能和其他变换无缝组合！
平移矩阵原理
在计算机图形学中，平移的数学原理通过齐次坐标 + 4x4 矩阵实现：
- 三维点表示为齐次坐标 (x,y,z,1)
- 三维平移矩阵（WebGL 标准 4x4 形式）：
[ 1 0 0 tx ] [ 0 1 0 ty ] [ 0 0 1 tz ] [ 0 0 0 1 ]
矩阵乘法计算过程：
对三维点 (x,y,z,1) 执行矩阵乘法：
x' = 1*x + 0*y + 0*z + tx*1 = x + tx
y' = 0*x + 1*y + 0*z + ty*1 = y + ty
z' = 0*x + 0*y + 1*z + tz*1 = z + tz
w' = 0*x + 0*y + 0*z + 1*1 = 1
注：WebGL 中即使处理 2D 图形，也统一使用 4x4 矩阵（z/tz 设为 0），这是 GPU 原生支持的标准格式。
实战：纯矩阵实现平移动画
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 矩阵实战：平移的红色三角形</title>
<style>
canvas { : solid ; : block; : auto; : ; }
微信扫一扫，关注极客日志
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具
- 加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
border
2px
#ff4400
display
margin
20px
border-radius
8px
</style>
</head>
<body>
<canvas>
</canvas>
<script>
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的浏览器不支持 WebGL！换 Chrome/Firefox 试试');
throw new Error('WebGL not supported');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_TranslateMatrix; // 4x4 平移矩阵
void main() {
// WebGL 标准写法：矩阵 × 顶点坐标
gl_Position = u_TranslateMatrix * a_Position;
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
function createShader(gl, source, type) {
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 vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const vertices = new Float32Array([
-0.2, -0.2, 0.0,
0.2, -0.2, 0.0,
0.0, 0.2, 0.0
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
const u_TranslateMatrix = gl.getUniformLocation(program, 'u_TranslateMatrix');
const translateMatrix = new Float32Array(16);
let tx = 0.0;
const step = 0.02;
function setTranslateMatrix(matrix, tx, ty, tz) {
matrix.set([
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, tz, 1
]);
}
function animate() {
tx += step;
if (tx > 1.0) tx = -1.0;
setTranslateMatrix(translateMatrix, tx, 0.0, 0.0);
gl.uniformMatrix4fv(u_TranslateMatrix, false, translateMatrix);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
红色三角形沿 x 轴平移，本质是不断更新 4x4 平移矩阵的 tx 分量，GPU 通过「矩阵 × 顶点」计算新位置！
2.2 旋转变换
旋转的核心是「4x4 旋转矩阵」，纯矩阵乘法写法更易和其他变换组合！
二维点绕原点逆时针旋转 θ 角的 4x4 矩阵（WebGL 标准格式）：
[ cosθ -sinθ 0 0 ] [ sinθ cosθ 0 0 ] [ 0 0 1 0 ] [ 0 0 0 1 ]
对二维点 (x,y)（齐次坐标 (x,y,0,1)）执行矩阵乘法：
x' = cosθ * x + (-sinθ) * y + 0 * 0 + 0 * 1 = x*cosθ - y*sinθ
y' = sinθ * x + cosθ * y + 0 * 0 + 0 * 1 = x*sinθ + y*cosθ
z' = 0 * x + 0 * y + 1 * 0 + 0 * 1 = 0
w' = 0 * x + 0 * y + 0 * 0 + 1 * 1 = 1
x' = x*cosθ - y*sinθ
y' = x*sinθ + y*cosθ
关键：矩阵形式无需在着色器中写三角函数，只需传递完整矩阵，更符合 GPU 渲染规范！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 矩阵实战：旋转的红色三角形</title>
<style>
canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; }
</style>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('换 Chrome/Firefox 试试！');
throw new Error('WebGL not supported');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_RotateMatrix; // 4x4 旋转矩阵
void main() {
// WebGL 标准写法：旋转矩阵 × 顶点坐标
gl_Position = u_RotateMatrix * a_Position;
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
function createShader(gl, source, type) {
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 vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const vertices = new Float32Array([
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
const u_RotateMatrix = gl.getUniformLocation(program, 'u_RotateMatrix');
const rotateMatrix = new Float32Array(16);
let angle = 0.0;
function setRotateZMatrix(matrix, angle) {
const cos = Math.cos(angle);
const sin = Math.sin(angle);
matrix.set([
cos, -sin, 0, 0,
sin, cos, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]);
}
function animateRotate() {
angle += 0.02;
setRotateZMatrix(rotateMatrix, angle);
gl.uniformMatrix4fv(u_RotateMatrix, false, rotateMatrix);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animateRotate);
}
animateRotate();
</script>
</body>
</html>
三角形绕原点旋转，本质是不断更新 4x4 旋转矩阵的 cosθ/sinθ 分量，GPU 自动完成「矩阵 × 顶点」运算！
2.3 缩放变换
缩放是改变图形大小的核心变换，同样通过 4x4 矩阵乘法实现，是复合变换的重要组成部分！
二维点沿 x/y 轴缩放的 4x4 矩阵（WebGL 标准格式）：
[ sx 0 0 0 ] [ 0 sy 0 0 ] [ 0 0 sz 0 ] [ 0 0 0 1 ]
sx：x 轴缩放因子（>1 放大，<1 缩小，负数翻转）sy：y 轴缩放因子sz：z 轴缩放因子（2D 场景设为 1）
对二维点 (x,y)（齐次坐标 (x,y,0,1)）执行矩阵乘法：
x' = sx * x + 0 * y + 0 * 0 + 0 * 1 = x * sx
y' = 0 * x + sy * y + 0 * 0 + 0 * 1 = y * sy
z' = 0 * x + 0 * y + sz * 0 + 0 * 1 = 0 （2D 场景 sz=1）
w' = 0 * x + 0 * y + 0 * 0 + 1 * 1 = 1
关键：缩放矩阵的核心是对角线上的缩放因子，非对角线元素均为 0，保证仅改变大小不改变位置（绕原点缩放）。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 矩阵实战：缩放的红色三角形</title>
<style>
canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; }
</style>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的浏览器不支持 WebGL！换 Chrome/Firefox 试试');
throw new Error('WebGL not supported');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_ScaleMatrix; // 4x4 缩放矩阵
void main() {
// WebGL 标准写法：缩放矩阵 × 顶点坐标
gl_Position = u_ScaleMatrix * a_Position;
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
function createShader(gl, source, type) {
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 vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const vertices = new Float32Array([
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
const u_ScaleMatrix = gl.getUniformLocation(program, 'u_ScaleMatrix');
const scaleMatrix = new Float32Array(16);
let scaleFactor = 1.0;
const step = 0.01;
let isEnlarging = true;
function setScaleMatrix(matrix, sx, sy, sz) {
matrix.set([
sx, 0, 0, 0,
0, sy, 0, 0,
0, 0, sz, 0,
0, 0, 0, 1
]);
}
function animateScale() {
if (isEnlarging) {
scaleFactor += step;
if (scaleFactor >= 2.0) isEnlarging = false;
} else {
scaleFactor -= step;
if (scaleFactor <= 0.5) isEnlarging = true;
}
setScaleMatrix(scaleMatrix, scaleFactor, scaleFactor, 1.0);
gl.uniformMatrix4fv(u_ScaleMatrix, false, scaleMatrix);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animateScale);
}
animateScale();
</script>
</body>
</html>
三角形绕原点在 0.5 倍～2 倍之间来回缩放，本质是不断更新 4x4 缩放矩阵的 sx/sy 分量，GPU 自动完成「矩阵 × 顶点」运算！
2.4 矩阵进阶：平移 + 旋转 + 缩放复合变换
手动组合多个矩阵容易出错？gl-matrix 库可一键完成「平移 + 旋转 + 缩放」的矩阵乘法，是工业级开发的首选方案！
- 封装所有 4x4 矩阵运算：
mat4.translate()/mat4.rotateZ()/mat4.scale() 直接生成变换矩阵
- 自动处理矩阵乘法：复合变换只需按顺序调用 API，无需手动计算矩阵相乘
- 性能优化：针对 WebGL 做了 GPU 适配，动画更丝滑
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 矩阵进阶：平移 + 旋转 + 缩放复合动画</title>
<style>
canvas { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的浏览器不支持 WebGL！换 Chrome/Firefox 试试');
throw new Error('WebGL not supported');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
const vertexShaderSource = `
attribute vec4 a_Position;
uniform mat4 u_ModelMatrix; // 复合变换矩阵（平移 + 旋转 + 缩放）
void main() {
// 标准写法：复合矩阵 × 顶点坐标
gl_Position = u_ModelMatrix * a_Position;
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
function createShader(gl, source, type) {
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 vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const vertices = new Float32Array([
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
const u_ModelMatrix = gl.getUniformLocation(program, 'u_ModelMatrix');
const modelMatrix = mat4.create();
let tx = 0.0;
let angle = 0.0;
let scaleFactor = 1.0;
let isEnlarging = true;
function animateWithMatrix() {
mat4.identity(modelMatrix);
mat4.scale(modelMatrix, modelMatrix, [scaleFactor, scaleFactor, 1.0]);
mat4.rotateZ(modelMatrix, modelMatrix, angle);
mat4.translate(modelMatrix, modelMatrix, [tx, 0.0, 0.0]);
tx += 0.015;
if (tx > 1.0) tx = -1.0;
angle += 0.02;
if (isEnlarging) {
scaleFactor += 0.005;
if (scaleFactor >= 1.5) isEnlarging = false;
} else {
scaleFactor -= 0.005;
if (scaleFactor <= 0.7) isEnlarging = true;
}
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animateWithMatrix);
}
animateWithMatrix();
</script>
</body>
</html>
三角形同时完成「沿 x 轴平移 + 绕原点旋转 + 0.7~1.5 倍缩放」的复合动画，gl-matrix 自动完成所有矩阵乘法运算，代码简洁且高效！
3. 矩阵核心总结
- 变换顺序≠乘法交换律：矩阵乘法不满足交换律，变换顺序直接决定最终效果（推荐顺序：缩放 → 旋转 → 平移）：
- 缩放→旋转→平移：图形先调整大小，再旋转方向，最后移动位置（最符合直觉）
- 平移→旋转→缩放：图形先移动，再旋转，最后缩放（会导致平移距离也被缩放）
- 单位矩阵是基础：
mat4.identity() 生成单位矩阵（无变换），是所有矩阵变换的起点
- 矩阵格式要正确：WebGL 中矩阵必须是
Float32Array 类型的 16 个元素（列主序），传递时 gl.uniformMatrix4fv 的第二个参数必须为 false
新手避坑指南
- 先跑通代码，再理解矩阵：不用一开始死磕矩阵乘法，先改
tx/angle/scaleFactor 数值，看动画变化，直观理解矩阵作用
- 拒绝手动改顶点坐标：WebGL 标准写法是「矩阵 × 顶点」，直接修改 x/y 分量会丧失 GPU 并行计算优势
- 优先用 gl-matrix 库：实际开发中避免手动拼矩阵，减少 90% 错误，专注业务逻辑
- 注意缩放中心：默认缩放绕原点进行，若需绕自定义点缩放，需先平移到原点→缩放→平移回原位置
