Lazy Loading. Improve UX with these cost-saving <model-viewer> configurations. This page tests usages of the <model-viewer> element using the poster attribute.

Display a poster until loaded

Customize loading experience with your own HTML

Poster with invalid model

This will output a console error while showing the poster image.

Cycling between posters

The model is shown when the element is clicked. Note that camera-controls is not enabled here, so the model rotates on its own, but is not interactive.

Model Formats. Learn how model formats work on different platforms. This page tests configurations of the model source.

With a glTF model

With a GLB model

DRACO support

<model-viewer> supports loading glTF models that use the DRACO mesh compression extension.

In order to load such models, an auxilliary decoder is required and will be loaded on-demand from a Google CDN when a DRACO-compressed model is detected. See below to learn how to customize this behavior.

By default, the DRACO decoder will be loaded from a Google CDN on-demand. The decoder is open source and distributed for free under the Apache License 2.0.

It is possible to customize where the decoder is loaded from by defining a global configuration option like so:

When customizing the decoder location, you must make sure that the configuration is set before the first <model-viewer> element is created on the page. <model-viewer> will attempt to load the decoder as soon as it loads a glTF that uses the DRACO extension, so be careful to set the configuration early!

Another way to set the decoder location is to look up the constructor for <model-viewer> and configure it directly:

Note that the direct configuration approach will only work after <model-viewer> is defined in the browser (in typical cases, after model-viewer.min.js has been loaded).

Keep in mind that the DRACO decoder is pretty large (more than 100KB), so it is best only to use DRACO compressed models when the file size savings are larger than the size of the decoder.

KTX2 support

<model-viewer> supports loading glTF models that use the Basis Universal extension for including KTX v2 textures.

In order to load such models, an auxilliary decoder is required and will be loaded on-demand from a Google CDN when a basisu model is detected. See the DRACO example above to see how to customize this behavior, using ktx2TranscoderLocation instead of dracoDecoderLocation.

Meshopt support

<model-viewer> supports loading glTF models that use the Meshopt compression extension.

In order to load such models, an auxiliary decoder is required, and is not enabled by default.

Enable support for Meshopt compression by providing meshoptDecoderLocation:

When customizing the decoder location, you must make sure that the configuration is set before the first <model-viewer> element is created on the page.

With only a USDZ model

Note that this won't display a model (as that requires a glTF or GLB), but could be used with poster to show a static image and the icon to enter augmented reality mode

Dynamic scaling

Our renderer automatically scales resolution to maintain frame rate. This behavior can be monitored and controlled.

To see throttling happen, you'll have to tax your GPU. This model is intentionally complex (including transparency and clear coat) so that it will throttle on a fairly broad range of devices. Note that expanding your window and zooming in will tend to tax the GPU more since more pixels are being shaded. Also note that the render returns to full scale any time the scene stops moving. If you use very complex 3D models, you may want to disable auto-rotate for this reason.

Our renderer tries to keep the frame rate between 38 and 60 frames per second. It's a pretty safe bet that if you are at the reportedDpr, you are smoothly running at 60 fps, and if you are at the minimumDpr you are likely well below 38 fps. This event only fires in 3D mode; The AR modes also do dynamic render scaling, but do not report their status.

Cycling between different models

Use a11y. Improve accessibility, by adding a11y attribute to the model-viewer element. To have more descriptive translations to improve screen reader capability.

A11Y defined translations

©Copyright 2018-2020 Google Inc. Licensed under the Apache License 2.0.