I am creating a simple web game. It runs well on PC and android phone. However, when I launch it on iphone this happen:
You can see that it is just a white screen when we click on the “play” button, which activates the touch control. It is on iphone7 so I thought that would be strong enough to run the application. It however runs perfectly fine on an android:
This is the code that I use to handle touch control:
So it is looking like our texture assets are quite large. We are using baked lightmap from our 3d modelling software of 3dsmax. Each lightmap baked was in the range of 1024 resolution. Is that too high for lightmap textures do you think?
We also have a few paintings in the game that in the range of 2k resolution. But I thought that 2k should be ok for mobile.
Could you also check for the triangle count and draw calls please? what is a comfortable range do you think for mobile applications for those two counts?
@dongqtm reduce your total VRAM allocation as Yaustar said. I’d say if you are targeting mobile devices don’t exceed 200MB, since the user will usually have multiple apps open on the background. So don’t assume the OS will allocate a lot of memory to your page.
Your polycount is quite ok, your draw calls are too high. For mobile 100-150 draw calls should be a good limit. I’d say consider using batching to reduce your draw calls, but first you need to reduce the total number of materials/mesh instances your models use.
I can see you have 127 unique materials in your scene, that’s too many. Consider merging your geometry in your modelling app before uploading it to Playcanvas.
Take a look at this manual section for more info on performance optmization:
Also, try to keep your draw calls low. Batching should help you with that. You don’t want to go over 140-160 draw calls on high-end devices. Lower-end ones even less. You current 385 draw calls can only be handled by computers probably.
Thank you Leonidas. After i enabled all 4 compressions method, the game now take a very long time to load. Do you guys have any tricks or recommend practices to balance out the load time vs run time optimization for mobile and PC?
If you’re not hosting from PlayCanvas, GZIP’ing is a must for your server. 3D compressed files will be especially large without GZIP (think 200 - 300 KB vs 2 - 3 MB). Note that services that automatically GZIP probably will not GZIP 3D compressed files, so that has to be done manually.
it is about the same loading time for all platforms yaustar
When I tick on all 4 compression methods, and load the game on android, would the game load all 4 compression texture files (DXT, PVR, ETC1 and ETC2), or does playcanvas knows to only load the ETC1 and ETC2 which is compatible with android? Reason why I ask is because since desktop tend to have more memory than Android, I could not compress the texture file using DXT and only ETC1 and ETC2. Would that help with android loading time?
Yes, only the platform-specific format is loaded. iirc ETC is a newer compressed format, so for me I can see that my desktop and phone do have ETC support according to https://webglreport.com, but I’m not sure if you can rely on desktop always supporting ETC. DXT on the otherhand is a bit older and well supported on desktop machines. Regardless, PlayCanvas knows what formats are supported, so compressing it into all available formats is definitely the way to go.
If you don’t know what is making it take so long to load, going into devtools on desktop and sorting network requests by size is a good place to start.
This gets a little more into the weeds, but if you have a ton of assets in your project and you don’t need every single one on page load. Definitely consider turning off preload on the assets you don’t need immediately. Those assets you don’t preload will automatically load when you enable them or otherwise add them to the scene.