PIXI.Graphics for multiple moving shape objects

[Snowfrogdev]

So I've figured there are two main ways to render multiple moving shape objects with PIXI.Graphics.
1) Use only one Graphics instance, clear it on each redraw and simply draw each shape in their new position every tick.
2) Use one Graphics instance per shape object. Draw each one once at the beginning. On each redraw move the graphics instance to their new positions.

I'm wondering if I should prefer one method over the other and why?

[ivan.popelyshev]

Hi!

Welcome to the forums

Your question is general and can't be answered in a few sentences. To understand which one is better for your particular case - you have to spend a year or two with webgl libs.

Basically,

1. Batcher does care about graphics with small number of vertices. Circles usually have big number.

2. In case if graphics does not fit into batcher, all transforms are cheap anyways - position,scale,rotation - its all just one matrix in webgl uniform, it does not modify geometry buffer inside graphics.

3. in case you have 10k elements that are rarely move - you divide it by 100 graphics and update only those graphics that have moving parts. That way you upload minimal number of buffer.

What is Batcher? What is Transform?  Cant we just make faster Graphics? Is there a plugin for it? What is buffer, does it have pixels or something else? Is graphics rendered only one time if you dont move it? - Those questions I wont answer.

Those things will make sense for you only if you learn 

1. webgl fundamentals : https://webgl2fundamentals.org/

2. all basic pixijs tree examples, how do you work with transforms.

3. how meshes/graphics in pixijs works, read the library sources.

4. maybe read what other people asking here and in https://github.com/pixijs/pixi.js/ 

5. experiment with threeJS. Just so you know that we aren't pulling your leg explaining that its all is difficult.

PixiJS is not optimallfor your task. Its never optimal. Its just faster than other renderers for 2d and has many general optimizations. You need to tune both your high-level algos and configure pixijs low-level. 

But first , you need to actually hit the performance problem, there's no point int premature optimization of pixijs app, unless you know that you will hit a particular bottleneck.

[Snowfrogdev]

 @ivan.popelyshev thanks for the warm welcome and the detailed answer. I will make sure to dive in a bit deeper on some of the topics you highlighted.

To give a bit more context, I was asking the question with the mindset of experimenting on a new project and wanting to make the best bet as to which method was most likely to be the correct one in the long run so that as I progress and build things, the chances of me having to switch over to the other method are as low as possible. I don't know if that makes sense but I'm still pretty new to all of this.

6 hours ago, ivan.popelyshev said:

But first , you need to actually hit the performance problem, there's no point int premature optimization of pixijs app, unless you know that you will hit a particular bottleneck.

For the moment, though, what I get from ? is that both ways I have described of moving things around are equally good from a general purpose standpoint. Basically, if we were to take all the likely use cases of PIXI.Graphics, both methods would, on average, perform about the same and I therefore do not have any reasons of favoring one method over the other when experimenting and my use case has not become quite clear yet. Am I understanding your point correctly?

[ivan.popelyshev]

19 hours ago, Snowfrogdev said:

For the moment, though, what I get from ? is that both ways I have described of moving things around are equally good from a general purpose standpoint. Basically, if we were to take all the likely use cases of PIXI.Graphics, both methods would, on average, perform about the same and I therefore do not have any reasons of favoring one method over the other when experimenting and my use case has not become quite clear yet. Am I understanding your point correctly?

Usually, its easier to change transforms on individual graphics. However, I do not know architecture of your code, and how do you prefer to write that kind of algorithms.

Resetting graphics means pixi will have to call triangulation. It will also re-upload the vertex buffer in case figure has more than 100 vertices. I don't know how to explain it clearly, if you want you can take https://spector.babylonjs.com/ and capture one frame of your app, and see how many webgl commands that mean. 

Do what is easier for you to do from the coding perspective. It won't be hard to rewrite it later.

 

Edited February 10, 2020 by ivan.popelyshev