Add WebXR immersive-ar support

[klausw]

This adds an extra "enter AR" button if WebXR support for "immersive-ar" is
detected. While in AR mode, hide the default scene background (if any) for
convenience.

For the most part this is handled as a variation of VR mode. While in AR, both
the 'vr-mode' and a new 'ar-mode' states are active.

Also wire up a new 'update-vr-devices' event to refresh the enter button states
after asynchronous availability changes.

Add support for the new navigator.xr.isSessionSupported API, falling back
to navigator.xr.supportsSession if not.

[dmarcos]

Instructions to test this PR:

It needs Chrome v77+, an ARCore-supported phone with Android 8.0/Oreo, and chrome://flags settings:
"WebXR Device API" and "WebXR Hit Test" (Chrome v77), or
"WebXR Device API" and "WebXR AR Module" (Chrome v78+).

[dmarcos]

Thanks for doing this I didn't even know that all this AR work was going on chrome. I tested on a Pixel 3 and works like charm.

[machenmusik]

Great to see it is this far along, last time I looked things were not in a usable state. Question, enabling hit test is required, but does this PR implement raycaster integration?

[klausw]

@machenmusik - this PR doesn't have any hit test / ray caster integration.

The only reason why the instructions refer to "WebXR Hit Test" is that Chrome v77 didn't have a separate flag for AR mode. The only way to enable it was to turn on either hit test or plane detection, and that turned on AR mode as a side effect.

[machenmusik]

Got it thx! Nonetheless this is a great step forward, and perhaps this will enable other folks in the community to contribute additional functionality such as raycaster support.

[dmarcos]

Thanks for doing this! It's awesome! I would have never known this was already possible in Chrome. I just made a minor change to consider the case when a-scene might no have yet loaded when setting up the the enter VR / AR interface.

[klausw]

Thank you for fixing that corner case!

Just to clarify, please be aware that Chrome's current AR support is still on an experimental basis and requires chrome://flags changes to opt in. Details of the API may change if/when this becomes available more generally. The corresponding draft spec is https://immersive-web.github.io/webxr-ar-module/ which builds on the main WebXR spec at https://immersive-web.github.io/webxr/ .

[dmarcos]

Thanks @klausw This is awesome work

[hiyakake]

Is there an official demo to try this out?

[pi0neerpat]

@LAVP I made a demo, by wasn't able to get it working myself unfortunately. You should give it a try though and let me know how it goes!

Requirements

(summarized from above)

• Have a device running Android 8.0/Oreo (and above?) on the ARCore list of supported devices.
• Using Chrome v77+, set flags as mentioned in the relevant PR.

Viewing

Navigate to https://temporal-smile.glitch.me/ (source). If successful, you will see two trees and an "Enter AR" button in the bottom right corner.

My Troubleshooting

I know this is under heavy development, so I'm not asking for help, just posting for info purposes. Keep up the good work yall!

• Android 9 (maybe this is why?)
• Moto G7 Power - ARCore ✔️
• Confirmed ARCore works using the first play-store result: "Atom Visualizer for ARCore"
• Flags set as described.
• Glitch app uses <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>

[klausw]

@pi0neerpat FYI, your https://temporal-smile.glitch.me/ works for me on a Pixel 2 XL using Chrome Stable v79 with "WebXR AR Module" enabled in chrome://flags. (That's the only flag needed for v79, WebXR itself is now on by default.)

Other sites that should work include the standard examples that don't have complex backgrounds, for example:

https://aframe.io/examples/showcase/helloworld/

https://aframe.io/examples/showcase/lights/

("Anime UI" technically works, but its background hides the camera image. See PR #4356. It was looking like this while I was testing AR support due to broken gltf loading.)

And here's a remote control car demo I adapted from @dala00's example: https://klausw.github.io/a-frame-car-sample/index.html

@dmarcos, where would be a good place to collect something like this? Flashier demos such as your dinosaur would of course be even more appreciated :-)

[dmarcos]

I agree. We should have at least one canonical AR example. The T-Rex would be cool but I’m not sure I can distribute the model I got from Sketchfab. I would have to find something else

[dmarcos]

We can maybe do an A-Frame blog post with instructions to enable AR and links to those examples.

[pi0neerpat]

They are all working now! Weird. I wonder what I did wrong the first time I tried it.

Also, 💯 on the remote control car demo 🚗 . I just had so much run driving it around the office! I think if everything were scaled down, it would fit very nicely on a desk.

Update: I realized by typing in the URL to the Glitch app, it was not automatically redirecting to https 🤦‍♂️

[fcu-d0542869]

I can work AR on my phone, but I have a question.
When I move back and forth, the model will follow. I hope it stay there.
how to solve?

[dmarcos]

@fcu-d0542869 I recommend opening a question on StackOverflow. Nice folks there to help. Remember to provide a link with an example to reproduce the issue.

[hiyakake]

@LAVP I made a demo, by wasn't able to get it working myself unfortunately. You should give it a try though and let me know how it goes!

Requirements

(summarized from above)

• Have a device running Android 8.0/Oreo (and above?) on the ARCore list of supported devices.
• Using Chrome v77+, set flags as mentioned in the relevant PR.

Viewing

Navigate to https://temporal-smile.glitch.me/ (source). If successful, you will see two trees and an "Enter AR" button in the bottom right corner.

My Troubleshooting

I know this is under heavy development, so I'm not asking for help, just posting for info purposes. Keep up the good work yall!

• Android 9 (maybe this is why?)
• Moto G7 Power - ARCore ✔️
• Confirmed ARCore works using the first play-store result: "Atom Visualizer for ARCore"
• Flags set as described.
• Glitch app uses <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>

Sorry for my late reply.

Tried this demo on my device.
This demo works well with Chrome81!
(Failed to start AR core on Chrome79)

Until now, we have been doing AR with "8th Wall", but the accuracy of "AR Core" was also amazing.

My device

-Pixel 3a
-Android Q
-Chrome 81
-AR Core 1.14.x