jojoba

how to render 30 animating lines with 2500 points each at 60fps

Recommended Posts

Greetings!

I love pixijs! Amazing stuff!

I'm currently attempting to plot about 30 lines, each containing about 2500 points scrolling right to left (where once a point goes off the screen to the left, a new point is appended on the right). Think a whole bunch of streaming time series charts.

I've been able to plot them out, creating a top level PIXI.Container to contain all the lines, and then for each line, creating a PIXI.Graphics object that I addChild to the top level PIXI.Container, setting the line style and then in the render loop going thru each line's 2500 points and doing the moveto lineto fun. It works! However my framerate peaks at around 40fps, which is still nice, but hoping for a 60fps. Note: I do the line moveto and lineto for each line before I call the render on the top level PIXI.Container, so hopefully that's forcing all the draw work to happen in one frame.

Does anyone happen to know if there any optimizations that I could leverage to speed this up?

Thank you kindly for any help you can offer.

Cheers!

Share this post


Link to post
Share on other sites
Thanks Ivan for responding so fast!

I tried var graphics = new PIXI.Graphics(true) and it bumped up my framerate to 45fps, which is better!

Regarding your second comment, about adding points in chunks, I'm not sure I understand entirely. I am updating my data at 60Hz (remove the first element, and append a new element) and then in a requestanimationframe, am using a PIXI.Graphics to lineto and moveto the line for each point in my data for each line, and then call render. Where would the chunking occur exactly?
 
Thanks for all of your help! I very much appreciate it.

Share this post


Link to post
Share on other sites

One Graphics element is drawn with one drawcall. If you use many "moveTo-lineTo" inside, it will all go into one call (batched). However, each time you change Graphics, it re-uploads buffers into GPU, and instead of just asking "hey, please draw that thing I sent you some time ago" it uploads new data, which affects performance.

You have to maintain multiple Graphics elements, for example, 1 for every 100 points. 

Instead of clearing the graphics and adding all data again, you should rarely create new Graphics and dump 100 new points there. Also you can use that fact that changing transform (position,scale) of graphics is very cheap. You can just generate some points ahead every X frames, and move all container (or every graphics element) to the left every frame.

List of operations:

1. Use one graphics per one segment of line - most expensive operation here

2. Use graphics per thousands of points, clear and fill it again every frame - just expensive

3. Moving existing graphics element without actually changing contents - cheap.

4. Adding graphics with 100 points one time in several frames - cheap.

Note, that we are talking about "expensive" relatively your case - several lines each of thousands of points. There are much more expensive operations in PIXI and in webgl in general.

Share this post


Link to post
Share on other sites
On 9/13/2017 at 12:38 PM, ivan.popelyshev said:

Use graphics per thousands of points, clear and fill it again every frame - just expensive

This is surprising to me! I would have thought that a graphics item doesn't really care much about what's in it, more like the size of it. Interesting

Share this post


Link to post
Share on other sites
17 minutes ago, dmko said:

This is surprising to me! I would have thought that a graphics item doesn't really care much about what's in it, more like the size of it. Interesting

If you dont refill it every frame its much cheaper. There's penalty for refill, but yeah, everything also depends on size.

Share this post


Link to post
Share on other sites

When you have time, can you explain a bit more about the reason behind that? Is it on the JS side or WebGL side?

I'm only starting very very slowly to get into webgl stuff... really don't know what I'm talking about yet (waiting for first book to arrive!) - but I'd think that filling a buffer with different data is relatively cheap?

Share this post


Link to post
Share on other sites

So it's more on the js side? e.g. the WebGL side sees an array of values and uploads it to the buffer when there's a change, regardless of how much of it changed, but the JS side populates those values through lots of processing?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.