WebGL and Draw Calls (Mobile)

[tunepunk]

Hi.

I'm developing a HTML5 game for mobile using Construct 2. (Yeah I'm a designer not a coder). Well in to production I'm starting to notice performance issues on mobile, especially midrange ones, that should be able to handle more. So I'm thinking it had to do something with the way drawing was done, as the game is pretty optimized otherwize (as far as I'm able to). As I'm not experienced in coding, the only thing I could do was research a little, and check the Draw Calls using a WebGL inspector. I was under the impression that WebGL has pretty much overhead on draw calls, so you would want to minimize those as much as possible? So checking the inspector it looked like a lot was happening every frame. Way more than I would want. Even Bunnymark, had 3 draws for 65000 sprites, and I'm in my game using a total of maybe 300 sprites and getting pretty bad performance on midrange mobiles. On the same phone, bunnymark was easily able to handle 1500 sprite at 60fps, my game could handle maybe 200 static sprites  on screen at 30 fps, and that's why I'm suspecting the rendering.

Anyone here be able to tell from this Gif, if all those calls looks normal to you, and maybe there is something I could do to boost performance on mobile? I just get the feeling that this doesn't look very optimal, but I could be wrong, so want a second opinion before I ask the construct 2 devs to do some optimization on that part.

Thanks a lot for your help.
 

[imerso]

Even desktops are sensible to the amount of draw calls, but mobiles are much more limited, indeed. The trick here (used by the programs you mention) is that they are using hardware instancing to draw many objects at once with a single draw call. You are making your draw calls individually, and that is why at only 300 sprites you already see a performance hit. With hardware instancing you can easily draw thousands of objects without a great performance hit, but they must be all the same object.

So, resuming: look for "hardware instancing" and you will find what you need.