Model-viewer: Crashes iOS Safari 12.4.1 when loading too large a model

[bansavage]

Description

Creating a model-viewer object with a .usdz file that is too large on iOS (version 12.4.1) Safari & Chrome causes the browser tab to crash. Open the link below on mobile & click the Launch 3D Viewer button. The tab will crash soon after. However, the model loads fine on desktop Safari & Chrome browsers.

Downloading the usdz file on an iOS device and attempting to open it with Quick Look reveals this error message:

Live Demo
https://www.wholelattelove.com/products/ecm-mechanika-v-slim#product-model

The mobile Safari console log shows: (404 error on js map)

Opening the model-viewer.js file shows this error:

Model source files:
https://static.wholelattelove.com/3dar/ecm/mechanika-v-slim/model.glb
https://static.wholelattelove.com/3dar/ecm/mechanika-v-slim/model.usdz

Model Viewer Scripts included:

<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
<script src="https://unpkg.com/[email protected]/intersection-observer.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ResizeObserver.js"></script>
<script src="https://unpkg.com/[email protected]/dist/fullscreen.polyfill.js"></script>
<script src="https://unpkg.com/@magicleap/prismatic/prismatic.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module" src="https://unpkg.com/@google/[email protected]/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule src="https://unpkg.com/@google/[email protected]/dist/model-viewer-legacy.js">
</script>

Browser Affected

• [x] Chrome
• [ ] Edge
• [x] Firefox
• [ ] Helios
• [ ] IE
• [x] Safari

OS

• [ ] Android
• [x] iOS
• [ ] Linux
• [ ] MacOS
• [ ] Windows

Versions

• model-viewer: v0.7.2
• three.js: r?? (unknown)

[Sanfam]

After a brief survey of the office, loading the model-viewer tag as configured above with the model provided fails (Tab crashes/reloads) on:

• iPhone 5
• iPhone SE
• iPhone 6S
• iPhone 7
• iPhone 10XR

It successfully loads on:

• iPhone 11 Pro

The models in question are admittedly quite large (not webview optimized yet) and appear to have 4096x4096 textures and is sized at 9.9MB for the GLB and 11.9MB for the USDZ. Loading smaller model files of ~5MB appears to work without issue. I'd suspect the failure stems from model viewer not handing the Excessive Size error gracefully.

[cdata]

@Sanfam thanks for reporting this issue. We don't have a specified upper limit of complexity, because the actual limit will depend on the device viewing the model. The reason why iPhone 11 Pro works is most likely because it has the most system resources available.

Unless we can confirm that this is a case of a bug in <model-viewer> or Scene Viewer (which it doesn't seem to be), my immediate recommendation would be to simplify the model.

Dropping the model into https://vr.google.com/scene-viewer-preview I am seeing multiple warnings to this effect:

[Warning]
The number of triangles in the glTF exceeds the limit recommended by the Scene Viewer specification, which is a maximum of 100000 triangles.
/accessors
[Warning]
The resolution of the image at index 0 in the glTF exceeds the limit recommended by the Scene Viewer specification, which is a maxiumum resolution of 2048 x 2048.
/accessors
[Warning]
The resolution of the image at index 1 in the glTF exceeds the limit recommended by the Scene Viewer specification, which is a maxiumum resolution of 2048 x 2048.
/accessors
[Warning]
The resolution of the image at index 2 in the glTF exceeds the limit recommended by the Scene Viewer specification, which is a maxiumum resolution of 2048 x 2048.
/accessors

Simplifying the mesh and reducing the size of the textures would probably go a long way towards improving device compatibility in this case.

[Sanfam]

@cdata Thanks for the incredibly useful tool! Your assessment basically mirrors mine;

Though it's outside of the scope of the project, As new users (such as myself) begin trying to adopt these technologies, It would certainly be helpful for the model-viewer docs to reference any standards (whether official, hard limits or merely "agreed upon" conventions) pertaining to the supported model formats.

Based on what's been revealed, I think part of the problem as I see it is that model-viewer does not cope when the device its operating on hits its resource limits. Adding a graceful failure path (eg. a notice reading "This model failed to load!") would be worthwhile from a UX perspective.

[cdata]

@Sanfam thanks for the feedback on this. I agree, we could probably do a better job in our docs and in our built-in UX. I have filed https://github.com/GoogleWebComponents/model-viewer/issues/913 and https://github.com/GoogleWebComponents/model-viewer/issues/914 to cover these topics separately. Please chime in on either issue if you have specific feedback!

Also, please let me know if you think that it's safe to close-out this issue, or else if there is something actionable for us here.