Detalhes do pacote

mat3

jvy42MIT2.0.1

High-performance column-major 3x3 matrix library for 2D graphics, game development, and map visualization—supports transformations, batch processing, and vector conversion.

matrix, 2d-matrix, column-major, game-development

readme (leia-me)

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])

适用场景

  1. 游戏开发:角色动画(骨骼变换)、粒子系统(批量向量计算)、UI控件旋转缩放
  2. 地图可视化:经纬度→屏幕坐标转换、瓦片地图缩放平移、POI点批量渲染
  3. 图形渲染:Canvas/WebGL绘制(矩阵传递给着色器)、2D图形变换(平移/旋转/缩放)
  4. 数值计算:2D物理模拟(刚体变换)、点云数据处理(批量向量转换)

许可证

MIT License

版权所有 © 2024 mat3 开发团队
允许自由使用、修改、分发,需保留原许可证声明。