Public
Edited
Jan 3, 2023
1 fork
gl = {
const myCanvas = DOM.canvas(width, 480);
const gl = myCanvas.getContext("webgl2");
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.SCISSOR_TEST);
gl.clearColor(.8,.8,1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
return gl;
}
errorBlock = html`<textarea style="height : 20px; width : ${width}px; font-size: 0.8em; display: block"></textarea>`
programInfoDiffuse = {
errorBlock.style.height = "20px";
errorBlock.innerHTML = "Program Shader compilation successful";
return twgl.createProgramInfo(gl, [shadersDiffuse.vs, shadersDiffuse.fs], (message) => {
errorBlock.style.height = "400px";
errorBlock.innerHTML = "Program Shader compilation error\n" + message;
});
}
sphereBufferInfo = twgl.primitives.createCubeBufferInfo(gl, .08)
lookAtPosition = [0,1,0]
eyePosition = [0,0,10]
transformedEyePosition = m4.transformPoint(m4.multiply(m4.rotationY(viewParameters.yAngle*Math.PI/180),m4.rotationX(viewParameters.xAngle*Math.PI/180)), eyePosition)
modelMatrix1 = composeMatrix([0,0,0],[0,0,0],[1,1,1])
uniforms1 = ({
light: [1,1,3,0],
projectionMatrix: m4.perspective(viewParameters.fov * Math.PI/180, gl.canvas.width/gl.canvas.height, 0.1,20),
viewMatrix: m4.inverse( m4.lookAt(transformedEyePosition, lookAtPosition, [0,1,0])),
modelMatrix: jointArray[0].worldMatrix,
eyePosition: eyePosition,
material: [1, 0, 0, 0.5],
})
Joint2
modelMatrix2 = composeMatrix([0,.1,0],[0,0,0],[1,1,1])
uniforms2 = ({
light: [1,1,3,0],
projectionMatrix: m4.perspective(viewParameters.fov * Math.PI/180, gl.canvas.width/gl.canvas.height, 0.1,20),
viewMatrix: m4.inverse( m4.lookAt(transformedEyePosition, lookAtPosition, [0,1,0])),
modelMatrix: jointArray[1].worldMatrix,
eyePosition: eyePosition,
material: [0, 1, 0, 0.5],
})
modelMatrix3 = composeMatrix([0,.2,0],[0,0,0],[1,1,1])
uniforms3 = ({
light: [1,1,3,0],
projectionMatrix: m4.perspective(viewParameters.fov * Math.PI/180, gl.canvas.width/gl.canvas.height, 0.1,20),
viewMatrix: m4.inverse( m4.lookAt(transformedEyePosition, lookAtPosition, [0,1,0])),
modelMatrix: jointArray[2].worldMatrix,
eyePosition: eyePosition,
material: [0, 0, 1, 0.5],
})
modelMatrix4 = composeMatrix([0,.3,0],[0,0,0],[1,1,1])
uniforms4 = ({
light: [1,1,3,0],
projectionMatrix: m4.perspective(viewParameters.fov * Math.PI/180, gl.canvas.width/gl.canvas.height, 0.1,20),
viewMatrix: m4.inverse( m4.lookAt(transformedEyePosition, lookAtPosition, [0,1,0])),
modelMatrix: jointArray[3].worldMatrix,
eyePosition: eyePosition,
material: [1, 1, 1, 0.5],
})
jointArray =
[
({
name: "joint1",
parentId: -1,
localMatrix: jointList[0].localMatrix,
worldMatrix: m4.identity(),
inverseBindMatrix: jointList[0].inverseBindMatrix
}),
({
name: "joint2",
parentId: 0,
localMatrix: jointList[1].localMatrix,
worldMatrix: m4.identity(),
inverseBindMatrix: jointList[1].inverseBindMatrix
}),
({
name: "joint3",
parentId: 1,
localMatrix: jointList[2].localMatrix,
worldMatrix: m4.identity(),
inverseBindMatrix: jointList[2].inverseBindMatrix
}),
({
name: "joint4",
parentId: 2,
localMatrix: jointList[3].localMatrix,
worldMatrix: m4.identity(),
inverseBindMatrix: jointList[3].inverseBindMatrix
})
]
initialTRS = [[0,0,0],[0,0,0,1],[1,1,1]]
{
jointArray[0].localMatrix = composeMatrix([0,0,.25],[30,30,30],[1,1,1]);
updateWorldMatrices;
}
updateWorldMatrices(jointArray, initialTRS)
cube = {
const gltfLoader = new THREE.GLTFLoader();
const blob = await FileAttachment("cubeRig4Joint.glb").blob();
const url = URL.createObjectURL(blob);
// const dracoLoader = new THREE.DRACOLoader();
// dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/")
// gltfLoader.setDRACOLoader( dracoLoader );
const gltf = await new Promise( resolve => gltfLoader.load(url, gltf => resolve(gltf) ));
const cube = gltf;
return cube;
}
cubeSkeleton = cube.scene.children[1].skeleton
cubeInverseBindMatrices = cube.scene.children[1].skeleton.boneInverses
twgl = require("twgl.js")
m4 = twgl.m4;
import {columns} from "@bcardiff/observable-columns"
import {slider, radio} from "@jashkenas/inputs"
import {node, composeMatrix, composeMatrixQuat, degToRad} from "@dboyd/scene-graph-functions"
// THREE = {
// const THREE = window.THREE = await require('three');
// await require('three/examples/js/loaders/GLTFLoader.js').catch(() => {});
// await require('three/examples/js/loaders/DRACOLoader.js').catch(() => {});
// return THREE;
// }
THREE = {
// const THREE = window.THREE = await require('three');
const THREE = window.THREE = await require('three@0.105.1/build/three.min.js');
await require('three@0.105.1/examples/js/controls/OrbitControls.js').catch(() => {});
await require('three@0.105.1/examples/js/loaders/GLTFLoader.js').catch(() => {});
// await require('three/examples/js/controls/OrbitControls.js').catch(() => {});
// await require('three/examples/js/loaders/GLTFLoader.js').catch(() => {});
return THREE;
}
require('three/examples/jsm/loaders/GLTFLoader.js')
function createJoint(skeleton, inverseBindMatrices, i) {
let parent = null;
if(skeleton.bones[i].parent.type == "Bone"){
parent = skeleton.bones[i].parent.name;
}
let currentJoint = ({
index: i,
name: skeleton.bones[i].name,
futureParent: parent,
parent: null,
children: [],
position:
[
cubeSkeleton.bones[i].position.x,
cubeSkeleton.bones[i].position.y,
cubeSkeleton.bones[i].position.z
],
rotation:
[
cubeSkeleton.bones[i].rotation._x,
cubeSkeleton.bones[i].rotation._y,
cubeSkeleton.bones[i].rotation._z
],
rotationQuat:
[
cubeSkeleton.bones[i].quaternion._x,
cubeSkeleton.bones[i].quaternion._y,
cubeSkeleton.bones[i].quaternion._z,
cubeSkeleton.bones[i].quaternion._w
],
scale: [1,1,1],
localMatrix: m4.identity(),
worldMatrix: m4.identity(),
inverseBindMatrix: cubeInverseBindMatrices[i].elements
})
composeMatrixQuat(currentJoint.position, currentJoint.rotationQuat, currentJoint.scale, currentJoint.localMatrix);
return currentJoint;
}
function updateWorldMatrices(jointArray, initialTRS) {
for(let i = 0; i < numBones; i++){
if(jointArray[i].parentId != -1){
m4.multiply(
jointArray[jointArray[i].parentId].worldMatrix,
jointArray[i].localMatrix,
jointArray[i].worldMatrix //dst
)
} else {
m4.copy(jointArray[i].localMatrix, jointArray[i].worldMatrix)
}
}
}
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.
