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
ar-modes, but not specifying an
the USDZ will instead be auto-generated when the user clicks the
AR button on iOS to launch Quick Look.