PIXI plugin tip

[macguffin 28 Likes (Newbie)]

Hi it might be worth mentioning resolution in your docs with regards to the pixi plugin as the pixi default settings often makes images look blurred:

http://pixijs.download/release/docs/PIXI.filters.ColorMatrixFilter.html

 

If you find that your images are blurry when adding a filter, a colour effect for example, it might help to change the filter's resolution.

Not sure if you can do this directly with the plug-in but a quick hack like this might help. (Jack can the plugin change resolution?)

 

TweenMax.to(PIXI_IMAGE, 0.25, {
                    pixi: {brightness: 0.5},
                    onComplete: (): void => {
                        PIXI_IMAGE.filters[0].resolution = 2;
                    }
                };

 

The above example if for a single filter on an image.

 

As you can see in the screenshot the first bell has its resolution set to 2 whilst the second is using the default of 1

 

 

 

Cheers

[GreenSock 8,117 Likes (Superhero)]

Sure, I think we can accommodate that for ColorMatrixFilters. I updated it here - does this work well for you?:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin.min.js

[macguffin 28 Likes (Newbie)]

Works very well thank you

[OSUblake 9,990 Likes (Superhero)]

The default settings for all Pixi plugins are set to optimize speed over quality. Next time I work with Pixi I'll put together a list of the settings that should controllable with the GSAP plugin. 

[marksyzm 0 Likes (Newbie)]

Ideally many would like this control over all the filters of course; I put in a mention that the filters might want to be removed from the container's filter array once complete if the value is under their null equivalent i.e. blur = 0.

 

The example above also shows this resolution being set `onComplete` but I would have thought it should be set at the start of the tween? 

[OSUblake 9,990 Likes (Superhero)]

8 minutes ago, Mark Elphinstone-Hoadley said:

The example above also shows this resolution being set `onComplete` but I would have thought it should be set at the start of the tween? 

 

Probably, but I didn't write that.

 

8 minutes ago, Mark Elphinstone-Hoadley said:

Ideally many would like this control over all the filters of course; I put in a mention that the filters might want to be removed from the container's filter array once complete if the value is under their null equivalent i.e. blur = 0.

 

How would that work for something like the color matrix filter?

[macguffin 28 Likes (Newbie)]

Hi tried onStart but it didn’t work as I think it was setting the resolution before the filter had been created. 

[marksyzm 0 Likes (Newbie)]

Just now, macguffin said:

Hi tried onStart but it didn’t work as I think it was setting the resolution before the filter had been created. 

Yeah I just gave that a go in hope but it doesn't seem to be a live property that can be set once the filter is initialised, rather annoyingly.

5 minutes ago, OSUblake said:

How would that work for something like the color matrix filter?

Good point - I was thinking for the standard stuff like saturation then that's simple enough but then what's on/off once that's done? I'd say just do it for the presets i.e. once saturation is 0 remove and if it's a custom one advise to manually remove the instance yourself.

[marksyzm 0 Likes (Newbie)]

8 minutes ago, OSUblake said:

Probably, but I didn't write that.

 

That was more a pointer for OP than yourself

[macguffin 28 Likes (Newbie)]

Just wondering if you can change the resolution globally in pixi. 

 

Think you you might be able to do something like this

PIXI.settings.RESOLUTION = 2;

 

I’m not at my computer for a bit but will test when I get back as it might be a simpler solution to tackle it at source. 

 

[macguffin 28 Likes (Newbie)]

Actually scratch that. That’s going to be the setting for the atlas resolution isn’t it. 

[OSUblake 9,990 Likes (Superhero)]

9 minutes ago, Mark Elphinstone-Hoadley said:

Good point - I was thinking for the standard stuff like saturation then that's simple enough but then what's on/off once that's done? I'd say just do it for the presets i.e. once saturation is 0 remove and if it's a custom one advise to manually remove the instance yourself.

 

Still doesn't seem like a good idea as you might have a hover animation changing the saturation from some value to 0. It needs some sort of explicit value, like null or false.

[OSUblake 9,990 Likes (Superhero)]

1 minute ago, macguffin said:

Actually scratch that. That’s going to be the setting for the atlas resolution isn’t it. 

 

Yeah, that's more for like device pixel ratio.

[marksyzm 0 Likes (Newbie)]

1 minute ago, OSUblake said:

Still doesn't seem like a good idea as you might have a hover animation changing the saturation from some value to 0. It needs some sort of explicit value, like null or false.

 

Urgh... yes, that's right. Would there be a clearance property that someone might be able to use if they wanted to manually remove these? Someone might have 2 of their own filters added, so it would be good to access the ones that have been tweened and remove them at will. I guess someone could just perform an array diff or something though to get around it, so it's likely a code solution is better for this (rapidly becoming more) particular scenario. 

[OSUblake 9,990 Likes (Superhero)]

Anything that GSAP touches will have a "_gsTweenID" property, so you can filter it out that way.

[marksyzm 0 Likes (Newbie)]

8 minutes ago, OSUblake said:

Still doesn't seem like a good idea as you might have a hover animation changing the saturation from some value to 0. It needs some sort of explicit value, like null or false.

 

Would you likely go with null/false then?

 

2 minutes ago, OSUblake said:

Anything that GSAP touches will have a "_gsTweenID" property, so you can filter it out that way.

 

Very helpful, thank you

[OSUblake 9,990 Likes (Superhero)]

10 minutes ago, Mark Elphinstone-Hoadley said:

Would you likely go with null/false then?

 

Probably need to get @GreenSock to weigh in on that one to make sure it won't interfere with other stuff.

[macguffin 28 Likes (Newbie)]

Hi just having a look another approach might be to incorporate 

 

PIXI.settings.FILTER_RESOLUTION;

into the PixiPlugin

PIXI.settings

 

the plugin currently does this:

 if (v.resolution) {
      filter.resolution = v.resolution;
  }

 

 

@GreenSock if it also did something like this then if the resolution wasn't set manually it could pick up the global resolution for the filter

 

 if (v.resolution) {
                    filter.resolution =v.resolution;

 } else {
                    filter.resolution = PIXI.settings.FILTER_RESOLUTION
 }

 

Thanks

[marksyzm 0 Likes (Newbie)]

@macguffin Oh, I don't see that v.resolution in the plugin source on git? https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/PixiPlugin.js

[macguffin 28 Likes (Newbie)]

don't think it's been released yet. Take it from Jack's link, second post.

 

 

[OSUblake 9,990 Likes (Superhero)]

11 minutes ago, macguffin said:

Hi just having a look another approach might be to incorporate 

 

PIXI.FILTER_RESOLUTION;

 

 

Looks like that might be a future property? I don't know. I don't see it being used anywhere.

https://github.com/pixijs/pixi.js/search?utf8=✓&q=FILTER_RESOLUTION&type=

 

[OSUblake 9,990 Likes (Superhero)]

Actually, it looks like filters are set to the resolution in the settings. At least for now on line #86.

http://pixijs.download/release/docs/core_renderers_webgl_filters_Filter.js.html

 

/**
 * The resolution of the filter. Setting this to be lower will lower the quality but
 * increase the performance of the filter.
 *
 * @member {number}
 */
this.resolution = settings.RESOLUTION;

 

But setting the RESOLUTION = 2 in Pixi's settings will double the number of pixels for other Pixi related stuff, like the size of your canvas if you're using autoResize. It might be better to just have plugin specific settings, like.

PixiPlugin.resolution = 2;

 

[macguffin 28 Likes (Newbie)]

My mistake I was using the old depreciated version

  PIXI.settings.FILTER_RESOLUTION = 2

 

I think if you just add this to your code it will set the default resolution of all filters. It looked to be working when I did a quick test

[marksyzm 0 Likes (Newbie)]

@OSUblake

If that was the case then I would have expected your current plugin to work just with the default settings. So I guess that resolution is set the way @macguffin just mentioned. Looks sensible to me then to apply it that way in the plugin.

[OSUblake 9,990 Likes (Superhero)]

29 minutes ago, macguffin said:

My mistake I was using the old depreciated version

  PIXI.settings.FILTER_RESOLUTION = 2

 

I think if you just add this to your code it will set the default resolution of all filters. It looked to be working when I did a quick test

 

What version are you using? Can you post a demo of that? I just did a quick test logging out the resolution value of a filter, and changing FILTER_RESOLUTION has no effect. However, changing RESOLUTION does.