Jump to content

Unexpectedly slow performance with the canvas fallback renderer. What am I missing?


Recommended Posts

Hi there.

So I am new to PIXIJS, but I have experience working with the canvas API directly. I recently started working on a game, finished the menu system, and decided I would give PIXIJS a shot for WebGL support. So I tested out my menu system with PIXI.

On my dev machine, with WebGL support,  performance is better than I was getting before. And that's great. However, I have another machine that has essentially no GPU to speak of, and does not have WebGL support. The performance difference is... well, it's quite staggering.

With my original code, redrawing a menu with 26 components: 4-7ms.

With PIXI, only 17 components:  15ms.

This quite honestly makes me feel like I must be doing something wrong, so I will try to break down what I am doing:

6 image components (5 are 17x22, 1 is scaled to 300x300 from 264x192)

10 text components

1 Graphic component (a ~100x15 Rectangle)

Images are pre-loaded into texture cache (PIXI.loader.add ...). When the menu is created, those images are loaded into sprites via: new PIXI.Sprite(PIXI.utils.TextureCache).

Text are generated just via new PIXI.text(text, style);

And the rectangle is made via new PIXI.Graphics(), begin fill, draw rect, end fill.

Sprites, text, and the rectangle are added to an internal collection object on the menu, which is added to the app stage after setup.

This is all that is running. For this test, nothing else is being processed. No event handling, nothing.

I tried drawing the static parts of the menu to a RenderTexture and then adding that to the collection rather than the individual elements, but that actually performed worse.

What am I missing here? Could anyone give me any ideas?




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