Easily display interactive 3D models on the web and in AR!
APACHE-2.0 License
Bot releases are hidden (Show)
Published by elalish almost 3 years ago
Published by elalish almost 3 years ago
scale
/orientation
attributes being ignored on load. #2904positionAndNormalFromPoint
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. #2905Published by elalish about 3 years ago
๐ 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
auto-rotate
. #2765xr-environment
was being used always in WebXR mode instead of opt-in as intended. #2847โจ 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
Published by elalish about 3 years ago
๐ 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
src
: #2639<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. #2469Published by elalish over 3 years ago
Published by elalish over 3 years ago
Published by elalish over 3 years ago
๐ 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
Published by elalish over 3 years ago
touch-action:none
if you want all scroll events swallowed, even for fullscreen elements: https://github.com/google/model-viewer/pull/2058
ModelCacheSize
works as intended. Thanks @mqg734! https://github.com/google/model-viewer/pull/2092
Published by elalish over 3 years ago
๐ 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
Published by elalish over 3 years ago
Published by elalish almost 4 years ago
๐ 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
ar-scale="fixed"
no longer clobbers URL parameters for ios-src
, https://github.com/google/model-viewer/pull/1775
โจ 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
quick-look-browsers
attribute, as both Chrome and Safari launch QuickLook just fine now, so no need to restrict, https://github.com/google/model-viewer/pull/1783
Published by elalish almost 4 years ago
<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, https://github.com/google/model-viewer/pull/1566
<model-viewer>
to optimize Lighthouse scores for page performance, https://github.com/google/model-viewer/pull/1528
Published by elalish about 4 years ago
Published by elalish about 4 years ago
Published by elalish about 4 years ago
Published by elalish over 4 years ago
ar-scale=โfixedโ
configuration now works in iOS Quick Look https://github.com/google/model-viewer/pull/1213
ar-status
event and attribute to respond to changes in AR-vs-inline rendering https://github.com/google/model-viewer/pull/1237
src
was configured https://github.com/google/model-viewer/pull/1212
src
while in WebXR now works as intended https://github.com/google/model-viewer/pull/1221
toBlob
now works as intended in Firefox/Safari https://github.com/google/model-viewer/pull/1254
ar-modes=โscene-viewer webxr quick-look
preload
attribute has been removed; preloading behavior is now governed with the loading
attribute https://github.com/google/model-viewer/pull/1159
Published by elalish over 4 years ago
ar-modes
#1070ar-modes="webxr scene-viewer quick-look fallback"
--ar-button-scale
#1125shadow-intensity
is reset to 0
#1042currentTime
for a paused animation now updates the rendered frame #1139OffscreenCanvas
and ImageBitmapRenderingContext
when available, improving memory overhead #995<model-viewer>
element on the page, which should yield significant runtime performance improvements in many common cases #995ar
attribute is now required to activate all AR integrations, including iOS Quick Look #1070modelIsVisible
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 #1077magic-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
Published by cdata over 4 years ago
resetInteractionPrompt()
to reactivate the prompt after it has been dismissed #1029text-align
is set #973<model-viewer>
has a transparent background by default now, and also the background-color
attribute was removed #975
background-color: #fff
) to make the background opaque as it was before, and also control the color; all CSS background
values are supported ๐<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
model-viewer.js
from https://unpkg.com or use the @google/model-viewer
module from npm
Published by cdata almost 5 years ago
This patch release contains fixes for a handful of rendering issues introduced in v0.8.0:
Published by cdata almost 5 years ago
shadow-softness
#513
shadow-softness="0"
to get the old defaultmax-camera-orbit
, min-camera-orbit
, max-field-of-view
, min-field-of-view
#915toBlob()
to create screenshots asynchronously #861
toBlob({ idealAspect: true })
#890ar-scale="fixed"
#918
background-image
attribute has been renamed to skybox-image
#923<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>