Jump to content

RenderTexture vs CacheAsBitmap


Rob Gordon
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

>> 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!

Link to comment
Share on other sites

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 by Rob Gordon
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...