search

google / model-viewer

Easily display interactive 3D models on the web and in AR!
https://modelviewer.dev
Apache License 2.0
6.96k stars 822 forks source link

WebXR is broken in Android Chrome Canary #495

Closed stars66 closed 5 years ago

stars66 commented 5 years ago

Hi Developer Does it support android AR?

cdata commented 5 years ago

Hi, thanks for the question! Currently, we have features that intend to integrate with the experimental and volatile WebXR APIs. These APIs only exist in Chrome Canary behind a flag today. So, the short answer is that you can do AR on Android with <model-viewer>, but only on an experimental basis (our integration tends to break a lot without us noticing). For production purposes, it is currently not possible to do AR on Android.

hd-esteban commented 5 years ago

Hi @cdata I'm trying to complete a POC for future purposes but I'm facing some issues to display the AR button to see the astronaut model in AR...

My env Device: Huawei Mate 20 Lite Android version: 8.0.1 Chrome Canary version: I tried 70.0.3538.2 and 72.0.3585.0

Currently I'm able to see the 3d model displayed, but AR button is not getting displayed.

I checked my browser support with this tool and everything seems to be ok, https://googlecodelabs.github.io/ar-with-webxr/work/

I also opened your AR example and it seems to be working good, but my local page doesn't work. https://googlewebcomponents.github.io/model-viewer/examples/augmented-reality.html

Could you please help me to find a solution?

My code is this:

Model viewer component tag

< model-viewer alt="3D model" src="/dist/test/astronaut.glb" ios-usdz="/dist/test/astronaut.usdz" background-color="#222" magic-leap unstable-webxr >

cdata commented 5 years ago

@Esteban26 a lot of what you are describing could be affected by your project setup. Can you share a live demo that exhibits the problem, perhaps?

hd-esteban commented 5 years ago

@cdata Thanks for your quick response, I made a test page with the example and I uploaded to a demo server, this is the URL. http://graycomm.b.cctv.com.mx:82/viewer/dist/test/ar.html It may take some time to display the gbl model due to the low bandwith of the demo server, sorry for that.

I tried with 2 devices, the Huawei Mate 20 Lite and I also tried with a Samsung S8, android 7.1... for both devices I tried with the Chrome Canary version 72.0.3585.0. I enabled these flags: WebXR Device API and WebXR Hit Test at chrome://flags, and for both cases when I test with this tool (https://googlecodelabs.github.io/ar-with-webxr/work/) I don't get the message: AR not found error, but AR didn't work.

I used these browsers versions and devices based on information of these sites.

https://developers.google.com/ar/discover/supported-devices https://codelabs.developers.google.com/codelabs/ar-with-webxr/#1

Even for the S8 device I saw the AR button displayed in your example page but tap event didn't work. I didn't receive the request to allow AR object to use the device camera. It simply didn't work.

cdata commented 5 years ago

@Esteban26 it looks like our WebXR integration might be broken right now. I'll change this issue to a bug report and we will try to look into it soon. Unfortunately, while the WebXR APIs are only in Canary we cannot guarantee support because they change very frequently.

hd-esteban commented 5 years ago

Thanks again, if you can identify and fix the issue, please let us know to continue our development... :)

hd-esteban commented 5 years ago

@cdata I don't know if it matters but the weird thing is I'm able to see the AR button in your demo site

https://googlewebcomponents.github.io/model-viewer/examples/augmented-reality.html

So if it is an issue on the webxr apis it should not work and it seems to work there... The only issue I see with your page isthe 3d model seems to be larger because I only see grey color in my screen and if I move the device that color changes.

And in my demo page I have the same code you have for that demo page but the AR button is not getting displayed.

hd-esteban commented 5 years ago

This is your demo page.. Screenshot_20190422-201333 Screenshot_20190422-201401

hd-esteban commented 5 years ago

Our site Screenshot_20190422-201734

cdata commented 5 years ago

@Esteban26 one other thing to try is to serve your site on localhost, or a domain where you can serve over https://. I think WebXR is only supposed to work in secure contexts, which means http:// domains won't have access to the APIs.

smalls commented 5 years ago

Edit: I'd missed the comment above re https, that seems more likely so I might try it first.

Maybe try including the fullscreen polyfill?

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<script src="../node_modules/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>

That's the most applicable source file that it's in our examples page (but not on your demo page).

Thanks for including the demo page, btw, that makes it a lot easier to debug!

hd-esteban commented 5 years ago

Hi @cdata I tried with the https domain using ngrok https://ngrok.com/, and it worked. Screenshot_20190423-112039

hd-esteban commented 5 years ago

@cdata @smalls Hi guys, quick question, any update on this issue because since last day it seems that WebXR AR functionality is not working, I am able to get the AR button displayed but when I tap it, the camera is opened but the 3D model is not getting displayed on version 72, on version 71 a black screen is opened and closed immediatly and version 70 displays a message 'Installing AR module' but AR functionality doesn't work.

Device Android 8.1.0 ARCore 1.9.19 Chrome Canary versión I tried with 70, 71, 72

We also noticed developers site shared an article for the new ARCore features so we tried but it seems that this functionality is still not working https://developers.google.com/ar/develop/java/scene-viewer