I am building a web app which is giving me some headaches on iOS and I’m hoping someone might be able to offer some suggestions as to how I might get around the problems.
Unfortunately I can’t share any URLs because my web app is a R&D project for a client and the WIP versions are commercially sensitive. And because of its sheer complexity, creating a cut-down version for demonstrative purposes will not illustrate the issues I’m having. Hopefully my issues are generic enough that someone might be able to volunteer some ideas though!?
My app loads two .GLB files - one is an animated skinnedmesh character with facial morphs and the other is the environment in which they reside. I have compressed the .GLB files and the texture maps as much as I dare and the total payload for my biggest scene weighs in at around 30MB. My app features a cartoon character that the user can chat to aloud using natural language. So I also have a bunch of audio files which are sound effects and static dialogue for my character (some of the things my character says never change, so it’s easier to pre-load these audios instead of waiting for a TTS API call every time). My audio files weigh in at around 11MB and these are loaded with the page so that they play back instantly when called upon.
I also pre-load (fetch) some JSON files which specify the camera, lighting, clipAction animation ranges etc. So on page load I’m loading about 45MB of assets.
My app works beautifully on Chrome, Firefox, Edge, Safari on MacOS and even an old Android phone I have. And it works on my iPhone 12 too. On my wife’s old iPhone 8, however, it loads over and over before giving me that hateful error
A problem repeatedly occurred with https://…
I’m 99% certain this is a problem with RAM. I’m using inspect to debug the app and I have a bunch of logs to the console. Using those logs, the page appears to crash just before the first call to
Despite the fact that I’m precompiling the scene using
first and that (usually!) works okay. I’ve tried using smaller textures, the override material, removing shadows etc. and occasionally the page does load but it’s very rare and difficult to ascertain why.
I’ve tried using instruments on my wife’s Mac to look at the memory consumption but I don’t really know what that’s telling me (at some points it says MobileSafari is using 320% and 2.1GB of memory WTF!?) and I can’t find any help on that because instruments looks to be for xcode debugging really. And I’m not much of a Mac user anyway.
What I really need is the ability to “sniff” the amount of available RAM on iOS devices. If it’s less than, say, 120MB, then I’ll point to a folder of smaller texture files. If it’s less than, say, 60MB, I’ll turn off shadows. If it’s less than, say, 30MB, I’ll turn off antialiasing. And if it’s less than 16MB, I’ll simply alert the user that the page won’t work on their device. Anything to avoid the current experience which is to simply have the page crash over and over before telling the user a problem repeatedly occurred!
Does anyone have any experience with this problem or any suggestions please?
Thanks so much.