or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

common.mdindex.mdmatrices.mdquaternions.mdvectors.md
tile.json

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.