Computer Graphics & Visualization @ufrj.br
// The object being shown at the moment
mutable obj = cube
function setObj (mesh) {
mutable obj = mesh;
}
mutable view = mat4.lookAt([],[0,0,5],[0,0,0],[0,1,0])
mutable projection = mat4.perspective ([], 45 * Math.PI/180, 1, 0.01, 100)
mutable model = mat4.identity([])
refresh = {
let triMesh = triangleMesh(obj,displayConfig.flatShading);
let drawFaces = makeTriMeshDraw(triMesh);
let drawEdges = makeMeshEdgeDraw(obj);
let scaleFactor = displayConfig.autoSize ? Math.sqrt(3)/obj.radius : 1;
return function (model,view,projection) {
regl.clear({
color: toWebGLColor(displayConfig.background).concat([1]),
depth: 1
})
let conf = {modelview: mat4.mul([],view,model), projection, scaleFactor};
drawFaces(conf);
if (displayConfig.showEdges) drawEdges(conf)
}
}
demoImg = [FileAttachment("demo1.png"), FileAttachment("demo2.png"), FileAttachment("demo3.png"), FileAttachment("demo4.png"),FileAttachment("demo5.png")]
import {tabbed,paged,combo} from "@esperanc/aggregated-inputs"
import {select,checkbox,button,slider, color} from "@jashkenas/inputs"
createRegl = require('regl@1.4.2/dist/regl.js')
regl = createRegl({gl:canvas.getContext('webgl', {
antialias: true,
preserveDrawingBuffer: true
})})
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.
