Recently switched from sketchfab api to babylon js, and while everything went okay with the transition, there seems to be a problem on iOS devices. Whenever we try to run the project on an ios device, that device will keep refreshing itself and display the message "a problem repeatedly occurred … ". It works with no issues on Android devices and on PC, only mobile iOs does not seem to work.
My projects works this way:
one main scene with one 3d model and you can hover around it (so a 15mb model and a camera, no HDR, no lights);
while the users moves around the first model, we load the second model in the background in another scene (so that the user wont have to wait to download the model when they switch scenes). The second model is a bit larger at ~55mb.
when the user moves to the second scene or when the second model is finished loading, everything crashes.
Things I tried:
I’ve seen the memory leak issue here, and I deactivated any resizing and set the canvas to a static width and height and the problem still appeared.
Tried to lower the engine rendering quality, and I still encounter the problem.
Tried to split the second model into 3 smaller models
Instead of loading my 3 models, I decided to load 3 models from babylonjs model library (1 fish and 1 helmet ~ 100mb) and it will still crash
Tried loading all models into the same scene, instead of having 2 scenes
Tried having two engines (one for each scene)
After all of this, I tried recreating the scene in a playground, loaded all assets there, and it worked. Which made me believe the problem is that we’re using React as the front-end. If I run only the scripts, in a html+js page, without React, it works aswell.
Anybody else here who tried running a babylonjs app with react front-end and ran into similar problems?
Thanks in advance, and if needed I can also provide assets/code in private
EDIT:
Manage to reproduce the error in playground aswell. playground . babylonjs . com /#I1R7HB#13 (delete the spaces. Can t add more than 2 links as a new user)
first I load my building, and then I load 2 big models. If I load only one of the big models, it works without crash. If I load both of them, when they finish loading, the playground crashes on iPhone.
Video demo since I noticed sometimes it does not crash(but most of the time it does)
I have the same sort of issue without react, so this might just not be related to react. Sadly, I don’t have an answer (and didn’t investigate yet but will soon want to). I will follow and will happily soak-up the input from the big brains here @BJS Shouldn’t be too long:)
@Deltakosh I already had webgl2 disabled in safari by default. Also tried with it turned on, and still no changes @nogalo I got 3 textures with 4k resolution and one with 2k per model. I try to load 3 models, so 9 textures 4k and 3 with 2k.
Try setting your textures to 1k max, and try loading the app (would be good to just set them to 256 or 512 for starters, just check out if that’s the issue).
I had issues with iOS several times, and each time it was a texture issue. Basically, what I could gather from hit n miss tests so far is this. You can have one or two textures with 2k+ resolution on iOS. So it’s like if you have one texture in the scene and it’s 4k it’s fine. But if you have that same texture + 5-6 more with 1k, 2k, 512… it will not work. The “workaround” I found is if you limit textures to 1k (so far number of textures wasn’t an issue when I limit textures to 1k max), everything works.
Now, I might be wrong, but it’s worth trying. Also, I know that the stuff I said above is connected to memory and iOS limiting it in some way, but I don’t quite understand it.
This might enlighten some stuff, but I am still not sure what is going on though.
Of course, if it turns out that your issue is not connected to this. Ignore my existence here please
BUT, if it’s correct and it works for you. I understand that the visual quality must suffer (but for mobile devices, and iOS, I think that 1k is perfectly fine). So you basically need to sacrifice visual quality on iOS. So you could probably just serve low res textures just on IOS, while keeping high res on other platforms.
I am also talking like I am sure that this is your issue, but it’s because I am pretty sure xD
Good to know @nogalo. What about hdr textures in 2k. Would you say that having a small number of those (around 4) could become a problem? Thanks for your input anyway. All clues are welcome when debugging mobile (i hate mobile just because of that;)
I didn’t encounter any issue with hdr and iOS yet. But I try not to use high res HDRs, I didn’t have much need for them so far in my work. Also, I mostly use .env format as well, which rarely gives a big file (Kudos to Babylon team)
I also rarely have more than one HDR in the scene (sometimes two).
All of that might be a reason I didn’t have any issues so far. So if you find something out in your tests, be free to share.
NOTE: I cannot confirm, but using env on iOS (where you could have trouble with webgl2 features, because… APPLE I guess) MIGHT NOT WORK as it seems to use weblg2 features indeed. As I said, I cannot confirm,cause I have no idea what is actually going on in the env implementation (I will probably look into that more though)
Thanks @nogalo for your input has been very valuable for my case.
I started by removing my (4) 2K .dds and .hdr but nothing happened. So I looked back at my 4K textures (although these are just simple JPGs with a weight less than 2mb). As soon as I replaced those (2) textures…, Boom, it worked. So I tried to reinstate the above 2k dds and hdr and guess what, it still worked
So there must be something with iOS and 4k textures, yes? What is it? It can’t be the total load of the texture. Is it the size? I’m just curious. If anyone has an input on that, I would take it.
Edit: Typing this just gave me an idea. I’m gonna try with native retina or super-retina resolution and see what happens… will let you know.
Edit2: Ok, just replaced all oversized tex with max native retina resolution and works like a charm. I don’t know how much this helps the understanding of the overall thing (probably not much) but I just wanted to state here that this solved my problem. Tested on older (iPhone 6 and mini2 devices).
Hey @Domide_Bogdan , I was wondering if our ‘private’ discussion in your thread (apologies for this) helped you solve your issue or are you still stuck? Your problem can also be elsewhere and the community is sure willing to help with YOUR case…
Meanwhile, have a great day,
What I did is that I scaled down all textures to max native retina resolution (in width or height).
Note that (as nogalo stated) strangely forgetting 1 or 2 higher resolution textures ‘eventually’ will not break it. Strangely enough, I next also experienced that a native retina resolution texture that was quite complex and with a weight of ~1mb+ could still cause the problem. I had to resize this one to a 900kb texture (with a height of 900px) to ensure the scene would load consistently. From my test this is particularly true if the texture is required to initialize the scene (in my case, the texture was my default ‘dome’ environment).
Huh… google it;) No sorry, there are of course multiple retina resolutions. Not to speak about super retina. The resolution I find safe to use is the one for iPhone X which translates into 2436 x 1125 px. Other higher resolution such as for the MBP might work (but then might not). So I’d say it would be safe to keep with this max (renders ok on the size of a phone or pad)
Shouldn’t be too long:)
