Many Performance Issues With 4.2 and iOS/Mobile

@Cedric:

Up until last week, we were on Babylon v4.1.0-beta.6. We then upgraded to the latest version, which at the time was v4.2.0-beta.10. We noticed a problem in our logs and discovered that on iOS and some mobile devices, there’s a problem related to the resize handler that seems to be triggered when we rotate the device or do scrolling. If we comment out the Babylon resize in thinEngine.ts the problem goes away. It’s been difficult to isolate the issue and create an example of the problem, but we created a POC link with each version. This is now our live version, with Babylon reverted back to v4.1.0-beta.6.

https://www.nike.com/u/custom-nike-air-force-1-by-you-10000831/1602696686588?whitelistUser=GEMINI&overrideFeatureFlags=cxpB16_N3DCUST-4_show-3d-experience:true

And this is with Babylon v4.2.0-beta.10

https://www.nike.com/u/custom-nike-air-force-1-by-you-10000831/1602696686588?whitelistUser=GEMINI&overrideFeatureFlags=cxpB16_N3DCUST-4_show-3d-experience:true,gemini_viewer_select:true&geminiViewer=babylon4_2

NOTE: These are identical codebases with only Babylon versions changed.

To use the customizer, scroll down to the button that says “customize”, and you can interact with various parts to swap colors or materials.

We are seeing the following issues, which may or may not be related when using the latest version:

  1. Safari 14: If you open the page on iOS Safari 14 and rotate your device, there is a context lost error and WebGL crashes.
  2. Safari 14: When the app crashes, we’ll see calls to load KTX files with malformed URLs. These will be re-appending the KTX extensions, so we’ll see something like “myfile-dxt.ktx” changed to “myfile-dxt-dxt.ktx”.
  3. Safari 14: Open the page, and choose “customize”, then “done”, then “customize” again, then “done” again, and then scroll the page, you’ll see the error that says “a problem repeatedly occurred”. This seems related to the “context lost” issues but is also forcing the page to refresh multiple times. Using v4.1.0-beta.6 the problem cannot be reproduced.
  4. All mobile versions: there is a noticeable slowdown when scrolling the page affecting many browsers and devices.

@Cedric could you have a look ???

Also can you guys check with latest build?

Also @Alex_B is it reproducible in the playground ? cause in your app it is pretty hard to troubleshoot :frowning:

We haven’t been able to reproduce this in a playground, unfortunately. We agree it’s difficult to troubleshoot. We’ll try updating to the latest version now…

Also can we get two versions? One with webgl1 and one with webgl2?

For what it worth I cannot repro any issues:(
I’m on iPhone 11 Pro with ios 14

1 Like

We can reproduce on actual devices as well as Browserstack.

This version will be Babylon with WebGL 1 forced.

https://www.nike.com/u/custom-nike-air-force-1-by-you-10000831/1602696686588?whitelistUser=GEMINI&overrideFeatureFlags=cxpB16_N3DCUST-4_show-3d-experience:true,gemini_viewer_select:true&geminiViewer=babylon4_2_webgl_1

Maybe I’m missing a step…I go to your link, click customize and rotate the phone right?

Ok doing the customization twice makes it crash so repro confirmed for this one

I can repro on ios 13.7 as well

It kind of looks like a memory leak to me :frowning: so we ll dig more in the morning (europe one :slight_smile: ) with @Cedric

We also suspected a memory leak and looked at our code to see if we could find one. When reverting versions we saw the issue go away but that doesn’t mean it’s not on our end as well. Could be a memory leak is leading to an issue in Babylon even though it’s not exactly a Babylon issue. We’re still digging into it as well. Thanks for looking at it!

Can you repro on MacOS as well ? I am trying to see from there :slight_smile:

I’m working on creating videos for #1 and #2, but here is #3 and #4.
https://nike.box.com/s/xhhgw2vwynxjfu0ydulyf9fjp5g4o7dk

We can repro on MacOS using the browser emulator in Safari, then triggering a device rotation. I am in the process of upgrading to Catalina so I can do it on my machine as well :slight_smile:

looks more and more like a leak unfortunately :frowning:

The hard part now is that to troubleshoot a leak I would usually bisect the code per features to figure where is leak is coming from. Do you think you could share at least the basic model in the playground and maybe your dispose code ??? to see if we could repro ?

We can try to set up a playground tomorrow to try and isolate the issue from the rest of the code. The scene is not disposed and recreated when clicking “done” so there shouldn’t be a memory leak from create/dispose/create…etc…