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.