v1.4.0

New features

🆕 Added support for the KHR_materials_variants extension of glTF, for quick and easy material changes; see the example, #1765
🆕 In AR you can now place objects on the wall instead of just the floor, controlled using the new ar-placement attribute which affects both WebXR and SceneViewer modes, #1714
🆕 Added orientation and scale attributes to transform the model, along with an example. Also added updateFraming() method and bounds attribute to better control automatic framing, #1792
🆕 Added disable-zoom attribute so that desktops can scroll past a model instead of it switching to zoom, #1699
🆕 Added neutral option to environment-image which creates a more evenly lit scene than our default lighting (example) and is calibrated to output colors that roughly match the material base color RGB, thanks @thomastgt! #1761
🆕 Added duration property to animations, thanks @rhystmills! #1742
🆕 Added showPoster() method, #1691

Bugfixes

• Scene-graph texture swaps no longer affect other MV elements that happen to use the same model, #1711
• Setting ar-scale="fixed" no longer clobbers URL parameters for ios-src, #1775
• Fixed erroneous animation console warning, #1791

Examples

✨ Added an example of automatically showing product dimensions in both 3D and AR using hotspots, #1726
✨ Added an example of rotating the environment instead of the model, #1741
✨ Fixed the pan example to account for auto-rotate, #1788

Other notable changes

• Disabled occlusion in SceneViewer by popular demand. We will reevaluate this feature when LIDAR sensors are more common, as the current experience isn't really acceptable, #1784
• Refactored our scene-graph API, removing the 3DOM package and greatly simplifying the code base, to make way for future expansion, #1692
• Removed the quick-look-browsers attribute, as both Chrome and Safari launch QuickLook just fine now, so no need to restrict, #1783
• Updated to Three.js r124
• This will probably be the last version supporting IE and distributing model-viewer-legacy.js, as Microsoft itself is also deprecating IE

Editor

• You can now deploy your editor session to mobile devices via QR code for easy AR testing of WebXR, SceneViewer, and iOS QuickLook, #1746
• When editing the HTML snippet, the editor will now respect all MV attributes instead of just the ones it has UX for, #1818
• When selecting a material to edit, the view now flashes to show where that material is applied, #1729
• When downloading the zip, you now get all the necessary files and appropriate paths for easier deployment, #1717
• UX update to make the HTML snippet a consistent center-piece, #1704

v1.3.0

New features

• 🆕 Added a touch-action attribute, similar to the CSS parameter to control how touch interactions affect <model-viewer> vs scroll. This now defaults to pan-y as this is a significantly better experience on mobile, but in a few cases this might be considered a breaking change. To get the old behavior, simply set touch-action='none'. pan-x is also available for side-scrolling situations, #1566
• 🆕 You can now specify a high-resolution skybox image, see the last example, #1629
• 🆕 The AR button is now visible before loading, and if you desire an AR button without a 3D view, you can accomplish this by using reveal='manual', #1629
• 🆕 Added getDimensions() method returning the size of the model's bounding box, #1632
• 🆕 Added optional parameter to resetTurntableRotation(theta) to manually set model rotation relative to environment/skybox, #1543
• 🆕 Added orbit-sensitivity attribute to control rate of motion from interactions, #1519

Bugfixes

• Not a change, but now with Chrome 86 having rolled out, WebXR mode now works in an iFrame, and also on Android 11.
• Hide the AR button on browsers that don't support AR (Firefox and Oculus), #1649
• Initially hidden hotspots are now properly hidden until revealed by model rotation, #1604
• Removed extra 750ms of prompt delay, so that setting delay to zero causes the prompt to show immediately, #1553
• Fixed canvas rounding that resulted in blurred renders on Windows, #1506

Other notable changes

• Major update to our documentation and example pages to make them easier to navigate, #1565
• Added examples for lazy-loading <model-viewer> to optimize Lighthouse scores for page performance, #1528
• Added a panning example, #1547
• Upgraded to Three.js r121.1, #1577

Known issues

• We do not yet have a way to specify a hotspot that follows an animated model, but we plan to.

v1.2.1

Bugfixes

• Fixed QuickLook regression #1497

v1.2.0

New features

• 🆕 Control speed/direction of auto-rotate with new rotation-per-second attribute, #1479
• 🆕 Added 'failed' to possible 'ar-status' values to help recover from situations where AR did not work and it could not be determined ahead of time, #1475
• 🆕 Exposed a QuickLook event so you can respond to users tapping any custom button you set up for your ios-src, #1458

Bugfixes

• Fixed bundle size regression from v1.0, roughly halving our size back down to 213kb, gzipped and minified, #1480
• Removed shadow from output of exportScene(), #1490
• Fixed SceneViewer query parameters, thanks @hybridherbst! #1456
• Fixed poster generation, #1441

Other notable changes

