CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-gl-matrix

High-performance JavaScript library for vector and matrix mathematical operations optimized for WebGL applications and 3D graphics programming

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

common.mddocs/

Common Utilities

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.

Capabilities

Constants

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;
};

Configuration Functions

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 default

Mathematical Utilities

Common mathematical operations and conversions used throughout the library.

Angle Conversion

/**
 * 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

Precision and Comparison

/**
 * 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); // 2

Usage Patterns

Global Configuration

The 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 creation

Precision Handling

Use 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]); // true

Angle Conversions

Convert 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);

Performance Considerations

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_TYPE

Custom Random Number Generation

You 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

Constants Reference

ConstantTypeDefault ValueDescription
EPSILONnumber0.000001Precision threshold for floating-point comparisons
ARRAY_TYPEFloat32ArrayConstructor | ArrayConstructorFloat32ArrayConstructor for new vectors and matrices
RANDOM() => numberMath.randomRandom number generator function
ANGLE_ORDERstring"zyx"Default Euler angle rotation order

Best Practices

  1. Configure once: Set ARRAY_TYPE at the beginning of your application before creating any vectors or matrices.

  2. Use appropriate precision: Use glMatrix.equals() for floating-point comparisons instead of strict equality.

  3. Consistent angle units: Use toRadian() and toDegree() for consistent angle conversions throughout your application.

  4. Performance optimization: Use Float32Array for WebGL applications and mathematical computations for better performance.

  5. Deterministic randomness: Replace glMatrix.RANDOM with a seeded generator for reproducible results in simulations or testing.

docs

common.md

index.md

matrices.md

quaternions.md

vectors.md

tile.json