AR, VR, et un modèle pour 3D en HTML

Les nouveaux éléments et attributs HTML introduits par Safari Technology Preview 161 attirent une attention généralisée. Cet article discutera en profondeur du processus d'évolution, des fonctions et de la direction future de développement des éléments <model></model>. <model></model>

Initialement, l'idée de l'élément

découle de l'expérience nécessaire pour améliorer l'intégration de Safari avec les caractéristiques de look rapide iOS. AR Quick Look permet aux utilisateurs de superposer des modèles de produits 3D dans des environnements du monde réel via leurs caméras mobiles, telles que des fonctionnalités d'essai virtuelles que certains magasins ont adoptées. <model></model>

Comme vous pouvez le voir sur l'interprète de Webkit, la proposition initiale de l'élément

était du comité Web immersif. Le comité s'engage à intégrer les technologies de réalité virtuelle (VR) et de réalité augmentée (AR) dans le Web. La proposition indique que HTML, tout en prenant en charge plusieurs types de médias, n'a pas une approche déclarative pour afficher directement le contenu 3D. L'intégration du contenu 3D nécessite généralement des éléments de fonctionnement du script <model></model>, ce qui est plus lourd. Les éléments <canvas></canvas> sont conçus pour intégrer des modèles 3D interactifs aussi commodément que les autres supports visuels. Les modèles peuvent être créés ou générés dynamiquement par des outils de modélisation 3D, mais sont fournis par le serveur en tant que ressource autonome. <model></model>

Un exemple de base est le suivant, qui est utilisé de manière similaire à élément

ou <video></video>: <audio></audio>

Les types de fichiers pris en charge par les éléments

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

, tels que .usdz ou .glb, doivent être clarifiés davantage. <model></model>

À l'heure actuelle, le projet de proposition pour l'élément

n'a pas été entièrement formulé, mais il a décrit ses éventuelles orientations de développement futurs, notamment: l'ajout de modèles au document, permettant l'interactivité, en soutenant plusieurs formats, en fournissant un contenu alternatif et en assurant l'accessibilité. De nombreux problèmes à résoudre sont également répertoriés dans la proposition. Certains attributs proposés, tels que <model></model>, autoplay, controls, loop, muted et poster, les rendent plus similaires aux éléments <video></video>.

Dès 2018, Keith Clark a publié un article de blog dans lequel il prototype un élément personnalisé appelé <x-model></x-model> pour charger et rendre les modèles 3D. En 2020, Joe Medley a partagé le composant <model-viewer></model-viewer> et a créé une page d'accueil pour cela.

À l'heure actuelle, la normalisation des éléments <model></model> est toujours en cours. Apple a exprimé son soutien grâce à la publication de Safari TP 161, ce qui est cohérent avec l'accent mis par Apple sur la technologie AR. Google est également impliqué, mais se concentre principalement sur les composants Web. Il peut y avoir des différences dans la vision d'Apple et Google pour la technologie AR sur le Web, ce qui peut conduire à un conflit.

En bref, l'émergence des éléments <model></model> offre de nouvelles possibilités pour l'affichage et l'interaction des modèles 3D sur le Web, mais leur développement en est encore à ses débuts et le développement futur vaut la peine d'être attendu. Il convient de noter que la version 162 de la technologie Safari a été publiée, qui prend en charge CSS Nesting et la syntaxe des couleurs relatives CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!