Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Pixi.JS + GSAP + ParticleContainer slow

Go to solution Solved by dragoon,

Recommended Posts

Hi all,

I am animating some object that I generated myself in PIXI.JS via GSAP.

However, I notice it is very slow on Raspberry PI and does not even depend on the number objects (in the range 1-50). As soon as I animate even a single object, the FPS rate on Raspberry PI drops to ~30. It also doesn't depend whether I am using ParticleContainer or not.

I feel like I overlooked something, but can't figure it out.

See the Pen OJvRVyJ by rprokofyev (@rprokofyev) on CodePen

Link to comment
Share on other sites

I would guess that a raspberry PI just struggles a bit more? Less computing power?

Maybe someone else can jump in - I'm not really hugely knowledgeable about PI's

Link to comment
Share on other sites

I'm not at all familiar with that, sorry. Are you positive that the device is capable of running above 30fps? For example, iOS runs content in iframes at half the framerate automatically until the user interacts with the screen somehow. So I wonder if something similar is at play. It also may be that Pixi uses WebGL by default on devices that accommodate that, but falls back to a much more CPU-intensive rendering method on non-capable devices. I'm totally guessing here. 🤷‍♂️

Link to comment
Share on other sites

If I don't run any animations my counter shows 60 as usual. I have also tried this code pen: 

See the Pen oLGBXy by osublake (@osublake) on CodePen

with 200 particles it shows 50 FPS. But it doesn't use PIXI... Maybe I should try to ask PIXI community.

Link to comment
Share on other sites

Have you tried other GSAP codepens and other PixiJS codepens?


I tested both the particle example and your cloud example with 6x cpu throttling on chrome and while the particle example starts to dip into the 20 frame area, your animation remains at over 144 FPS the entire time. Try starting with a simpler example using one element and see where that gets you. Also wouldn't hurt to ask the PixiJS community.

  • Like 2
Link to comment
Share on other sites

  • Solution

Removing antialias: true in the PIXI.JS renderer's constructor allowed to get to ~55FPS on Raspberry PI.

So it was unrelated to GSAP in the end.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks for popping back with the solution. Really appreciated! Have a lovely day.

Link to comment
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.