gl-matrix 库简介

gl-matrix 库简介

gl-matrix 是一个高性能的 JavaScript 矩阵和向量库，专门为 WebGL 和其他 3D 图形应用设计。它提供了处理 2D、3D 和 4D 向量以及矩阵运算的高效方法。

主要特性

1. 高性能：经过高度优化，执行速度快
2. 轻量级：体积小，无依赖
3. 全面：包含各种向量和矩阵运算功能
4. 模块化：可以按需导入特定功能

基本用法

安装

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)

性能建议

1. 尽量重用对象而不是频繁创建新对象
2. 使用 out 参数接收结果而不是返回新对象
3. 在动画循环外预先计算不变化的矩阵

gl-matrix 是 WebGL 和 3D 图形编程中非常实用的工具库，能够高效处理各种线性代数运算。