• Upgraded to Three.js r120.1, #1491
• Our fidelity comparison of glTF web-renderers has been revamped (thanks to our intrepid intern @sun765!) and documented, #1473
• The interactive example will be deprecated once the new model editor is well-tested. Please file issues on any deficiencies you find, and contributions are most welcome! There are a lot of potential features, but we'll be basing priority on community interest.

Known issues

• WebXR AR mode does not currently work in an iframe; Chrome is working on getting this fixed for 86.
• We do not yet have a way to specify a hotspot that follows an animated model, but we plan to.

v1.1.0

New features

• 🆕 A brand-new model tag editor, complete with GLB import, export, and material modification. You can also set attributes and hotspots and export a complete model-viewer HTML snippet. #1341
• 🆕 A new, simplified scene-graph API that exposes the kinds of material editing capabilities our new editor uses. This API is still considered unstable, but please try it out and give us feedback. #1302 And thanks to hjeldin for the new examples: #1344
• 🆕 GLB/glTF export of modified scenes, thanks again to hjeldin #1315

Bugfixes

• Fixed IE11 support #1302, #1293
• Fixed permission denial freeze #1275
• Fixed launching sceneViewer with relative URLs #1313
• Ensured eager loading finishes everything, including a first render #1317
• Fixed Firefox slow zoom #1351
• Fixed npm packaging, now distributing .map files #1391
• Fixed several Safari rendering bugs #1387, #1395
• Fixed hotspots not covered by poster #1401

Other notable changes

• The interactive example will be deprecated once the new model editor is well-tested. Please file issues on any deficiencies you find, and contributions are most welcome! There are a lot of potential features, but we'll be basing priority on community interest.

Known issues

• WebXR AR mode does not currently work in an iframe; Chrome is working on getting this fixed for 85.
• We do not yet have a way to specify a hotspot that follows an animated model, but we plan to.

v1.0.0

New features

• 🆕 With Chrome 83+, HTML and CSS now flow naturally into AR in WebXR mode
• 🆕 The ar-scale=”fixed” configuration now works in iOS Quick Look #1213
• 🆕 Added an “exit” button for WebXR-based AR #1214
• 🆕 Read the field-of-view outer and inner limits with new accessors #1218
• 🆕 Use ar-status event and attribute to respond to changes in AR-vs-inline rendering #1237
• 🆕 Use 3DOM to customize textures on a loaded model #1245

Bugfixes

• 3DOM scene graph order is now stable #1166
• DPR and scaling are handled better
  #1179
• Hotspots will now be hidden during the transition to WebXR #1197
• Fixed a clipping issue when camera is zoomed out #1211
• Fixed a bug where camera-change was firing continuously when no src was configured #1212
• UX when changing src while in WebXR now works as intended #1221
• toBlob now works as intended in Firefox/Safari #1254

Other notable changes

• Our versioning strategy is now formally documented #1155
• We now publish a minified bundle along with our other artifacts #1167
• We have updated our WebXR implementation to line up with the latest spec changes #1187
• Render resolution now dynamically scales to maintain device frame rate #1227
• ✨ We added a new WebXR demo to our docs https://modelviewer.dev/examples/webxr.html
• ✋BREAKING CHANGE: The fullscreen fallback (used for devices that seem like they support AR, but don’t) has been removed from our AR-related feature set #1214
• ✋BREAKING CHANGE: The default AR mode has been changed from scene-viewer to webxr, but can be restored by setting ar-modes=”scene-viewer webxr quick-look
• ✋BREAKING CHANGE: Updated to Three.js 117.1 #1235
• ✋BREAKING CHANGE: The preload attribute has been removed; preloading behavior is now governed with the loading attribute #1159
• ✋BREAKING CHANGE: The magic-leap attribute and related support has been removed #1261

v0.10.0

New features

• 🆕 Configure order of precedence for AR integrations with ar-modes #1070
• 🆕 AR placement via WebXR is now stable #1070
  • ✨Now featuring an updated and refined UX
  • Use it by default where available with ar-modes="webxr scene-viewer quick-look fallback"
  • Currently requires Chrome 81+ on an AR-capable Android device
• 🆕 Support for external scene graph scripts #1049
• 🆕 Configure the size of the default AR button with --ar-button-scale #1125

Bugfixes

• Fix CSS-style exponential numbers in most of the element API #1140
• Fixed the missing background color for built-in posters #1146
• Animations now work in WebXR-based AR #1070
• Unique scene graph materials are properly deduplicated #1072
• Material names are now properly exposed in the scene graph #1063
• Shadow will now disappear when shadow-intensity is reset to 0 #1042
• Setting currentTime for a paused animation now updates the rendered frame #1139
• Fixed crashes on Windows for some kinds of GPUs via #1135
• Zoom now correctly handles infinite and non-number values #1133

Other notable changes

