Augmented reality with model-viewer

Published on Updated on

In February, we introduced the <model-viewer> web component, which lets you declaratively add a 3D model to a web page, while hosting the model on your own site. One thing it didn't support was augmented reality. That is, you could not render the component's source image on top of a device's camera feed.

To do that, we've since added support for Magic Leap, and Quick Look on iOS. Now we're announcing support for AR on Android with the addition of the ar attribute. This attribute is built on a new ARCore feature called Scene Viewer, an external app for viewing 3D models. To learn more about Scene Viewer, check out Viewing 3D models in AR from an Android browser.

Mars Rover

Let's see how to do augmented reality with <model-viewer>.

The attribute

A web component, as you may recall, requires no special knowledge to use. It behaves like a standard HTML element, having a unique tag as well as properties and methods. After installing it with a <script> tag, use it like any other HTML element.

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

This looks much the same as what I had in my earlier article. Notice the thing I've highlighted at the very end. That's the new attribute.

Installing the new version

If you're using <model-viewer> already, you're probably importing the component using the <script> tags exactly as shown in the documentation. We're continually making improvements. If you want to test new features before deliberately upgrading and deploying, you'll want to install a specific version of <model-viewer>. To do this, add the version number to the file URLs as shown below. Then, watch the releases page for updates.

<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">

</script>

<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">

</script>

Conclusion

Give the new version of <model-viewer> a try and let us know what you think. Issues and feedback are welcome on GitHub.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.