"Couldn't load Object" when using a src Firebase URL

[ebrayton]

Description

I'm using Firebase for my app, but setting up model-viewer to reference the storage is proving problematic.

When attempting to launch Scene Viewer on Android I get "Couldn't load Object - Looks like there's something wrong with this object."

The model loads fine when the URL is relative or points to some other external source. When I include an ios-src, iOS correctly handles the Firebase urls and displays the model.

To simplify and to make sure it wasn't my model, I uploaded the Astronaut and replicated a basic setup on glitch. A snippet like this should replicate the issue (spaces added to the URL so you don't have to scroll horizontally):

<model-viewer src="https://firebasestorage.googleapis.com/v0/b
                   /<proj>.appspot.com/o/model%2FAstronaut.glb
                   ?alt=media&token=<token>"
              camera-controls ar
              interaction-prompt="auto">
</model-viewer>

Live Demo

Demo on Glitch

Browser Affected

• Chrome (tested on version 76.0.3809.132)

OS

• Android (tested on version 9)

Versions

• model-viewer: v0.6.0

[cdata]

Hey, thanks for thorough description of the problem @ebrayton . This is a problem with Scene Viewer (the native app that <model-viewer> launches on Android). I'll forward the report to that team and let you know if they think it's a problem on their side.

[ebrayton]

Thank you. Let me know, too, if there's any other information they need.

[vortice3D]

Hi everybody:

Same behavior here, when trying to test the web component from my own (secure) server:

Debugging the web page by means of "Remote devices" tool on desktop Chrome I get:

model-viewer.js:57191 Uncaught (in promise) TypeError: fullscreen error
    at HTMLElement.[onARButtonContainerFallbackClick] (model-viewer.js:57191)
    at HTMLDivElement.ARModelViewerElement.<computed> (model-viewer.js:57058)

Any help on this will be welcome!

[nicolocarpignoli]

Same here, I have that problem either with glb/gltf models hosted on external source (github.io) and local

[arturomarruffovegas]

I'm having the same problem when using my Firebase Storage repo. The only way I managed to load the GLB model from there was changing the rules so everyone could access the file; obviously I cannot leave it like that. Any progress on this?

[cdata]

Hey folks, sorry for letting this fall off the radar. We determined that this is actually a <model-viewer> bug. We are accidentally breaking URLs that have sensitive query strings when we pass them into Scene Viewer.

[arturomarruffovegas]

In that case, is there any way to fix this? Enviado desde mi iPhone

…

El 24 oct. 2019, a la(s) 11:53, Christopher Joel ***@***.***> escribió:  Hey folks, sorry for letting this fall off the radar. We determined that this is actually a <model-viewer> bug. We are accidentally breaking URLs that have sensitive query strings when we pass them into Scene Viewer. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[cdata]

FYI we have opened #855 to resolve this issue. If anyone has time, it would be really helpful if you could test out this PR to make sure it resolves the issue for you.

Try it out by using this build:

<script type="module" src="https://github.pika.dev/googlewebcomponents/model-viewer/pr/855"></script>

[cdata]

BTW once we have sorted this out, we plan to release v0.7.2 with this fix.

[cdata]

A fix for this has been released as v0.7.2. Please ping this bug if you are still having problems and we will re-open to investigate!

[ebrayton]

Confirmed v0.7.2 working for me. Thanks!

[theranbrig]

I ran into this issue today. When using a Firebase stored GLTF file it would not load. However, in the corresponding USDZ file worked in Quick Look. This is only with Firebase. When using files hosted in S3, both are working.

[cdata]

@theranbrig we fixed this one a while back. If you are experiencing it, you may be using an old version or <model-viewer>, or else there is a new bug. Can you share an example URL that I can try to confirm that your file is failing to load?

[theranbrig]

@cdata I am on version 0.8.1. Here is a file I recently uploaded:
https://firebasestorage.googleapis.com/v0/b/yzed-88819.appspot.com/o/images%2FGLTF_DOWNSIZED_JUMPERJACKET_V5.gltf?alt=media&token=a5c77518-0b0d-4980-839c-c951c270f153

[cdata]

