<model-viewer> is a web component that makes it easy to display interactive 3D models on the web, with support for AR platforms.
<model-viewer src="Astronaut.glb" background-color="#ccc"></model-viewer>
In 2018, the Daydream WebXR team was rapidly prototyping in an attempt to answer the question: "What does an immersive web look like 10 years from now?" We explored how we could apply all the good parts of the web (SLICE) in an immersive environment, and designed new primitives that could support a 3D-first web platform, extending the traditional 2D web. Any building block of this future demands that 3D content must be composable, interoperable and standardizable, contrasted with today's browsers inability to "understand" 3D content beyond pixel values. Some of these prototyped building blocks required HMDs and special browsers to implement, but declaratively describing 3D content was something possible, and needed, on today's web stack. There was no easy way of presenting self-hosted 3D content on the web. During Chrome Dev Summit 2018, we open sourced this building block as <model-viewer>, a web component that makes displaying 3D models as easy as displaying images.
We simulated what a browser would do if it could natively interpret 3D content. Developers and users have expectations how browser primitives should work, expecting content to be:
- Accessible: While WebGL canvases are opaque to screenreaders, model-viewer supports declarative descriptions and annotations within 3D content.
- Responsive: model-viewer works on desktop, mobile, and augmented reality devices (and viewable in AR).
- Interoperable: model-viewer is a standalone library that works on all major browsers. Viewing in AR is supported for iOS Quick Look, Magic Leap Helio, Google Scene Viewer, and WebXR Device API.
- Performant: Web developers don't need to know what reflow is to create performant sites, and I've never had a
<div>leak memory. Similarly, model-viewer attempts to have beautiful, performant defaults that "just work".
- Google Search and Scene Viewer use model-viewer as one of the rendering methods of displaying inline 3D content.
- NASA uses model-viewer to present an interactive view of spacecrafts (Curiosity Rover, Voyager, Juno, Cassini) and other celestial bodies.
- Other users of model-viewer in the wild: DeWalt, Red Bubble, Buso Audio, isho furniture, Raine Scooters, Melvinsi Fashion.
Shout out to all that helped to build & ship <model-viewer>: Gordon Brander, Ricardo Cabello, Josh Carpenter, Yuin Chien, Matt Small, and the current lead, Chris Joel.
- model-viewer: Web3D made easy with Chris Joel
- Web Fundamentals: The model-viewer web component
- Web Fundamentals: Augmented reality with model-viewer
- Codelab: Add 3D models to the web with <model-viewer>
- Google Developers Blog: Updates to ARCore Help You Build More Interactive & Realistic AR Experiences