model-viewer

Easily display interactive 3D models on the web and in AR!

APACHE-2.0 License

Downloads
497.5K
Stars
6.5K
Committers
108
View Code on GitHub Visit Website View on X
Ecosystems: Three.js, Web Components, WebXR

Bot releases are hidden (Show)

model-viewer - v1.9.2

Published by elalish almost 3 years ago

Bug fixes

  • Reverts #2936 as this caused render breakage on some Android phones: #2949. Unfortunately this means the performance regression is back: #2915. The underlying issue is mostly understood, but will require our next release cycle to get fixed upstream in three.js. Stay tuned.
model-viewer - v1.9.1

Published by elalish almost 3 years ago

Bug fixes

  • Fixed scale/orientation attributes being ignored on load. #2904
  • Fixed raycasting in WebXR mode. Note, this is potentially a โœ‹BREAKING CHANGE for users of the positionAndNormalFromPoint and materialFromPoint methods, as these now take absolute coordinates like clientX rather than relative coordinates like offsetX. Sorry for not quite following semver here, but these methods are only used by a small fraction of our users, the required change is very small, and this was the only way to fix this bug. #2905
  • Fixed raycasting for animated models. #2925
  • Fixed a major loading performance regression (as much as 10x on Windows). #2936
model-viewer - v1.9.0

Published by elalish about 3 years ago

Features

๐Ÿ†• glTF variants now supported by the scene-graph material API. #2700, #2764, #2816
๐Ÿ†• Added materialFromPoint and getMaterialByName methods. #2839
๐Ÿ†• Support for EXT_meshopt_compression. Thanks @donmccurdy! #2706
๐Ÿ†• Added generate-schema attribute. #2853
๐Ÿ†• Added seamless-poster attribute for transparent posters with shadows. #2865

Bug fixes

  • Fixed several mouse/touch UX quirks. Thanks @lucadalli! #2691, #2722, #2724, #2728, #2730
  • Fixed shadow clipping when switching models during auto-rotate. #2765
  • Fixed material API for skinned meshes. #2799, #2801
  • Workaround for flaky black renders on Safari (WebGL corruption). #2832
  • xr-environment was being used always in WebXR mode instead of opt-in as intended. #2847
  • Improved loading performance by generating the environment in parallel with the model fetch. #2870
  • Fixed USDZ auto-generation for models with differently sized normal and roughness maps. #2878

Examples

โœจ Updated custom controls examples for improved UX. Thanks @lucadalli! #2760
โœจ Added material picking example. #2839, #2855
โœจ Updated Performance examples for the seamless-poster attribute and webP posters. #2865

Other notable changes

  • Updated to Three.js r133, which pulled several fixes including rendering transparent materials properly without a skybox.
  • Updated DRACO decoder version. #2705
  • Updated Fidelity Results page. #2677, #2685, #2741, #2749, #2752, #2757, #2829, #2851
  • Updated Fidelity path tracer. Thanks @bsdorra! #2806, #2820, #2854
  • Removed the old interactive example, redirecting to the Editor instead. #2782
  • Use Trusted Types for better static analysis of security. #2875

Editor

  • Automatic WebP poster generation. #2711
  • Added an animation scrubber. #2723
  • Tweaked the camera UI and fixed several bugs. #2701, #2712, #2789
  • Fixed file-open on mobile. #2770
  • Added joint count to validator output. #2779
  • Support glTF loading, including folders and zip archives. #2781
  • Default lighting switched to "neutral". #2805, #2819
  • Select material by clicking the model. #2879
model-viewer - v1.8.0

Published by elalish about 3 years ago

Features

