HTML <model> Element

In January 2023, Apple introduced a new HTML element. They released it behind the flag with the launch of Safari Technology Preview 161. This new HTML element allows front-end developers to include 3D models on websites.

Shortly after the announcement, I started playing around with it, setting up a quick demo page to see how it works. Quickly, I saw the potential benefits for the future. However, I kind of forgot about it as this feature is still too new and in development.

A few days later, I wanted to take a second look at this HTML element to see if it had been improved, mostly to write something about it for this blog. But the HTML element was basically still the same as it was back then — no real improvement, and it has not been adopted by other internet browsers.

How to use the HTML element

To use the new HTML element. We need to enable the Feature Flag in Safari. We can do this by enabling the option “HTML element.” After enabling this flag, I had to download a 3D model from the internet export in the USDZ file format. USDZ stands for Universal Scene Description, a file format for 3D models introduced by Apple in collaboration with Pixar for its ARKit. NASA has some 3D models on their site that can be downloaded. So, I got a 3D model of our home planet Earth. The last part I needed was setting up the HTML. The required HTML is simple — just set up the element with a source file, and we are done. The property interactive on the element enables users to rotate the 3D model in their browser.

 <model width="400" height="300" interactive>
     <source src=“earth.usdz" type="model/vnd.usdz+zip">
 </model>

Safari will display this 3D model as shown in the screenshot below. One thing I noticed on my MacBook Pro from 2017 is that my computer can’t handle it. It works, but the fans are blowing very loud. This might be better on newer machines.

I couldn’t test it with animated 3D models as I couldn’t find animated 3D models in the correct file format. But I assume that animations are working.

In which cases is this HTML element useful?

After testing the HTML element, one of the questions that arose was for whom is it and when can this be used. At this point in time, it is not ready for testing or production at all, but when Google and Firefox decide to adopt this HTML element, we are in for a ride. One use case I can think of is product display. Let’s take shoes, for example. A 3D model of the shoe is rendered in the browser, and you can look at the shoe in great detail and view it from any angle you want.

A second use case I can think of is as part of the cover. Show a 3D world on the cover that you can view from many angles. However, it can’t be interactive at this point in time. As there might be a need for a JavaScript API to script some parts of the animation.

Final word

I see great potential in this new HTML element; however, there is still a long way to go before it is ready for production. At this point in time, I don’t think it will go anywhere, but let’s hope it will be added with full JavaScript support so interactions are possible.

I really hope you all liked this first blog post, and I hope to keep in touch with all of you. To finish this blog post, I will end with a wise quote from one of my favorite games Nier Automata:

「未来は与えられるものではない、自分で掴み取らなければならないもの - ポッド042」— A future is not given to you, it is something you must take for yourself - pod 042