Jump to content

Low fps particles


Alain
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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();
    });
  }

 

Link to comment
Share on other sites

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.

2.PNG

Captura.PNG

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

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

  • Recently Browsing   0 members

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