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 圖形編程中非常實用的工具庫，能夠高效處理各種線性代數運算。
