Large number of dynamic Graphics Objects animating simultaneously

[dudeGupta]

I'm working on a custom data-visualization for large data sets. I originally have been building it with svg, but I'm hitting a peformance bottle-neck quickly with the number of elements I can render and animate. I need to have thousands of elements rendered, animating periodically for key transitions, and support zoom eventually. Only a fraction of the total elements rendered will ever need to animate with dynamic geometry at any given time. Everything else will animate via fadeIn/fadeOut. So for an estimated medium sized data-set case, if I have ~ 1000 data objects, I need to render ~ 3000 objects, all needing animations, but only about 1000 of those will ever need to dynamically update their geometry at a given time, simultaneously. 

Whenever I see advice for performance, I always see pointers to using textures and sprites. Unfortunately, I don't think I can use textures or sprites here instead, because I'm not just doing simple transforms on the geometries, but changing fundamental parameters of the geometries (ie: one custom path to another). I cannot share my project code unfortunately, but here is a sandbox with n number of randomly placed circles, each of which has its r animating. If you change n to 300 in App.js, things start getting pretty janky... While this is a contrived example, the fundamental requirements are accurate: large number of dynamic geometries animating simultaneously. 

Thanks in advance for any guidance / advice / direction / tutelage.

Note - I am very new to webgl, and it seems very daunting, which is why I'm currently opting to use react-pixi. I'm not opposed to digging into webgl deeper to get what I need, but I have no idea where to start...

[dudeGupta]

I read somewhere that containers can be used to improve performance. I have put circles in sets of 30 into their own containers in this fork of the sandbox above and it does seem a bit less janky at n = 300 actually... Can anything else be done to smoothly increase n without loosing (too much) performance? trying n = 1000 looks pretty awful even with this approach

[ivan.popelyshev]

> I need to have thousands of elements rendered, animating periodically for key transitions, and support zoom eventually
> I'm not opposed to digging into webgl deeper to get what I need, but I have no idea where to start...

Basically, if you know how to do that stuff in opengl / webgl , you can do it in pixi much cleaner. If you dont know .. well.. its the same across all renderers. Without general education in computer graphics its hard to explain.

The task how you described it costs 100k$ . Please be more precise what do you want to implement.
.

Edited March 10, 2021 by ivan.popelyshev

[dudeGupta]

Quote

Basically, if you know how to do that stuff in opengl / webgl , you can do it in pixi much cleaner. If you dont know .. well.. its the same across all renderers. Without general education in computer graphics its hard to explain.

Yeah... I was afraid this would be the answer... I found your comment here where you list a bunch of learning resources. If there isn't some simple pattern I can leverage to improve performance, then I guess there is nothing else for it but to get what I can out of svg / react-pixi for now, spend time learning with the resources you listed for however long it takes in the mean time, and then circle back for optimization when I can...

Quote

Please be more precise what do you want to implement.

Honestly, I thought I was being decently specific when I said "large number of dynamic graphics objects animating simultaneously"... shows how much I know lol. I'll try being more specific, but if I still miss the mark in what information you're looking for, please tell me what you'd like me to elaborate on. 

The primary geometric transformation I'm trying to optimize right now is related to arc segments. If I have 1000 data objects, I'll have 1000 arc segments. I'll also have 1000 text labels and 1000 other custom shapes but these are fairly static and only need to fade in / fade out; and from what I've read so far, that sort of thing should be pretty cheap for webgl. Depending on the object's state (ie: hovered, selected, etc), I may need to have a border on the arc segment transition in / out sometimes. I need to create transitions that allows these arc segments to smoothly rearrange. This rearrangement would entail a combination of different radial distance from the arcs' respective centers, different start / end angles relative to their centers, different arc thicknesses, and different colors. So for example, in stateA a given arc (of 1000 arcs total) may span from 0 - PI with a thickness of 20px and radial distance from its center of 50px. In state B, it could span from PI/3 - PI/2 with a thickness of 10px and radial distance of 70px. This type of transition would be happening for every arc, simultaneously. While this is happening, the text and other custom shape will 1) fade out 2) be deleted 3) recreated statically for new layout (even text has to be recreated because it goes along a path inline with arcs) and 4) faded in.

On top of this, I'll need to eventually implement a zoom feature so the user can zoom in on many of the smaller data objects. The zooming would only happen when the geometries are static though, so I feel like the only concern here is that I may need to re-render depending on zoom level to ensure an appropriate level of detail at different zoom levels... which I also still need to figure out how to do...

Edited March 11, 2021 by dudeGupta

[ivan.popelyshev]

Start with mesh-shaders: https://pixijs.io/examples/#/mesh-and-shaders/triangle.js , decide whether you want a square geometry with arc fill or arc geometry (more vertices). Decide whether you want to animate it on shader: upload only two states, let shader do the time trick. Later you'll be able to add your own anti-aliasing there. Hope you know the math how to draw a circle

> 1000 text labels
BitmapText

> 1000 custom shapes
separate into chunk of Graphics'es . 10-50 graphics objects.

For general knowledge, https://webglfundamentals.org/

Edited March 11, 2021 by ivan.popelyshev