Jump to content

GSAP v3 PixiJS v5 PixiPlugin w/ Graphics Issue


Recommended Posts


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?


Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

 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.



Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...