Jump to content

Composite Layer and GPU Performance Tips


Recommended Posts

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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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,


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.

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.


  • Recently Browsing   0 members

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