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,482 lines • 1.12 MB
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) {
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
//#region src/utils/utils.ts
/**
* Generate a unique universal id
* @returns - unique universal id generated
*/
const generateUUID = () => {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0;
return (c === "x" ? r : r & 3 | 8).toString(16).toUpperCase();
});
};
/**
* Turns a string into a camel case string
* @param string - string to transform
* @returns - camel case string created
*/
const toCamelCase = (string) => {
return string.replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) => idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase()).replace(/\s+/g, "");
};
/**
* Turns a string into a kebab case string
* @param string - string to transform
* @returns - kebab case string created
*/
const toKebabCase = (string) => {
const camelCase = toCamelCase(string);
return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
};
let warningThrown = 0;
/**
* Throw a console warning with the passed arguments
* @param warning - warning to be thrown
*/
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++;
};
/**
* Throw a javascript error with the passed arguments
* @param error - error to be thrown
*/
const throwError = (error) => {
throw new Error(error);
};
//#endregion
//#region src/math/Quat.ts
/**
* Really basic quaternion class used for 3D rotation calculations
* @see https://github.com/mrdoosb/three.js/blob/dev/src/math/Quaternion.js
*/
var Quat = 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 * .5;
const ay = vector.y * .5;
const az = vector.z * .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 = .5 / Math.sqrt(trace + 1);
this.elements[3] = .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] = .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] = .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] = .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;
}
};
//#endregion
//#region src/math/Vec3.ts
/**
* Really basic 3D vector class used for vector calculations.
* @see https://github.com/mrdoob/three.js/blob/dev/src/math/Vector3.js
* @see http://glmatrix.net/docs/vec3.js.html
*/
var Vec3 = 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;
}
};
//#endregion
//#region src/math/Mat4.ts
const xAxis = new Vec3();
const yAxis = new Vec3();
const zAxis = new Vec3();
/**
* Basic 4x4 matrix class used for matrix calculations.
*
* Note that like three.js, the constructor and {@link set} method take arguments in row-major order, while internally they are stored in the {@link elements} array in column-major order.
*
* @see https://github.com/mrdoob/three.js/blob/dev/src/math/Matrix4.js
* @see http://glmatrix.net/docs/mat4.js.html
*/
var Mat4 = class Mat4 {
/**
* 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.
*/
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;
}
/**
* Computes and returns the determinant of this {@link Mat4}.
* Based on the method outlined [here](http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.html).
* @return - The determinant.
*/
determinant() {
const te = this.elements;
const n11 = te[0], n12 = te[4], n13 = te[8], n14 = te[12];
const n21 = te[1], n22 = te[5], n23 = te[9], n24 = te[13];
const n31 = te[2], n32 = te[6], n33 = te[10], n34 = te[14];
const n41 = te[3], n42 = te[7], n43 = te[11], n44 = te[15];
const t11 = n23 * n34 - n24 * n33;
const t12 = n22 * n34 - n24 * n32;
const t13 = n22 * n33 - n23 * n32;
const t21 = n21 * n34 - n24 * n31;
const t22 = n21 * n33 - n23 * n31;
const t23 = n21 * n32 - n22 * n31;
return n11 * (n42 * t11 - n43 * t12 + n44 * t13) - n12 * (n41 * t11 - n43 * t21 + n44 * t22) + n13 * (n41 * t12 - n42 * t21 + n44 * t23) - n14 * (n41 * t13 - n42 * t22 + n43 * t23);
}
/**
* 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 scale {@link Vec3} component of a {@link Mat4}.
* @param scale - {@link Vec3} to set.
* @returns - Scale {@link Vec3} component of this {@link Mat4}.
*/
getScale(scale = new Vec3()) {
const te = this.elements;
let m11 = te[0];
let m12 = te[1];
let m13 = te[2];
let m21 = te[4];
let m22 = te[5];
let m23 = te[6];
let m31 = te[8];
let m32 = te[9];
let m33 = te[10];
scale.set(Math.sqrt(m11 * m11 + m12 * m12 + m13 * m13), Math.sqrt(m21 * m21 + m22 * m22 + m23 * m23), Math.sqrt(m31 * m31 + m32 * m32 + m33 * m33));
return scale;
}
/**
* Get the rotation {@link Quat} component of a {@link Mat4}.
* @param quat - {@link Quat} to set.
* @returns - Rotation {@link Quat} component of this {@link Mat4}.
*/
getRotation(quat = new Quat()) {
const scale = this.getScale();
let is1 = 1 / scale.x;
let is2 = 1 / scale.y;
let is3 = 1 / scale.z;
const te = this.elements;
const qe = quat.elements;
let sm11 = te[0] * is1;
let sm12 = te[1] * is2;
let sm13 = te[2] * is3;
let sm21 = te[4] * is1;
let sm22 = te[5] * is2;
let sm23 = te[6] * is3;
let sm31 = te[8] * is1;
let sm32 = te[9] * is2;
let sm33 = te[10] * is3;
let trace = sm11 + sm22 + sm33;
let S = 0;
if (trace > 0) {
S = Math.sqrt(trace + 1) * 2;
qe[3] = .25 * S;
qe[0] = (sm23 - sm32) / S;
qe[1] = (sm31 - sm13) / S;
qe[2] = (sm12 - sm21) / S;
} else if (sm11 > sm22 && sm11 > sm33) {
S = Math.sqrt(1 + sm11 - sm22 - sm33) * 2;
qe[3] = (sm23 - sm32) / S;
qe[0] = .25 * S;
qe[1] = (sm12 + sm21) / S;
qe[2] = (sm31 + sm13) / S;
} else if (sm22 > sm33) {
S = Math.sqrt(1 + sm22 - sm11 - sm33) * 2;
qe[3] = (sm31 - sm13) / S;
qe[0] = (sm12 + sm21) / S;
qe[1] = .25 * S;
qe[2] = (sm23 + sm32) / S;
} else {
S = Math.sqrt(1 + sm33 - sm11 - sm22) * 2;
qe[3] = (sm12 - sm21) / S;
qe[0] = (sm31 + sm13) / S;
qe[1] = (sm23 + sm32) / S;
qe[2] = .25 * S;
}
return quat;
}
/**
* 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 = .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 = .1, far = 150 }) {
const top = near * Math.tan(Math.PI / 180 * .5 * fov);
const height = 2 * top;
const width = aspect * height;
const left = -.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;
}
};
//#endregion
//#region src/core/objects3D/Object3D.ts
let objectIndex = 0;
const tempMatrix = new Mat4();
/**
* Used to create an object with transformation properties such as position, scale, rotation and transform origin {@link Vec3 | vectors} and a {@link Quat | quaternion} in order to compute the {@link Object3D#modelMatrix | model matrix} and {@link Object3D#worldMatrix | world matrix}.
*
* If an {@link Object3D} does not have any {@link Object3D#parent | parent}, then its {@link Object3D#modelMatrix | model matrix} and {@link Object3D#worldMatrix | world matrix} are the same.
*
* The transformations {@link Vec3 | vectors} are reactive to changes, which mean that updating one of their components will automatically update the {@link Object3D#modelMatrix | model matrix} and {@link Object3D#worldMatrix | world matrix}.
*/
var Object3D = class {
/** Parent {@link Object3D} in the scene graph, used to compute the {@link worldMatrix}. */
#parent;
/** Whether this {@link Object3D} and all its {@link children} should be considered as visible. Default to `true`. */
#visible;
/** Set to `false` if at least one of the {@link Object3D} parent is not visible. */
#parentVisibility;
/**
* 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();
this.#visible = true;
this.#parentVisibility = true;
}
/**
* Get whether this {@link Object3D} is visible (if it is itself visible, and all its parents are visible as well).
*/
get visible() {
return this.#visible && this.#parentVisibility;
}
/**
* Set this {@link Object3D} visible property, and its children `parentVisibility` p