model-viewer

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.

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

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

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.

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

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.

Notable changes

• ✋BREAKING CHANGE: Updated to Three.js r105.2 https://github.com/GoogleWebComponents/model-viewer/pull/643

New features

• 🆕 Progress bar height can be configured with the CSS --progress-bar-height property https://github.com/GoogleWebComponents/model-viewer/pull/602
• 🆕 Configurable camera FOV via the field-of-view attribute https://github.com/GoogleWebComponents/model-viewer/pull/563
• 🆕 Control which browsers may launch iOS AR Quick Look via the quick-look-browsers attribute https://github.com/GoogleWebComponents/model-viewer/pull/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" https://github.com/GoogleWebComponents/model-viewer/pull/633
• 🆕 Capture the current render as a screenshot with .toDataURL() method https://github.com/GoogleWebComponents/model-viewer/pull/613
• 🆕 Skip camera interpolation with the .jumpCameraToGoal() method https://github.com/GoogleWebComponents/model-viewer/pull/614

Other notable changes

• ✋BREAKING CHANGE: Auto-rotation is now disabled briefly after interaction https://github.com/GoogleWebComponents/model-viewer/pull/469
  • A future release will make the amount of time that rotation is disabled configurable https://github.com/GoogleWebComponents/model-viewer/issues/525
• ✋BREAKING CHANGE: Updated to Three.js r104 https://github.com/GoogleWebComponents/model-viewer/pull/536
• ✋BREAKING CHANGE: Internal reckoning of meters has changed https://github.com/GoogleWebComponents/model-viewer/pull/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 https://github.com/GoogleWebComponents/model-viewer/pull/539
• Documentation received a major design update https://github.com/GoogleWebComponents/model-viewer/pull/518
• Added Samsung Internet to compatibility documentation https://github.com/GoogleWebComponents/model-viewer/pull/615

Bug fixes

• Fixed incorrect shadow alignment when using align-model https://github.com/GoogleWebComponents/model-viewer/pull/545

Deprecation notices

• In a future change, we intend to change the default for interaction-prompt to "auto" https://github.com/GoogleWebComponents/model-viewer/issues/623
• In a future change, we intend to enable PMREM by default for any configuration with an available HDR IBL https://github.com/GoogleWebComponents/model-viewer/issues/346

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

New features

• 🆕 <model-viewer> now features built-in, customizable progress bars. See https://github.com/GoogleWebComponents/model-viewer/pull/487 for details.

Bug fixes

• A pixel-rounding bug was fixed that sometimes let to unsightly margins around the edge of <model-viewer> https://github.com/GoogleWebComponents/model-viewer/issues/489

Other notable changes

• We have added new CSS custom properties to our docs https://github.com/GoogleWebComponents/model-viewer/pull/493
• ✋BREAKING CHANGE: The reveal-when-loaded attribute has been removed in favor of the new reveal attribute and related semantics https://github.com/GoogleWebComponents/model-viewer/pull/487
• ✋BREAKING CHANGE: As of https://github.com/GoogleWebComponents/model-viewer/pull/487 the scene is now obscured by a poster by default until loading and rendering has completed. If no poster image is specified, the poster will be a solid color. You can revert to the previous default with CSS. For example:

<style>
model-viewer {
  --poster-color: transparent;
}
</style>

• ✋BREAKING CHANGE: The default lighting conditions have changed. We recommend that you remove any lighting-related attributes (stage-light-intensity, environment-intensity, exposure etc) and review the new default lighting with your models before adding further customizations. Check here for a detailed description of the lighting changes.

New features

• 🆕camera-orbit: attribute lets you specify where the camera is positioned #452
• 🆕getCameraOrbit(): method lets you access the camera position in real time #452
• 🆕interaction-prompt-threshold: attribute lets you control how much time passes before the user is prompted to interact #452

Bug fixes

• Stopped screen readers from focusing uninteresting elements in #452
  • Thanks to @svinkle for related a11y research
• The interaction prompt now waits for the model to load before starting its internal timer #452
• @pushmatrix ensured that auto-rotate does not begin until the model is loaded #471

Other notable changes

• ✋BREAKING CHANGE: The controls attribute has been renamed to camera-controls #452
• ✋BREAKING CHANGE: The default camera position when controls are disabled has changed #452
  • To use the old default, add camera-orbit="0 90deg auto" to your <model-viewer> markup
• @yuinchien gave our docs an updated look at feel #474
• @mikkoh improved dev build times #468
• Per-frame compositing performance was improved by selectively disabling SVG animations #452

New features

• Animation support, and public API for controlling animations https://github.com/GoogleWebComponents/model-viewer/pull/421
• align-model: attribute to control whether model is aligned by center of bounding volume or its root node position https://github.com/GoogleWebComponents/model-viewer/pull/441

Bug fixes

• Materials were not being cloned correctly in some cases #440
• Cleaned up 404s on the docs page #427

