App crashes on mobile and safari

Hello !

I’m currently working on an app that uses babylonjs v5.8.2 and that works well on chrome desktop.
However it doesn’t work on safari for IOS nor chrome for Samsung tablet. (Works well on chrome for my Huawei p20 pro).

Sometimes the app just crash when opening it and sometimes it just loses the WebGL context and doesn’t display anything on the canvas like the following :
image
Or sometimes it just displays an error where it says that WebGL is not supported.

Is this somehow linked to memory leak or something like that ? I saw that some bug fixes have been made here specificaly for the GLB loader to handle memory leaks.

Sorry for not having a playground for repro, I’m mainly here for asking for help or tips if you already had same issue, it’s pretty hard to do a repro from a playground as the app is kind of heavy. What I can say is that at the beginning of the app I load a glb file and apply some PBR materials on it, and it seems like the crash comes when we reach that part.

Hi,
Did you try it with a former/legacy version or is it a new app?
Did you check on the size of your textures or replace them with much lower res texture or no textures at all?
If you cannot do a repro, can you at least share the specs of your mesh (import method, weight, number of vertices, faces, draw calls…). Also extend a little on how the app is made. Using NPM packages? Is it a react or vue.js app? Are the materials imported or created? May be share a link to the desktop version?
I don’t think anyone will be able to help here fast with just the information above, I’m sorry…

This definitely looks like a memory leak to me generating a context lost :slight_smile:

Smaller textures should help in this regards.

When you say smaller textures do you mean reduced resolution ? Or by weight ?
I’m asking because I use webp texture which are really lighter but as they are lighter we use Bigger texture (2k).

Also it’s a vue app. I import like between 5 to 6 glb at the start, they are like a few mb. (less then 10 each) It seems like it’s when I’m starting to import the glb that everything crash.

The meaning of smaller texture on iOS downwards compatibility with iPhone X means they should not be of a dimension bigger than native retina 2436 x 1125 px. Beyond this, textures should not exceed about 1mb. However this is of course not true with Safari on desktop, so I’m not too sure that this would be the only issue here.
Another point is compatibility with env texture. I believe the glb is loaded with materials so it could be the textures or materials. But it could also be a problem with the loaders. You would also need to check on compatibility of webp textures (can’t tell you, never used them so far).
Others might know better now that we have a bit more information…
Meanwhile, have a great sunday :sunglasses:

Be happy you have some console info. The best ones are where the page just reloads suddenly.

https://developer.apple.com/documentation/xcode/identifying-high-memory-use-with-jetsam-event-reports

When that happens, its generally due to jetsam ( high watermark flavor ) and there is 0 insight into it for safari. Fun times, been trying to find a memory pattern the jetsam gods like for over a year now in our app

High watermark is the best because the system comes around at random times asking for memory for reasons unrelated to you, which your app has no idea about. Not that you actually blew some hard, documented limit. If you don’t give it up in the next milliseconds, it kills you :frowning:

1 Like

So @sebavan @mawa I updated the textures I use, and it seems like it solved the problem on the Samsung tab (which also is a galaxy A tab , a low end tab)
I haven’t tested it yet on safari or safari mobile but I hope it will do the trick.

However I reduced the texture from 2048 to 256 so it really changed the quality of the rendering.

Can you give me some informations about why big resolution textures can create memory leaks ?
Are there some tricks to avoid that and to optimize the usage ?

No, the fact that it’s working might just be incidental. You cannot have just 256px textures even on mobile. This will look terrible in most cases. I mean it’s ok for smaller objects but the limitation is certainly not that low. Try it on safari, may be use the solution for debug provided by @br-matt. I have the feeling there’s something else behind this.

I will do more research but what is sure is that it’s definitely something linked to textures or material because the crash happened either when I create the PBR materials by using the textures or just a few frame after that.
So yeah lower resolution may be giving side effect that “solves the problem”.