Jordan Santell immersive engineer

model-viewer

<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>
NASA's Curiosity Rover 3D model displayed on the web, and projected into the real world, with <model-viewer>. (source)

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:

An astronaut being viewed in model-viewer on an Android device

Impact

Shopify demo video of <model-viewer> in action for their merchants. (source)

Team

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.