Jump to content

Improve speed when drawing thousands of graphics elements


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...