AR, VR, and a Model for 3D in HTML

The new HTML elements and attributes introduced by Safari Technology Preview 161 are attracting widespread attention. This article will discuss in-depth the evolution process, functions and future development direction of <model></model> elements. <model></model>

Initially, the idea of ​​the

element stems from the experience need to enhance the integration of Safari with iOS AR Quick Look features. AR Quick Look allows users to overlay 3D product models into real-world environments through their mobile cameras, such as virtual trial features that some stores have adopted. <model></model>

As you can see from WebKit's interpreter, the initial proposal for the

element was from the Immersive Web Committee. The committee is committed to integrating virtual reality (VR) and augmented reality (AR) technologies into the Web. The proposal states that HTML, while supporting multiple media types, lacks a declarative approach to directly displaying 3D content. Embedding 3D content usually requires script operation <model></model> elements, which is more cumbersome. <canvas></canvas> Elements are designed to embed interactive 3D models as conveniently as other visual media. Models can be created or generated dynamically by 3D modeling tools, but are provided by the server as a standalone resource. <model></model>

A basic example is as follows, which is used similarly to

or <video></video> Element: <audio></audio>

The file types supported by the

<model style="width: 400px; height: 300px"></model>

elements, such as .usdz or .glb, need to be further clarified. <model></model>

At present, the draft proposal for the

element has not been fully formulated, but it has outlined its possible future development directions, including: adding models to the document, enabling interactivity, supporting multiple formats, providing alternate content, and ensuring accessibility. Many issues to be resolved are also listed in the proposal. Some proposed attributes, such as <model></model>, autoplay, controls, loop, muted and poster, make them more similar to the <video></video> elements.

As early as 2018, Keith Clark published a blog post in which he prototyped a custom element called <x-model></x-model> to load and render 3D models. In 2020, Joe Medley shared the <model-viewer></model-viewer> component and created a homepage for it.

At present, standardization of <model></model> elements is still in progress. Apple expressed support through the release of Safari TP 161, which is consistent with Apple's emphasis on AR technology. Google is also involved, but mainly focuses on Web Components. There may be differences in Apple and Google’s vision for AR technology on the web, which can lead to some conflict.

In short, the emergence of <model></model> elements provides new possibilities for the display and interaction of 3D models on the web, but their development is still in its early stages and future development is worth looking forward to. It is worth noting that the Safari Technology Preview version 162 has been released, which supports CSS nesting and CSS relative color syntax.

The above is the detailed content of AR, VR, and a Model for 3D in HTML. For more information, please follow other related articles on the PHP Chinese website!