I’m almost ready to go beta with my game tuggowar.io and finally have time to work on the rendering performance (the goal is to get at least a 4x boost).
For this post I’m looking for ideas on where to look next.
How I’m measuring performance
I boot into a performance test which prints out some stats:
#/s | ms
updates 30 0.81 (capped to 30, where meshed get created, removed and positioned)
renders 52 2.93 (just calls to babylon render(), so that is: 52 renders/s(fps), 2.93 ms per render call)
render time / mesh: 0.026334
Of course, in the full game there can be 4x as many meshes in the scene and on my Samsung S7 I currenly get 35 renders/s on average, which is the biggest issue.
Info & what I’ve done so far
- The camera is static and in orthographic mode, meshes move around on 3 axes but are flat and (all polygons) are always facing the camera
- There’s only ambient lightning
- There is a lot of text, so a lot of meshes with opacity textures
- Almost everything you see is it’s own mesh (a card for example is already around 10 meshes)
- Most rounded things are actual round meshes because opacity textures on square meshes performe worse
- I’m caching a lot of generated Meshes and Textures
- mesh settings:
mesh.cullingStrategy = AbstractMesh.CULLINGSTRATEGY_BOUNDINGSPHERE_ONLY;
mesh.doNotSyncBoundingInfo = true;
mesh.ignoreNonUniformScaling = true;
My first thought was, for cached meshes, to use .createInstance() in stead of .clone(), expecting the rendering to become faster.
Unfortunately this has the opposite effect of what I expected:
updates 30 0.8
renders 52 3.15
render time / mesh (incl instances): 0.028363
Does anyone understand why this could be?
If I set 4x CPU throttling in Chrome the stats become
updates 24 2.59
renders 21 15.75
render time / mesh: 0.14944
In my mind, 4x CPU throttling should have not that much effect on render time, which should be handled by the GPU. But definitely it should not cause as much as a 5x slowdown. Surely I’m doing something very inefficiently (GPU is enabled for sure).
To reiterate, I am looking for all tips to improve render performance. I know WebGL is slow, but it seems to me this is a pretty basic scene that should be able to render much faster, especially concidering the static camera and 2D nature of it, but I have no idea how to exploit that.
I can show code later of course. It’s pretty basic, there’s only a couple lines of code that interact with Babylon.
Thanks for your help,