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
})
drawBunny1 = regl({
frag: `
#extension GL_OES_standard_derivatives : enable
precision mediump float;
${reglContext}
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
})
drawBunny = regl({
frag: `
#extension GL_OES_standard_derivatives : enable
precision mediump float;
${reglContext}
varying vec3 vnormal, vbc;
void main () {
// gl_FragColor = vec4(vnormal * 0.75 + 0.25, 1.0);
// gl_FragColor = vec4(vbc, 1.0);
// The alpha = 0.0 refers it is on the wireframes.
float alpha = wireframes(vbc);
gl_FragColor = vec4(mix(vec3(1.0), vnormal * 0.75 + 0.25, alpha), 0.5);
// gl_FragColor = vec4(mix(vec3(1.0), vbc, alpha), 1.0);
}`,
vert: `
precision mediump float;
uniform mat4 projection, view;
attribute vec3 position, normal, bc;
varying vec3 vnormal, vbc;
void main () {
vnormal = normal;
vbc = bc;
gl_Position = projection * view * vec4(position, 1.0);
}`,
attributes: {
position: obj.positions,
bc: obj.barycentricCoord,
normal: normals(obj.cells, obj.positions)
},
elements: obj.cells,
blend: {
enable: true,
func: {
srcRGB: "src alpha",
srcAlpha: 1,
dstRGB: "one minus src alpha",
dstAlpha: 1
},
equation: {
rgb: "add",
alpha: "add"
},
color: [0, 0, 0, 0]
},
cull: {
enable: true,
face: "back"
},
depth: {
enable: true,
mask: false,
func: "less",
range: [0, 1]
}
})
reglContext = `
float f_thickness = 0.001;
float wireframes(vec3 v_barycentric) {
// see to which edge this pixel is the closest
float f_closest_edge = min(v_barycentric.x, min(v_barycentric.y, v_barycentric.z));
// calculate derivative (divide f_thickness by this to have the line width constant in screen-space)
float f_width = fwidth(f_closest_edge);
// calculate alpha
float f_alpha = smoothstep(f_thickness, f_thickness + f_width, f_closest_edge);
return f_alpha;
}
`
obj = {
// return bunny;
return largeObj;
}
largeObj = {
const { cells, positions } = bunny,
cell = [],
position = [],
barycentricCoord = [];
let _cell;
cells.map((xyz, j) => {
_cell = [j * 3 + 0, j * 3 + 1, j * 3 + 2];
cell.push(_cell);
barycentricCoord.push([1, 0, 0]);
barycentricCoord.push([0, 1, 0]);
barycentricCoord.push([0, 0, 1]);
position.push(positions[xyz[0]]);
position.push(positions[xyz[1]]);
position.push(positions[xyz[2]]);
});
return { cells: cell, positions: position, barycentricCoord };
}
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,
extensions: ["oes_standard_derivatives"]
})
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.
