Composite Layer and GPU Performance Tips

[ZYandu]

I'm looking for any tips in regards to performance with the GPU and composite layers specifically. ^.^ 

My performance now is pretty good on web ~55-60 fps and it also looks pretty good on mobile, but it is using ~70% iPad's GPU power and only ~20-30% CPU. 

The code is in PIXI 5.1.0 and I have two renderers with one main RAF that renders both of them. Before the RAF starts, I'm using the PIXI.loader.shared to load in all the images and then I use the prepare plugin on all the PIXI containers that contain sprites. Offscreen sprites are all .visible = false. My main animations are constant x position subtracting to ~15-30 individual sprites on screen at a time and tinting menu sprites that are always on screen and aren't moving.

Main Question: Looking at causes of composite layer paint complexity, I'm seeing that my PIXI renderers caused two layers for each of them. Is this normal for each renderer to have two layers with one saying n/a for compositing reasons? 

n/a layer: https://imgur.com/a/IGjPmTs

Compositing due to the element being a <canvas> element: https://imgur.com/a/o4zZ21R

Chrome devtools normal performance frame: https://imgur.com/a/iW3quHn

 

I also have a lot of overlapping containers with sprites in the actual PIXI code which could be causing a higher memory estimate on the GPU's work. Is it worse to have each of the sprites in Containers when they overlap?  Overlapping sprites: https://imgur.com/a/I61nBMo

Thank you so much for any advice, you guys are the best! ^.^

 

[ivan.popelyshev]

Containers aren't actually layers, they cost nothing. Do you use any RenderTexture's ?

Why do you need two renderers instead of one? I thought its usually for old devices where JS CPU load is more important, and one of them gets updated rarely.

Also, "antialias:true" can be cause of higher memory estimate.

[ivan.popelyshev]

> they cost nothing

unless you use filters . If you have 5 containers with filters inside each other that'll eat 5 renderTextures. Depth is important. Container with filters is effectively a layer.

[ZYandu]

I haven't used any filters on any sprites or containers. ?I don't use any RenderTexture's are they better optimized for the GPU? Overview of my resources: I have one tiling Sprite always moving, one spritesheet with all the sprites that have their position animated, all text is made from bitmap text, and the rest of the static sprites are loaded from data urls.

Yeah I originally made two renderers because one didn't have to always get updated, but it needed to be updated enough that having separate RAFs gave worse performance than just rendering them both every frame in one RAF. I have thought about merging them into one Renderer, which would get rid of the composite layers. Is it better to have one renderer at full height and width of the screen? ^.^

I don't use antialiasing or preserveDrawingBuffer on renderer options but I do use transparency for background images. ?

const renderer = useRef(
      new PIXI.Renderer({
        width: 1920,
        height: 600,
        preserveDrawingBuffer: false,
        transparent: true,
        antialias: false,
      })
);

 

[ivan.popelyshev]

Use extra RenderTexture instead of another renderer. I believe there's enough info about it in pixijs examples.Dont forget to resize it on screen change like your renderer.

[ivan.popelyshev]

btw, currently renderTexture in v5 eats 8.33 bytes per pixel because of one problem we'll patch in 5.1.1 but its anyway better than extra renderer.