graphics performance

[liajoy]

Hello!

i've found that a graphics have more than 300 graphicsData will be slow performance.

But if seperate it to 3 graphics( a graphics have 100 grapchisData), it will be good. But why?

Quote

yeah, batches, add into container. Just assume that every Graphics is an extra drawcalls, and for PC i recommend 200 drawcalls max. At the same time, each update uploads whole graphics, so 1 Graphics is as bad as 10000.

seems it explain why, but i didn't get it.

[liajoy]

I wrote a POC of this. https://jsfiddle.net/zygujhb6/2/

there are four ways to do this:

1. just draw circle every times 

2. convert graphics to sprite every times

3. separate graphics to many segment if graphicsData too larger

4. convert graphics to sprite if graphicsData too larger

which way is the best?

[ivan.popelyshev]

We balance drawcalls, buffer binds, texture binds, shader binds, framebuffer binds that way webgl does not become clogged. I cant say more because it will start hours long lecture, try to find someone else

Also it might be different for v5, especially if you change "PIXI.GraphicsGeometry.BATCHABLE_SIZE." to be bigger than circle points. It probably is bigger by default, if circle circumference is more less than 10 pixels per edge * 100 max points.... = 1000 pixels . Batched graphics has different balance.

 

[liajoy]

Thanks a lot!

Another question is sprite and graphics which has the better performance?

For example, 1000 sprites vs a graphics with 1000 shapes vs 10 graphics with 100 shapes?

[ivan.popelyshev]

Are they moving?

[liajoy]

yes they can move