Other notable changes

• Docs have updated with some nice informational tables related to browser feature support
• Many memory leaks were cleaned up in our test suite #438

This is a hotfix release to address two small regressions released in v0.1.0:

• Fix PMREM rendering regressions from environment generator refactor #410
• Fix focus ring overhanging from <model-viewer> bounding box #411

This release marks the largest <model-viewer> update since it was launched publicly, and includes a ton of great work from our contributors. The following is a summary of that work:

New features

Thanks to a ton of foundational work by @jsantell, we have landed the following huge rendering improvements:

• HDR environment map support https://github.com/GoogleWebComponents/model-viewer/pull/323
• Environment-base radiance map (PMREM) support https://github.com/GoogleWebComponents/model-viewer/pull/338
• ✋BREAKING CHANGE: Normalize lighting with Filament https://github.com/GoogleWebComponents/model-viewer/pull/387
  • Considered breaking because default lighting levels have changed

Additionally, we have landed the following new public API for controlling lighting details:

• Configurable shadow-intensity attribute https://github.com/GoogleWebComponents/model-viewer/pull/388
• Configurable exposure attribute https://github.com/GoogleWebComponents/model-viewer/pull/389
• Configurable stage-light-intensity attribute https://github.com/GoogleWebComponents/model-viewer/pull/391
• Configurable environment-image and environment-intensity attributes https://github.com/GoogleWebComponents/model-viewer/pull/392

We have also landed a bunch of improvements to accessibility for <model-viewer> overall:

• ✋BREAKING CHANGE: Improved mobile scrolling behavior https://github.com/GoogleWebComponents/model-viewer/pull/311
  • Previously it was possible to become "trapped" by <model-viewer> swallowing events while scrolling
  • Considered breaking because the default interaction model is different now, see PR for details
• Make poster focusable / dismissable via keyboard https://github.com/GoogleWebComponents/model-viewer/pull/313
• Resize the scene correctly when zooming https://github.com/GoogleWebComponents/model-viewer/pull/314
• Substantially improved a11y for camera controls https://github.com/GoogleWebComponents/model-viewer/pull/319
• Added screen reader announcements related to loading status https://github.com/GoogleWebComponents/model-viewer/pull/345

Bug fixes

• Make sure <model-viewer> works when WebGL is not available https://github.com/GoogleWebComponents/model-viewer/pull/329
  • In particular, this makes <model-viewer> compatible with Googlebot, which has WebGL disabled
• We no longer light unlit materials https://github.com/GoogleWebComponents/model-viewer/pull/377

Other notable changes

• ✋BREAKING CHANGE: We upgraded Three.js from r99 to r101 https://github.com/GoogleWebComponents/model-viewer/pull/312 https://github.com/GoogleWebComponents/model-viewer/pull/331
• Intersection Observer support is now optional, we will use it if it is available https://github.com/GoogleWebComponents/model-viewer/pull/398
• ✋BREAKING CHANGE: Our default bundle is now an ECMAScript module https://github.com/GoogleWebComponents/model-viewer/pull/401
  • If you prefer the old format, you can change your script source from dist/model-viewer.js to dist/model-viewer-umd.js to load a compatible bundle
  • We now recommend a new snippet for loading the bundles. Please refer to README.md for details!

We have added a new category of testing: fidelity testing. These tests will help us to keep rendering results in line with ourselves and other model viewers over time. Check out our live fidelity test results for an example of how different viewers are being compared!

• Fidelity test regime has been introduced https://github.com/GoogleWebComponents/model-viewer/pull/305
• Screenshot collection for golden reference images has been automated https://github.com/GoogleWebComponents/model-viewer/pull/351
• We test against most of the Khronos glTF Sample Models https://github.com/GoogleWebComponents/model-viewer/pull/375

Since the last release, our docs have undergone a lot of changes, including a complete visual overhaul courtesy of @yuinchien :

• Example snippet added for better docs samples https://github.com/GoogleWebComponents/model-viewer/pull/307
• Docs received a major design overhaul https://github.com/GoogleWebComponents/model-viewer/pull/320
• We (finally) added a screenshot to the README https://github.com/GoogleWebComponents/model-viewer/pull/332
• Docs were further revised for v0.1.0 release https://github.com/GoogleWebComponents/model-viewer/pull/402

⌨️Keyboard controls for camera orientation
🙋‍♀️AR hologram faces the user when placed
🍦Smoother default camera controls
🦊Bugfixes for Android Firefox and IE11
💡Improved built-in lighting
👴Legacy bundles published to NPM
🆙Three.js upgraded to r99
🏎Performance tuning for mobile browser usages
✨Updated to use the latest WebXR APIs

• Better AR Quick Look detection on iOS (thanks to @mikkoh for the contribution)
• Error event when models fail to load or parse (thanks to @frankiefu for pointing this out)
• Fixed memory leak when changing background images
• Improved default a11y qualities
• IE11 support