Jump to content

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!

Link to post
Share on other sites
  • jojoba changed the title to how to render 30 animating lines with 2500 points each at 60fps
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.
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.

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

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.

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?

Link to post
Share on other sites
  • 1 year later...

In three.js it's possible to call

.setDrawRange(start, end)

on a BufferGeometry, so we can maintain 5000 points on the gpu (for example), and then draw a subset from those, which is very efficient for growing drawings (the trail of a pencil, a plant growing, etc). Do I understand correctly that this is not possible with pixi.js? Thanks!

Link to post
Share on other sites
4 hours ago, abe said:

In three.js it's possible to call


.setDrawRange(start, end)

on a BufferGeometry, so we can maintain 5000 points on the gpu (for example), and then draw a subset from those, which is very efficient for growing drawings (the trail of a pencil, a plant growing, etc). Do I understand correctly that this is not possible with pixi.js? Thanks!

Its possible, but it requires complete knowledge on how Graphics work. I just have too many things to take care of in v5 to do that right now :)

If you do that, please publish the snippet, I'll add it to wiki.

Link to post
Share on other sites

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.

Guest
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.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...