Search the Community

Hey all, I'm trying to figure something out with pixi.js filters. Namely, how do I effectively disable filters sometime after enabling them? I'm building a small HTML5 app targeting mobile devices. I'd like to use the BlurFilter in a few places for some nice visual effects. Since these effects are only needed temporarily, my plan is to add the filters when necessary and remove them when they're no longer needed. Unfortunately what I've noticed is that the performance hit from using filters lingers even after removing them from their objects. For example, my app is a solid 55-60 fps before applying any filters. After applying a BlurFilter to a single Graphics object, performance takes a small hit as expected down to ~47 fps. Then I remove the filter, expecting the performance to improve back to 55+ fps, but it doesn't. Even with the filter removed, performance never recovers to its pre-filter levels. I'm adding the filters like this: someGraphicsObject.filters = [new PIXI.filters.BlurFilter()]; And removing it like this: someGraphicsObject.filters = null; I've tested on Android and iOS using Crosswalk and Phonegap respectively, as well as native Chrome/Safari browser apps. Same story across all tests, so it must be something with the pixi.js library... Is there a better way to ensure disabled filters no longer impact performance? Thanks.