Noodles Practicing Medicine
    Wondering what’s next for npm?Check out our public roadmap! »

    @thi.ng/matrices
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.59 • Public • Published

    matrices

    npm version npm downloads Twitter Follow

    This project is part of the @thi.ng/umbrella monorepo.

    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

    Installation

    yarn add @thi.ng/matrices
    // ES module
    <script type="module" src="https://unpkg.com/@thi.ng/matrices?module" crossorigin></script>
    
    // UMD
    <script src="https://unpkg.com/@thi.ng/matrices/lib/index.umd.js" crossorigin></script>

    Package sizes (gzipped, pre-treeshake): ESM: 4.76 KB / CJS: 5.31 KB / UMD: 4.86 KB

    Dependencies

    Usage examples

    Several demos in this repo's /examples directory are using this package.

    A selection:

    Screenshot Description Live 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
    Entity Component System w/ 100k 3D particles Demo Source
    3D wireframe textmode demo 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

    • rotation22 / rotation23
    • rotationAroundAxis33 / rotationAroundAxis44
    • 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
    }

    License

    © 2018 - 2021 Karsten Schmidt // Apache Software License 2.0

    Install

    npm i @thi.ng/matrices

    DownloadsWeekly Downloads

    78

    Version

    0.6.59

    License

    Apache-2.0

    Unpacked Size

    234 kB

    Total Files

    122

    Last publish

    Collaborators

    • avatar