I published my latest PlayCanvas experience last evening (www.jamespotterbooks.com). I had been very careful to make it as playable as possible on mobile (since that’s where most people will be accessing it) and it was running very smoothly on my old iPhone 7.
A few hours later, I’d spent some more time optimizing (reducing texture sizes, cutting back on dynamic shadow-casting lights). And to my great surprise the playability on mobile had dramatically decreased!
Frantically, I tried to find the problem, even going so far as stripping out all audio and turning off some of the geometry. The framerate was still very low on mobile, and crashed repeatedly.
This morning, however, I test once more, and suddenly the framerate is very smooth again, with no crashing.
Obviously I made no changes between last night and this morning.
SO: could it simply be that the resulting traffic (a little over a thousand plays last night) created a lag on mobile?? If so, is there a workaround for this?
Did you write those books?! The site and the presentation and everything look awesome!
Regarding the issue you are having, no traffic can’t really affect the performance of a WebGL application. It may affect the download time if the hosting server can’t keep up with the requests. But not the performance.
One scenario that I can think of is that your phone may be throttling, on purpose lowering the performance. That can happen for a number of reasons e.g. low batter, too many applications/websites open, some other OS process running on the background (e.g. updating something).
For sure I know that if you have many applications and websites open at the same moment, which is a common scenario for a phone, iOS is very strict on how it allocates memory. It can decide at any moment to kill an application that exhibits high memory allocation, which is quite common for WebGL sites.
Make sure to optimize your memory allocation, definitely use compressed textures and if required reduce the quality of your shadow maps on mobile.
Thanks! Yeah, I wrote the books. Every time I think they’ve run their course, they seem to get rediscovered all over again. So I figured I should give them a new cool online home.
So yeah, it’s confusing. A good minority of my users said it crashed on their phones as well. Not good! So I will keep compressing and try reducing shadow maps. Any good benchmark settings for shadow maps on mobile?
For crashes I’d scroll to the bottom and check the total VRAM usage. I’d say a good max limit for iOS is 250-300MB, if you exceed that the page can easily crash.
For low performance / bad FPS I’d study the various timers on top. Check where most of the time is spend (scripts update vs render time), and definitely check the scene total draw calls rendering. Too many draw calls and performance can be bad on mobile.
One easy way to lower your draw calls is to start using batching, PlayCanvas makes it easy to setup batch groups in editor. Make sure to read the whole performance section on the manual and you will be good to go.
I’m at 291 total VRAM, so I’m feeling like that’s relatively safe (although on the high end)? Going to see what I can do about those draw calls though… Thanks!
If you are targeting older iPhones, that can sometimes be above some threshold on low memory situations (a lot of apps/sites open on the device).
Momentarily the application may require more memory than usual e.g. on initialization and usually that’s when crashes happen. The profiler shows only the video memory required, JavaScripts does additional allocations during the app boot and run time.
Some devices on low battery (iPhone will do this on iOS 15) will throttle the CPU and framerates. We’ve had developers see this where the game will drop to < 30fps if a device is on low battery.
Phones will also throttle if they are overheating. This can be a nightmare as there’s no control and no API to call to know if a phone is doing so. We’ve had some developers that scale the pixel device ratio based on framerates and frametimes.
I will try those approaches, too. Currently seeing some improvement, though it seems to vary literally (and noticeably) from refresh to refresh, going from laggy/crash to smooth as silk.
ANYway, on a slightly different note: I’ve also noticed a lot of popping and crackling audio on mobile devices, even with the sound effects turned down in the sound entity. This only happens on mobile. Any ideas about the cause or a workaround?