regl-project / regl

👑 Functional WebGL
MIT License
5.19k stars 320 forks source link

How Regl customizes the shape of Points? #657

Open Knell0714 opened 1 year ago

Knell0714 commented 1 year ago

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!

rreusser commented 1 year ago

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