An interesting tool I saw at SFHTML5 is
<model-viewer>, a web component-based tool that will display 3D content in a 2D hosting page.
<model-viewer> provides a way to view 3D content in a web browser, independently of the form factor you're using (either a 2d Desktop browser or the browser built into a 3D device like the Oculus Quest). It is a web component so we need to polyfill web components for older versions of Edge and Firefox.
In the video below, Chris Joel, from the DeviceXR at Google explains
<model-viewer>, what it is and how it works.
I normally put the scripts at the bottom of the page, before the closing body tag and before loading the model viewer scripts.
npm i @google/model-viewer \ @webcomponents/webcomponentsjs \ fullscreen-polyfill \ intersection-observer \ resize-observer-polyfill
After we load the polyfills, we can load the
<!-- webcomponents-loader is required to support older versions of Edge and FIrefox --> <script src="./js/webcomponents-loader.js"></script> <script src="./js/intersection-observer.js"></script> <script src="./js/ResizeObserver.js"></script> <!-- Fullscreen polyfill is required for experimental AR features in Canary --> <script src="./js/fullscreen.polyfill.js"></script>--> <!-- Magic Leap support --> <script src="./js/prismatic.js"></script>
<model-viewer>scripts. We use modules to load the scripts in modern browsers and `nomodule` to load a different script for those browsers that don't support modules.
Once we have all the scripts installed we can use
<script type="module" src="./js/model-viewer.js"></script> <script nomodule src="./js/model-viewer-legacy.js"></script>
<model-viewer>by creating one or more instances of the custom element like show in the example below:
<model-viewer src="./models/2CylinderEngine.gltf" alt="A 3D model of a 2 cylinder" auto-rotate camera-controls></model-viewer>
The example will produce the following result:
You can have as many instances of
<model-viewer> as you need on your page.
They can each be customized independently from each other. The two additional instances have different background colors. They can also be manipulated separately.
We can also load multiple models
But the more intriguing, to me, thing about
<model-viewer> is how, with a few extra attributes you can provide a range of experiences, from mouse manipulation as show in the prior examples to full support for Google's ARCore, Apple's Quicklook (with some additional requirements), and Magic Leap.
The code now looks like this:
<model-viewer src="./models/Satellite(1).gltf" alt="3D Satellite" ar camera-controls
The model looks like this. It won't look any different in desktop or devices where Scene Viewer is not supported but, in devices where the feature is supported, users will have an option to click on to place an interact with the object.
If you have the USDZ model, you can add it to your experience using the
ios-srcattribute and the URL to the model.
<model-viewer src="./models/Diner.gltf" alt="3D Diner" camera-controls ios-src="./models/Diner.usdz"></model-viewer>
And, of course, you can provide support for both, using
ios-src together to cover both Android and iOS in the same element
<model-viewer src="./models/Diner.gltf" alt="3D Diner" camera-controls ar ios-src="./models/Diner.usdz"></model-viewer>
This barely begins to scratch the surface of what we can do with <model-viewer>. See the documentation for more information on what you can do and how you can expand your 3D experiences on the web.
Usdz is the wrinkle in the process. Most of the models in this page are loaded from glTF files, an interchange format created by the Khronos Group and that has wide support in terms of tools and technologies. As pointed out in All about Apple’s new USDZ File Format — Simplified the technology has no open source tool support but there is commercial support, both from small companies like Vectary and large tool companies like Adobe's Project Aero.
For more information about UDSZ, you can check the following resources.
- Usdz File Format Specification
- All about Apple’s new USDZ File Format — Simplified
- Apple's USDZ AR file format: What you need to know