Problems on Chrome Mobile since December 7th, 2023

[TiagoSilvaPereira]

Hello, I hope everyone is well!

I’m reporting this bug because I believe other people may experience it. I don’t think the problem is with Babylon, but rather with Chrome’s WebGL implementation. But I also write hoping that someone has some clue as to what it could be.

Since yesterday, some users of my website (which uses Babylon.js v5.50.1) have been experiencing a strange problem when accessing through Chrome Mobile (Android, latest updated version: 120.0.6099.43).

It doesn’t happen to everyone (the majority of users are using it normally with chrome), and it’s also not happening to a specific model or specific Android version. I also have a device which presents the same behavior (Android 9 - Moto G6).

When accessing the site through Chrome, some mesh faces do not appear. The problem is random; sometimes everything works when reloading, but most of the time, it occurs. The site continues to function normally in other browsers on these same devices (Opera, firefox, etc).

There are no errors nor warnings in the console. Apparently, the meshes exist in memory. They are simply not drawn in the canvas. I tried executing code which manipulates those missing meshes, and the code still works (I can apply textures, etc). It just happen that the meshes are invisible.

I’ve debugged it in several ways, but can’t figure out the problem. No one had reported it before. It specifically started yesterday, with some reports from my users (while most of my users keep using the website normally).

Here is an image of a normal working scene:

And now some images with the bug happening (notice missing elements like the wood table or some polygons from the mug):

Even stranger is that, apparently, if I reload the page several times, at some point the site loads normally, and from that moment on, the problem stops occurring, unless I open a new browser tab (the which reinforces my theory that the problem is browser-related, not Babylon).

Anyway, I leave my report here, perhaps someone else has noticed the same problem recently, and also in the hope that someone knows what could be happening.

Grateful for the attention!

[Evgeni_Popov]

It seems that when this doesn’t work, your cup displays the back faces instead of the front faces… It could be the same thing with the table: if it’s a single plane, displaying the back faces would display nothing, since there are no back faces.

When the display is corrupted, you can try forcing backFaceCulling = false on the materials and see if that solves the problem.

[TiagoSilvaPereira]

Thanks @Evgeni_Popov. I tried it but with no success… Now it shows the back faces, but still, the skybox, the table, and some faces from the cup are missing:

If I keep reloading the page, there are moments it draws the mug correctly but still misses the skybox and the table. Sometimes it draws everything except for the mug faces.

It seems to be a weird problem with a specific version of Chrome, as the site has been working for years, and on most computers and cell phones, it continues to work usually (not to mention that it works perfectly on other browsers).

For now, I’m advising people with problems to use another browser, as a minority reported the issue, but the vast majority can use it normally.

[mawa]

That’s very weird We are more used to this sort of crap with iOS and fancy Safari
Looks to me like something is unhealthy with this version update. I suppose question is: How much time are you willing (or forced) to spend on trying to fix it until it eventually recovers from a later update? All I can think of at this point, for the debug: Did you try removing the skybox? I suppose the skybox is also your env, is it? I would actually try removing it and check if at least the meshes are drawed correctly. I’m afraid not there’s not much more I can help you with here. All I can say is I’m sorry you have to go through this Try not to take it too hard on you and meanwhile, have a great weekend

[TiagoSilvaPereira]

@mawa Thank you very much, I will test without Skybox. I also opened an issue directly with the Chrome developers:

https://bugs.chromium.org/p/chromium/issues/detail?id=1510149

Have a good weekend!

[mise]

yeah I have the same issue on Brave for Android right now. Half of the meshes in my game Tuggowar are not rendered. Chrome works right now, but as you say it may be random.

This kind of ‘crap’ as someone here called it is one of the reasons browser gaming is still not a good idea in practice. (Of course not blaming Babylon at all.)

I don’t think it was caused by a Babylob update, but I did update from 6.x to the latest version earlier this week (I can check which one if need be).

Thanks for creating a bug report!

[TiagoSilvaPereira]

@mise, it’s nice to know I’m not alone on it. Would you mind commenting on the bug report to help Google pay attention to it?

[mise]

Are you sure it’s not fixed by reverting Babylon? I’m not at my dev place right now.
Also: I think you can install older Chrome versions to see if it’s Chrome. I will try that tomorrow.

[TiagoSilvaPereira]

@mise I’m using Babylon v5.50.1 (I didn’t upgrade to 6.x yet), and yes, downgrading Chrome solves the problem (so I’m pretty sure the issue is with the latest Chrome upgrade). Thanks for your help

[Matthew1]

I have this issues as well:
Chrome 120.0.6099.43
Android 14; Pixel 8 Pro

Getting started Chapter 2 texture: https://playground.babylonjs.com/#KBS9I5#71
Initial load shows this:

Refreshing shows this:

Refreshing shows only the box, sometimes if shows the roof, but not the box. Opening in incognito, shows nothing initially, and then on refresh only the box.

Threejs chair, loads and shows fine:

But loading in babylonjs sandbox, missing the feet:

Clicking and toggling things in the debugger, I can sometimes get the feet to show, but seems pretty random.

Enabling edge rendering shows the feet:

Tested on my wifes pixel 7 pro Chrome 119, everthing seems to works fine.

[Matthew1]

Passing disableWebGL2Support: true in to the engine fixes the issues (using webgl1)

It seems that if you disable the first mesh wait a few seconds and then the other meshes appear.
Then enable the first mesh.

[mise]

Thanks for your effort!

Can we get some more eyes on to this?

• is a workaround possible in WebGL2?
• if this is truly a bug in Chromium, does the Babylon crowd have a more direct link to the Chromium team?

[mawa]

@mise

if this is truly a bug in Chromium, does the Babylon crowd have a more direct link to the Chromium team?

Don’t know. Anything Yours can do to accelerate the process since definetely looks like a bug from latest chrome update for mobile? cc @RaananW

[TiagoSilvaPereira]

Hello, I hope everyone is well… I would be very grateful if those who had the problem could comment on the Bug Report I opened about this problem:

https://bugs.chromium.org/p/chromium/issues/detail?id=1510149

@Matthew1 @mise

[xiehangyun]

I once had an issue where loading textures was unsuccessful, and the debugger found that the network completed after the request, but the then function was not called normally. The then function is triggered only after any operation is performed on the scene.
This issue does not resolve by refreshing the page. You must close the browser and reopen it. I thought it was the browser and didn’t investigate further.

[sebavan]

Seems to be related to chrome having a bug with UBOs…

You can use scene.getEngine().disableUniformBuffers = true; to disable them on your experience.

I will add a way to auto disable them in 120+ chrome mobile versions… and ping the chrome/edge teams as well

[sebavan]

The workaround will be added to the next Babylon version Disable UBOs in Chrome mobile... by sebavan · Pull Request #14603 · BabylonJS/Babylon.js · GitHub

[sebavan]

I added to the chrome issue the right list of ppl to fix it

[TiagoSilvaPereira]

@sebavan thank you very much. I’ll wait for the release with the fix and take the opportunity to upgrade to 6.x now.

[sebavan]

Let me release a patch later today