3D across the web, devices, screens, and reality has been ramping up considerably over the last few years. 2020, however, has brought more 3D capability to the web with browsers boosting device support for both WebVR and WebXR APIs and <model-viewer> hitting API stability. This means one thing – there will be more 3D on the web. From Khronos Group:

<model-viewer> is an open source web component that brings glTF™-based interactive, accessible 3D content to your website with a single line of HTML, including AR placement on both Android and iOS. New with v1.1 of <model-viewer> is a scene-graph API that allows basic access to the glTF model source, enabling simple edits to be made to 3D assets with just a few lines of JavaScript.

Shiskebab 3D added with a single line of code. Example from modelviewer.dev

The example above was added with a single line of code and sized to fit the desired width/height. Granted you have the two lines of <model-viewer> javascript loaded, that line of code displays your 3D model (.glb or .gltf format) right away. And that is just the beginning. <model-viewer> has a load of attributes, css properties, methods, and events that allow you to extend the 3D interaction.

At the forefront, is the ability to load 3D models in AR from mobile devices (available with the Chrome 83 release earlier in 2020). It works for iOS as well, however, a USDZ version of the model is needed. If you’re viewing this on a mobile device, you’ll see a “View in Your Space” on the example above.

Along with all the new support is the ability to edit glb/glTF assets in the web browser and AR. If you have a glTF model or access to one, you can try out the model viewer editor here (or load the astronaut example). Here’s a quick video from Khronos Group showing the core functionality of the editor.

Be on the lookout for more 3D on the web and, while you’re waiting, check out the examples at modelviewer.dev and give it a go yourself.


Josh is founder and editor at SolidSmack.com, founder at Aimsift Inc., and co-founder of EvD Media. He is involved in engineering, design, visualization, the technology making it happen, and the content developed around it. He is a SolidWorks Certified Professional and excels at falling awkwardly.