4 ms·
Copying a twitter thread[1] here for more explanation I built CandyGraph a few months ago to scratch an itch and never really got around to talking about it, b
by wwwtyro 5y ago
Copying a twitter thread[1] here for more explanation
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 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/tutorial/dist/
https://wwwtyro.github.io/candygraph/examples/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.
[1]https://twitter.com/wwwtyro/status/1396500134716973063 https://twitter.com/wwwtyro/status/1396500134716973063
- c-smile 5y ago> It renders everything on the GPU, even axes and text. Yeah, DOM needs immediate mode graphics. Like the one I've added to Sciter, this for example: element.paintForeground = function(gfx) { ... } allows to custom draw a) on top of default element's content (note: any element, not just <canvas>), b) with the paint frequency (60 FPS) and c) on GPU directly - gfx there is the same graphics that HTML content uses. 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...
- najtdale 5y agoWhich itch was not solved by Echarts?
- mtsr 5y agoHi Rye, 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 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.