WebGL Renderer

[Tyler-Maclachlan]

More of an enhancement than an issue, the problem with canvas rendering is that, once you have more than say 800 - 1000 items being rendered, the canvas becomes super slow.

The solution around this would obviously be to use WebGL instead of the canvas context (if it is available, but usually if you can use canvas you can use WebGL).

I'm not sure if it would be better to depend on a library (like https://two.js.org/) or create one from scratch.

@micahstubbs perhaps we can spend some time on discord to discuss some of this?

[micahstubbs]

WebGL rendering certainly can give us speed.

@Tyler-Maclachlan if you haven't already, I'd encourage you to go through this list of graph vis libraries, and compare the ones with WebGL renderers. I imagine that there are patterns we can emulate and maybe even libraries that visjs-network could directly depend on for fast rendering.

https://github.com/anvaka/graph-drawing-libraries

https://github.com/anvaka/graph-drawing-stats

[micahstubbs]

oh! so d3-community friend @vasturiano has also written some graph visualization libraries with WebGL renderers https://github.com/vasturiano?utf8=%E2%9C%93&tab=repositories&q=WebGL&type=&language=

[Tyler-Maclachlan]

I have looked at a few of these before, but I see https://github.com/anvaka/ngraph has some examples on how to integrate a webGL renderer, so I'll have a look if I can do that.

[vasturiano]

3d-force-graph uses ThreeJS / WebGL for rendering, and is mostly suited for 3D graphs (though it can render to 2D planes if desired).

But, perhaps also of interest is force-graph which uses 2D Canvas but is focused around performance.
Here are examples with ~4k elements and ~75k elements.