WebGL slower than canvas [FIX]

[tips4design]

So, I have been working on a game and with Canvas renderer (on mobile, using Cocoon) I had 60FPS, but with WebGl renderer only 20FPS. I started removing things from the game to see what slows the game down (removed the background, disabled the physics, removed the sprites), until the only thing left was the debug text showing FPS: 20. So, the problem was that game.debug.text() is VERY slow on WebGL, and showing any debug text reduces the FPS. I have gone back to 60FPS on WebGl by using bitmapText instead of game.debug.text.

 

Hope this helps someone else who has this issue.

[lewster32]

It should be generally understood that debugging tools will reduce the performance of your projects, whatever language, platform or framework you're using. The debug tools in Phaser are a case in point - they aren't optimised and don't attempt any clever batching or draw call saving, they just render all of the debug output onto the frame each frame afresh, which in the case of WebGL is particularly inoptimal, though far less so with canvas's 'blitting'. Saying all that, it is worth knowing if you're puzzling over such large performance disparities - I'm surprised this isn't common knowledge though.

[tips4design]

Well, I thought it was a problem with Cocoon at first, as on PC it works at 60FPS on WebGl while using debug.text, but it might be because of the powerful GPU. I considered that showing the debug text might slow things down, but I didn't think it would slow them that much (from a stable 60FPS to 20FPS only by displaying 6 letters using game.debug.text). I mean, I can display 1000 bitmapText letters and it will still stay at 60FPS, my guess is that something is really bugged in the game.debug.text implementation (eg: something like running a O(N^3) loop when an O(N) loop is possible, or like uploading the texture to the GPU each frame).

[Noid]

Maybe debug.text should output some warning to the console since it severely affects performance and people new to phaser have no way of knowing

[lewster32]

22 hours ago, tips4design said:

or like uploading the texture to the GPU each frame

This is precisely what's happening