Low fps with 2-3k static circles

[Existone]

Strange thing i discovered. My game draw a lot of circles, i draw them once, they don't move. With ~1k visible circles fps is perfect but once more circles appears on screen fps starts to decrease.

how i do it for each circle:

this.circle = new PIXI.Graphics();
var lw = this.size * 0.03;
let clr  = this.color.replace('#','0x')
this.circle.beginFill(clr);
this.circle.drawCircle(0, 0, this.size - lw * 0.5 + 5);
this.circle.endFill();

in this bunny benchmark i can spawn 60k bunnies without lag (and they with texture!), on my project i draw simple circle without nothing. what is wrong? i tried cacheAsBitmap but it causes fps lag while circle start to draw. and quality of circle decreased this way..

here is screenshot of my circles http://joxi.ru/MAj7eDLHj1ExQr

[ivan.popelyshev]

In v4, Graphics elements are not batched, and if you use cacheAsBitmap on every element, it will spawn extra texture, so its not a solution, Its even worse: instead of changing buffer and  2000 graphics elements, pixi will change a texture for each of those sprites. 

You have to spawn only one circle, render it into one texture, then spawn many sprites and use tint parameter.

In v5 graphics batching works, you dont have to do anything. Development version of v5 is here: pixijs.download/dev/pixi.js , docs here: http://pixijs.download/dev/docs/index.html

That's a short answer. For long one read all the threads of this subforum.

[Existone]

7 hours ago, ivan.popelyshev said:

In v4, Graphics elements are not batched, and if you use cacheAsBitmap on every element, it will spawn extra texture, so its not a solution, Its even worse: instead of changing buffer and  2000 graphics elements, pixi will change a texture for each of those sprites. 

You have to spawn only one circle, render it into one texture, then spawn many sprites and use tint parameter.

In v5 graphics batching works, you dont have to do anything. Development version of v5 is here: pixijs.download/dev/pixi.js , docs here: http://pixijs.download/dev/docs/index.html

That's a short answer. For long one read all the threads of this subforum.

thanks, i'll try v5! 

and one more question: is it possible to change size of circle without using scale and without full re-render?

[ivan.popelyshev]

No, its not, because pixi has to rebuild the circle vertices each time. You can change "graphics.scale", try it, see what happens when there are not enough vertices. Maybe its ok for you.