High-performance JavaScript library for vector and matrix mathematical operations optimized for WebGL applications and 3D graphics programming
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Shared utilities, constants, and configuration functions used across all gl-matrix modules. The glMatrix module provides common functionality for precision control, type configuration, and mathematical utilities.
Essential constants used throughout the library for precision and configuration.
/**
* Common constants available in glMatrix module
*/
const glMatrix: {
/**
* Floating point precision constant for approximate equality comparisons
* @type {number}
* @default 0.000001
*/
EPSILON: number;
/**
* The array type used for gl-matrix operations (Float32Array or Array)
* Can be configured using setMatrixArrayType()
* @type {Float32ArrayConstructor | ArrayConstructor}
* @default Float32Array
*/
ARRAY_TYPE: Float32ArrayConstructor | ArrayConstructor;
/**
* Random number generator function
* @type {() => number}
* @default Math.random
*/
RANDOM: () => number;
/**
* Default Euler angle order for rotations
* @type {string}
* @default "zyx"
*/
ANGLE_ORDER: string;
};Functions to configure global library behavior.
/**
* Sets the type of array used when creating new vectors and matrices
* @param type - Array constructor to use (Float32Array or Array)
*/
function setMatrixArrayType(type: Float32ArrayConstructor | ArrayConstructor): void;Usage Examples:
import { glMatrix } from "gl-matrix";
// Use regular JavaScript arrays instead of typed arrays
glMatrix.setMatrixArrayType(Array);
// Use Float32Array for better performance (default)
glMatrix.setMatrixArrayType(Float32Array);
// Check current array type
console.log(glMatrix.ARRAY_TYPE === Float32Array); // true by defaultCommon mathematical operations and conversions used throughout the library.
/**
* Convert degrees to radians
* @param a - Angle in degrees
* @returns Angle in radians
*/
function toRadian(a: number): number;
/**
* Convert radians to degrees
* @param a - Angle in radians
* @returns Angle in degrees
*/
function toDegree(a: number): number;Usage Examples:
import { glMatrix } from "gl-matrix";
// Convert degrees to radians
const radians = glMatrix.toRadian(45); // π/4
const radians90 = glMatrix.toRadian(90); // π/2
// Convert radians to degrees
const degrees = glMatrix.toDegree(Math.PI / 2); // 90
const degrees180 = glMatrix.toDegree(Math.PI); // 180/**
* Tests whether or not two numbers are approximately equal within a tolerance
* @param a - First number to compare
* @param b - Second number to compare
* @param tolerance - Tolerance for comparison (optional, defaults to glMatrix.EPSILON)
* @returns True if the numbers are approximately equal, false otherwise
*/
function equals(a: number, b: number, tolerance?: number): boolean;
/**
* Symmetric rounding function that rounds to the nearest integer
* Differs from Math.round in that it rounds 0.5 away from zero consistently
* @param a - Number to round
* @returns Rounded number
*/
function round(a: number): number;Usage Examples:
import { glMatrix } from "gl-matrix";
// Test approximate equality with default tolerance
const isEqual = glMatrix.equals(0.1 + 0.2, 0.3); // true (handles floating point precision)
// Test with custom tolerance
const isClose = glMatrix.equals(1.001, 1.002, 0.01); // true
// Symmetric rounding
const rounded1 = glMatrix.round(2.5); // 3
const rounded2 = glMatrix.round(-2.5); // -3
const rounded3 = glMatrix.round(2.4); // 2The glMatrix module is typically used for one-time global configuration:
import { glMatrix } from "gl-matrix";
// Configure for maximum performance with typed arrays
glMatrix.setMatrixArrayType(Float32Array);
// Or configure for compatibility with regular arrays
glMatrix.setMatrixArrayType(Array);
// The ARRAY_TYPE setting affects all new vector/matrix creationUse the built-in precision utilities for consistent floating-point comparisons:
import { glMatrix, vec3 } from "gl-matrix";
const v1 = vec3.fromValues(1.0000001, 2.0, 3.0);
const v2 = vec3.fromValues(1.0, 2.0, 3.0);
// Instead of direct comparison
const isExactlyEqual = vec3.exactEquals(v1, v2); // false
// Use approximate comparison
const isApproximatelyEqual = vec3.equals(v1, v2); // true (uses glMatrix.EPSILON)
// Or use the glMatrix equals function for individual components
const xEqual = glMatrix.equals(v1[0], v2[0]); // trueConvert between degrees and radians consistently:
import { glMatrix, mat4 } from "gl-matrix";
// Working with degrees in your application
const rotationDegrees = 45;
const rotationRadians = glMatrix.toRadian(rotationDegrees);
// Use in matrix operations
const rotationMatrix = mat4.create();
mat4.rotateY(rotationMatrix, rotationMatrix, rotationRadians);
// Convert back if needed
const resultDegrees = glMatrix.toDegree(rotationRadians);The ARRAY_TYPE setting affects memory usage and performance:
import { glMatrix, vec3, mat4 } from "gl-matrix";
// For WebGL applications (recommended)
glMatrix.setMatrixArrayType(Float32Array);
// - Better performance
// - Direct upload to GPU
// - Lower memory usage
// For general applications
glMatrix.setMatrixArrayType(Array);
// - Better compatibility
// - Easier debugging
// - Can store non-numeric values (though not recommended)
// Create vectors/matrices after configuration
const vector = vec3.create(); // Uses current ARRAY_TYPE
const matrix = mat4.create(); // Uses current ARRAY_TYPEYou can replace the default random number generator:
import { glMatrix, vec3 } from "gl-matrix";
// Use a seeded random number generator for deterministic results
let seed = 12345;
glMatrix.RANDOM = function() {
const x = Math.sin(seed++) * 10000;
return x - Math.floor(x);
};
// Now random vector generation will be deterministic
const randomVec = vec3.create();
vec3.random(randomVec); // Uses custom RANDOM function| Constant | Type | Default Value | Description |
|---|---|---|---|
EPSILON | number | 0.000001 | Precision threshold for floating-point comparisons |
ARRAY_TYPE | Float32ArrayConstructor | ArrayConstructor | Float32Array | Constructor for new vectors and matrices |
RANDOM | () => number | Math.random | Random number generator function |
ANGLE_ORDER | string | "zyx" | Default Euler angle rotation order |
Configure once: Set ARRAY_TYPE at the beginning of your application before creating any vectors or matrices.
Use appropriate precision: Use glMatrix.equals() for floating-point comparisons instead of strict equality.
Consistent angle units: Use toRadian() and toDegree() for consistent angle conversions throughout your application.
Performance optimization: Use Float32Array for WebGL applications and mathematical computations for better performance.
Deterministic randomness: Replace glMatrix.RANDOM with a seeded generator for reproducible results in simulations or testing.