๐Ÿ†• You can now select your power preference for dual GPU machines (default is "high-performance"; choose "low-power" to avoid a slight UX hitch on tab switch if your element is small enough to not heavily tax the GPU): #2656
๐Ÿ†• WebXR UX: now in AR the model can be interacted with before it is placed on the floor/wall: #2606
๐Ÿ†• Added doubleSided, alphaMode, and alphaCutoff to the scene-graph API: #2616
๐Ÿ†• Added createTexture() and setTexture() to the scene-graph API: #2505
๐Ÿ†• Added createThumbnail(width, height) method to extract the contents of textures: #2566
๐Ÿ†• We now properly export the glTF variants extension. Thanks @takahirox! #2544
๐Ÿ†• You can now opt-in to use AR lighting estimation in WebXR mode. Thanks @takahirox! #2471

Bugfixes

  • Fixed black models on GL context loss: #2657
  • Don't show the AR button when there is no src: #2639
  • Fixed a long-standing memory leak. Thanks @ukito-pl! #2600
  • Fixed framing of quantized models: #2463

Other notable changes

  • Updated to Three.js r131.2
  • With the Three.js update we now support most of the new PBRNext glTF extensions. We're still working through some bugs, but you can check our current render fidelity status here.

Editor

  • Major refactor of the editor, removing a large chunk of the code base in favor of using <model-viewer>'s scene-graph API. As a part of this many bugs were fixed and several UX changes were made, notably you can now load glTF in addition to GLB and KTX2 textures don't throw an error. Also, thanks to auto-generation you can see your glTF in AR on iOS without uploading a separate USDZ. #2469
model-viewer - v1.7.2

Published by elalish over 3 years ago

Bugfixes

model-viewer - v1.7.1

Published by elalish over 3 years ago

Bugfixes

  • Work-around for a Scene Viewer bug that's preventing launch on Android 11. The fix in Scene Viewer is also rolling out, but this will save a couple weeks of down-time: #2399
  • Fixed regression where the second model instance was rendering black on Firefox & Safari: #2398
  • Fixed a transparent material transform regression: #2390
model-viewer - v1.7.0

Published by elalish over 3 years ago

Features

