mat3
高性能2D列优先3x3矩阵运算库,专为游戏开发、地图可视化、图形渲染等性能敏感场景设计。支持完整的矩阵操作、2D变换(旋转/平移/中心点缩放)及批量处理,性能超越主流矩阵库,且无外部依赖。
特性
- 极致性能:通过变换链合并、预计算角度、循环展开优化,核心操作比
gl-matrix快10%-60% - 完整功能:覆盖基础矩阵运算、2D核心变换、批量处理、向量转换,支持中心点旋转/缩放
- 内存高效:列优先存储(兼容WebGL/Canvas),批量操作使用连续内存块,缓存命中率提升30%+
- 类型安全:TypeScript编写,完整类型定义,支持Tree Shaking
- 零依赖:轻量打包体积(gzip后<5KB),无外部依赖,开箱即用
安装
通过npm/yarn/pnpm安装:
# npm
npm install mat3
# yarn
yarn add mat3
# pnpm
pnpm add mat3快速开始
以下示例展示核心流程:创建矩阵→围绕中心点旋转→批量转换向量。
import {
create, rotateAround, fromTranslation,
transformVec2Bulk
} from 'mat3';
// 1. 创建单位矩阵
const mat = create();
// 2. 围绕中心点(100, 100)旋转90°(变换链合并优化)
rotateAround(mat, mat, 100, 100, Math.PI / 2);
// 3. 叠加平移变换(x+20,y+30)
fromTranslation(mat, 20, 30);
// 4. 批量转换向量(格式:[x1,y1,x2,y2,x3,y3])
const inputVectors = new Float32Array([50,50, 100,100, 150,150]); // 3个向量
const outputVectors = new Float32Array(6);
// 批量处理3个向量
transformVec2Bulk(mat, outputVectors, inputVectors, 3);
console.log(outputVectors);
// 输出:围绕(100,100)旋转90°+平移(20,30)后的向量核心功能
1. 基础矩阵操作
| 函数 | 功能描述 | 关键优势 |
|---|---|---|
create() |
创建3x3单位矩阵 | 仅初始化3个1值,内存高效 |
copy(out, a) |
复制矩阵数据 | 直接元素赋值,比set快11.9% |
multiply(out, a, b) |
矩阵乘法(out = a × b) | 内存访问优化,减少缓存miss |
invert(out, a) |
计算逆矩阵(奇异矩阵返回null) | 并行计算子式,比gl-matrix快11.1% |
determinant(a) |
计算矩阵行列式 | 完全展开公式,减少数组访问 |
2. 2D变换(核心优化)
基础变换
rotate(out, a, rad):围绕原点旋转(支持特殊角度快速计算,90°旋转比gl-matrix快41.9%)translate(out, a, tx, ty):平移变换(后乘平移,适配图形渲染流程)fromTranslation(out, tx, ty):直接创建平移矩阵(比通用乘法快20.8%)
中心点变换(变换链合并)
无需手动构建“平移→变换→还原平移”链,直接通过数学公式合并计算:
rotateAround(out, a, cx, cy, rad):围绕指定中心点旋转(性能比传统实现快65%+)scaleAround(out, a, cx, cy, sx, sy):围绕指定中心点缩放(性能比传统实现快74%+)
3. 向量操作
transformVec2(m, out, v):单个2D向量变换(支持齐次坐标,包含平移)transformVec2Bulk(m, out, a, count):批量向量变换(格式[x1,y1,x2,y2,...],8级循环展开,比循环调用快60%)
4. 批量处理
针对大规模数据场景优化,所有批量操作使用连续内存块:
createBulk(count):批量创建单位矩阵(10000矩阵仅需1.7ms,比gl-matrix快26.1%)rotateAroundBulkSame(out, a, cx, cy, rad, count):批量围绕相同中心点旋转scaleAroundBulkSame(out, a, cx, cy, sx, sy, count):批量围绕相同中心点缩放multiplyBulk(out, a, b, count):批量矩阵乘法(8级循环展开,减少控制开销)
性能对比
测试环境:Chrome 120 + Intel i7-13700H,数据为100万次单次运算耗时(μs/次),数值越小性能越好:
| 操作 | mat3 | gl-matrix | 性能提升 |
|---|---|---|---|
| 矩阵创建(create) | 0.051 | 0.058 | +12.1% |
| 矩阵求逆(invert) | 0.455 | 0.512 | +11.1% |
| 原点旋转(90°) | 0.118 | 0.203 | +41.9% |
| 中心点旋转 | 0.224 | 0.652 | +65.6% |
| 中心点缩放 | 0.167 | 0.643 | +74.0% |
| 批量向量转换(1万点) | 0.92ms | 2.3ms | +59.1% |
矩阵存储格式
采用列优先存储(兼容WebGL/Canvas),与数学矩阵的对应关系如下:
// 存储格式(Float32Array,9个元素)
[ m00, m10, m20, // 第一列(X轴基向量)
m01, m11, m21, // 第二列(Y轴基向量)
m02, m12, m22 ] // 第三列(平移分量:m02=tx, m12=ty)
// 数学表示
[ [m00, m01, m02], // X轴基向量 + X平移
[m10, m11, m12], // Y轴基向量 + Y平移
[m20, m21, m22] ] // 齐次坐标(固定为[0,0,1])适用场景
- 游戏开发:角色动画(骨骼变换)、粒子系统(批量向量计算)、UI控件旋转缩放
- 地图可视化:经纬度→屏幕坐标转换、瓦片地图缩放平移、POI点批量渲染
- 图形渲染:Canvas/WebGL绘制(矩阵传递给着色器)、2D图形变换(平移/旋转/缩放)
- 数值计算:2D物理模拟(刚体变换)、点云数据处理(批量向量转换)
许可证
版权所有 © 2024 mat3 开发团队
允许自由使用、修改、分发,需保留原许可证声明。