The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Apr 27, 2022
89 forks
10 stars
canvas = DOM.canvas(width, 500)
// Continuously updates
regl.frame(() => {
camera(function () {
regl.clear({ color: [0, 0.1, 0.26, 1] });
drawBunny();
});
})
camera = reglCamera(regl, {
element: regl._gl.canvas,
center: [0, 3.5, 0],
theta: (3.0 * Math.PI) / 4.0,
phi: Math.PI / 6.0,
distance: 20.0,
damping: 0,
noScroll: true,
renderOnDirty: true
})
drawBunny = regl({
frag: `
precision mediump float;
varying vec3 vnormal;
void main () {
gl_FragColor = vec4(vnormal * 0.75 + 0.25, 1.0);
}`,
vert: `
precision mediump float;
uniform mat4 projection, view;
attribute vec3 position, normal;
varying vec3 vnormal;
void main () {
vnormal = normal;
gl_Position = projection * view * vec4(position, 1.0);
}`,
attributes: {
position: bunny.positions,
normal: normals(bunny.cells, bunny.positions)
},
elements: bunny.cells
})
bunny = (await import("https://cdn.skypack.dev/bunny@1.0.1")).default
normals = (await import("https://cdn.skypack.dev/angle-normals@1.0.0")).default
regl = (await import("https://cdn.skypack.dev/regl@2")).default({canvas})
reglCamera = (await import("https://cdn.skypack.dev/regl-camera@2.1.1")).default
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.