@theranbrig I tried throwing together a simple test case with your model so that I can try this out for myself. Unfortunately, the CORS headers are too restrictive and I cannot load the model (see http://lopsided-motion.glitch.me/fb-eg.html).

Would it be possible for you to put together a test case like that w/ sufficiently permissive CORS so that I can diagnose the issue you are seeing?

[jpeltone]

update: I was able to see this model successfully in the preview-tool: https://firebasestorage.googleapis.com/v0/b/ardom-ee02f.appspot.com/o/models%2Fwall-lamp.zip?alt=media&token=14865e06-29e4-4397-93c4-5e4b085b7263 when uploading the zip file but if I upload the files in the zip to the preview tool separately it does not work and it does not work from Android app code either but gives the same error as when accessing the gltf file.

[jpeltone]

update 2: I packed the file to glb and uploading it to the preview tool works and shows fine but still does not work from Android app.

File: https://arvr.google.com/scene-viewer/1.0?file=https://firebasestorage.googleapis.com/v0/b/ardom-ee02f.appspot.com/o/models%2Fout.glb?alt=media&token=a4839672-3d8b-436b-9c37-ad088d1fe3e5

related code:
Intent sceneViewerIntent = new Intent(Intent.ACTION_VIEW);
sceneViewerIntent.setData(Uri.parse("https://arvr.google.com/scene-viewer/1.0?file=https://firebasestorage.googleapis.com/v0/b/ardom-ee02f.appspot.com/o/models%2Fout.glb?alt=media&token=a4839672-3d8b-436b-9c37-ad088d1fe3e5"));
sceneViewerIntent.setPackage("com.google.android.googlequicksearchbox");
startActivity(sceneViewerIntent);

Another finding: the Help link in the online preview tool does not work at least for me but gives: developers.google.com refused to connect.

[tpsiaki]

This is because the & in your intent is being treated as part of the intent url rather than part of the file url, and the %2F is url decoded when the file parameter is read out the intent. You need to url escape the & with %26 and the % with %25.

This works for me:
https://arvr.google.com/scene-viewer/1.0?file=https://firebasestorage.googleapis.com/v0/b/ardom-ee02f.appspot.com/o/models%252Fout.glb?alt=media%26token=a4839672-3d8b-436b-9c37-ad088d1fe3e5

[jpeltone]

Great, thanks, I missed that when just copying the link. I still need to check how getDownloadUrl() in Firebase StorageReference manages url escaping and try it out.

[Sheldonfrith]

Hi, are we sure this issue hasn't resurfaced? I am getting the same issue, urls with query params (for example: https://firebasestorage.googleapis.com/v0/b/sharpar-io.appspot.com/o/DELETEME%2Fgithubexample.glb?alt=media&token=61e28706-0488-4a24-82d7-9bde2d66f611) are throwing the 'couldn't load object' error in scene viewer.
I understand that it is an issue with the formatting of the url... however I've played around with url-encoding various parts of the 'src' attribute directly and all I get are 403 errors (because I am url-encoding parst of firebase's authentication token query).
This leads me to believe that the problem is in the model-viewer code itself, in how it is formatting the intent sent to scene-viewer.

[elalish]

@Sheldonfrith Can you link to your page where this is not working? That would allow me to debug. Also, if you use webXR mode instead of scene-viewer does it work?

[Sheldonfrith]

@elalish This is a page with one of our models from firebase storage (switching away from firebase soon because of this issue, but currently it is still using firebase so you might be able to debug it): https://authentique.co/products/purple-resin-tray

[elalish]

@Sheldonfrith It looks like you've switched to using webXR mode now? That's what I get when I try and it's working, though the model seems to be at an enormous size. Did you check that it's properly modeled in units of meters, as that's what glTF requires?

[naiveHobo]

Any updates here? Facing the same issue, I hit CORS when I try to access a .glb/.gltf file on firebase storage.

[elalish]

@naiveHobo I'm not sure you're seeing the same problem, and this is a pretty long, closed thread. Maybe time to start a new issue with your own link and repro steps. You will need proper CORS headers from wherever you're serving from, so if Firebase doesn't do that or allow it to be configured, you may need to use a different server.

[holaworlds]

Hi, I don't have much time left to make major change in DB (I am using Firebase), do you have any recommendations for workaround this issue ?

[ulbqb]

@holaworlds You can view it by setting the firebase storage bucket for cors. See this post for details:
https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin

[soruppuAswin]

I am trying to show few custom glb files into the android app using the SceneViewer. I am following the documentation specified in the documentation. Following is the code snipped.

val intentUri = Uri.parse("https://arvr.google.com/scene-viewer/1.2").buildUpon() .appendQueryParameter( "file", "https://......./example1.glb" ) .appendQueryParameter("mode", "ar_only") .build()

I am seeing the following error message when I try to view it from SceneViewer. Am I doing anything wrong?

[kevando]

THANK YOU @ulbqb for that link. I don't know why it's buried in a closed issue. This solution should be much easier to find. Adding here to draw more attention to it.

If your models are hosted on Firebase Storage

SOLUTION ⤵️

cloud.google.com/storage/docs/configuring-cors