gpu-curtains
Version:
gpu-curtains is a 3D WebGPU rendering engine. It can be used as a standalone 3D engine, but also includes extra classes focused on mapping 3d objects to DOM elements; It allows users to synchronize values such as position, sizing, or scale between them.
1,448 lines (1,443 loc) • 999 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.window = global.window || {}));
})(this, (function (exports) { 'use strict';
const generateUUID = () => {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0, v = c === "x" ? r : r & 3 | 8;
return v.toString(16).toUpperCase();
});
};
const toCamelCase = (string) => {
return string.replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) => idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase()).replace(/\s+/g, "");
};
const toKebabCase = (string) => {
const camelCase = toCamelCase(string);
return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
};
let warningThrown = 0;
const throwWarning = (warning) => {
if (warningThrown > 100) {
return;
} else if (warningThrown === 100) {
console.warn("GPUCurtains: too many warnings thrown, stop logging.");
} else {
console.warn(warning);
}
warningThrown++;
};
const throwError = (error) => {
throw new Error(error);
};
class Quat {
/**
* Quat constructor
* @param [elements] - initial array to use
* @param [axisOrder='XYZ'] - axis order to use
*/
constructor(elements = new Float32Array([0, 0, 0, 1]), axisOrder = "XYZ") {
this.type = "Quat";
this.elements = elements;
this.axisOrder = axisOrder;
}
/**
* Sets the {@link Quat} values from an array
* @param array - an array of at least 4 elements
* @returns - this {@link Quat} after being set
*/
setFromArray(array = new Float32Array([0, 0, 0, 1])) {
this.elements[0] = array[0];
this.elements[1] = array[1];
this.elements[2] = array[2];
this.elements[3] = array[3];
return this;
}
/**
* Sets the {@link Quat} axis order
* @param axisOrder - axis order to use
* @returns - this {@link Quat} after axis order has been set
*/
setAxisOrder(axisOrder = "XYZ") {
axisOrder = axisOrder.toUpperCase();
switch (axisOrder) {
case "XYZ":
case "YXZ":
case "ZXY":
case "ZYX":
case "YZX":
case "XZY":
this.axisOrder = axisOrder;
break;
default:
this.axisOrder = "XYZ";
}
return this;
}
/**
* Copy a {@link Quat} into this {@link Quat}
* @param quaternion - {@link Quat} to copy
* @returns - this {@link Quat} after copy
*/
copy(quaternion = new Quat()) {
this.elements.set(quaternion.elements);
this.axisOrder = quaternion.axisOrder;
return this;
}
/**
* Clone a {@link Quat}
* @returns - cloned {@link Quat}
*/
clone() {
return new Quat().copy(this);
}
/**
* Check if 2 {@link Quat} are equal
* @param quaternion - {@link Quat} to check against
* @returns - whether the {@link Quat} are equal or not
*/
equals(quaternion = new Quat()) {
return this.elements[0] === quaternion.elements[0] && this.elements[1] === quaternion.elements[1] && this.elements[2] === quaternion.elements[2] && this.elements[3] === quaternion.elements[3] && this.axisOrder === quaternion.axisOrder;
}
/**
* Sets a rotation {@link Quat} using Euler angles {@link Vec3 | vector} and its axis order
* @param vector - rotation {@link Vec3 | vector} to set our {@link Quat} from
* @returns - {@link Quat} after having applied the rotation
*/
setFromVec3(vector) {
const ax = vector.x * 0.5;
const ay = vector.y * 0.5;
const az = vector.z * 0.5;
const cosx = Math.cos(ax);
const cosy = Math.cos(ay);
const cosz = Math.cos(az);
const sinx = Math.sin(ax);
const siny = Math.sin(ay);
const sinz = Math.sin(az);
if (this.axisOrder === "XYZ") {
this.elements[0] = sinx * cosy * cosz + cosx * siny * sinz;
this.elements[1] = cosx * siny * cosz - sinx * cosy * sinz;
this.elements[2] = cosx * cosy * sinz + sinx * siny * cosz;
this.elements[3] = cosx * cosy * cosz - sinx * siny * sinz;
} else if (this.axisOrder === "YXZ") {
this.elements[0] = sinx * cosy * cosz + cosx * siny * sinz;
this.elements[1] = cosx * siny * cosz - sinx * cosy * sinz;
this.elements[2] = cosx * cosy * sinz - sinx * siny * cosz;
this.elements[3] = cosx * cosy * cosz + sinx * siny * sinz;
} else if (this.axisOrder === "ZXY") {
this.elements[0] = sinx * cosy * cosz - cosx * siny * sinz;
this.elements[1] = cosx * siny * cosz + sinx * cosy * sinz;
this.elements[2] = cosx * cosy * sinz + sinx * siny * cosz;
this.elements[3] = cosx * cosy * cosz - sinx * siny * sinz;
} else if (this.axisOrder === "ZYX") {
this.elements[0] = sinx * cosy * cosz - cosx * siny * sinz;
this.elements[1] = cosx * siny * cosz + sinx * cosy * sinz;
this.elements[2] = cosx * cosy * sinz - sinx * siny * cosz;
this.elements[3] = cosx * cosy * cosz + sinx * siny * sinz;
} else if (this.axisOrder === "YZX") {
this.elements[0] = sinx * cosy * cosz + cosx * siny * sinz;
this.elements[1] = cosx * siny * cosz + sinx * cosy * sinz;
this.elements[2] = cosx * cosy * sinz - sinx * siny * cosz;
this.elements[3] = cosx * cosy * cosz - sinx * siny * sinz;
} else if (this.axisOrder === "XZY") {
this.elements[0] = sinx * cosy * cosz - cosx * siny * sinz;
this.elements[1] = cosx * siny * cosz - sinx * cosy * sinz;
this.elements[2] = cosx * cosy * sinz + sinx * siny * cosz;
this.elements[3] = cosx * cosy * cosz + sinx * siny * sinz;
}
return this;
}
/**
* Set a {@link Quat} from a rotation axis {@link Vec3 | vector} and an angle
* @param axis - normalized {@link Vec3 | vector} around which to rotate
* @param angle - angle (in radians) to rotate
* @returns - {@link Quat} after having applied the rotation
*/
setFromAxisAngle(axis, angle = 0) {
const halfAngle = angle / 2, s = Math.sin(halfAngle);
this.elements[0] = axis.x * s;
this.elements[1] = axis.y * s;
this.elements[2] = axis.z * s;
this.elements[3] = Math.cos(halfAngle);
return this;
}
/**
* Set a {@link Quat} from a rotation {@link Mat4 | matrix}
* @param matrix - rotation {@link Mat4 | matrix} to use
* @returns - {@link Quat} after having applied the rotation
*/
setFromRotationMatrix(matrix) {
const te = matrix.elements, m11 = te[0], m12 = te[4], m13 = te[8], m21 = te[1], m22 = te[5], m23 = te[9], m31 = te[2], m32 = te[6], m33 = te[10], trace = m11 + m22 + m33;
if (trace > 0) {
const s = 0.5 / Math.sqrt(trace + 1);
this.elements[3] = 0.25 / s;
this.elements[0] = (m32 - m23) * s;
this.elements[1] = (m13 - m31) * s;
this.elements[2] = (m21 - m12) * s;
} else if (m11 > m22 && m11 > m33) {
const s = 2 * Math.sqrt(1 + m11 - m22 - m33);
this.elements[3] = (m32 - m23) / s;
this.elements[0] = 0.25 * s;
this.elements[1] = (m12 + m21) / s;
this.elements[2] = (m13 + m31) / s;
} else if (m22 > m33) {
const s = 2 * Math.sqrt(1 + m22 - m11 - m33);
this.elements[3] = (m13 - m31) / s;
this.elements[0] = (m12 + m21) / s;
this.elements[1] = 0.25 * s;
this.elements[2] = (m23 + m32) / s;
} else {
const s = 2 * Math.sqrt(1 + m33 - m11 - m22);
this.elements[3] = (m21 - m12) / s;
this.elements[0] = (m13 + m31) / s;
this.elements[1] = (m23 + m32) / s;
this.elements[2] = 0.25 * s;
}
return this;
}
/**
* Get the square length of this {@link Quat}.
* @returns - square length of this {@link Quat}.
*/
lengthSq() {
return this.elements[0] * this.elements[0] + this.elements[1] * this.elements[1] + this.elements[2] * this.elements[2] + this.elements[3] * this.elements[3];
}
/**
* Get the length of this {@link Quat}.
* @returns - length of this {@link Quat}.
*/
length() {
return Math.sqrt(this.lengthSq());
}
/**
* Normalize this {@link Quat}.
* @returns - normalized {@link Quat}.
*/
normalize() {
let l = this.length();
if (l === 0) {
this.elements[0] = 0;
this.elements[1] = 0;
this.elements[2] = 0;
this.elements[3] = 1;
} else {
l = 1 / l;
this.elements[0] = this.elements[0] * l;
this.elements[1] = this.elements[1] * l;
this.elements[2] = this.elements[2] * l;
this.elements[3] = this.elements[3] * l;
}
return this;
}
/**
* Calculate the spherical linear interpolation of this {@link Quat} by given {@link Quat} and alpha, where alpha is the percent distance.
* @param quat - {@link Quat} to interpolate towards.
* @param alpha - spherical interpolation factor in the [0, 1] interval.
* @returns - this {@link Quat} after spherical linear interpolation.
*/
slerp(quat = new Quat(), alpha = 0) {
if (alpha === 0) return this;
if (alpha === 1) return this.copy(quat);
const x = this.elements[0], y = this.elements[1], z = this.elements[2], w = this.elements[3];
let cosHalfTheta = w * quat.elements[3] + x * quat.elements[0] + y * quat.elements[1] + z * quat.elements[2];
if (cosHalfTheta < 0) {
this.elements[3] = -quat.elements[3];
this.elements[0] = -quat.elements[0];
this.elements[1] = -quat.elements[1];
this.elements[2] = -quat.elements[2];
cosHalfTheta = -cosHalfTheta;
} else {
this.copy(quat);
}
if (cosHalfTheta >= 1) {
this.elements[3] = w;
this.elements[0] = x;
this.elements[1] = y;
this.elements[2] = z;
return this;
}
const sqrSinHalfTheta = 1 - cosHalfTheta * cosHalfTheta;
if (sqrSinHalfTheta <= Number.EPSILON) {
const s = 1 - alpha;
this.elements[3] = s * w + alpha * this.elements[3];
this.elements[0] = s * x + alpha * this.elements[0];
this.elements[1] = s * y + alpha * this.elements[1];
this.elements[2] = s * z + alpha * this.elements[2];
this.normalize();
return this;
}
const sinHalfTheta = Math.sqrt(sqrSinHalfTheta);
const halfTheta = Math.atan2(sinHalfTheta, cosHalfTheta);
const ratioA = Math.sin((1 - alpha) * halfTheta) / sinHalfTheta, ratioB = Math.sin(alpha * halfTheta) / sinHalfTheta;
this.elements[3] = w * ratioA + this.elements[3] * ratioB;
this.elements[0] = x * ratioA + this.elements[0] * ratioB;
this.elements[1] = y * ratioA + this.elements[1] * ratioB;
this.elements[2] = z * ratioA + this.elements[2] * ratioB;
return this;
}
}
class Vec3 {
/**
* Vec3 constructor
* @param x - X component of our {@link Vec3}
* @param y - Y component of our {@link Vec3}
* @param z - Z component of our {@link Vec3}
*/
constructor(x = 0, y = x, z = x) {
this.type = "Vec3";
this._x = x;
this._y = y;
this._z = z;
}
/**
* Get the X component of the {@link Vec3}
*/
get x() {
return this._x;
}
/**
* Set the X component of the {@link Vec3}
* Can trigger {@link onChange} callback
* @param value - X component to set
*/
set x(value) {
const changed = value !== this._x;
this._x = value;
changed && this._onChangeCallback && this._onChangeCallback();
}
/**
* Get the Y component of the {@link Vec3}
*/
get y() {
return this._y;
}
/**
* Set the Y component of the {@link Vec3}
* Can trigger {@link onChange} callback
* @param value - Y component to set
*/
set y(value) {
const changed = value !== this._y;
this._y = value;
changed && this._onChangeCallback && this._onChangeCallback();
}
/**
* Get the Z component of the {@link Vec3}
*/
get z() {
return this._z;
}
/**
* Set the Z component of the {@link Vec3}
* Can trigger {@link onChange} callback
* @param value - Z component to set
*/
set z(value) {
const changed = value !== this._z;
this._z = value;
changed && this._onChangeCallback && this._onChangeCallback();
}
/**
* Called when at least one component of the {@link Vec3} has changed
* @param callback - callback to run when at least one component of the {@link Vec3} has changed
* @returns - our {@link Vec3}
*/
onChange(callback) {
if (callback) {
this._onChangeCallback = callback;
}
return this;
}
/**
* Set the {@link Vec3} from values
* @param x - new X component to set
* @param y - new Y component to set
* @param z - new Z component to set
* @returns - this {@link Vec3} after being set
*/
set(x = 0, y = x, z = x) {
this.x = x;
this.y = y;
this.z = z;
return this;
}
/**
* Add a {@link Vec3} to this {@link Vec3}
* @param vector - {@link Vec3} to add
* @returns - this {@link Vec3} after addition
*/
add(vector = new Vec3()) {
this.x += vector.x;
this.y += vector.y;
this.z += vector.z;
return this;
}
/**
* Add a scalar to all the components of this {@link Vec3}
* @param value - number to add
* @returns - this {@link Vec3} after addition
*/
addScalar(value = 0) {
this.x += value;
this.y += value;
this.z += value;
return this;
}
/**
* Subtract a {@link Vec3} from this {@link Vec3}
* @param vector - {@link Vec3} to subtract
* @returns - this {@link Vec3} after subtraction
*/
sub(vector = new Vec3()) {
this.x -= vector.x;
this.y -= vector.y;
this.z -= vector.z;
return this;
}
/**
* Subtract a scalar to all the components of this {@link Vec3}
* @param value - number to subtract
* @returns - this {@link Vec3} after subtraction
*/
subScalar(value = 0) {
this.x -= value;
this.y -= value;
this.z -= value;
return this;
}
/**
* Multiply a {@link Vec3} with this {@link Vec3}
* @param vector - {@link Vec3} to multiply with
* @returns - this {@link Vec3} after multiplication
*/
multiply(vector = new Vec3(1)) {
this.x *= vector.x;
this.y *= vector.y;
this.z *= vector.z;
return this;
}
/**
* Multiply all components of this {@link Vec3} with a scalar
* @param value - number to multiply with
* @returns - this {@link Vec3} after multiplication
*/
multiplyScalar(value = 1) {
this.x *= value;
this.y *= value;
this.z *= value;
return this;
}
/**
* Divide a {@link Vec3} with this {@link Vec3}
* @param vector - {@link Vec3} to divide with
* @returns - this {@link Vec3} after division
*/
divide(vector = new Vec3(1)) {
this.x /= vector.x;
this.y /= vector.y;
this.z /= vector.z;
return this;
}
/**
* Divide all components of this {@link Vec3} with a scalar
* @param value - number to divide with
* @returns - this {@link Vec3} after division
*/
divideScalar(value = 1) {
this.x /= value;
this.y /= value;
this.z /= value;
return this;
}
/**
* Copy a {@link Vec3} into this {@link Vec3}
* @param vector - {@link Vec3} to copy
* @returns - this {@link Vec3} after copy
*/
copy(vector = new Vec3()) {
this.x = vector.x;
this.y = vector.y;
this.z = vector.z;
return this;
}
/**
* Clone this {@link Vec3}
* @returns - cloned {@link Vec3}
*/
clone() {
return new Vec3(this.x, this.y, this.z);
}
/**
* Apply max values to this {@link Vec3} components
* @param vector - {@link Vec3} representing max values
* @returns - {@link Vec3} with max values applied
*/
max(vector = new Vec3()) {
this.x = Math.max(this.x, vector.x);
this.y = Math.max(this.y, vector.y);
this.z = Math.max(this.z, vector.z);
return this;
}
/**
* Apply min values to this {@link Vec3} components
* @param vector - {@link Vec3} representing min values
* @returns - {@link Vec3} with min values applied
*/
min(vector = new Vec3()) {
this.x = Math.min(this.x, vector.x);
this.y = Math.min(this.y, vector.y);
this.z = Math.min(this.z, vector.z);
return this;
}
/**
* Clamp this {@link Vec3} components by min and max {@link Vec3} vectors
* @param min - minimum {@link Vec3} components to compare with
* @param max - maximum {@link Vec3} components to compare with
* @returns - clamped {@link Vec3}
*/
clamp(min = new Vec3(), max = new Vec3()) {
this.x = Math.max(min.x, Math.min(max.x, this.x));
this.y = Math.max(min.y, Math.min(max.y, this.y));
this.z = Math.max(min.z, Math.min(max.z, this.z));
return this;
}
/**
* Check if 2 {@link Vec3} are equal
* @param vector - {@link Vec3} to compare
* @returns - whether the {@link Vec3} are equals or not
*/
equals(vector = new Vec3()) {
return this.x === vector.x && this.y === vector.y && this.z === vector.z;
}
/**
* Get the square length of this {@link Vec3}
* @returns - square length of this {@link Vec3}
*/
lengthSq() {
return this.x * this.x + this.y * this.y + this.z * this.z;
}
/**
* Get the length of this {@link Vec3}
* @returns - length of this {@link Vec3}
*/
length() {
return Math.sqrt(this.lengthSq());
}
/**
* Get the euclidian distance between this {@link Vec3} and another {@link Vec3}
* @param vector - {@link Vec3} to use for distance calculation
* @returns - euclidian distance
*/
distance(vector = new Vec3()) {
return Math.hypot(vector.x - this.x, vector.y - this.y, vector.z - this.z);
}
/**
* Normalize this {@link Vec3}
* @returns - normalized {@link Vec3}
*/
normalize() {
let len = this.lengthSq();
if (len > 0) {
len = 1 / Math.sqrt(len);
}
this.x *= len;
this.y *= len;
this.z *= len;
return this;
}
/**
* Calculate the dot product of 2 {@link Vec3}
* @param vector - {@link Vec3} to use for dot product
* @returns - dot product of the 2 {@link Vec3}
*/
dot(vector = new Vec3()) {
return this.x * vector.x + this.y * vector.y + this.z * vector.z;
}
/**
* Get the cross product of this {@link Vec3} with another {@link Vec3}
* @param vector - {@link Vec3} to use for cross product
* @returns - this {@link Vec3} after cross product
*/
cross(vector = new Vec3()) {
return this.crossVectors(this, vector);
}
/**
* Set this {@link Vec3} as the result of the cross product of two {@link Vec3}
* @param a - first {@link Vec3} to use for cross product
* @param b - second {@link Vec3} to use for cross product
* @returns - this {@link Vec3} after cross product
*/
crossVectors(a = new Vec3(), b = new Vec3()) {
const ax = a.x, ay = a.y, az = a.z;
const bx = b.x, by = b.y, bz = b.z;
this.x = ay * bz - az * by;
this.y = az * bx - ax * bz;
this.z = ax * by - ay * bx;
return this;
}
/**
* Calculate the linear interpolation of this {@link Vec3} by given {@link Vec3} and alpha, where alpha is the percent distance along the line
* @param vector - {@link Vec3} to interpolate towards
* @param alpha - interpolation factor in the [0, 1] interval
* @returns - this {@link Vec3} after linear interpolation
*/
lerp(vector = new Vec3(), alpha = 1) {
this.x += (vector.x - this.x) * alpha;
this.y += (vector.y - this.y) * alpha;
this.z += (vector.z - this.z) * alpha;
return this;
}
/**
* Apply a {@link Mat4 | matrix} to a {@link Vec3}
* Useful to convert a position {@link Vec3} from plane local world to webgl space using projection view matrix for example
* Source code from: http://glmatrix.net/docs/vec3.js.html
* @param matrix - {@link Mat4 | matrix} to use
* @returns - this {@link Vec3} after {@link Mat4 | matrix} application
*/
applyMat4(matrix) {
const x = this._x, y = this._y, z = this._z;
const mArray = matrix.elements;
let w = mArray[3] * x + mArray[7] * y + mArray[11] * z + mArray[15];
w = w || 1;
this.x = (mArray[0] * x + mArray[4] * y + mArray[8] * z + mArray[12]) / w;
this.y = (mArray[1] * x + mArray[5] * y + mArray[9] * z + mArray[13]) / w;
this.z = (mArray[2] * x + mArray[6] * y + mArray[10] * z + mArray[14]) / w;
return this;
}
/**
* Set this {@link Vec3} to the translation component of a {@link Mat4 | matrix}.
* @param matrix - {@link Mat4 | matrix} to use
* @returns - this {@link Vec3} after {@link Mat4 | matrix} application.
*/
setFromMatrixPosition(matrix) {
const e = matrix.elements;
this.x = e[12];
this.y = e[13];
this.z = e[14];
return this;
}
/**
* Apply a {@link Quat | quaternion} (rotation in 3D space) to this {@link Vec3}
* @param quaternion - {@link Quat | quaternion} to use
* @returns - this {@link Vec3} with the transformation applied
*/
applyQuat(quaternion = new Quat()) {
const x = this.x, y = this.y, z = this.z;
const qx = quaternion.elements[0], qy = quaternion.elements[1], qz = quaternion.elements[2], qw = quaternion.elements[3];
const tx = 2 * (qy * z - qz * y);
const ty = 2 * (qz * x - qx * z);
const tz = 2 * (qx * y - qy * x);
this.x = x + qw * tx + qy * tz - qz * ty;
this.y = y + qw * ty + qz * tx - qx * tz;
this.z = z + qw * tz + qx * ty - qy * tx;
return this;
}
/**
* Rotate a {@link Vec3} around and axis by a given angle
* @param axis - normalized {@link Vec3} around which to rotate
* @param angle - angle (in radians) to rotate
* @param quaternion - optional {@link Quat | quaternion} to use for rotation computations
* @returns - this {@link Vec3} with the rotation applied
*/
applyAxisAngle(axis = new Vec3(), angle = 0, quaternion = new Quat()) {
return this.applyQuat(quaternion.setFromAxisAngle(axis, angle));
}
/**
* Transforms the direction of this vector by a {@link Mat4} (the upper left 3 x 3 subset) and then normalizes the result.
* @param matrix - {@link Mat4} to use for transformation.
* @returns - this {@link Vec3} with the transformation applied.
*/
transformDirection(matrix) {
const x = this.x, y = this.y, z = this.z;
const e = matrix.elements;
this.x = e[0] * x + e[4] * y + e[8] * z;
this.y = e[1] * x + e[5] * y + e[9] * z;
this.z = e[2] * x + e[6] * y + e[10] * z;
return this.normalize();
}
/**
* Project a 3D coordinate {@link Vec3} to a 2D coordinate {@link Vec3}
* @param camera - {@link Camera} to use for projection
* @returns - projected {@link Vec3}
*/
project(camera) {
this.applyMat4(camera.viewMatrix).applyMat4(camera.projectionMatrix);
return this;
}
/**
* Unproject a 2D coordinate {@link Vec3} to 3D coordinate {@link Vec3}
* @param camera - {@link Camera} to use for projection
* @returns - unprojected {@link Vec3}
*/
unproject(camera) {
this.applyMat4(camera.projectionMatrix.getInverse()).applyMat4(camera.modelMatrix);
return this;
}
}
const xAxis = new Vec3();
const yAxis = new Vec3();
const zAxis = new Vec3();
class Mat4 {
// prettier-ignore
/**
* Mat4 constructor
* @param elements - initial array to use, default to identity matrix
*/
constructor(elements = new Float32Array([
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1
])) {
this.type = "Mat4";
this.elements = elements;
}
/***
* Sets the matrix from 16 numbers
*
* @param n11 - number
* @param n12 - number
* @param n13 - number
* @param n14 - number
* @param n21 - number
* @param n22 - number
* @param n23 - number
* @param n24 - number
* @param n31 - number
* @param n32 - number
* @param n33 - number
* @param n34 - number
* @param n41 - number
* @param n42 - number
* @param n43 - number
* @param n44 - number
*
* @returns - this {@link Mat4} after being set
*/
set(n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
const te = this.elements;
te[0] = n11;
te[1] = n12;
te[2] = n13;
te[3] = n14;
te[4] = n21;
te[5] = n22;
te[6] = n23;
te[7] = n24;
te[8] = n31;
te[9] = n32;
te[10] = n33;
te[11] = n34;
te[12] = n41;
te[13] = n42;
te[14] = n43;
te[15] = n44;
return this;
}
/**
* Sets the {@link Mat4} to an identity matrix
* @returns - this {@link Mat4} after being set
*/
identity() {
this.set(
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1
);
return this;
}
/**
* Sets the {@link Mat4} values from an array
* @param array - array to use
* @param offset - optional offset in the array to use
* @returns - this {@link Mat4} after being set
*/
// prettier-ignore
setFromArray(array = new Float32Array([
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1
]), offset = 0) {
for (let i = 0; i < this.elements.length; i++) {
this.elements[i] = array[i + offset];
}
return this;
}
/**
* Copy another {@link Mat4}
* @param matrix - matrix to copy
* @returns - this {@link Mat4} after being set
*/
copy(matrix = new Mat4()) {
const array = matrix.elements;
this.elements[0] = array[0];
this.elements[1] = array[1];
this.elements[2] = array[2];
this.elements[3] = array[3];
this.elements[4] = array[4];
this.elements[5] = array[5];
this.elements[6] = array[6];
this.elements[7] = array[7];
this.elements[8] = array[8];
this.elements[9] = array[9];
this.elements[10] = array[10];
this.elements[11] = array[11];
this.elements[12] = array[12];
this.elements[13] = array[13];
this.elements[14] = array[14];
this.elements[15] = array[15];
return this;
}
/**
* Clone a {@link Mat4}
* @returns - cloned {@link Mat4}
*/
clone() {
return new Mat4().copy(this);
}
/**
* Multiply this {@link Mat4} with another {@link Mat4}.
* @param matrix - {@link Mat4} to multiply with.
* @returns - this {@link Mat4} after multiplication.
*/
multiply(matrix = new Mat4()) {
return this.multiplyMatrices(this, matrix);
}
/**
* Multiply another {@link Mat4} with this {@link Mat4}.
* @param matrix - {@link Mat4} to multiply with.
* @returns - this {@link Mat4} after multiplication.
*/
premultiply(matrix = new Mat4()) {
return this.multiplyMatrices(matrix, this);
}
/**
* Multiply two {@link Mat4}.
* @param a - first {@link Mat4}.
* @param b - second {@link Mat4}.
* @returns - {@link Mat4} resulting from the multiplication.
*/
multiplyMatrices(a = new Mat4(), b = new Mat4()) {
const ae = a.elements;
const be = b.elements;
const te = this.elements;
const a11 = ae[0], a12 = ae[4], a13 = ae[8], a14 = ae[12];
const a21 = ae[1], a22 = ae[5], a23 = ae[9], a24 = ae[13];
const a31 = ae[2], a32 = ae[6], a33 = ae[10], a34 = ae[14];
const a41 = ae[3], a42 = ae[7], a43 = ae[11], a44 = ae[15];
const b11 = be[0], b12 = be[4], b13 = be[8], b14 = be[12];
const b21 = be[1], b22 = be[5], b23 = be[9], b24 = be[13];
const b31 = be[2], b32 = be[6], b33 = be[10], b34 = be[14];
const b41 = be[3], b42 = be[7], b43 = be[11], b44 = be[15];
te[0] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41;
te[4] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42;
te[8] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43;
te[12] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44;
te[1] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41;
te[5] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42;
te[9] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43;
te[13] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44;
te[2] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41;
te[6] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42;
te[10] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43;
te[14] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44;
te[3] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41;
te[7] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42;
te[11] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43;
te[15] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44;
return this;
}
/**
* {@link premultiply} this {@link Mat4} by a translate matrix (i.e. translateMatrix = new Mat4().translate(vector)).
* @param vector - translation {@link Vec3} to use.
* @returns - this {@link Mat4} after the premultiply translate operation.
*/
premultiplyTranslate(vector = new Vec3()) {
const a11 = 1;
const a22 = 1;
const a33 = 1;
const a44 = 1;
const a14 = vector.x;
const a24 = vector.y;
const a34 = vector.z;
const be = this.elements;
const te = this.elements;
const b11 = be[0], b12 = be[4], b13 = be[8], b14 = be[12];
const b21 = be[1], b22 = be[5], b23 = be[9], b24 = be[13];
const b31 = be[2], b32 = be[6], b33 = be[10], b34 = be[14];
const b41 = be[3], b42 = be[7], b43 = be[11], b44 = be[15];
te[0] = a11 * b11 + a14 * b41;
te[4] = a11 * b12 + a14 * b42;
te[8] = a11 * b13 + a14 * b43;
te[12] = a11 * b14 + a14 * b44;
te[1] = a22 * b21 + a24 * b41;
te[5] = a22 * b22 + a24 * b42;
te[9] = a22 * b23 + a24 * b43;
te[13] = a22 * b24 + a24 * b44;
te[2] = a33 * b31 + a34 * b41;
te[6] = a33 * b32 + a34 * b42;
te[10] = a33 * b33 + a34 * b43;
te[14] = a33 * b34 + a34 * b44;
te[3] = a44 * b41;
te[7] = a44 * b42;
te[11] = a44 * b43;
te[15] = a44 * b44;
return this;
}
/**
* {@link premultiply} this {@link Mat4} by a scale matrix (i.e. translateMatrix = new Mat4().scale(vector)).
* @param vector - scale {@link Vec3 | vector} to use.
* @returns - this {@link Mat4} after the premultiply scale operation.
*/
premultiplyScale(vector = new Vec3()) {
const be = this.elements;
const te = this.elements;
const a11 = vector.x;
const a22 = vector.y;
const a33 = vector.z;
const a44 = 1;
const b11 = be[0], b12 = be[4], b13 = be[8], b14 = be[12];
const b21 = be[1], b22 = be[5], b23 = be[9], b24 = be[13];
const b31 = be[2], b32 = be[6], b33 = be[10], b34 = be[14];
const b41 = be[3], b42 = be[7], b43 = be[11], b44 = be[15];
te[0] = a11 * b11;
te[4] = a11 * b12;
te[8] = a11 * b13;
te[12] = a11 * b14;
te[1] = a22 * b21;
te[5] = a22 * b22;
te[9] = a22 * b23;
te[13] = a22 * b24;
te[2] = a33 * b31;
te[6] = a33 * b32;
te[10] = a33 * b33;
te[14] = a33 * b34;
te[3] = a44 * b41;
te[7] = a44 * b42;
te[11] = a44 * b43;
te[15] = a44 * b44;
return this;
}
/**
* Get the {@link Mat4} inverse
* @returns - the inverted {@link Mat4}
*/
invert() {
const te = this.elements, n11 = te[0], n21 = te[1], n31 = te[2], n41 = te[3], n12 = te[4], n22 = te[5], n32 = te[6], n42 = te[7], n13 = te[8], n23 = te[9], n33 = te[10], n43 = te[11], n14 = te[12], n24 = te[13], n34 = te[14], n44 = te[15], t11 = n23 * n34 * n42 - n24 * n33 * n42 + n24 * n32 * n43 - n22 * n34 * n43 - n23 * n32 * n44 + n22 * n33 * n44, t12 = n14 * n33 * n42 - n13 * n34 * n42 - n14 * n32 * n43 + n12 * n34 * n43 + n13 * n32 * n44 - n12 * n33 * n44, t13 = n13 * n24 * n42 - n14 * n23 * n42 + n14 * n22 * n43 - n12 * n24 * n43 - n13 * n22 * n44 + n12 * n23 * n44, t14 = n14 * n23 * n32 - n13 * n24 * n32 - n14 * n22 * n33 + n12 * n24 * n33 + n13 * n22 * n34 - n12 * n23 * n34;
const det = n11 * t11 + n21 * t12 + n31 * t13 + n41 * t14;
if (det === 0) return this.set(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
const detInv = 1 / det;
te[0] = t11 * detInv;
te[1] = (n24 * n33 * n41 - n23 * n34 * n41 - n24 * n31 * n43 + n21 * n34 * n43 + n23 * n31 * n44 - n21 * n33 * n44) * detInv;
te[2] = (n22 * n34 * n41 - n24 * n32 * n41 + n24 * n31 * n42 - n21 * n34 * n42 - n22 * n31 * n44 + n21 * n32 * n44) * detInv;
te[3] = (n23 * n32 * n41 - n22 * n33 * n41 - n23 * n31 * n42 + n21 * n33 * n42 + n22 * n31 * n43 - n21 * n32 * n43) * detInv;
te[4] = t12 * detInv;
te[5] = (n13 * n34 * n41 - n14 * n33 * n41 + n14 * n31 * n43 - n11 * n34 * n43 - n13 * n31 * n44 + n11 * n33 * n44) * detInv;
te[6] = (n14 * n32 * n41 - n12 * n34 * n41 - n14 * n31 * n42 + n11 * n34 * n42 + n12 * n31 * n44 - n11 * n32 * n44) * detInv;
te[7] = (n12 * n33 * n41 - n13 * n32 * n41 + n13 * n31 * n42 - n11 * n33 * n42 - n12 * n31 * n43 + n11 * n32 * n43) * detInv;
te[8] = t13 * detInv;
te[9] = (n14 * n23 * n41 - n13 * n24 * n41 - n14 * n21 * n43 + n11 * n24 * n43 + n13 * n21 * n44 - n11 * n23 * n44) * detInv;
te[10] = (n12 * n24 * n41 - n14 * n22 * n41 + n14 * n21 * n42 - n11 * n24 * n42 - n12 * n21 * n44 + n11 * n22 * n44) * detInv;
te[11] = (n13 * n22 * n41 - n12 * n23 * n41 - n13 * n21 * n42 + n11 * n23 * n42 + n12 * n21 * n43 - n11 * n22 * n43) * detInv;
te[12] = t14 * detInv;
te[13] = (n13 * n24 * n31 - n14 * n23 * n31 + n14 * n21 * n33 - n11 * n24 * n33 - n13 * n21 * n34 + n11 * n23 * n34) * detInv;
te[14] = (n14 * n22 * n31 - n12 * n24 * n31 - n14 * n21 * n32 + n11 * n24 * n32 + n12 * n21 * n34 - n11 * n22 * n34) * detInv;
te[15] = (n12 * n23 * n31 - n13 * n22 * n31 + n13 * n21 * n32 - n11 * n23 * n32 - n12 * n21 * n33 + n11 * n22 * n33) * detInv;
return this;
}
/**
* Clone and invert the {@link Mat4}
* @returns - inverted cloned {@link Mat4}
*/
getInverse() {
return this.clone().invert();
}
/**
* Transpose this {@link Mat4}
* @returns - the transposed {@link Mat4}
*/
transpose() {
let t;
const te = this.elements;
t = te[1];
te[1] = te[4];
te[4] = t;
t = te[2];
te[2] = te[8];
te[8] = t;
t = te[3];
te[3] = te[12];
te[12] = t;
t = te[6];
te[6] = te[9];
te[9] = t;
t = te[7];
te[7] = te[13];
te[13] = t;
t = te[11];
te[11] = te[14];
te[14] = t;
return this;
}
/**
* Translate a {@link Mat4}.
* @param vector - translation {@link Vec3} to use.
* @returns - translated {@link Mat4}.
*/
translate(vector = new Vec3()) {
const a = this.elements;
a[12] = a[0] * vector.x + a[4] * vector.y + a[8] * vector.z + a[12];
a[13] = a[1] * vector.x + a[5] * vector.y + a[9] * vector.z + a[13];
a[14] = a[2] * vector.x + a[6] * vector.y + a[10] * vector.z + a[14];
a[15] = a[3] * vector.x + a[7] * vector.y + a[11] * vector.z + a[15];
return this;
}
/**
* Get the translation {@link Vec3} component of a {@link Mat4}
* @param position - {@link Vec3} to set
* @returns - translation {@link Vec3} component of this {@link Mat4}
*/
getTranslation(position = new Vec3()) {
return position.set(this.elements[12], this.elements[13], this.elements[14]);
}
/**
* Scale a {@link Mat4}
* @param vector - scale {@link Vec3 | vector} to use
* @returns - scaled {@link Mat4}
*/
scale(vector = new Vec3()) {
const a = this.elements;
a[0] *= vector.x;
a[1] *= vector.x;
a[2] *= vector.x;
a[3] *= vector.x;
a[4] *= vector.y;
a[5] *= vector.y;
a[6] *= vector.y;
a[7] *= vector.y;
a[8] *= vector.z;
a[9] *= vector.z;
a[10] *= vector.z;
a[11] *= vector.z;
return this;
}
/**
* Rotate a {@link Mat4} from a {@link Quat | quaternion}
* @param quaternion - {@link Quat | quaternion} to use
* @returns - rotated {@link Mat4}
*/
rotateFromQuaternion(quaternion = new Quat()) {
const te = this.elements;
const x = quaternion.elements[0], y = quaternion.elements[1], z = quaternion.elements[2], w = quaternion.elements[3];
const x2 = x + x, y2 = y + y, z2 = z + z;
const xx = x * x2, xy = x * y2, xz = x * z2;
const yy = y * y2, yz = y * z2, zz = z * z2;
const wx = w * x2, wy = w * y2, wz = w * z2;
te[0] = 1 - (yy + zz);
te[4] = xy - wz;
te[8] = xz + wy;
te[1] = xy + wz;
te[5] = 1 - (xx + zz);
te[9] = yz - wx;
te[2] = xz - wy;
te[6] = yz + wx;
te[10] = 1 - (xx + yy);
return this;
}
/**
* Get the maximum scale of the {@link Mat4} on all axes
* @returns - maximum scale of the {@link Mat4}
*/
getMaxScaleOnAxis() {
const te = this.elements;
const scaleXSq = te[0] * te[0] + te[1] * te[1] + te[2] * te[2];
const scaleYSq = te[4] * te[4] + te[5] * te[5] + te[6] * te[6];
const scaleZSq = te[8] * te[8] + te[9] * te[9] + te[10] * te[10];
return Math.sqrt(Math.max(scaleXSq, scaleYSq, scaleZSq));
}
/**
* Creates a {@link Mat4} from a {@link Quat | quaternion} rotation, {@link Vec3 | vector} translation and {@link Vec3 | vector} scale
* Equivalent for applying translation, rotation and scale matrices but much faster
* Source code from: http://glmatrix.net/docs/mat4.js.html
*
* @param translation - translation {@link Vec3 | vector} to use
* @param quaternion - {@link Quat | quaternion} to use
* @param scale - translation {@link Vec3 | vector} to use
* @returns - transformed {@link Mat4}
*/
compose(translation = new Vec3(), quaternion = new Quat(), scale = new Vec3(1)) {
const matrix = this.elements;
const x = quaternion.elements[0], y = quaternion.elements[1], z = quaternion.elements[2], w = quaternion.elements[3];
const x2 = x + x;
const y2 = y + y;
const z2 = z + z;
const xx = x * x2;
const xy = x * y2;
const xz = x * z2;
const yy = y * y2;
const yz = y * z2;
const zz = z * z2;
const wx = w * x2;
const wy = w * y2;
const wz = w * z2;
const sx = scale.x;
const sy = scale.y;
const sz = scale.z;
matrix[0] = (1 - (yy + zz)) * sx;
matrix[1] = (xy + wz) * sx;
matrix[2] = (xz - wy) * sx;
matrix[3] = 0;
matrix[4] = (xy - wz) * sy;
matrix[5] = (1 - (xx + zz)) * sy;
matrix[6] = (yz + wx) * sy;
matrix[7] = 0;
matrix[8] = (xz + wy) * sz;
matrix[9] = (yz - wx) * sz;
matrix[10] = (1 - (xx + yy)) * sz;
matrix[11] = 0;
matrix[12] = translation.x;
matrix[13] = translation.y;
matrix[14] = translation.z;
matrix[15] = 1;
return this;
}
/**
* Creates a {@link Mat4} from a {@link Quat | quaternion} rotation, {@link Vec3 | vector} translation and {@link Vec3 | vector} scale, rotating and scaling around the given {@link Vec3 | origin vector}
* Equivalent for applying translation, rotation and scale matrices but much faster
* Source code from: http://glmatrix.net/docs/mat4.js.html
*
* @param translation - translation {@link Vec3 | vector} to use
* @param quaternion - {@link Quat | quaternion} to use
* @param scale - translation {@link Vec3 | vector} to use
* @param origin - origin {@link Vec3 | vector} around which to scale and rotate
* @returns - transformed {@link Mat4}
*/
composeFromOrigin(translation = new Vec3(), quaternion = new Quat(), scale = new Vec3(1), origin = new Vec3()) {
const matrix = this.elements;
const x = quaternion.elements[0], y = quaternion.elements[1], z = quaternion.elements[2], w = quaternion.elements[3];
const x2 = x + x;
const y2 = y + y;
const z2 = z + z;
const xx = x * x2;
const xy = x * y2;
const xz = x * z2;
const yy = y * y2;
const yz = y * z2;
const zz = z * z2;
const wx = w * x2;
const wy = w * y2;
const wz = w * z2;
const sx = scale.x;
const sy = scale.y;
const sz = scale.z;
const ox = origin.x;
const oy = origin.y;
const oz = origin.z;
const out0 = (1 - (yy + zz)) * sx;
const out1 = (xy + wz) * sx;
const out2 = (xz - wy) * sx;
const out4 = (xy - wz) * sy;
const out5 = (1 - (xx + zz)) * sy;
const out6 = (yz + wx) * sy;
const out8 = (xz + wy) * sz;
const out9 = (yz - wx) * sz;
const out10 = (1 - (xx + yy)) * sz;
matrix[0] = out0;
matrix[1] = out1;
matrix[2] = out2;
matrix[3] = 0;
matrix[4] = out4;
matrix[5] = out5;
matrix[6] = out6;
matrix[7] = 0;
matrix[8] = out8;
matrix[9] = out9;
matrix[10] = out10;
matrix[11] = 0;
matrix[12] = translation.x + ox - (out0 * ox + out4 * oy + out8 * oz);
matrix[13] = translation.y + oy - (out1 * ox + out5 * oy + out9 * oz);
matrix[14] = translation.z + oz - (out2 * ox + out6 * oy + out10 * oz);
matrix[15] = 1;
return this;
}
/**
* Set this {@link Mat4} as a rotation matrix based on an eye, target and up {@link Vec3 | vectors}
* @param eye - {@link Vec3 | position vector} of the object that should be rotated
* @param target - {@link Vec3 | target vector} to look at
* @param up - up {@link Vec3 | vector}
* @returns - rotated {@link Mat4}
*/
lookAt(eye = new Vec3(), target = new Vec3(), up = new Vec3(0, 1, 0)) {
const te = this.elements;
zAxis.copy(eye).sub(target);
if (zAxis.lengthSq() === 0) {
zAxis.z = 1;
}
zAxis.normalize();
xAxis.crossVectors(up, zAxis);
if (xAxis.lengthSq() === 0) {
if (Math.abs(up.z) === 1) {
zAxis.x += 1e-4;
} else {
zAxis.z += 1e-4;
}
zAxis.normalize();
xAxis.crossVectors(up, zAxis);
}
xAxis.normalize();
yAxis.crossVectors(zAxis, xAxis);
te[0] = xAxis.x;
te[1] = xAxis.y;
te[2] = xAxis.z;
te[3] = 0;
te[4] = yAxis.x;
te[5] = yAxis.y;
te[6] = yAxis.z;
te[7] = 0;
te[8] = zAxis.x;
te[9] = zAxis.y;
te[10] = zAxis.z;
te[11] = 0;
te[12] = eye.x;
te[13] = eye.y;
te[14] = eye.z;
te[15] = 1;
return this;
}
/**
* Compute a view {@link Mat4} matrix.
*
* This is a view matrix which transforms all other objects
* to be in the space of the view defined by the parameters.
*
* Equivalent to `matrix.lookAt(eye, target, up).invert()` but faster.
*
* @param eye - the position of the object.
* @param target - the position meant to be aimed at.
* @param up - a vector pointing up.
* @returns - the view {@link Mat4} matrix.
*/
makeView(eye = new Vec3(), target = new Vec3(), up = new Vec3(0, 1, 0)) {
const te = this.elements;
zAxis.copy(eye).sub(target).normalize();
xAxis.crossVectors(up, zAxis).normalize();
yAxis.crossVectors(zAxis, xAxis).normalize();
te[0] = xAxis.x;
te[1] = yAxis.x;
te[2] = zAxis.x;
te[3] = 0;
te[4] = xAxis.y;
te[5] = yAxis.y;
te[6] = zAxis.y;
te[7] = 0;
te[8] = xAxis.z;
te[9] = yAxis.z;
te[10] = zAxis.z;
te[11] = 0;
te[12] = -(xAxis.x * eye.x + xAxis.y * eye.y + xAxis.z * eye.z);
te[13] = -(yAxis.x * eye.x + yAxis.y * eye.y + yAxis.z * eye.z);
te[14] = -(zAxis.x * eye.x + zAxis.y * eye.y + zAxis.z * eye.z);
te[15] = 1;
return this;
}
/**
* Create an orthographic {@link Mat4} matrix based on the parameters. Transforms from
* * the given the left, right, bottom, and top dimensions to -1 +1 in x, and y
* * and 0 to +1 in z.
*
* @param parameters - {@link OrthographicCameraBaseOptions | parameters} used to create the camera orthographic matrix.
* @returns - the camera orthographic {@link Mat4} matrix.
*/
makeOrthographic({
left = -1,
right = 1,
bottom = -1,
top = 1,
near = 0.1,
far = 50
}) {
const te = this.elements;
te[0] = 2 / (right - left);
te[1] = 0;
te[2] = 0;
te[3] = 0;
te[4] = 0;
te[5] = 2 / (top - bottom);
te[6] = 0;
te[7] = 0;
te[8] = 0;
te[9] = 0;
te[10] = 1 / (near - far);
te[11] = 0;
te[12] = (right + left) / (left - right);
te[13] = (top + bottom) / (bottom - top);
te[14] = near / (near - far);
te[15] = 1;
return this;
}
/**
* Create a perspective {@link Mat4} matrix based on the parameters.
*
* Note, The matrix generated sends the viewing frustum to the unit box.
* We assume a unit box extending from -1 to 1 in the x and y dimensions and
* from -1 to 1 in the z dimension, as three.js and more generally WebGL handles it.
*
* @param parameters - {@link PerspectiveProjectionParams | parameters} used to create the camera perspective matrix.
* @returns - the camera perspective {@link Mat4} matrix.
*/
makePerspective({ fov = 90, aspect = 1, near = 0.1, far = 150 }) {
const top = near * Math.tan(Math.PI / 180 * 0.5 * fov);
const height = 2 * top;
const width = aspect * height;
const left = -0.5 * width;
const right = left + width;
const bottom = top - height;
const x = 2 * near / (right - left);
const y = 2 * near / (top - bottom);
const a = (right + left) / (right - left);
const b = (top + bottom) / (top - bottom);
const c = -far / (far - near);
const d = -far * near / (far - near);
this.set(
x,
0,
0,
0,
0,
y,
0,
0,
a,
b,
c,
-1,
0,
0,
d,
0
);
return this;
}
}
let objectIndex = 0;
const tempMatrix = new Mat4();
class Object3D {
/**
* Object3D constructor
*/
constructor() {
this._parent = null;
this.children = [];
this.matricesNeedUpdate = false;
this.up = new Vec3(0, 1, 0);
this.actualPosition = new Vec3();
Object.defineProperty(this, "object3DIndex", { value: objectIndex++ });
this.setMatrices();
this.setTransforms();
}
/* PARENT */
/**
* Get the parent of this {@link Object3D} if any
*/
get parent() {
return this._parent;
}
/**
* Set the parent of this {@link Object3D}
* @param value - new parent to set, could be an {@link Object3D} or null
*/
set parent(value) {
if (this._parent && value && this._parent.object3DIndex === value.object3DIndex) {
return;
}
if (this._parent) {
this._parent.children = this._parent.children.filter((child) => child.object3DIndex !== this.object3DIndex);
}
if (value) {
this.shouldUpdateWorldMatrix();
}
this._parent = value;
this._parent?.children.push(this);
}
/* TRANSFORMS */
/**
* Set our transforms properties and {@link Vec3#onChange | vectors onChange} callbacks
*/
setTransforms() {
this.transforms = {
origin: {
model: new Vec3()
},
quaternion: new Quat(),
rotation: new Vec3(),
position: {
world: new Vec3()
},
scale: new Vec3(1)
};
this.rotation.onChange(() => this.applyRotation());
this.position.onChange(() => this.applyPosition());
this.scale.onChange(() => this.applyScale());
this.transformOrigin.onChange(() => this.applyTransformOrigin());
}
/**
* Get our rotation {@link Vec3 | vector}
*/
get rotation() {
return this.transforms.rotation;
}
/**
* Set our rotation {@link Vec3 | vector}
* @param value - new rotation {@link Vec3 | vector}
*/
set rotation(value) {
this.transforms.rotation = value;
this.applyRotation();
}
/**
* Get our {@link Quat | quaternion}
*/
get quaternion() {
return this.transforms.quaternion;
}
/**
* Set our {@link Quat | quaternion}
* @param value - new {@link Qu