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>

v0.7.2

This release contains a small fix for cases where <model-viewer> unintentionally broke some kinds of URLs as they were passed into Scene Viewer. See #855 for more details.

v0.7.1

This patch release fixes two bugs that made it out with the v0.7.0 release:

• Properly load model tangents #849
• Fix load progress thrashing #850

v0.7.0

New features

• 🆕 Use camera-target to configure where the camera is looking #733
• 🆕 Use env(window-scroll-y) to sync camera controls to page scrolling #739
  • Percentages and calc() syntax is also supported now #755 #739
• 🆕 New default interaction prompt that "wiggles" the model #788 #834
  • Use interaction-prompt-style="basic" to select previous default prompt behavior
  • Old prompt SVG is attached below in the "assets" section
• 🆕 Configure the time before auto-rotate starts with auto-rotate-delay #831

Bugfixes

• Models no longer load if <model-viewer> is not in the render tree #833
• Models with skinned meshes now load properly #791
• Models with zero width or height will now render properly when resized #735 #755
• AR button will appear as intended in iOS 13 Safari #779
  • This fix has been backported to v0.6.x and v0.5.x
• Status text intended for screen readers is now properly hidden #771
• Fixed support for KHR_materials_pbrSpecularGlossiness #510
• Fixed rendering of double-sided materials on some devices #740
• Zooming no longer allows you to zoom "into" the model #729

Other notable changes

• ✋BREAKING CHANGE: New model framing strategy avoids clipping in many scenarios but has subtle differences compared to previous defaults #755
• ✋BREAKING CHANGE: The theta value reported by getCameraOrbit now wraps instead of growing indefinitely as the camera orbits #756
• ✋BREAKING CHANGE: When disabling auto-rotate, the turntable rotation no longer resets to 0 #827 #833
  • Use modelViewer.resetTurntableRotation when removing auto-rotate to achieve the previous behavior
• ✋BREAKING CHANGE: align-model has been removed in favor of camera-target
  • You can set camera-target="0m 0m 0m" to achieve a similar result to align-model="origin"
• ✋BREAKING CHANGE: Zooming behavior now changes the field of view, where previously it changed the radius of the camera from its target #729
• ✋BREAKING CHANGE: The new default for interaction-prompt causes it to display regardless of focus
  • Set interaction-prompt="when-focused" to use the previous default
• ✋BREAKING CHANGE: stage-light-intensity and environment-intensity have been removed
  • It is recommended that you adjust exposure and select an appropriate environment-image in order to achieve satisfying lighting
  • Many free, high-quality environment images can be found at https://hdrihaven.com/hdris/
  • A 1K resolution image should yield satisfying results
• ✋BREAKING CHANGE: The controls-prompt slot has been renamed to interaction-prompt
• Many new rendering and performance improvements via #750
• Previously undocumented error events are now documented #829
• Examples have been added for customizing UI via slots #748
• Updated Three.js dependency to r108 #744

Deprecation notices

• The magic-leap and unstable-webxr attributes will be consolidated with the ar attribute in a future release #541
• A new loading attribute will supersede the preload attribute in a future release #832
• modelViewer.modelIsVisible has been deemed a confusing API and is highly likely to be changed significantly in the future #773

v0.6.2

This release adapts to a change in Safari on iPad that causes the <model-viewer> AR button to stop behaving correctly (see #775 and #779 for details).

We recommend that all users update to v0.6.2 in order to preserve the ability to activate iOS AR Quick Look on iPads.

v0.6.0

New features

• 🆕 Support for the :focus-visible polyfill to make hiding focus rings more straightforward #660
• 🆕 Added a camera-change event to support tracking camera movement #658
• 🆕 A new static property modelCacheSize let's you control <model-viewer>'s internal caching #689
• 🆕 --ar-button-display and --interaction-prompt-display CSS properties can be used to hide built-in UI #718
• 🆕 The interaction-policy attribute can change whether focus is required to interact with models #621

Bugfixes

• Fixed all-black environment lighting on many mobile devices #591
• Fixed blank render that would happen after model was reframed #705
• Mitigated an undesirable moiré effect that occurred in some models #710
• Removed redundant runtime environment generation #651
• Addressed memory leaks associated with long-lived <model-viewer> elements #689

Other notable changes

• 🎉 Rendering received major improvements in this release courtesy of incredible work by @elalish. Refer to #616 for full details of the work that took place.
• ✋BREAKING CHANGE: PMREM is now enabled by default and cannot be disabled #591
• ✋BREAKING CHANGE: stage-light-intensity default changed to 0 #674
  • Set stage-light-intensity="1" to use the previous default
• ✋BREAKING CHANGE: interaction-policy default changed to always-allow #621
  • Set interaction-policy="allow-when-focused" to use the previous default
• ✋BREAKING CHANGE: environment lighting and skybox use the same image data #712
• Several fidelity testing improvements:
  • Filament rendering has been changed to use the WASM build #713
  • Fidelity testing has been streamlined around a browser-centric rendering flow #713
  • Added a furnace test to the fidelity tests #719
• Docs updated to include previously undocumented model-visiblity event #718

Deprecation notices

• stage-light-intensity and environment-intensity will be removed entirely in a future release #721
• align-model will be removed entirely in a future release, in favor of camera-target #453

v0.5.1

This is a hotfix release to address a regression in <model-viewer>'s integration with Scene Viewer. The symptoms of this regression are described in detail in #693 .

It is recommended that all users who depend on being able to view models in AR via Scene Viewer on Android upgrade to v0.5.1.

v0.5.0

Notable changes

• ✋BREAKING CHANGE: Updated to Three.js r105.2 #643

v0.4.0

New features

• 🆕 Progress bar height can be configured with the CSS --progress-bar-height property #602
• 🆕 Configurable camera FOV via the field-of-view attribute #563
• 🆕 Control which browsers may launch iOS AR Quick Look via the quick-look-browsers attribute #626
  • ✋BREAKING CHANGE: By default, only iOS Safari will attempt to launch Quick Look. To use the previous default, set quick-look-browsers="safari chrome"
• 🆕 The interaction prompt can be raised automatically by setting interaction-prompt="auto" #633
• 🆕 Capture the current render as a screenshot with .toDataURL() method #613
• 🆕 Skip camera interpolation with the .jumpCameraToGoal() method #614

Other notable changes

• ✋BREAKING CHANGE: Auto-rotation is now disabled briefly after interaction #469
  • A future release will make the amount of time that rotation is disabled configurable #525
• ✋BREAKING CHANGE: Updated to Three.js r104 #536
• ✋BREAKING CHANGE: Internal reckoning of meters has changed #526
  • If you previously configured the camera-orbit attribute/property with an absolute radius value, the camera position will appear to be different due to this change. Please adjust any configured radius values as needed to achieve the desired result!
• Added full documentation for the ar attribute #539
• Documentation received a major design update #518
• Added Samsung Internet to compatibility documentation #615

Bug fixes

• Fixed incorrect shadow alignment when using align-model #545

Deprecation notices

• In a future change, we intend to change the default for interaction-prompt to "auto" #623
• In a future change, we intend to enable PMREM by default for any configuration with an available HDR IBL #346

v0.3.1

Features

• The AR button can now be replaced with slot="ar-button" #501
• There is a new close button for exiting fullscreen. It can be replaced with slot="exit-fullscreen-button" #501

Bug fixes

• The interaction prompt was partially fixed for cases where animations don't play #503

Other notable changes

• The AR icon has been updated to match the latest Material version #505