Public
Edited
May 1, 2023
lightPos = [lightParms.x, lightParms.y, lightParms.z, 1.0];
viewMatrix = {
return m4.inverse(m4.lookAt(eye, extentsMiddle.center, [0, 1, 0]));
}
eye = {
const gazeDirection = m4.transformDirection(
m4.multiply(m4.rotationY(deg2rad(data.cameraSettings.cameraY)), m4.rotationX(deg2rad(data.cameraSettings.cameraX))),
[0, 0, 1]
);
return v3.add(extentsMiddle.center, v3.mulScalar(gazeDirection, extentsMiddle.dia));}
depthTexture = createDepthTexture()
depthFrameBuffer = createDepthBuffer(depthTexture)
errorBlock = html`<textarea style="height : 20px; width : ${width}px; font-size: 0.8em; display: block"></textarea>`
errorBlock2 = html`<textarea style="height : 20px; width : ${width}px; font-size: 0.8em; display: block"></textarea>`
function getModelMatrix(offset=[0,0,0], angles=[0,0,0], translation=[0,0,0], scale=[1,1,1]) {
const offsetMatrix = m4.translation(offset);
const xRotation = m4.rotationX(deg2rad(angles[0]));
const yRotation = m4.rotationY(deg2rad(angles[1]));
const zRotation = m4.rotationZ(deg2rad(angles[2]));
const rotationMatrix = m4.multiply(
m4.multiply(
zRotation,
yRotation
),
xRotation
);
const scalingMatrix = m4.scaling(scale);
const translationMatrix = m4.translation(translation);
const modelMatrix = m4.multiply(
m4.multiply(
m4.multiply(
scalingMatrix,
translationMatrix
),
rotationMatrix
),
offsetMatrix
);
return modelMatrix;
}
tex = twgl.createTexture(gl, {
src: textureURL,
flipY: true
})
textureImg = FileAttachment("F-16.png").image()
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.
