What is the logic behind `sprite / graphic / sprite / graphic is slower than sprite / sprite / graphic / graphic`?

[demiculus]

Here: https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips

it says

Quote

Being mindful of this order can help, for example sprite / graphic / sprite / graphic is slower than sprite / sprite / graphic / graphic.

what is the logic behind it?

[ivan.popelyshev]

Shader switch in pixi-v4 and v3. Also, graphics store its vertex data in a static buffer that doesn't have to be uploaded if graphics wasnt changed.

For v5 you will be able to specify whether to batch graphics with sprites or not. In case of a batch, all graphics vertices will be pushed to buffer each frame, like sprite.

Performance order:

1. Framebuffer change (slooooow)

2. Shader change

3. Texture change

4. Drawcall

5. buffer upload

Each item is several times heavier than the next one.

[botmaster]

Here's a simple explanation:

All GPU drawing use the painting algorithm, it draws everything from bottom to top on top of each other.

Let's say you draw 20 layers on top of each other and all those layer require the SAME program/shader then you end up drawing everything in: 1 DRAW CALL

Let's say you draw 20 layers on top of each other and each layer use a different program/shader then you end up with: 20 DRAW CALLS

1 DRAW CALL is way better than 20 DRAW CALLS, simple right?

 

Now let's say you draw 20 layers and you have 10 layers requiring one program/shader (let's call them shader 1) and the 10 other layers requiring another program/shader (let's call them shader 2), how many draw calls do you get?

If you draw a shader 1 then a shader 2 then a shader 1 etc .... Even though you use only 2 shader you still end up with 20 DRAW CALLS which is bad, if you draw first 10 shader 1 layers then 10 shader 2 layers you end up with 2 DRAW CALLS.

So the order of drawing is important and in most if not all GPU system is gonna determine the number of draw calls. It's not about how many shader must be used, it's about how many time they must be changed.

You can use only 2 shaders but still end up with 100 draw calls because you don't pay attention to their drawing order and you can use 10 shaders and end up only with 10 draw calls because you optimized the drawing and made sure everything draw in correct order.

 

it's more complex than that but this gives you a simple explanation of why drawing order matters.