Loading bar inconsistencies

[gjcope]

Description

I'm seeing different behavior with the loading bar when identical content is loaded from different sources. Not sure if this is a issue or not but thought I would share.

When loading from a local source (or CDN in the Glitch demo) it acts as expected and completes shortly before the model displays. When loading from our 3d API the bar quickly fills and there is an extended wait until something shows.

Live Demo

https://fierce-expensive-source.glitch.me/

Browser Affected

• [x ] Chrome
• [x ] Firefox

OS

• [x ] Android
• [ x] Windows

Versions

• model-viewer: v0.10.0

[elalish]

Interesting; can you tell me more about your 3D API? And have you tried both glTF and glb models?

[gjcope]

This is the Smithsonian 3D API. Right now we are just serving the glbs. It's not a roadblock for us, but just thought it was interesting that there was inconsistent behavior. Thanks for taking a look!

-Jamie

[elalish]

@cdata Since you wrote the progress tracking code, do you have any thoughts on why the behavior is not consistent?

[elalish]

I'm moving this to a discussion as I'm pretty sure this is a server thing rather than a model-viewer issue. @gjcope Are you still seeing this?

[gjcope]

@elalish No, with the v1.6 it looks like it is functioning as expected at the Glitch link above. The bottom example previously completed the progress bar well before it was actually done loading. Now it looks like it pauses midway and doesn't finish up til actually completed. Apologies, I hadn't been keeping tabs on this.

[elalish]

Great, thanks!

[grigs]

I'm experiencing similar behavior and it is reproducible when you throttle your connection to Fast 3G or lower. The progress bar completes before the .glb file has completed downloading which makes it seem like nothing is happening.

The behavior exists when loading="lazy" is set. If loading="eager" is set, the progress bar works as expected.

My theory is that the progress bar completes when the poster image finishes downloading when lazy is turned on.

I recorded a short video demonstrating the behavior:
https://www.loom.com/share/6c41ddea47ab43a29924d3c87c7f9d9b?sid=85bc7dc0-4d6f-4b0a-a2fa-6b021533198c

The CodePen I used in the video is here:
https://codepen.io/grigs/pen/WNmrogN

But I don't think there is anything special about the CodePen and you really can't reliably see the behavior it unless you throttle your connection and watch what happens in the network panel. The size of the model, the size of the poster image, and the speed of your network likely make observing this behavior difficult without throttling.

I was going to submit an issue for this, but because I didn't have glitch to share I dug into the discussions and found this thread. Please let me know if you'd like an issue opened for it.

[elalish]

sure, an issue would be great. And codepen is just as good as glitch - we're not picky. Github also supports pasting videos right into comments now!