gl-matrix 库简介
gl-matrix 库简介
gl-matrix 是一个高性能的 JavaScript 矩阵和向量库，专门为 WebGL 和其他 3D 图形应用设计。它提供了处理 2D、3D 和 4D 向量以及矩阵运算的高效方法。
主要特性
- 高性能：经过高度优化，执行速度快
- 轻量级：体积小，无依赖
- 全面：包含各种向量和矩阵运算功能
- 模块化：可以按需导入特定功能
基本用法
安装
npm install gl-matrix
或通过 CDN 使用：
<script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/gl-matrix-min.js"></script>
核心模块
vec2- 2D 向量操作vec3- 3D 向量操作vec4- 4D 向量操作mat2- 2x2 矩阵操作mat2d- 2x3 仿射矩阵操作mat3- 3x3 矩阵操作mat4- 4x4 矩阵操作quat- 四元数操作
示例代码
import { mat4, vec3 } from 'gl-matrix';// 创建一个单位矩阵
const modelViewMatrix = mat4.create();// 平移矩阵
mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -5]);// 旋转矩阵 (绕Y轴旋转45度)
mat4.rotateY(modelViewMatrix, modelViewMatrix, Math.PI / 4);// 缩放矩阵
mat4.scale(modelViewMatrix, modelViewMatrix, [1, 1, 1]);// 向量变换
const position = vec3.fromValues(1, 0, 0);
const transformedPosition = vec3.create();
vec3.transformMat4(transformedPosition, position, modelViewMatrix);
常用操作
向量操作
- 创建向量：
vec3.create() - 向量加法：
vec3.add(out, a, b) - 向量点积：
vec3.dot(a, b) - 向量叉积：
vec3.cross(out, a, b) - 向量归一化：
vec3.normalize(out, a)
矩阵操作
- 创建矩阵：
mat4.create() - 矩阵乘法：
mat4.multiply(out, a, b) - 透视投影：
mat4.perspective(out, fovy, aspect, near, far) - 视图矩阵：
mat4.lookAt(out, eye, center, up)
性能建议
- 尽量重用对象而不是频繁创建新对象
- 使用
out参数接收结果而不是返回新对象 - 在动画循环外预先计算不变化的矩阵
gl-matrix 是 WebGL 和 3D 图形编程中非常实用的工具库，能够高效处理各种线性代数运算。