• We now use OffscreenCanvas and ImageBitmapRenderingContext when available, improving memory overhead #995
• We now display a WebGL-backed canvas when there is only 1 <model-viewer> element on the page, which should yield significant runtime performance improvements in many common cases #995
• ✋BREAKING CHANGE: We updated to Three.js r115 #1135
• ✋BREAKING CHANGE: The ar attribute is now required to activate all AR integrations, including iOS Quick Look #1070
• ✋BREAKING CHANGE: The semantics of the modelIsVisible property and model-visibility event have changed; model visibility now requires that a model is in the viewport (as determined by our internal IntersectionObserver) and also that the poster has been dismissed #1077
• ✋BREAKING CHANGE: Zoom now combines changes to camera radius and field of view (previously zoom only changed field of view) in a hybrid approach that balances the desire for infinitely-close zoom with the desire for a sense of changing perspective #1076
• ✋BREAKING CHANGE: When launching Scene Viewer, users go directly to AR mode rather than the interstitial Scene Viewer-specific 3D turntable mode #1142

Deprecation notices

• The magic-leap attribute and general support for Magic Leap devices will be removed ahead of our 1.0 release. If you depend on this feature, please let us know by filing an issue or getting in touch with us at https://spectrum.chat/model-viewer
• Currently by default, Scene Viewer is preferred over WebXR-based AR where available. In a future release, WebXR-based AR will be configured to take precedence over all other AR integrations by default. You will still be able to get the current default by manual configuration

v0.9.0

New features

• 🆕 Add declarative hotspots and annotations to your models with HTML and CSS #917
• 🆕 Support for truly transparent backgrounds #975
• 🆕 resetInteractionPrompt() to reactivate the prompt after it has been dismissed #1029
• 🆕☢️EXPERIMENTAL: Directly manipulate a loaded model's material colors with script #992

Bugfixes

• Updated to work with the latest WebXR AR APIs via @bialpio #978
• Fixed environment lighting not being applied in WebXR AR via @takahirox #1016
• Poster alignment now works properly when text-align is set #973

Other notable changes

• ✨ We now have a test page where you can preview your models w/ drag-and-drop, visually add annotations and more courtesy of @mrdoob and @elalish #941 https://modelviewer.dev/examples/tester.html
• ✨ We now have a formal domain name for our online documentation: https://modelviewer.dev, via @smalls #605
• ✋BREAKING CHANGE: <model-viewer> has a transparent background by default now, and also the background-color attribute was removed #975
  • You can use CSS (e.g., background-color: #fff) to make the background opaque as it was before, and also control the color; all CSS background values are supported 👍
• ✋BREAKING CHANGE: We updated to Three.js r113 in #968
• ✋BREAKING CHANGE: Our project's Git repository was reorganized to support multiple sub-projects, so all of the <model-viewer> source code was moved into its own sub-folder, and code for our fidelity tests and documentation website were moved into their own sub-folders. You may need to update links and references to files accordingly. We apologize for any inconvenience #954
  • Note: this does not change the way you load model-viewer.js from https://unpkg.com or use the @google/model-viewer module from npm

v0.8.1

This patch release contains fixes for a handful of rendering issues introduced in v0.8.0:

• Shadow regressions, reported in #939 and fixed in #943
• Various undesired artifacts reported in #942 and #947 and fixed in #956

v0.8.0

New features

• 🆕 Soft shadows! Set softness of shadows with shadow-softness #513
  • ✋BREAKING CHANGE: Shadows are soft by default, use shadow-softness="0" to get the old default
• 🆕 Control camera extents with max-camera-orbit, min-camera-orbit, max-field-of-view, min-field-of-view #915
• 🆕 Use toBlob() to create screenshots asynchronously #861
  • Create poster images for seamless transitions with toBlob({ idealAspect: true }) #890
• 🆕 Support for DRACO-encoded glTF files #895
  • See this page in our docs for configuration options
• 🆕 Prevent models from resizing in AR with ar-scale="fixed" #918
  • Note: this currently only works for AR on Android devices

Bugfixes

• Shadows update in real-time when models are animated #513
• Our NPM package now publishes correct declarations for use in TypeScript projects #896
• The a11y properties of our built-in poster element have been improved #924

Other notable changes

• ✨ Landed another batch of incredible rendering improvements from @elalish #880
• A minimum viable debug mode has been introduced, see #856 for usage details
• ✋BREAKING CHANGE: The background-image attribute has been renamed to skybox-image #923
• ✋BREAKING CHANGE: We updated to Three.js r110 in #880
• ✋BREAKING CHANGE: Our target version of prismatic.js (for Magic Leap support) has been updated to 2.0 #926
• ✋BREAKING CHANGE: Our default poster background-size has changed from cover to contain #890
  • If you prefer the old default, it is recommended that you provide your own custom poster with HTML:

<style>
#custom-poster {
  width: 100%;
  height: 100%;
  background-image: url(./any-poster.png);
  background-position: center;
  background-size: cover;
}
</style>
<model-viewer src="any.gltf" alt="A 3D thing">
  <div id="custom-poster" slot="poster"></div>
</model-viewer>