WebGL矩阵变换：从数学公式到图形操控的实践指南

1. 为什么WebGL需要矩阵变换？

第一次接触WebGL时，我对着色器里突然冒出的mat4类型一脸懵——为什么画个三角形要动用矩阵这种"高端"数学工具？直到亲手用三角函数实现旋转动画时，才明白矩阵的价值。当时我写了30多行代码计算顶点位置，结果换个旋转角度就得重写整个逻辑，而隔壁用矩阵的同学只需修改4个数字。

矩阵本质上是数学公式的打包工具。比如要让物体旋转θ角度，传统方法需要为每个顶点计算：

javascript复制x' = x*cosθ - y*sinθ
y' = x*sinθ + y*cosθ

当同时需要旋转、平移、缩放时，公式会复杂到怀疑人生。而矩阵把这些计算抽象成统一格式：

glsl复制gl_Position = matrix * position;

这种统一性带来三个实际好处：

1. 着色器代码保持简洁，无论多复杂的变换都只需一行乘法
2. 变换组合变得容易，多个变换只需矩阵连乘
3. GPU并行优化，矩阵运算天生适合并行处理

提示：现代GPU有专门的矩阵运算单元，4x4矩阵乘法能在1个时钟周期完成

2. 从零理解变换矩阵的构造

2.1 旋转矩阵的诞生过程

让我们用乐高思维拆解旋转矩阵。假设要把点P(x,y)旋转θ度到P'(x',y')，根据三角函数可得：

code复制x' = x*cosθ - y*sinθ  
y' = x*sinθ + y*cosθ

这其实暗藏矩阵乘法的结构：

code复制[ x' ]   [ cosθ  -sinθ ] [ x ]
[ y' ] = [ sinθ   cosθ ] [ y ]

这就是2D旋转矩阵的由来！3D版本同理，比如绕Z轴旋转时：

javascript复制const mat = [
  cosθ, sinθ, 0, 0,
  -sinθ,cosθ, 0, 0,
  0,    0,    1, 0,
  0,    0,    0, 1 
];

2.2 平移矩阵的维度魔法

平移公式x'=x+Δx看似简单，却有个反直觉的设计——必须用4x4矩阵。因为3x3矩阵无法表示加法项，就像一次函数y=kx+b无法用纯乘法表示。解决方案是：

1. 将点坐标扩展为(x,y,z,1)
2. 构造特殊矩阵：