Public
Edited
Aug 25, 2023
2 forks
Importers
17 stars
Hello, regl!regl-canvasObservable Plot + reglInstanced WebGL CirclesRegl Color Scale SelectorContour Plots with regl Observable PlotSelecting the Right Opacity for 2D Point CloudsSDF Points with reglAdaptive Contouring in Fragment ShadersStrange Attractors on the GPU, Part 1: ImplementationFake Transparency for 3D SurfacesBicubic Texture Interpolation using Linear Filtering
Drawing Instanced Lines with regl
Also listed in…
WebGL
createDrawLines = require("https://unpkg.com/regl-gpu-lines@2.4.1")
renderBasicExample = {
regl1.poll();
drawBasicLines(basicLineData);
}
basicLineData = {
const p = [[-0.6, -0.2], [-0.5, -0.1], [-0.4, -0.8], [-0.3, 0.6], [0.5, 0.6]];
const lineData = {
vertexCount: p.length,
vertexAttributes: { point: regl1.buffer(p) },
endpointCount: 2,
endpointAttributes: {
point: regl1.buffer([p.slice(0, 3), p.slice(-3).reverse()])
}
};
invalidation.then(() => {
lineData.vertexAttributes.point.destroy();
lineData.endpointAttributes.point.destroy();
});
return lineData;
}
drawBasicLines = createDrawLines(regl1, {
vert: `
precision highp float;
#pragma lines: attribute vec2 point;
#pragma lines: position = projectPoint(point);
#pragma lines: width = getWidth();
uniform float width;
vec4 projectPoint(vec2 point) { return vec4(point, 0, 1);}
float getWidth () { return width; }`,
frag: `
precision lowp float;
void main () {
gl_FragColor = vec4(vec3(0.5), 1);
}`,
uniforms: {
width: (ctx, props) => ctx.pixelRatio * 25
}
})
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.
