{
regl.clear({color: [0.97,0.97,0.97,1]});
if (predictions)
regl(facemeshRenderable)();
regl(headRenderable)();
return md`***>>> Main Rendering <<<***`
}
facemeshRenderable = {
if (predictions)
return {
primitive: "points",
attributes: {
position: wholeFace.positions,
normal: wholeFace.normals,
},
uniforms: {
modelMatrix: glMatrix.mat4.create(),
viewMatrix: viewMatrix,
projection: perspectiveMatrix,
light: lightMatrix,
texture: texture
},
elements: wholeFace.cells,
count: TRIANGULATION.length,
vert: vertexShader,
frag: fragShader
}
else
return "Predictions not found!"
}
lightMatrix = glMatrix.vec4.transformQuat([],[0,1,0,0], glMatrix.quat.fromEuler([], 0, 0, options.lightAngle))
rotationMatrix = glMatrix.mat4.fromQuat([], glMatrix.quat.fromEuler([], 180, 0, 0))
viewMatrix = {
if (!predictions)
return "Predictions not found!";
const center = objectDims.center;
const distance = options.eyeDistance * objectDims.radius;
const viewDirection = glMatrix.vec3.transformMat4([],[0,0,distance],rotationMatrix);
const eye = [center[0]+viewDirection[0],center[1]+viewDirection[1],center[2]+viewDirection[2]];
return glMatrix.mat4.lookAt([], eye, objectDims.center, glMatrix.vec3.rotateZ([],[0,1,0],[0,0,0],0));
}
perspectiveMatrix = computePerspectiveMatrix(objectDims.radius, options.fov, canvasWidth/canvasHeight)
object_image = {
let copy = JSON.parse(JSON.stringify(originalHeadObj));
if (predictions) {
for (let i = 0; i < 400; i++) {
copy.positions[i] = wholeFace.positions[i];
copy.normals[i] = wholeFace.normals[i];
copy.cells[i] = wholeFace.cells[i];
}
return copy;
}
else {
return copy;
}
}
headDimensions = getScDimensions(object_image)
headRotationMatrix = glMatrix.mat4.fromQuat([], glMatrix.quat.fromEuler([], 180, 0, 0));
headViewMatrix = {
const center = headDimensions.center;
const distance = options.eyeDistance * headDimensions.radius;
const viewDirection = glMatrix.vec3.transformMat4([],[0,0,distance],headRotationMatrix);
const eye = [center[0]+viewDirection[0],center[1]+viewDirection[1],center[2]+viewDirection[2]];
return glMatrix.mat4.lookAt([], eye, headDimensions.center, glMatrix.vec3.rotateZ([],[0,1,0],[0,0,0],0));
}
headPerspectiveMatrix = computePerspectiveMatrix(headDimensions.radius, options.fov, canvasWidth/canvasHeight)
facemesh = require("@tensorflow-models/facemesh@0.0.3")
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.
