gl-matrix

What is gl-matrix?

The gl-matrix npm package is a high-performance matrix and vector operations library for WebGL and other JavaScript applications that require mathematical operations on vectors and matrices. It is optimized for performance and memory usage and provides a clean API for a variety of mathematical operations.

What are gl-matrix's main functionalities?

Matrix Operations

Perform operations on 4x4 matrices such as creation, translation, rotation, scaling, and more.

const mat4 = require('gl-matrix').mat4;
let matrix = mat4.create();
mat4.translate(matrix, matrix, [2, 3, 4]);
mat4.rotateX(matrix, matrix, Math.PI / 4);

Vector Operations

Perform operations on 3D vectors such as setting values, normalization, cross product, dot product, and more.

const vec3 = require('gl-matrix').vec3;
let vector = vec3.create();
vec3.set(vector, 1, 2, 3);
vec3.normalize(vector, vector);

Quaternion Operations

Perform operations on quaternions for representing rotations such as creating a quaternion, rotating it, inverting it, and more.

const quat = require('gl-matrix').quat;
let quaternion = quat.create();
quat.rotateX(quaternion, quaternion, Math.PI / 2);
quat.invert(quaternion, quaternion);

Other packages similar to gl-matrix

three

Three.js is a comprehensive 3D graphics library for JavaScript that includes its own set of vector and matrix math utilities. It is more feature-rich than gl-matrix as it is a full 3D engine, but it is also larger and less focused solely on math operations.

math.gl

Math.gl is a suite of math modules for WebGL-focused applications, offering similar functionalities to gl-matrix. It provides a wider set of math utilities, including additional classes for working with geometries, cameras, and more.

vecmath

Vecmath is a vector and matrix math library for JavaScript that is similar to gl-matrix but with a different API design. It may not be as optimized for performance as gl-matrix.

README

glMatrix

Javascript has evolved into a lanugage capable of handling realtime 3D graphics, via WebGL, and computationally intensive tasks such as physics simulations. These types of applications demand high performance vector and matrix math, which is something that Javascript doesn't provide by default. glMatrix to the rescue!

glMatrix is designed to perform vector and matrix operations stupidly fast! By hand-tuning each function for maximum performance and encouraging efficient usage patterns through API conventions, glMatrix will help you get the most out of your browsers Javascript engine.

Documentation

Documentation for all glMatrix functions can be found here

What's new in 2.0?

glMatrix 2.0 is the result of a lot of excellent feedback from the community, and features:

• Revamped and consistent API (not backward compatible with 1.x, sorry!)
• New functions for each type, based on request.
• New array operations: vec(2/3/4).forEach
• Even more optimizations!
• A cleaner code base, broken up by type.
• A more complete unit testing suite.

Looking for an older version?

You can download previous versions of glMatrix here

A note about Matrix formatting

glMatrix is modeled after the needs of WebGL, which in turn uses matrix conventions set by OpenGL. Specifically, a 4x4 matrix is an array of 16 contiguous floats with the 13th, 14th, and 15th elements representing the X, Y, and Z, translation components.

This may lead to some confusion when referencing OpenGL documentation, however, which represents out all matricies in column-major format. This means that while in code a matrix may be typed out as:

[1, 0, 0, 0,
 0, 1, 0, 0,
 0, 0, 1, 0,
 x, y, z, 0]

The same matrix in the OpenGL documentation is written as:

1 0 0 x
0 1 0 y
0 0 1 z
0 0 0 0

Please rest assured, however, that they are the same thing! This is not unique to glMatrix, either, as OpenGL developers have long been confused by the apparent lack of consistency between the memory layout and the documentation.

Sorry about that, but there's not much I can do about it.