I built CandyGraph a few months ago to scratch an itch and never really got around to talking about it, but it's starting to get some use now, so here it is: https://github.com/wwwtyro/candygraph
I wanted a plotting library that was designed to not only plot a zillion points very fast, but also deal with changes to the presentation of that data at interactive framerates. If I zoomed in on the plot, for example, I wanted the axes to update fast enough that I wouldn't have to worry about the hit. If I changed an axis from linear to log, the rendered data would update immediately; I didn't want the CPU to churn through a million data points and ship them to the GPU again before it rerendered.
So CandyGraph was born. It adopts D3's elegant concept of scales, but it implements them on both the CPU and GPU. When data is rendered, the scaling takes place in the vertex shader. Changing a scale wont cause a missed frame.
On top of scales sits coordinate systems, also implemented for the CPU and GPU. These combine multiple scales into a system capable of dealing with 2D points. It has cartesian and polar coordinate systems, currently.
It renders everything on the GPU, even axes and text. No need to overlay your speedy WebGL plot with an SVG or another canvas for your axis rendering, and no need to take a perf hit for doing so. And of course, the data rendering itself is speedy; it's all instanced by default.
Finally, CandyGraph comes with a small but growing collection of optimized primitives and higher-level objects to simplify common plotting tasks.
If this sounds like it might scratch your itch, check out the tutorial and examples: https://wwwtyro.github.io/candygraph/tutorial/dist/ https://wwwtyro.github.io/candygraph/examples/dist/
CandyGraph is built on top of the embarassingly good regl library. CandyGraph is in major version zero, but it's usable (and in use) today.
Yeah, DOM needs immediate mode graphics. Like the one I've added to Sciter, this for example:
element.paintForeground = function(gfx) {
...
}
So you can still use Context2D for GPU drawing without the need for WebGL.
Even you can push vertices on WebGL fast enough there are other problems, text measurement and rendering for example. WebGL simply have no means for drawing texts.
So I've added Graphics.Text - attributed text layout that caches chars-to-glyphs and layout calculations...
Thanks for the great post about instanced line rendering! I implemented it recently and it works beautifully.
As I commented here https://news.ycombinator.com/item?id=27260950, there's a possible performance improvement to be had from moving away from instancing, as that's apparently relatively slow for low numbers of vertices.
Ultimately it would probably feel quite unnatural compared to the native text selection of the browser. And probably would not work very well except in a small subset of browsers.
I think at some point in the future browsers and/or operating systems will ship with machine learning powered systems for recognizing text in bitmaps and for letting users copy recognized text. This is already possible today both with third party non-ML powered OCR software and with third party ML-powered software.
This library uses a prebaked SDF texture.
https://github.com/wwwtyro/candygraph/blob/master/src/assets...
> On top of that, how does that interact with the browser? Can the browser still select the font (size) of the rendered text? Can the user select it for copying?
No.
https://mattdesl.svbtle.com/drawing-lines-is-hard
and then using a fragment shader to antialias them.
That's a great write up. I used this approach: https://wwwtyro.net/2019/11/18/instanced-lines.html
On your Examples page, I would recommend making it more clear that these are live, buttery-smooth WebGL canvases. I thought I was looking at screenshots until I accidentally moused over the Health and Wealth of Nations plot. It would be more convincing to, say, put the scatter plot first, animate the points, and show the framerate. Give me a button to add 10^n points at a time and see how it performs.
Perhaps a few more examples of realtime interaction/animation on large-ish datasets would help show how fast and snappy it can be?
