ScrollTrigger + Pixi: use cases and limitations

[webakimbo]

Hi - Been using GSAP successfully for animating HTML/CSS to great effect. I recently applied it to a visual concept I had, and bumped up against some performance limitations. I'm here to better understand if those limitations are inherent to PixiJS, or to GSAP, or if I'm overlooking some performance gains, or if it's just my misunderstanding of when to reach for WebGL.

 

Simplified summary of the design: I'm creating a grid of small colored squares (think: a low-res image, scaled up), and "exploding" the squares on scroll - each will travel in its own direction, with some rotation and scale. Proof of concept below. Works great! Nice and smooth.

 

However, if I try to enhance the effect by applying a blur to some of the squares, the frame rate drops to the point of unusability. (You can try this by uncommenting line 52 in the pen.)

 

I built an earlier proof of concept without Pixi - just divs + CSS - and hit basically the same wall. I'm new to WebGL and assumed it was just more efficient at redrawing, but it appears not in this case. Is WebGL good at, for instance, making something look like it's underwater, but no better than CSS at animating 100s of individual blurred graphics? Or is WebGL the right technology, but Pixi not the right tool? Or is the toolset absolutely capable of this, but I just haven't configured it correctly? Trying to suss out where WebGL shines and where it's not enough.

 

FWIW, been hunting around for examples of ScrollTrigger + Pixi and there aren't many. The link to such examples in your own documentation appears dead.

 

Thanks!

 

See the Pen PoVRgLR by webakimbo (@webakimbo) on CodePen

[Rodrigo]

Hi @webakimbo and welcome to the GSAP forums!

 

Unfortunately I haven't played with GSAP and PIXI in years (last time I used it PIXI was in version 4, so some water has gone under the bridge in that time) so I don't know if I can help, but filters are expensive, even in WebGL:

https://pixijs.com/guides/production/performance-tips#filters

 

If you do a performance recording you'll see that you're asking a lot from the GPU with all those filters.

 

Maybe what you could do is instead of creating different blur values (I know it looks better that way) create maybe two and apply one of those to the boxes that should be blurred and set the quality to a low value in order to require less from the GPU:

https://pixijs.download/release/docs/PIXI.BlurFilter.html#quality

 

https://pixijs.com/examples/filters-basic/blur

 

Then create a timeline and tween the values of those filters at the same time using the position parameter.

 

@OSUblake has a simple demo showing the filter quality:

See the Pen QVbQMb by osublake (@osublake) on CodePen

 

Other than that I can't really think of something else that could improve performance.

 

Sorry I can't be of more assistance.

Happy Tweening!

[webakimbo]

Hi Rodrigo -

 

Appreciate the insight. If I understood your suggestion correctly, I created a shared PIXI.BlurFilter, added it to some of the tiles, and tied its value to the scroll. Pen here: 

See the Pen oNmPxWj by webakimbo (@webakimbo) on CodePen

 

If that's the implementation you had in mind, looks like the performance lag is still considerable. Let me know if my code doesn't look correct, though.

 

More generally, I'd welcome thoughts on PIXI and why you haven't used it in years. Are there newer, shinier tools for 2D manipulation?

 

Thanks again,

Andy

[Rodrigo]

Hi,

 

Indeed that was the idea, but yeah, you're hitting the same wall here, applying the filter to too many elements.

 

The last idea I can think of is to add the boxes you want to blur to a PIXI Container or Particle Container and apply the blur filter to the container and not the elements.

 

Hopefully this helps.

Happy Tweening!

[webakimbo]

Tried your last suggestion as well. Weirdly, blurring the container results in the tiles disappearing altogether.

 

In any case - seems like this is just outside the capabilities of PIXI/WebGL at this point. Appreciate the insight!

[Rodrigo]

Hi,

 

Sorry about the issues. Have you asked in the PIXI forums maybe they can offer some advice on the subject of applying a single filter to a bunch of elements and/or particles.

 

Sorry we weren't able to help you more with this.

Happy Tweening!