๐Ÿ†• ios-src is now optional for AR Quick Look on iOS! If you only include quick-look in ar-modes, <model-viewer> will now generate a USDZ on the fly when the user clicks the Enter AR button, and it will include any modifications done through our scene-graph API, like choosing a variant. ios-src will still take precendence if you need to provide a better model than our auto-generation (for instance we don't yet support animation). Thanks @kolodi! https://github.com/google/model-viewer/pull/2374

๐Ÿ†• Updated the WebXR UX based on user feedback. Now the object is immediately placed, world-locked based on the last camera position from 3D mode, then when the floor is found, it is moved up or down to land on it: https://github.com/google/model-viewer/pull/2279

๐Ÿ†• Added two-finger rotation to the WebXR UX, allowing large models to be rotated when you cannot touch outside their bounding box: https://github.com/google/model-viewer/pull/2355

๐Ÿ†• Added an ar-tracking read-only attribute to indicate the state of ARCore world tracking in order to surface error messages: https://github.com/google/model-viewer/pull/2363

๐Ÿ†• Added an interpolation-decay attribute to control the speed of camera and target interpolation, see the modified example. Thanks @timmmeh! https://github.com/google/model-viewer/pull/2286

๐Ÿ†• Added CSS part to our default UI elements to allow them to be easily styled. This takes the place of most of our CSS custom properties, which have now been deprecated and will be removed when v2.0 comes. Thanks @mrdoob! https://github.com/google/model-viewer/pull/2370

๐Ÿ†• Added support for external renderers. This is an early-phase feature and the idea is to make it possible to control a cloud-based or non-glTF renderer with <model-viewer>'s camera and annotation APIs: https://github.com/google/model-viewer/pull/2328

Bugfixes

Other notable changes

model-viewer - v1.6.0

Published by elalish over 3 years ago

Bugfixes

Other notable changes

Editor

model-viewer - v1.5.0

Published by elalish over 3 years ago

New features

๐Ÿ†• Added support for the KHR_texture_basisu extension of glTF, for reduced GPU memory footprint; see the example, https://github.com/google/model-viewer/pull/1989

Bugfixes

Other notable changes

  • Deprecated IE11: In line with Microsoft's deprecation, we are no longer publishing model-viewer-legacy.js on NPM and IE-specific code is now being removed. We have also updated our examples as polyfills are not required anymore to support all modern browsers. The focus-visible polyfill is the only one we now recommend, and only for improved UI.
  • Updated to Three.js r125

Editor

model-viewer - v1.4.1

Published by elalish over 3 years ago

Bugfixes

model-viewer - v1.4.0

Published by elalish almost 4 years ago

New features

๐Ÿ†• Added support for the KHR_materials_variants extension of glTF, for quick and easy material changes; see the example, https://github.com/google/model-viewer/pull/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, https://github.com/google/model-viewer/pull/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, https://github.com/google/model-viewer/pull/1792
๐Ÿ†• Added disable-zoom attribute so that desktops can scroll past a model instead of it switching to zoom, https://github.com/google/model-viewer/pull/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! https://github.com/google/model-viewer/pull/1761
๐Ÿ†• Added duration property to animations, thanks @rhystmills! https://github.com/google/model-viewer/pull/1742
๐Ÿ†• Added showPoster() method, https://github.com/google/model-viewer/pull/1691

Bugfixes

Examples

โœจ Added an example of automatically showing product dimensions in both 3D and AR using hotspots, https://github.com/google/model-viewer/pull/1726
โœจ Added an example of rotating the environment instead of the model, https://github.com/google/model-viewer/pull/1741
โœจ Fixed the pan example to account for auto-rotate, https://github.com/google/model-viewer/pull/1788

Other notable changes

Editor

model-viewer - v1.3.0

Published by elalish almost 4 years ago

New features

Bugfixes

Other notable changes

Known issues

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

Published by elalish about 4 years ago

Bugfixes

model-viewer - v1.2.0

Published by elalish about 4 years ago

New features

Bugfixes

Other notable changes

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.
model-viewer - v1.1.0

Published by elalish about 4 years ago

New features

Bugfixes

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.
model-viewer - v1.0.0

Published by elalish over 4 years ago

New features

Bugfixes

Other notable changes

model-viewer - v0.10.0

Published by elalish over 4 years ago

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
model-viewer - v0.9.0

Published by cdata over 4 years ago

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
model-viewer - v0.8.1

Published by cdata almost 5 years ago

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

model-viewer - v0.8.0

Published by cdata almost 5 years ago

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>
Package Rankings
Top 0.85% on Npmjs.org
Related Projects
google-chart

Google Charts API web components

01 May 2014 351
stl-part-viewer

A lit-element web component that uses Three.js to display an STL model file.

22 Jun 2018 20
ar-gif

Easy to use augmented reality web components

11 Feb 2019 57
vox-viewer

like <model-viewer>, but for .vox-models

31 Oct 2019 24
arc-ball

A small Web Component enables arcball 3D view for everything inside.

02 Apr 2024 1
three-web-components

A collection of Web Components to compose Three.js apps

19 Feb 2019 44
lit-jsx

A JSX runtime for LitElement

10 Jun 2024 0
Arc2D

The Arc Engine is an ultra-lite, fast, memory efficient HTML5/ES6 alternative to Angular, React, ...

11 Jan 2020 15
usd-viewer

Experimental Web Component for displaying 3d files in USDZ format

19 Feb 2023 31
web-component-designer

A Designer for HTML Components or Pages in a WebComponent

22 Oct 2019 143
lunchboxjs

Declarative ThreeJS via web components

18 Nov 2021 239
custom-elements

A list of my Custom Elements (Web Components) and some useful links with related material.

13 Apr 2022 7
spline-selfhosted

demo repository to show selfhosting of spline 3D scene (exports)

04 Nov 2023 6
foss-gis-web-components

A repo to help get started with GIS mapping libraries and web components

03 Sep 2024 0
threejs-model-loader

THREE.js Model Loader for delegating to the appropriate geometry loader and associated Web Component

14 Apr 2018 12