GSAP v3 PixiJS v5 PixiPlugin w/ Graphics Issue

[jSwtch]

Hello,

I have this code pen here. Just testing some functionality with GSAP, PixiJS, and PixiPlugin. I have three questions.

1. What is the difference between pivot.x, and pivotX here? I have found that I must use pivot.x with the rectangle and pivotX with the circle to center these graphics.

2. Why does the circle not change color like the rectangle? Is this a bug?

3. Is it more performant to create one PIXI.Graphics() object? I am hoping to create a series of geometric motiongraphic animations  with shapes moving independently. What is the best approach here?

https://codepen.io/jswtch/pen/LYVoaxJ

[ivan.popelyshev]

1. I guess pivotX is shortcut for gsap

2. probably because rectangle is rendered with batch renderer and circle is not, because number of vertices too high. Modifying shape props is tricky. try "graphics.geometry.invalidate()" every frame for circle animation

3. Unfortunately, the question cannot be answered because "performance" cannot be defined there. Its about balancing different types of webgl calls, in different cases. We can talk about performance if you learn the webglfundamentals first. My advice: do not do premature optimizations. Yes, if shapes move the same way, you can put them in same Graphics to avoid extra uploading of buffers and extra drawcalls e.t.c. but i cannot really fit everything in this answer. Again, it also depends if shapes are batchable or not. Batches affect GPU performance in a good way, CPU in bad, I cannot just express it easily.

Have you ever looked at webgl apps through SpectorJS extension?

Edited April 4, 2020 by ivan.popelyshev

[jSwtch]

 Ok thank you for the response.

So I have a general question about performance and practicality -> I want to create geometric motion graphics similar to (see embedded video). I could do this with svg and gsap alone - but I thought I would get a performance boost for rendering the scene in PixiJS. 

I thought specifically that transitioning background color would be 'expensive' if done in the DOM directly instead of a canvas with webGL2.

I do not plan to have 100 000s of elements. Would this type of animation be best done in with PixiJS + tweening or just svg + tweening.

 

 

[ivan.popelyshev]

I believe "antialias:true" in app options will hit you hard on retina screens

Maybe canvas2d will be best option, however if you make it with PIxiJS you will be able to switch between canvas and webgl if something goes wrong.

OK then, number of drawcalls should be small, you should look at it when the whole scene is done. It probably will be below 50. good for mobiles  - so you wont have to bake different graphices together.

Edited April 4, 2020 by ivan.popelyshev