gl-matrix
随着Web前端技术的发展，越来越多的开发者开始涉足3D可视化、游戏引擎、图形渲染等领域。
WebGL 让浏览器拥有了处理3D图形的能力，但也带来了大量繁琐且复杂的向量、矩阵运算需求。
gl-matrix 是一个专门为 WebGL 或其他图形处理场景设计的 JavaScript 库，帮助开发者更好地进行矩阵和向量运算，大大降低开发难度，提高运行效率。
它封装了常见的向量和矩阵运算方法，包括：
- 二维、三维和四维向量（vec2、vec3、vec4）
- 2×2、3×3 和 4×4 矩阵（mat2、mat3、mat4）
- 四元数（quat）等高级几何运算
痛点解决
-
冗长复杂的数学运算
在 3D 图形或动画开发中，旋转、平移、缩放、投影等操作都需要大量的矩阵、向量和四元数运算。手动写这些运算不仅代码量大，还容易出错。 gl-matrix 将这些常见操作封装为简洁的函数接口，让你只需调用相关方法即可完成复杂的矩阵转换。 -
性能瓶颈
在 WebGL 场景中，实时渲染对性能要求非常高。如果运算效率低下，会导致帧率下降或页面卡顿。 gl-matrix 采用了一系列优化技术，如就地操作（in-place operation）、尽量减少内存分配等，使得其在多次矩阵计算场景下能保持较好的运行速度。
场景应用
-
3D 场景变换
在进行 3D 模型、3D 场景的开发或数据可视化时，你会频繁地对场景或对象进行平移、旋转、缩放等变换。gl-matrix 提供了诸如mat4.translate()、mat4.rotate()、mat4.scale()等一系列函数，用来快速进行模型矩阵或视图矩阵的变换。 -
四元数旋转
3D 动画中，使用四元数来表示旋转可以避免万向节锁问题（Gimbal Lock），并能平滑插值动画。gl-matrix 对四元数（quat）也有完善的支持，例如创建、乘法、角度转化、球面插值（slerp）等。 -
碰撞检测和物理仿真
需要进行碰撞检测、物理模拟的场景中，常常要涉及到大量向量运算，例如判断两个包围盒/球体是否相交、计算物体的速度、加速度以及碰撞后的反弹处理等等。gl-matrix 中的向量运算方法能显著加快开发效率。 -
VR/AR 与交互式应用
在虚拟现实（VR）或增强现实（AR）的应用中，往往要处理空间中的各种传感器数据（例如头盔姿态、手机陀螺仪读数）并进行坐标系转换，gl-matrix 在此类应用中也同样适用。
4. 案例示例
下面通过几个简短的代码片段展示 gl-matrix 常见的用法，帮助你快速上手。
4.1 基础变换：平移、旋转与缩放
import { mat4, vec3 } from 'gl-matrix';
// 创建一个 4×4 的单位矩阵
const modelMatrix = mat4.create();
/*
modelMatrix =
[
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
*/
// 平移 (2, 3, -5)
mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(2, 3, -5));
/*
modelMatrix =
[
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
2, 3, -5, 1
]
(在单位矩阵基础上，最后一行变为 [2, 3, -5, 1] 表示平移)
*/
// 绕 Z 轴旋转 90 度 (Math.PI / 2)
mat4.rotateZ(modelMatrix, modelMatrix, Math.PI / 2);
/*
若只看结果，modelMatrix 约为
[
0, -1, 0, 0,
1, 0, 0, 0,
0, 0, 1, 0,
2, 3, -5, 1
]
(表示先有平移，再绕 Z 轴逆时针 90 度)
*/
// 缩放：x、y、z 分别 2 倍、2 倍、1 倍
mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(2, 2, 1));
/*
modelMatrix =
[
0*2, -1*2, 0*1, 0, // => 0, -2, 0, 0
1*2, 0*2, 0*1, 0, // => 2, 0, 0, 0
0, 0, 1*1,0, // => 0, 0, 1, 0
2, 3, -5, 1
]
即
[
0, -2, 0, 0,
2, 0, 0, 0,
0, 0, 1, 0,
2, 3, -5, 1
]
*/
通过这几行简洁的代码，你就能获得一个完整的模型变换矩阵，用在 WebGL 中控制对象的位置、角度和大小。
4.2 四元数旋转示例
在 3D 动画或 VR/AR 应用中，使用四元数可以更平滑地处理旋转，并避免“万向节死锁”的问题：
import { quat } from 'gl-matrix';
// 创建一个单位四元数（表示无旋转）
const rotationQuat = quat.create();
/*
rotationQuat = [ 0, 0, 0, 1 ]
*/
// 绕 X 轴旋转 45 度 (Math.PI / 4)
quat.rotateX(rotationQuat, rotationQuat, Math.PI / 4);
/*
rotationQuat 约变为 [0.3826834, 0, 0, 0.9238795]
(这是表示绕 X 轴 45 度的四元数)
*/
// 再绕 Y 轴旋转 30 度 (Math.PI / 6)
quat.rotateY(rotationQuat, rotationQuat, Math.PI / 6);
/*
rotationQuat 约变为 [0.3696438, 0.1913417, -0.0925483, 0.9076734]
(组合了 X 轴 45° + Y 轴 30° 的旋转效果)
*/
此时 rotationQuat 就可以拿去与矩阵相乘，或用作动画插值（如球面插值 quat.slerp）等。
4.3 简易碰撞检测：圆/球体碰撞
在游戏或交互场景中，最常见的就是碰撞检测。下例演示如何用向量距离计算两个球体是否碰撞：
import { vec3 } from 'gl-matrix';
/**
* 判断两球体是否碰撞
* @param {vec3} posA 球A中心
* @param {number} radiusA 球A半径
* @param {vec3} posB 球B中心
* @param {number} radiusB 球B半径
* @returns {boolean}
*/
function checkSphereCollision(posA, radiusA, posB, radiusB) {
// 计算中心点之间的距离
const distance = vec3.distance(posA, posB);
// 若距离 ≤ 半径和，则说明碰撞
return distance <= (radiusA + radiusB);
}
// A 球：中心(0,0,0)，半径2；B 球：中心(3,1,0)，半径2
const posA = vec3.fromValues(0, 0, 0);
const posB = vec3.fromValues(3, 1, 0);
const collision = checkSphereCollision(posA, 2, posB, 2);
/*
distance = sqrt((3 - 0)^2 + (1 - 0)^2 + (0 - 0)^2) = sqrt(9 + 1) = sqrt(10) ≈ 3.162
radiusA + radiusB = 4
3.162 < 4 => true，说明相交
*/
通过 vec3.distance() 就能轻松计算向量间的距离，从而判断碰撞。
5. 总结
- gl-matrix 减轻了图形/3D 开发中的数学负担：
- 不必再手写繁琐的平移、旋转、缩放公式。
- 向量、矩阵、四元数的操作都能通过统一且高效的 API 快速完成。
- 它适用于WebGL 可视化、前端 3D/2D 游戏、交互动画，以及需要快速验证原型的场景。
- 内部针对性能做了大量优化，能支撑实时渲染、频繁计算等高负载场景的需求。
如果你想在前端实现 3D 动画、数据可视化、碰撞检测或物理效果，不妨尝试一下 gl-matrix。
将繁琐的底层数学运算交给它，就能把更多精力投入到创意与业务逻辑之中！