cacheAsBitmap interaction behavior

[ggomaeng]

Hi! First of all thank you for this amazing library.

I'm pretty new to pixi.js, and after struggling for a couple days I am writing this issue in hopes of someone bleessing me with some pointers 😭

I have a container with about 10,000 graphics, and I'm trying to use cacheAsBitmap flag to optimize some performance.

The gist of my code looks like:

const container = new Container(); 
container.addChild(...) // I add about 10,000 interactive graphics that handle click events

viewport.addChild(container);
app.stage.addChild(viewport);

Without cacheing, everything works fine. However, it suffers a huge frame drop due to many graphics being rendered on the screen. I get around 15fps.

So I tried using cacheAsBitmap to optimize performance like so:

const container = new Container(); 
container.addChild(...);

+ container.cacheAsBitmap = true;

viewport.addChild(container);
app.stage.addChild(viewport);

Everything renders fine and I now get around 100fps, but click event coordinates are not where they're supposed to be.

I'm assuming the viewport transformation doesn't seem to apply to the cachedBitMap? How can I pass down the proper transformation to the cached children?

If this is not the correct way, what's the right way to approach optimization in this case? I've read https://github.com/pixijs/pixijs/wiki/v4-Performance-Tips a couple times.

Thank you for reading, and thanks in advance 🙏🏻

[davidfig]

My guess is that when you cacheAsBitmap, pixi no longer updates transforms for children that are included in the cached objects (since it can transform just the highest-level object and then show that transformed texture). I'm not sure if there is a workaround. You may want to look into culling (if it makes sense) instead of caching all the objects.

[ggomaeng]

I think this might be exactly what I've been looking for. Thanks for the pointer @davidfig :)