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

[Foerthan]

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?

 

 

 

[xerver]

Best place to start is the profiler, what is taking 15ms?

Can you make a playground example?