Three.js: Canvas flickers on recent versions of Chrome for Android

[FonzTechBackup]

Three.js version

• [x] Dev

  Browser

• [x] Chrome

  OS

• [x] Android

The problem is simple: on recent versions of Chrome for Android, canvas created by three.js always flicker.
I have a Huawei P8 Lite, I always update apps on my device, currently I have the 53.0.2785.97 version of Chrome. I also checked on another updated LG device.
I also tried rolled-back version of three.js, like r70 and r78. Still the issue appears.

This flickers: http://www.binariodue.it/tour/index.php
Even this simple code: https://msdn.microsoft.com/it-it/library/dn479430(v=vs.85).aspx

This does not happen on version 50.0.2661.89.
Works fine on other platforms.
WebGL also works fine, so the problem is three.js.
Anyone else is experiencing this?

[mrdoob]

Unfortunately I haven't seen this and I don't have a Huawei P8 Lite to test myself.

[sam-g-steel]

I notice flickering and funny shadow mapping artifacts when running on my nexus player... Perhaps this is related...

I'll see if i can provide more info tonight.

[FonzTechBackup]

This is what happens:
https://www.dropbox.com/s/ygxgw23f76sho2k/threeJS_Bug.mp4?dl=0

I think there is not bug in my code, expecially because even this simple one doesn't work!
https://msdn.microsoft.com/it-it/library/dn479430(v=vs.85).aspx

[mrdoob]

@FonzTech Do all the examples flicker? https://threejs.org/examples/ It would be helpful to know which ones flicker and which ones do not.

[FonzTechBackup]

This one flickers:
https://threejs.org/examples/#webgl_materials_texture_tga

I think something is wrong with materials...

[mrdoob]

Is that the only one that flickers?

[FonzTechBackup]

No. More examples, like "decals" and "octree" also flicker!

[DerSommer]

Same here. I also have a website in development which depends on threejs and testing it in chrome with a p8lite leads to flickering geomety and texture. It seems that the slightest movement causes this flickering effect on objects with a material assigned, Other Smartphones using iOS or windows phone have no problems with displaying the objects, but I can't test if this happens on every Android device.

[FonzTechBackup]

I have tested my website on:

• Huawei P8 Lite (Android 6.0), LG Bello II (Android 5.1.1) and Samsung GT-I9301 (Android 4.4.4) using the latest version of Chrome 53.0.2785.124. It flickers when the first material is applied, then become all white if the material is updated. Downgrading my Chrome version (uninstalling updates) to 50.0.2661.89 solves the issue, but nobody downgrade their phone to just see correctly our websites.
• iPhone 6 (iOS 10) does not show the problem. It works flawlessly using Safari browser.

Since WebGL works correctly in Chrome, I think it's a three.js problem!

[DerSommer]

I tested on iPhone 5 (iOS 10), iPhone 6 (also iOS 10), Lumia 950 (Windows Phone 10). They work fine.
At the moment P8 Lite with Chrome 53.0.2785.124 flickers. Other models will be tested the next days.

[mrdoob]

Downgrading my Chrome version (uninstalling updates) to 50.0.2661.89 solves the issue, but nobody downgrade their phone to just see correctly our websites.

Since WebGL works correctly in Chrome, I think it's a three.js problem!

Well, if downgrading Chrome fixed the issue, I'm not sure it's a three.js problem...

[mrdoob]

/ping @kenrussell

[kenrussell]

It sounds to me like a bug in the graphics driver on these phones. Please provide about:gpu information from the phone (you'll need to connect it to Chrome DevTools to copy/paste the text from your device). Maybe we can find a similar device. We don't have the Huawei P8 Lite in house as far as I know.

[FonzTechBackup]

I suspected about some kind of bug in ARM processors... I cannot be sure, but I tried with BlueStacks (a Android emulator for PC) on my computer and three.js works correctly. It happens only on phones!
I don't have a x86 Android phone, otherwise I could have tried it!
These are the about:gpu pages in both Chrome versions (the older and the newest):
Without Bug: https://www.dropbox.com/s/wcd02z18k9mcrwe/WithoutBug.htm?dl=0
With Bug: https://www.dropbox.com/s/4utchbnbbjsk0zl/Bug.htm?dl=0

[kenrussell]

First, sorry about the regression. I don't know how we would have caught this in house; we don't have any of these devices on our automated testing waterfalls.

It looks like http://crbug.com/651470 was filed about this and someone triaged it. Note that the bug appears to be fixed in Chrome Beta (54), available on the Play Store.

It would be most helpful if you could test on advance versions of Chrome on Android and file any bugs you find. You can email me directly at kbr at chromium.org with bug IDs. All of the Chrome release channels are available on Android now: Beta, Dev, and Canary. The earlier you can catch the bug (i.e., Dev or Canary), the easier it will be for us to fix it.

Thanks for your help.

[FonzTechBackup]

Thanks for the reply. I have tried the Beta 54 version, and three.js works like it should. Thanks for the patience!