Hello guys!
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:
Any help is really appreciated!
Hi @dongqtm,
The white thing you see on the iPhone may be the page crashing due to high memory usage. On older iPhones the OS is quite strict on how much memory its app or page can use.
Can you check using the profiler how much VRAM you use in total?
You can lower that number by using compressed textures and unloading unused assets (especially textures).
Hello Leonidas,
Here are the screenshots of my profilers:
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?
Thank you!
More than 1GB in texture assets is VERY high. An iPhone 7 has only 2GB of RAM. Are you using texture compressed assets?
Not really I guess. Which one would you recommend of the following?
@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:
https://developer.playcanvas.com/en/user-manual/optimization/
Refer to the manual for your needs: https://developer.playcanvas.com/en/user-manual/assets/textures/
These are awesome advices! Thank you guys so much! I will try these out and definitely keep these criterias in mind for the future!
Thank you Leonidas and yaustar!
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.
Edit: missed Leonidas post. Sorry for repeating.
Hey guys,
Would you recommend applying texture compression for lightmap textures as well? or would that remove the quality of the lightmap?
GPU texture compression indeed isn’t lossless, but it the loss in quality especially for lightmaps will be minimal.
Definitely try enabling compression, it will help immensely with your project.
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.
Is this a long time to load for each platform or just iOS?
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.
Awesome, thank you very much Chris for your clarifications!
