@thi.ng/matrices

v3.0.30

Published

6 days ago

Matrix & quaternion operations for 2D/3D geometry processing

Downloads

3,264

0High
0Medium
0Low

thi.ng

2d 3d algebra array codegen conversion frustum geometry invert linear lookat math matrix ortho perspective projection quaternion rotation shear skew typescript vector webgl

npm downloads

[!NOTE] This is one of 211 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.
🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️

About

Matrix & quaternion operations for 2D/3D geometry processing.

This package provides 160+ matrix & quaternion operations for 2D/3D geometry processing and acts as companion package for @thi.ng/vectors. Like with the vectors package, most functions are defined as multi-method dispatching to optimized implementations based on matrix size (which themselves are exposed for direct use too).

Any ArrayLike type can be used as matrix containers (e.g. JS arrays, typed arrays, custom impls) and hence many other functions provided by the vectors package can also be used directly with matrices (where sensible).

Status

STABLE - used in production

Search or submit any issues for this package

Related packages

@thi.ng/color - Array-based color types, CSS parsing, conversions, transformations, declarative theme generation, gradients, presets
@thi.ng/geom - Functional, polymorphic API for 2D geometry types & SVG generation
@thi.ng/vector-pools - Data structures for managing & working with strided, memory mapped vectors
@thi.ng/vectors - Optimized 2d/3d/4d and arbitrary length vector operations, support for memory mapping/layouts

Installation

yarn add @thi.ng/matrices

ESM import:

import * as mat from "@thi.ng/matrices";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/matrices"></script>

JSDelivr documentation

For Node.js REPL:

const mat = await import("@thi.ng/matrices");

Package sizes (brotli'd, pre-treeshake): ESM: 5.19 KB

Dependencies

Note: @thi.ng/api is in most cases a type-only import (not used at runtime)

Usage examples

18 projects in this repo's /examples directory are using this package:

| Screenshot | Description | Live demo | Source | |:-------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:-------------------------------------------------------------|:------------------------------------------------------------------------------------------| | | (Re)Constructing the thi.ng logo using a 2D signed-distance field | Demo | Source | | | Augmenting thi.ng/geom shapes for WebGL, using instancing & attribute buffers | Demo | Source | | | Converting thi.ng/geom shape types for WebGL | Demo | Source | | | Various hdom-canvas shape drawing examples & SVG conversion / export | Demo | Source | | | Barnsley fern IFS fractal renderer | Demo | Source | | | Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang | Demo | Source | | | 2D scenegraph & shape picking | Demo | Source | | | 2D scenegraph & image map based geometry manipulation | Demo | Source | | | Minimal shader graph developed during livestream #2 | Demo | Source | | | Fitting, transforming & plotting 10k data points per frame using SIMD | Demo | Source | | | Entity Component System w/ 100k 3D particles | Demo | Source | | | 3D wireframe textmode demo | Demo | Source | | | Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphere | Demo | Source | | | 3D arcball controller to rotate the camera view of a colored cube | Demo | Source | | | WebGL multi-colored cube mesh | Demo | Source | | | WebGL cube maps with async texture loading | Demo | Source | | | WebGL instancing, animated grid | Demo | Source | | | WebGL MSDF text rendering & particle system | Demo | Source |

API

Generated API docs

Constants

IDENT22 / IDENT23 / IDENT33 / IDENT44

Matrix creation

fit23 / fit44
rotation22 / rotation23
rotationAroundAxis33 / rotationAroundAxis44
rotationAroundPoint23
rotationX33 / rotationX44
rotationY33 / rotationY44
rotationZ33 / rotationZ44
scale22 / scale23 / scale33 / scale44
scaleWithCenter23 / scaleWithCenter44
shearX22 / shearY22
shearX23 / shearY23
shearXY33 / shearXZ33 / shearYX33 / shearYZ33 / shearZX33 / shearZY33
shearXY44 / shearXZ44 / shearYX44 / shearYZ44 / shearZX44 / shearZY44
skewX22 / skewY22
skewX23 / skewY23
skewXY33 / skewXZ33 / skewYX33 / skewYZ33 / skewZX33 / skewZY33
skewXY44 / skewXZ44 / skewYX44 / skewYZ44 / skewZX44 / skewZY44
translation23 / translation44
transform23 / transform44

WebGL related

frustum / frustumBounds
lookAt
ortho
perspective
viewport

Matrix conversion

mat22to23
mat23to22 / mat23to44
mat33to44 / mat44to33
normal44

Setters

set / set22 / set23 / set33 / set44
identity / identity22 / identity23 / identity33 / identity44

Row & column accessors

column / column22 / column23 / column33 / column44
row / row22 / row23 / row33 / row44

Componentwise matrix - matrix

add / add22 / add23 / add33 / add44
div / div22 / div23 / div33 / div44
mul / mul22 / mul23 / mul33 / mul44
sub / sub22 / sub23 / sub33 / sub44

Componentwise matrix - scalar

addN / addN22 / addN23 / addN33 / addN44
divN / divN22 / divN23 / divN33 / divN44
mulN / mulN22 / mulN23 / mulN33 / mulN44
subN / subN22 / subN23 / subN33 / subN44

Matrix multiplication

mulM / mulM22 / mulM23 / mulM33 / mulM44
concat

Matrix - vector multiplication

mulV / mulV22 / mulV23 / mulV33 / mulV344 / mulV44
project
unproject

Determinant & inversion

det22 / det23 / det33 / det44
det44FromCoeffs / detCoeffs44
diag / diag22 / diag23 / diag33 / diag44
invert / invert22 / invert23 / invert33 / invert44
trace

Matrix transposition

transpose22 / transpose33 / transpose44

Quaternion

alignmentQuat
conjugateQ
invertQ
mixQ
mulQ
mulVQ
quatFromAxisAngle
quatFromEuler
quatToAxisAngle
quatToMat33
quatToMat44

Authors

Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-matrices,
  title = "@thi.ng/matrices",
  author = "Karsten Schmidt",
  note = "https://thi.ng/matrices",
  year = 2018
}