Black models on some devices

[MikeFesta]

Description

We recently deployed model-viewer for a client and have been getting some reports of black models. The client was able to show me the issue over video chat and provided OS (Windows 10 Home 1903) + browser (Chrome 80) info. They were using a laptop, but I don't know the make and model. I had them go to modelviewer.dev and I saw that astronaut was black as well.

I've been trying to reproduce the issue so that I can get more details, but I haven't been able to yet. Posting here in the hopes that others are having the same problem. Other issues, such as #679, look to be similar, but were last updated almost 6 months ago.

The only time that I've seen black models was in development when the hdr environment image path was wrong. Based on that, I guessed that perhaps the image wasn't getting downloaded fast enough, so as an attempted workaround I added this js code to try to get the browser to re-download and reset it, but it doesn't seem to help.

function reloadLighting() {
  var viewers = document.getElementsByTagName('model-viewer')
  if (viewers.length > 0) {
    var viewer = viewers[0];
    viewer.addEventListener('load', function() {
      var imgSrc = viewer.getAttribute('environment-image');
      var background = new Image();
      background.src = imgSrc;
      viewer.setAttribute('environment-image', imgSrc);
    });
  }
}

// Event Listeners
window.addEventListener('load', function() {
  reloadLighting();
});

Note: I've also had reports of black textures on an "older LG phone" and reports that our homepage, https://www.3xr.com (with 3 models) causes an Awh Snap crash in chrome on an underpowered mini conference room PC.

Live Demo

The client's website where this is live currently (2/28/2020) is running an A/B test, so the 3D model link doesn't always appear. Here's the link: https://helixsleep.com/products/midnight-luxe?variant=queen

The page that actually contains the model viewer is in an iframe, here:
https://www.3xr.com/asset/view/w4cc76styjyf/web

Here is another demo page here with more models. It has the same code that the client is using to open the iframe in a modal: https://www.3xr.com/demo/helix

Note: this works on most devices, and I haven't been able to see black models on the machines that I've tested, including a VM with the same Windows + Chrome versions as reported.
Screenshot:

Browser Affected

• Chrome - 80.0.3987.122 (as reported to me)
• Edge
• Firefox
• Helios
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows - Home 1903 - 18362.6.7 (as reported to me)

I've asked the client to send me the output of chrome://gpu and will add it as a comment when I have it.

Versions

• model-viewer: v0.9.0 (loaded from https://unpkg.com/@google/model-viewer/dist/model-viewer.js and https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js)
• three.js: ??? - I don't see three.js loaded in the network tab on the debug console.
  This also happens on modelviewer.dev with the astronaut.

[cdata]

@MikeFesta thanks for the report. Three.js is bundled with <model-viewer> so will probably be r113 (since that is what we ship with v0.9.0).

We'll look forward to the results from chrome://gpu

I speculate that this could have some overlap with #1043, which shows a <model-viewer> page crashing in Chrome on Windows 10. But, until we get chrome://gpu reports, it will most likely challenging for us to reproduce this issue.

[MikeFesta]

The report is quite long and was unformatted if pasted here, so I put it in this google doc:https://docs.google.com/document/d/1kygiUoIHqOd2t8szf6i2D7z-IPXl39vGg4-HtQ3HwLY/edit?usp=sharing

Here's a preview screenshot

[cdata]

@MikeFesta if you just click the "copy to clipboard" button, it will produce an abridged report that is easy to paste here. Here is mine, for example:

Data exported | 2020-02-28T20:16:03.952Z
-- | --
Chrome version | Chrome/80.0.3987.122
Operating system | Mac OS X 10.15.3
Software rendering list URL | https://chromium.googlesource.com/chromium/src/+/cf72c4c4f7db75bc3da689cd76513962d31c7b52/gpu/config/software_rendering_list.json
Driver bug list URL | https://chromium.googlesource.com/chromium/src/+/cf72c4c4f7db75bc3da689cd76513962d31c7b52/gpu/config/gpu_driver_bug_list.json
ANGLE commit id | 362168eb695d
2D graphics backend | Skia/80 97c9a95908bc8c7a6794259b35f366a3291e2d0f
Command Line | /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --flag-switches-begin --flag-switches-end --enable-audio-service-sandbox

[alon-grinshpoon]

Getting the same issue with some .glb files looking completely black (example .glb file here).

Preview Tests

Texture is not shown in model-viewer even though it is shown when previewing it on tools like https://gltf-viewer.donmccurdy.com/ or https://sandbox.babylonjs.com/.

Previewing it with Three.js (https://threejs.org/editor/) also looks black. But can be fixed by adding a DirectionalLight to the scene (on the top menu bar: Add -> DirectionalLight)

File Origin

I encountered this issue when using Windows Paint 3D, importing a 3D file from their 3D library, and saving it as .glb. These .glb files look completely black with model-viewer.

chrome://gpu Output

Data exported	2020-04-24T17:09:49.239Z
Chrome version	Chrome/81.0.4044.122
Operating system	Windows NT 10.0.18362
Software rendering list URL	https://chromium.googlesource.com/chromium/src/+/44f4233f08910d83b146130c1938256a2e05b136/gpu/config/software_rendering_list.json
Driver bug list URL	https://chromium.googlesource.com/chromium/src/+/44f4233f08910d83b146130c1938256a2e05b136/gpu/config/gpu_driver_bug_list.json
ANGLE commit id	91c39dae9a51
2D graphics backend	Skia/81 5e3098d8fad5b3a6fa9c70d6438f416eec201db7
Command Line	"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --flag-switches-begin --flag-switches-end --enable-audio-service-sandbox

Please help!

[elalish]

Any time the model is black until a directional light is added, we have found it is nearly always because the AO texture channel is completely black. Apparently some exporters do this by default, but it is an error.

[ymongo]

Hi there. Any chance to find a out of the box way to fix black models on android? Everything I look from model-viewer on my Samsung j5 using chrome v85 is black, except for the aquarium scene from the related issue.

[elalish]

@ymongo When you say everything, do you mean the pages at modelviewer.dev are all black models as well? Can you please provide links to at least one page that is black and one that is not so I can try to understand what's happening?

[ymongo]

Hi elalish,

Thanks for your answer. modelviewer.dev astronaut model is black on my phone, as well as some three.js models from tutorials, but the webgl aquarium page is fine.

Some screenshots here: https://photos.app.goo.gl/njATBJF4iRNE7TWm9

edit: van customizer now renders black as well, i'm sure i tried it with success on mobile not far ago

[elalish]

@ymongo Can you please be more specific and add links for each of the pages you reference? I don't know where the "aquarium page" is, nor which tutorials you're referring to, nor what the "van customizer" is. Also, your screenshots link is an empty album.

[ymongo]

Sorry it seems I missclicked and deleted the screenshots, now restored.

renders black model on Android:
https://modelviewer.dev
https://tympanus.net/Tutorials/3DModelCustomizer/
https://osorina.github.io/3d-headphones/

renders properly:
https://webglsamples.org/aquarium/aquarium.html

[elalish]

@ymongo It sounds like you have probably found a GPU driver issue with three.js, so you might try filing an issue on their Github. The only one of those sites that even uses model-viewer is your first link, and given the other trouble you have, it seems to be problem that's below our codebase.