Jump to content
Search Community

Pixiplugin doesn't seem ready for Pixi v5

Friebel test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

5 hours ago, Friebel said:

So in short my suggestion would be: Create a PixiPlugin per pixi-version if the pixi innerworkings change. In my opinion that's easier to use and doesn't need extra code to sniff the pixi version. It also doesn't need the PIXI-object or some workaround just to register the pixi version we already know. The PIXI object isn't always available when using bundlers like Webpack and why do extra work inside the plugin to detect the pixi version if we already know which PIXI version we are using, so we could pick the right pixiPlugin (4 or 5) directly. The propertyname at use in tweens could still be 'pixi' for both PixiPlugin4 as well as PixiPlugin5 and so on, only the innerworkings could be different (like using 'angle' instead of 'rotation' for Pixi v5).

But how would the plugin get the appropriate stuff from PIXI then? For example, it must access PIXI.filters.ColorMatrixFilter, PIXI.Graphics, etc. Where would the pointers go? 

  • Like 2
Link to comment
Share on other sites

18 hours ago, GreenSock said:

But how would the plugin get the appropriate stuff from PIXI then? For example, it must access PIXI.filters.ColorMatrixFilter, PIXI.Graphics, etc. Where would the pointers go? 

Thanks for your reaction and solid point @GreenSock Jack. I never used tweening on PIXI.ColorMatrixFilter and PIXI.Graphics through the PixiPlugin. All projects I do are happy with all properties I described above and animate with the now stripped down 'SimplePixiPlugin' is fine for me.

 

If I would animate anything color-related I would probably directly use a custom shader for best performance to run it directly on the GPU. And for most pixi projects I don't use the pixiplugin as a lot of times it's more code to have the plugin than to write position and scaling a little different to make it work in one tween in the timelines.

 

Just to be clear: I love greensock and there is nothing wrong with the pixiplugin or whatever. It's fine. I just liked it better to strip down the plugin to the core of what I needed into a custom plugin and make it work directly with Pixi 5 which I use in all projects now anyway, instead of handing the plugin a fake object just to let it know I use it with Pixi 5.

  • Like 1
Link to comment
Share on other sites

10 minutes ago, Friebel said:

If I would animate anything color-related I would probably directly use a custom shader for best performance to run it directly on the GPU.

 

That's how all the color related stuff with Pixi is done. 

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

 

Quote
  • Tinting is totally FREE in the WebGL renderer, there is literally no overhead. So go nuts!

 

  • Like 2
Link to comment
Share on other sites

1 minute ago, OSUblake said:

 

That's how all the color related stuff with Pixi is done. The plugin can animate a color matrix filter and tint.

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

 

 

 

Not sure which point you want to make here, but according to a few of your reactions in this thread I get the feeling you think I'm beginner programmer or something. Just to clear things up; I'm not at all new to pixi nor (graphics) programming. So I know some things about pixi's inner workings and webgl already and I'm following new developments closely too. 

 

If Greensock animates a filter, than the animation will not be done by the GPU but in Javascript. So to animate colors it's always faster to animate inside a shader. Not saying it's always needed to be this fast nor that Greensock should change something, just saying I in my projects would probably go for that route in a big project instead of using the plugin. But it all depends on the project and the scene.

 

I was about to edit my last post, but saw your reaction coming, so move it here as follow up on my last post:

So my suggestion would than be to have a SimplePixiPlugin per Pixi-version (if the innerworkings change per pixi version). By chosing SimplePixiPlugin4 we address pixi 4, by chosing SimplePixiPlugin5 we address pixi 5. If it only does the properties as described in the code above, it doesn't need to have pointers to either a filter or a Graphics object. That's only needed if we animate colors. In my experience of the projects I did with pixi I never needed to animate colors. So my guess would be most people could use a SimplePixiPlugin addressing a pixi version directly for most if not all projects. Only if we would need to animate with a colors that, lets's say, AdvancedPixiPlugin4 or AdvancedPixiPlugin5 should maybe (I'm not sure if it's really needed, as the target object probably has a lot of handy references already) need pointers to pixi objects.

 

Just a suggestion. Nothing more, nothing less.

Link to comment
Share on other sites

10 minutes ago, Friebel said:

Not sure which point you want to make here, but according to a few of your reactions in this thread I get the feeling you think I'm beginner programmer or something. Just to clear things up; I'm not at all new to pixi nor (graphics) programming. So I know some things about pixi's inner workings and webgl already and I'm following new developments closely too. 

 

 

Sorry if you got that impression, but I never thought of you as beginner. I've helped you work through several issues in the past, so I know what you can do. That's why I said you should do what you think is necessary, and fits your coding style.

 

I was merely trying to provide clarification for others who will come across this thread. It's likely that this thread will be seen by thousands of other users, and it's best to limit confusion like, "Why doesn't the plugin use shaders for color?"

 

That's all. I wish you the best, and good luck with your project!

  • Like 2
Link to comment
Share on other sites

1 hour ago, OSUblake said:

I was merely trying to provide clarification for others who will come across this thread. It's likely that this thread will be seen by thousands of other users, and it's best to limit confusion like, "Why doesn't the plugin use shaders for color?"

Thanks. I have and had no hard feelings and I respect your contributions on the forum. I just wanted to get it out of the way, because you were explaining some things I already know for quite some time now and wanted to spare both our times by skipping some basics. Have a nice evening!

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Thisone for everyone bumping into this thread using gsap v3, using Webpack and don't want to import everything from the PIXI lib, but single 'modules' from PIXI. This works fine with gsap 3 PixiPlugin and it's not a problem if you use registerPIXI() multiple times (per file that imports PixiPlugin); Below code is in ES2015+

 

import { gsap } from 'gsap/all';
import { PixiPlugin } from 'gsap/PixiPlugin';
import { VERSION as PIXIVERSION, DisplayObject } from 'pixi.js';

gsap.registerPlugin(PixiPlugin);
PixiPlugin.registerPIXI({
  	DisplayObject,
  	VERSION: PIXIVERSION,
});

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

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