Public
Edited
Dec 8, 2022
Importers
class node {
constructor(joint) {
for (var fld in joint) {
this[fld] = joint[fld];
}
}
setParent(parent) {
if (this.parent) {
this.parent._removeChild(this);
this.parent = null;
}
if (parent) {
parent._addChild(this);
this.parent = parent;
}
}
updateWorldMatrix(parentWorldMatrix) {
// const source = this.source;
// if (source) {
// source.getMatrix(this.localMatrix);
// }
if (parentWorldMatrix) {
// a matrix was passed in so do the math
m4.multiply(parentWorldMatrix, this.localMatrix, this.worldMatrix);
} else {
// no matrix was passed in so just copy local to world
m4.copy(this.localMatrix, this.worldMatrix);
}
// now process all the children
const worldMatrix = this.worldMatrix;
for (const child of this.children) {
child.updateWorldMatrix(worldMatrix);
}
}
traverse(fn) {
fn(this);
for (const child of this.children) {
child.traverse(fn);
}
}
_addChild(child) {
this.children.push(child);
}
_removeChild(child) {
const ndx = this.children.indexOf(child);
this.children.splice(ndx, 1);
}
}
function composeMatrix(T,R,S) {
const scaleMatrix = m4.scaling([ S[0], S[1], S[2] ]);
const rotateXMatrix = m4.rotationX(degToRad(R[0]));
const rotateYMatrix = m4.rotationY(degToRad(R[1]));
const rotateZMatrix = m4.rotationZ(degToRad(R[2]));
const rotationMatrix = m4.multiply(m4.multiply(rotateXMatrix, rotateYMatrix), rotateZMatrix);
const translationMatrix = m4.translation([ T[0], T[1], T[2] ]);
const composedMatrix = m4.multiply(m4.multiply(scaleMatrix, rotationMatrix), translationMatrix);
return composedMatrix;
}
// * creates a matrix from translation, quaternion, scale
// * @param {Number[]} translation [x, y, z] translation
// * @param {Number[]} quaternion [x, y, z, z] quaternion rotation
// * @param {Number[]} scale [x, y, z] scale
// * @param {Matrix4} [dst] optional matrix to store result
// * @return {Matrix4} dst or a new matrix if none provided
function composeMatrixQuat(translation, quaternion, scale, dst) {
dst = dst || Array(16);
dst = dst;
let x = quaternion[0];
let y = quaternion[1];
let z = quaternion[2];
let w = quaternion[3];
const quatMag = Math.sqrt( x * x + y * y + z * z + w * w);
x = quaternion[0] / quatMag;
y = quaternion[1] / quatMag;
z = quaternion[2] / quatMag;
w = quaternion[3] / quatMag;
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[0];
const sy = scale[1];
const sz = scale[2];
dst[0] = (1 - (yy + zz)) * sx;
dst[1] = (xy + wz) * sx;
dst[2] = (xz - wy) * sx;
dst[3] = 0;
dst[4] = (xy - wz) * sy;
dst[5] = (1 - (xx + zz)) * sy;
dst[6] = (yz + wx) * sy;
dst[7] = 0;
dst[ 8] = (xz + wy) * sz;
dst[ 9] = (yz - wx) * sz;
dst[10] = (1 - (xx + yy)) * sz;
dst[11] = 0;
dst[12] = translation[0];
dst[13] = translation[1];
dst[14] = translation[2];
dst[15] = 1;
return dst;
}
parent = new node("parent");
child = new node( "child");
jointArray = [parent, child]
jointMatrixArray = [parent.worldMatrix, child.worldMatrix]
{
m4.rotateX(parent.localMatrix, degToRad(50),parent.localMatrix);
m4.rotateX(child.localMatrix, degToRad(20), child.localMatrix);
}
{
parent.updateWorldMatrix();
m4.copy(parent.worldMatrix, jointMatrixArray[0]);
m4.copy(child.worldMatrix, jointMatrixArray[1]);
return jointMatrixArray
}
testMat = m4.identity()
translate = m4.translation([0, -.000358, -0.000119])
rotateX = m4.rotateX(m4.identity(), degToRad(-270))
twgl = require("twgl.js")
m4 = twgl.m4
function degToRad(deg){
return deg * Math.PI / 180
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
