The avatar for @rreusser
Ricky Reusser
Public
Edited
Feb 6, 2023
1 fork
67 stars
Regl Tools and Tutorials
Hello, regl!regl-canvasObservable Plot + reglInstanced WebGL CirclesDrawing Instanced Lines with reglRegl Color Scale SelectorContour Plots with regl Observable PlotSelecting the Right Opacity for 2D Point CloudsSDF Points with reglAdaptive Contouring in Fragment Shaders
Strange Attractors on the GPU, Part 1: Implementation
Fake Transparency for 3D SurfacesBicubic Texture Interpolation using Linear Filtering
Also listed in…
More or less finished notebooks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
reglLines = require('https://unpkg.com/regl-gpu-lines@2.2.0')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mainDrawLoop = {
initializeState;
camera.taint();
const simulate = ~opts.indexOf('Simulate');
let frame = regl.frame(() => {
try {
if (simulate) {
integrate({
src: state,
dst: tmpStateColumn,
srcColumn: mutable currentColumn,
dt,
t: mutable t
});

mutable t += dt;
mutable currentColumn = (mutable currentColumn + 1) % stepCount;

copyStateColumn({
src: tmpStateColumn,
dst: state,
dstColumn: mutable currentColumn
});
}

camera(({ dirty }) => {
// Only render if we're currently simulating or if the camera is moved
if (!simulate && !dirty) return;
regl.clear({ color: [1, 1, 1, 1], depth: 1 });

drawLines({
...lineData,
src: state,
texOffset: (mutable currentColumn - stepCount + 1) / stepCount
});
});
} catch (e) {
console.error(e);
frame && frame.cancel();
frame = null;
}
});
invalidation.then(() => {
frame && frame.cancel();
frame = null;
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more