How to diagnose and track down WebGL performance issues

[Jerorx 27]

I'm working on a relatively complex project using Phaser 3, and recently I have started to experience bursts of intense lag. I suspect this is a WebGL issue (not specific to Phaser). However, I'm very unfamiliar with WebGL itself, and I'm not sure that I'm approaching the problem the right way. I have performed profiling with Chrome's devtools but the stack traces are not extremely informative to me and I didn't get out much of it.

Therefore, I'd like to know if anyone could recommend specific ways to approach performance issues in WebGL, to help pinpointing the cause. Maybe to identify specific textures that cause problem, if this makes any sense at all, or any other useful pieces of information.

To be clear, I'm not asking for you to solve my problem, that's why I'm providing so little info. For now I'm interested in you guys just letting me know about your best practice and experience in general for that kind of issues, so I can improve at this and solve it myself.

[alex_h 114]

What happens if you try running the game in Canvas2D mode instead of WebGL? If the problem changes or goes away then you confirmed it is to do with webgl rendering. If it stays then you know you were barking up the wrong tree

[themoonrat 95]

https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk?hl=en is a great extension to analyse what WebGL calls are being made