regl icon indicating copy to clipboard operation
regl copied to clipboard

How Regl customizes the shape of Points?

Open Knell0714 opened this issue 2 years ago • 1 comments

Because of the huge amount of data, I switched from SVG to WebGL. But I need to render Points of different shapes in the same Canvas, how does Regl do it, thanks!

Knell0714 avatar Sep 19 '22 09:09 Knell0714

Hi, @Knell0714! There's not a single answer to your question, and regl (or more generally, webgl) doesn't enforce any choices here. Point primitives work fine up to the maximum permitted size, but beyond that you might need to use two triangles to make a quad (instanced rendering might help here). Points are probably a perfect adequate place to start though. Then for each point, you could either apply a texture directly, or you could use the strategy used in regl-scatter2d and compute an SDF from an SVG or bitmap, see: svg-path-sdf, bitmap-sdf. Then you can just adjust the colors using the SDF value to get the look you want.

I made an example of this strategy here: https://observablehq.com/@rreusser/sdf-points-with-regl

rreusser avatar Sep 19 '22 15:09 rreusser