RenderTexture vs CacheAsBitmap

[Rob Gordon]

I have a Container with ~700 sprites in it, each with a filter applied (I have tried both dropShadow and blur). Obviously that's too many to render on stage. Creating a renderTexture works perfectly - but it's a very slow process to create it, and I worry about the impact on lower-end mobile devices. Setting cacheAsBitmap to true for the container is considerably faster - but doesn't seem to support either the dropShadow or blur filters that are applied to the individual sprites. Some of these things are known issues (though the filter rendering problem feels like a bug of cacheAsBitmap). Is there a better approach here?

[ivan.popelyshev]

> Setting cacheAsBitmap to true for the container is considerably faster
https://github.com/pixijs/pixi.js/blob/dev/packages/mixin-cache-as-bitmap/src/index.js#L216

> Some of these things are known issues (though the filter rendering problem feels like a bug of cacheAsBitmap).

We fixed it sooo many times, maybe it actually works now, try pixijs.download/dev/pixi.js

> Is there a better approach here?

Yes, but it depends on your case. I know many tricks for advanced users  

DropShadow is very slow, Blur is faster of course and I usually use DropShadow based on blur.

[Rob Gordon]

>> Setting cacheAsBitmap to true for the container is considerably faster
>https://github.com/pixijs/pixi.js/blob/dev/packages/mixin-cache-as-bitmap/src/index.js#L216

It looks like cacheAsBitmap is also using a renderTexture for this operation. When I do this that way directly the operation is quite slow. Why would this be?

>> Some of these things are known issues (though the filter rendering problem feels like a bug of cacheAsBitmap).

>We fixed it sooo many times, maybe it actually works now, try pixijs.download/dev/pixi.js

I'm using v5.2.3, Is there something newer?

> Is there a better approach here?

>>Yes, but it depends on your case. I know many tricks for advanced users  

>>DropShadow is very slow, Blur is faster of course and I usually use DropShadow based on blur.

Well...none of the sprite are interactive or animated. It's really just a complex background image made up of 100s of individual pieces - each requiring a dropshadow. I could build it up progressively in canvas - but would prefer to keep it all within PIXI if I can.

Cheers!

[Rob Gordon]

BTW - I can confirm that the performance of doing a manual renderTexture with the DropShadow filter applied is awful. Switching to using twice as many sprites with every other one being essentially a blurred black-tinted copy of its neighbour is considerably better. Since Blur and DropShadow are rather similar it seems what we really need is a performance DropShadow filter (preferably build into PIXI). Still hopeful there's a better way...

UPDATE: just realized you can build up a renderTexture progressively by passing false as the 3rd parameter. I think that may be the answer...t least I can spread the work over a number of ticks/frames...

Edited May 1, 2020 by Rob Gordon

[ivan.popelyshev]

I can only say that I made  many discoveries but i still didnt make my own blur-based filters plugin  But if you give me more information about your case - it'll be easier for me to do that.

[Rob Gordon]

Thanks Ivan. I've cooked up a solution that works well enough for now and I wouldn't want you to waste time (rather save that for when I'm really stuck!).

Here's what I'm presently doing:

renderTextureSprite = new PIXI.Sprite(PIXI.RenderTexture.create({width:mywidth, height:myheight, resolution:myresolution}));

...then for each sprite I create a shadow (copy of the sprite, tinted black, alpha of 0.4, blur filter applied) and render it:

renderer.render(shadow, renderTextureSprite.texture, false);

... and then render the sprite:

renderer.render(sprite, renderTextureSprite.texture, false);

The advantage is that I can spread the work out and show a progress bar along the way. I'm happy to hear other ideas for how to do this (and learn more about PIXI), but for the moment this is working nicely.

[ivan.popelyshev]

>  I'm happy to hear other ideas for how to do this

In low-level - its the same the same thing how real good dropshadowfilter should work, except maybe one extra render in temporary rendertexture for a filter.