1. 先搞懂：WebGL + 矩阵 = 3D 图形的灵魂
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 { border: 2px solid #ff4400; display: block; margin: 20px auto; border-radius: 8px; }
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// 1. 获取 Canvas 和 WebGL 上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的浏览器不支持 WebGL！换 Chrome/Firefox 试试');
throw new Error('WebGL not supported');
}
// 2. 设置黑色背景
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 3. 着色器（核心：纯矩阵乘法实现平移）
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); // 红色
}
`;
// 4. 封装着色器创建函数
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;
}
// 5. 创建并链接程序
const vertexShader = (gl, vertexShaderSource, gl.);
fragmentShader = (gl, fragmentShaderSource, gl.);
program = gl.();
gl.(program, vertexShader);
gl.(program, fragmentShader);
gl.(program);
gl.(program);
vertices = ([
-, -, ,
, -, ,
, ,
]);
vertexBuffer = gl.();
gl.(gl., vertexBuffer);
gl.(gl., vertices, gl.);
a_Position = gl.(program, );
gl.(a_Position, , gl., , , );
gl.(a_Position);
u_TranslateMatrix = gl.(program, );
translateMatrix = ();
tx = ;
step = ;
() {
matrix.([ , , , , , , , , , , , , tx, ty, tz, ]);
}
() {
tx += step;
(tx > ) tx = -;
(translateMatrix, tx, , );
gl.(u_TranslateMatrix, , translateMatrix);
gl.(gl.);
gl.(gl., , );
(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 id="glCanvas"></canvas>
<script>
// 1. 获取上下文
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, , );
vertexShaderSource = ;
fragmentShaderSource = ;
() {
shader = gl.(type);
gl.(shader, source);
gl.(shader);
(!gl.(shader, gl.)) {
.(, gl.(shader));
gl.(shader);
;
}
shader;
}
vertexShader = (gl, vertexShaderSource, gl.);
fragmentShader = (gl, fragmentShaderSource, gl.);
program = gl.();
gl.(program, vertexShader);
gl.(program, fragmentShader);
gl.(program);
gl.(program);
vertices = ([
, , ,
-, -, ,
, -,
]);
vertexBuffer = gl.();
gl.(gl., vertexBuffer);
gl.(gl., vertices, gl.);
a_Position = gl.(program, );
gl.(a_Position, , gl., , , );
gl.(a_Position);
u_RotateMatrix = gl.(program, );
rotateMatrix = ();
angle = ;
() {
cos = .(angle);
sin = .(angle);
matrix.([ cos, -sin, , , sin, cos, , , , , , , , , , ]);
}
() {
angle += ;
(rotateMatrix, angle);
gl.(u_RotateMatrix, , rotateMatrix);
gl.(gl.);
gl.(gl., , );
(animateRotate);
}
();
效果
三角形绕原点旋转，本质是不断更新 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
矩阵乘法结果等价于：
x' = x * sx
y' = y * sy
关键：缩放矩阵的核心是对角线上的缩放因子，非对角线元素均为 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 id="glCanvas"></canvas>
<script>
// 1. 获取上下文
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, , , );
vertexShaderSource = ;
fragmentShaderSource = ;
() {
shader = gl.(type);
gl.(shader, source);
gl.(shader);
(!gl.(shader, gl.)) {
.(, gl.(shader));
gl.(shader);
;
}
shader;
}
vertexShader = (gl, vertexShaderSource, gl.);
fragmentShader = (gl, fragmentShaderSource, gl.);
program = gl.();
gl.(program, vertexShader);
gl.(program, fragmentShader);
gl.(program);
gl.(program);
vertices = ([
, , ,
-, -, ,
, -,
]);
vertexBuffer = gl.();
gl.(gl., vertexBuffer);
gl.(gl., vertices, gl.);
a_Position = gl.(program, );
gl.(a_Position, , gl., , , );
gl.(a_Position);
u_ScaleMatrix = gl.(program, );
scaleMatrix = ();
scaleFactor = ;
step = ;
isEnlarging = ;
() {
matrix.([ sx, , , , , sy, , , , , sz, , , , , ]);
}
() {
(isEnlarging) {
scaleFactor += step;
(scaleFactor >= ) isEnlarging = ;
} {
scaleFactor -= step;
(scaleFactor <= ) isEnlarging = ;
}
(scaleMatrix, scaleFactor, scaleFactor, );
gl.(u_ScaleMatrix, , scaleMatrix);
gl.(gl.);
gl.(gl., , );
(animateScale);
}
();
效果
三角形绕原点在 0.5 倍～2 倍之间来回缩放，本质是不断更新 4x4 缩放矩阵的 sx/sy 分量，GPU 自动完成「矩阵 × 顶点」运算！
2.4 矩阵进阶：平移 + 旋转 + 缩放复合变换
手动组合多个矩阵容易出错？gl-matrix 库可一键完成「平移 + 旋转 + 缩放」的矩阵乘法，是工业级开发的首选方案！
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>
<!-- 引入 gl-matrix 库（直接用 CDN） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// 1. 获取上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert();
();
}
gl.(, , , );
vertexShaderSource = ;
fragmentShaderSource = ;
() {
shader = gl.(type);
gl.(shader, source);
gl.(shader);
(!gl.(shader, gl.)) {
.(, gl.(shader));
gl.(shader);
;
}
shader;
}
vertexShader = (gl, vertexShaderSource, gl.);
fragmentShader = (gl, fragmentShaderSource, gl.);
program = gl.();
gl.(program, vertexShader);
gl.(program, fragmentShader);
gl.(program);
gl.(program);
vertices = ([
, , ,
-, -, ,
, -,
]);
vertexBuffer = gl.();
gl.(gl., vertexBuffer);
gl.(gl., vertices, gl.);
a_Position = gl.(program, );
gl.(a_Position, , gl., , , );
gl.(a_Position);
u_ModelMatrix = gl.(program, );
modelMatrix = mat4.();
tx = ;
angle = ;
scaleFactor = ;
isEnlarging = ;
() {
mat4.(modelMatrix);
mat4.(modelMatrix, modelMatrix, [scaleFactor, scaleFactor, ]);
mat4.(modelMatrix, modelMatrix, angle);
mat4.(modelMatrix, modelMatrix, [tx, , ]);
tx += ;
(tx > ) tx = -;
angle += ;
(isEnlarging) {
scaleFactor += ;
(scaleFactor >= ) isEnlarging = ;
} {
scaleFactor -= ;
(scaleFactor <= ) isEnlarging = ;
}
gl.(u_ModelMatrix, , modelMatrix);
gl.(gl.);
gl.(gl., , );
(animateWithMatrix);
}
();
效果
三角形同时完成「沿 x 轴平移 + 绕原点旋转 + 0.7~1.5 倍缩放」的复合动画，gl-matrix 自动完成所有矩阵乘法运算，代码简洁且高效！
矩阵核心知识点（必记！）
- 变换顺序≠乘法交换律：矩阵乘法不满足交换律，变换顺序直接决定最终效果（推荐顺序：缩放 → 旋转 → 平移）：
- 缩放→旋转→平移：图形先调整大小，再旋转方向，最后移动位置（最符合直觉）
- 平移→旋转→缩放：图形先移动，再旋转，最后缩放（会导致平移距离也被缩放）
- 单位矩阵是基础：
mat4.identity()生成单位矩阵（无变换），是所有矩阵变换的起点 - 矩阵格式要正确：WebGL 中矩阵必须是
Float32Array类型的 16 个元素（列主序），传递时gl.uniformMatrix4fv的第二个参数必须为false
新手矩阵避坑指南
- 先跑通代码，再理解矩阵：不用一开始死磕矩阵乘法，先改
tx/angle/scaleFactor数值，看动画变化，直观理解矩阵作用 - 拒绝手动改顶点坐标：WebGL 标准写法是「矩阵 × 顶点」，直接修改 x/y 分量会丧失 GPU 并行计算优势
- 优先用 gl-matrix 库：实际开发中避免手动拼矩阵，减少 90% 错误，专注业务逻辑
- 注意缩放中心：默认缩放绕原点进行，若需绕自定义点缩放，需先平移到原点→缩放→平移回原位置
3. 矩阵核心总结
- WebGL 动画的本质：CPU 端构建 4x4 变换矩阵 → 传递给着色器 → GPU 执行「矩阵 × 顶点坐标」计算新位置
- 三大基础变换矩阵：
- 平移：第四列前三个元素为平移量（tx/ty/tz）
- 旋转：左上角 2x2 矩阵为 cosθ/sinθ 组合（绕 Z 轴）
- 缩放：对角线上的元素为缩放因子（sx/sy/sz）
- 实战技巧：用 gl-matrix 库简化矩阵操作，严格遵守「缩放→旋转→平移」的复合变换顺序，注意矩阵乘法无交换律
