Hello there,
I’m trying to build a graph visualization tool (i.e. like the git network view in github). I would like to make a small discussion on the performance issues I have found and a possible way to solve them. I’m still using 5.0.0 on a Desktop PC.
Suppose I have a (big) list of nodes , connected via line-strips. Only a small parts of the nodes and lines will be visible at once.
I have tryed to add an Item for each commit , using a rounded rectangle. The performance of QML 2 is much better thanks to the scene graph, as the invisible items get culled.
The bottleneck here was the item creation. I was creating a QmlComponent , and then creating all the items with createObject() and setParentItem(). Even for a relatively small number of items , I was getting a big load time.
Now I ask : is this expected? This wastes the scene graph benefit , because while the rendering is fast, the scene creation is still too slow.
Anyway, I ended up by dynamically creating/destrying the items in the visible area (as suggested by the performance guidelines), and I get a very good performance, and low memory usage.
Now the problem, which I’m stuck on: connecting lines
as first naive attempt (just to get a starting point), I created a Canvas for each connection line. It kinda works, but it takes a lot of memory, because the Canvas allocates a buffer large as the item bounding box.
Before continuing, I would like to ask an opinion, between these three options, keeping in mind that I could have to draw around 100/200 connections per frame, and that the position of the lines is likely to change at every frame…
The canvas is contained in a flickable element, and I update the visible items while scrolling (each 100ms). So, the lines position will change very often.
- Use a single canvas where to draw all the visible connections, keeping track of the scrolling position.I wonder if it is fast enough to do in javascript.
- Use the same approach with a QSGPaintedItem. The drawback is that, like the canvas, I have to use a shared item for all the lines, but I could use a QPainter in C++ and gain some performance
- Use directly an QSGItem, but then I have to handle all the buffers and materials by myself, I don’t know if it is worth. Even with this approach, I guess I would have to use a “shared” node, I don’t think that creating many small geometry nodes is good from a performance point of view, but I don’t know so I’m here asking… Also, I will need to reimplement some polygon tessellation code to get a decent visualization. The good of this approach could be that it doesn’t use a backing buffer, so less memory will be used.
Also, I wanted to add some animations and transition to each connection line, but by sharing an item for visualization purposes I probably loose the chance to do these.
What would you suggest?
Thank you for any hint!
Qb
↧