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 specifically including quick-look in ar-modes, but 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, which enables Quick Look on iOS even if it is not specified in ar-modes. 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.

Scene Viewer

Here the Scene Viewer app is given priority, to make it easier to compare with the default WebXR, 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.

Image displaying the default <model-viewer> button of a box with slits cut out in the lower-right, next to the example astronaut model. Image displaying <model-viewer> with a custom button reading '👋 Activate AR'.

Transparent Background