Public
Edited
Aug 15, 2023
3 forks
Insert cell
Insert cell
Insert cell
gl = {
const myCanvas = DOM.canvas(800, 600);

const gl = myCanvas.getContext("webgl2");

//gl.enable(gl.DEPTH_TEST);
//gl.clearColor(0.2, 0.2, 0.2, 1);
//gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
return gl;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
modelExtents = computeModelExtent(modelObject)
Insert cell
Insert cell
modelMatrix = {
const translationMatrix = m4.translation(modelExtents.center.map(x=>-1*x));
const scaleMatrix = m4.scaling(Array(3).fill(scale/modelExtents.dia));

const zRotationMatrix = m4.rotationZ(toRadian(rotationParameters.zAngle));
const yRotationMatrix = m4.rotationY(toRadian(rotationParameters.yAngle));
const xRotationMatrix = m4.rotationX(toRadian(rotationParameters.xAngle));

const rotationMatrixYX = m4.multiply(yRotationMatrix, xRotationMatrix);
const rotationMatrix = m4.multiply(zRotationMatrix, rotationMatrixYX);

let modelMat = m4.multiply(scaleMatrix, translationMatrix);
modelMat = m4.multiply(rotationMatrix, modelMat);

return modelMat;
}

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
errorBlock = html`<textarea style="height : 20px; width : ${width}px; font-size: 0.8em; display: block"></textarea>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
toRadian = glMatrix.glMatrix.toRadian
Insert cell
Insert cell
twgl = require("twgl.js")
Insert cell
m4 = twgl.m4
Insert cell
v3 = twgl.v3
Insert cell
require.resolve("twgl.js")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more