Improve speed when drawing thousands of graphics elements

[grovesNL 0]

I am working on an interactive data visualization in which thousands of graphic elements have to be updated continuously as the user drags an endpoint connected to each node. When render times are too slow the visualization feels sluggish and breaks interactivity.

 

A simple (non-interactive) example can be found here, which replicates my issue with render times: http://jsfiddle.net/grovesNL/vsso0gtb/

 

A significant amount of time is spent in garbage collection. I've considered using object pools in the Pixi library for WebGLGraphicsData.points and WebGLGraphicsData.indices (ie. stop setting both of these to [] every time WebGLGraphicsData.reset is called). This means buildLine could add points as necessary by tracking the last index. Afterwards the arrays could be trimmed before the render call to remove old data from the end.

 

I am mostly looking for feedback to this approach, and whether it could be implemented more elegantly. I've taken some steps to implementing it already, but it requires modification of most of the graphics drawing methods.

 

I'm also not sure if there are any straightforward methods to realize performance gains here. Perhaps Pixi already has a better, native way to handle this.

 

Eventually I do plan to try allowing the shaders to calculate the lines based on line width instead, which should decrease the amount of time spent in buildLine. However the garbage collection problem will remain, which is why I am targeting that first.

[ivan.popelyshev 1079]

Copy PIXI.Graphics and implement Graphics object that will work better. I can help you with it, may be we'll swap standart pixi graphics to new one Do you prefer skype or google hangouts?

[grovesNL 0]

I'm trying to avoid re-implementing the entire Graphics object, because there are some features that probably necessitate the calculations to be performed outside of the GPU (such as use of earcut for polygon fills). Perhaps we could just begin with a fast Line Segment object (using WebGL shaders) as an extension.

 

I don't use either of those services but you can email/add me on Google Chat at josh (at) joshgroves (dot) com. I'm also on GitHub at this username.

[ivan.popelyshev 1079]

Google chat = hangouts Ok, sent you an invitation

[K.N. 0]

What was the solution for this? Did you guys figure out how to do this? 

[ivan.popelyshev 1079]

yep, "nativeLine" in graphics