Poor performance of base layer being rerendered

[wintercounter]

Hi all,

I'm relatively new to Pixi and searching for a good solution. I'm doing a PacMan like game. I have a 32x32 grid where I currently have 2 types of cells: Wall, Space. Walls are adaptive, meaning it knows if another wall is being it's neighbour and generates curve for corners for example. I'm using drawRectangle for vertical and horizontal tiles and drawLine with bezier for the corners. At the end I only use simple graphics, 2-4 per cell.

This works fine until the point I add DropShadowFilter. I know, filters are expensive, but my goal is to have a glowing shadow around the wall that's dynamic and changing it's color (I think i'll never going to be able to do this in a performant way). The problems is that the grid always get's rerendered.

cacheAsBitMap
I can live without making it glow and just cache it. But it screws up the position of both the graphics and the shadow.

Is having another WebGL context underneath the player's is a viable option? How about performance? How about it on mobile?

Or is it possible to "freeze" the map conatiner without being rerendered (not as bitmap)? (I think I'll get a simple `no` for this )

What other solution would fit to this case (I can't use texture, map is dynamic both color wise, size wise, etc).

Thanks in advance.

[ivan.popelyshev]

cacheAsBitmap and other solutions are based on RenderTexture. Its easier to use RenderTexture than find all the bugs in cacheAsBitmap. Learn how to use it, there are examples in examples page, and there is reference code in pixijs sources: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/AbstractRenderer.js#L251

As for how to make DropShadow/Glow/blur-based filters in general, there are options, but all of them require knowledge in blur filters. I have two general solutions are faster than current DropShadow, but I dont have time to publish it for last 3 months  There were 10 requests like yours and i still dont have time to publish it, I'm sorry.

> Or is it possible to "freeze" the map conatiner without being rerendered (not as bitmap)?

DropShadow is processing bitmap. There are no vector shadows in pixijs, like there were no vector shadows in Adobe Flash. You can use alternatives for dropshadow, like https://pixijs.io/examples/#/filters-advanced/pixie-shadow-filter.js , or make your own multi-pass filters that is juggling temporary renderTextures.

 

[ivan.popelyshev]

> Is having another WebGL context underneath the player's is a viable option? How about performance? How about it on mobile?

It works only on old mobiles. Of course in that case any shadow/glow will kill your performance completely. Use renderTextures.

[wintercounter]

Thank you Ivan, great advices!