Low fps particles

[Alain]

I would like to know what is affecting that my animation has low frames. When the particle size increases, the fps increase, but when the size of the particles decreases, the fps decrease.
This is the codepen.
https://codepen.io/AlainBarrios/pen/MRXJxg?editors=0010

[ivan.popelyshev]

maybe something wrong with buffers. Last time I patched it and added "autoResize" mode, some people complained about new bugs and I fixed them. However there might still be something wrong.

https://github.com/pixijs/pixi.js/tree/dev/packages/particles/src

Please describe it better, report your system , browser and other stuff and put it to https://github.com/pixijs/pixi.js/issues , because it seems like real bug.

[bubamara]

Looks like your update() method could be optimized. Replacing painfully slow Math.hypot with :

const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

speeds up things dramatically

[Alain]

On 4/21/2019 at 5:13 AM, bubamara said:

Looks like your update() method could be optimized. Replacing painfully slow Math.hypot with :

const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

speeds up things dramatically 

I changed the method, but the problem still persists.
https://codepen.io/AlainBarrios/pen/MRXJxg

[bubamara]

Hmm, for me it's a lot faster on Chrome (both Mac & Win), not so visible speed gain on Safari/Mac. On the other hand you're rendering ±100k sprites...

edit: added screens

[Alain]

I'm using Firefox Dev Edition with Windows 10 and this is the result

[bubamara]

Now I have noticed you have these two in ticker loop :

       this.app.renderer.resize(window.innerWidth, window.innerHeight);
      
       this.mouse = this.app.renderer.plugins.interaction.mouse.global;

Move them out of loop and resize the app on event to keep animate() as simple as possible

animate() {
    this.app.ticker.add(() => {
      stats.begin(); 

      this.particles.forEach(p => {
        p.update(this.mouse);
      });
      
      stats.end();
    });
  }

 

[Alain]

19 hours ago, bubamara said:

Now I have noticed you have these two in ticker loop :

       this.app.renderer.resize(window.innerWidth, window.innerHeight);
      
       this.mouse = this.app.renderer.plugins.interaction.mouse.global;

Move them out of loop and resize the app on event to keep animate() as simple as possible

animate() {
    this.app.ticker.add(() => {
      stats.begin(); 

      this.particles.forEach(p => {
        p.update(this.mouse);
      });
      
      stats.end();
    });
  }

 

It has improved in Chrome, but in Firefox it's still the same.

[bubamara]

Don't know why Firefox is so slow. But you could reduce number of particles shown/computed.

Draw that texture to off-screen canvas, read pixels, check whether yours 2x2 particle is pure black and don't create it in that case

[Alain]

On 4/24/2019 at 2:22 AM, bubamara said:

Don't know why Firefox is so slow. But you could reduce number of particles shown/computed.

Draw that texture to off-screen canvas, read pixels, check whether yours 2x2 particle is pure black and don't create it in that case

I have been able to fix some frames https://codepen.io/AlainBarrios/pen/BEGYoV?editors=0010.

Thanks you!.

[bubamara]

I see you have optimized update loop even more, perfect. Now you can reduce amount of particles by not showing empty ones; total going from 29.000 down to ~3.400 in this case

https://codepen.io/anon/pen/jRdQEo?editors=0010

[Alain]

7 hours ago, bubamara said:

I see you have optimized update loop even more, perfect. Now you can reduce amount of particles by not showing empty ones; total going from 29.000 down to ~3.400 in this case 

https://codepen.io/anon/pen/jRdQEo?editors=0010

You know some place where you give me information or recommendations to improve performance. What is the name of this technique that you use to detect the black parts of the canvas?

[bubamara]

In fact, it is not a black part, but transparent.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

where ImageData.data returns an array of RGBA pixels. If the particle size is 2, then 4 transparent pixels in that area, means particle if fully transparent (checking only alpha channel) and you don't want to be creating it.

As for recommendations to improve performance: rule number one probably is to fake everything you can, users will not be able to tell difference anyway. Then you might read something about how WebGL works, how Pixi works. I'm pretty sure if you come back with a particular question (and maybe providing minimal code example) there are plenty of people here willing to answer it.