<model-viewer> Augmented Reality

WebXR Demo

Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome 83+ on Android.

This demonstrates the use of slots, as well as shared and unshared DOM between the 3D and AR modes.

A slot is used here for replacing the default AR button with a custom one - in this case the one recommended by SceneViewer. This is not the default only because this way localization of the text is left to whatever system you prefer to use. Note the AR button will only be visible on AR-capable devices.

By styling based on the ar-status attribute, you can add DOM that only shows up in certain modes. In this case a CSS animation has been added to prompt the user to move their phone around to help ARCore find their floor so that the object can be placed. User studies show a prompt like this is an important part of guiding users to a good AR experience.

Finally, even complex DOM can easily function in both 3D and AR modes, including interactions via script. In this case a simple carousel of models is demonstrated. Unfortunately none of this DOM content can flow into SceneViewer or QuickLook, as these are native apps. Only through WebXR, now our default AR mode, can this be achieved, as the AR session is still inside of the browser. This also removes the need to redownload the model.

Note that by not specifying an ios-src, the USDZ will instead be auto-generated when the user clicks the AR button on iOS to launch Quick Look.

Augmented Reality

This demonstrates several augmented reality modes, including `webxr`, `scene-viewer`, `quick-look` & the accompanying attributes, `ar`, `ar-scale`, `ios-src`.

Note that WebXR mode requires the page be served on HTTPS and if enclosed in an iframe, that iframe must allow your origin the xr-spatial-tracking policy.

In this example an ios-src attribute is specified. This requires an extra download, but can be useful if the auto-generated USDZ is not adequate (for instance it does not support animations yet). Also, this source can be either a .usdz or a .reality file.

Additionally, ar-scale="fixed" is used to prevent the user from scaling the object in AR, applying to all three AR modes. The xr-environment attribute causes estimated lighting to be used in the WebXR AR mode, rather than the lighting from the 3D mode, but does not affect Quick Look or Scene Viewer.

Scene Viewer

Here the Scene Viewer app is given priority, to make it easier to compare with the default WebXR, above. This also uses USDZ auto-generation for AR Quick Look on iOS, as compared to the separate ios-src file given above.

Placing on a Wall

This demonstrates the `ar-placement` attribute, which defaults to "floor", but using "wall" gives a different AR placement experience.

Using Slots In <model-viewer>. This page demonstrates how you can change parts of <model-viewer> using web component slots.

Custom AR Button

Since this slot will only appear on an AR enabled device screenshots are provided below. They compare the <model-viewer> default button in the bottom right and a custom button ("👋 Activate AR") in the top right of the viewport, with a custom style.