WebGL performance issue

Phaser 3
1

I’ve seen this topic discussed previously, but I couldn’t find a final answer to that: why does my game, when set to WEBGL type, see its performance dramatically affected?

I am talking about 60 fps with CANVAS, 32 fps with WEBGL.

Is it something that I should expect, because it is “normal”, or it depends on my code?

Is anyone able to run a fairly complex game running with WEBGL in fullscreen at 60 fps? Or is it impossible?

2

@samme what’s your experience about this?

3

Generally in WebGL mode you have to utilize Batching feature to show many gameobjects with good performance.
if you can share more performance, I’ll might be able to help more and find bottleneck

4

It doesn’t seem normal, but with WebGL I think there’s a potential for better or worse performance (vs. Canvas), depending on your code.

5

Thank @GN-c, could you elaborate a bit over the batching feature, or point me to a piece of documentation so I can dive into it?

6

Thank you @samme

I have recorded a CPU timeline, no matter the moment because in my case it is constantly slow (that could be a hint itself). These are the results:

Screenshot 2022-11-11 at 09.10.00

If I further expand the tree (in the Call Tree tab), I see that:

Screenshot 2022-11-11 at 09.10.59

Do you see something suspicious?

7

In the Bottom-Up view, sort by Self Time, large to small.

8

Here you go:

Screenshot 2022-11-11 at 18.30.20

9

Can you click to focus on one of the red (slow) frames only? Then look at the flame graph and the Bottom-Up table for that frame.

10

I don’t understand, because if I click on a red frame (which is marked as “dropped”), in the Bottom-Up table I have no information whatsoever:

Screenshot 2022-11-11 at 20.55.37
Screenshot 2022-11-11 at 20.55.37481×540 28.4 KB

11

That’s right, sorry. Just zoom in on the “Animation Frame” before the dropped frame and look at the flame graph.

flame

12

Here. I’ve extended as much as I could, but many function names are still collapsed:

Screenshot 2022-11-11 at 21.26.30
Screenshot 2022-11-11 at 21.26.301920×442 67.3 KB

13

here’s the article that might be able to help: Advanced Rendering Tutorial: Part 2 - Multi Texture Batching - Learn - Phaser.
in general to use advantages of Batching you should render gameObjects which are using same texture in sequence. to further enhance this behavior use spritesheets or texture atlases instead of loading different images separately

14

I don’t see any obvious clues except batchSprite(), and that doesn’t even look very high.

Try printing the display list (example linked above).