Apple propose d'ajouter un élément <model> au HTML pour afficher du contenu en 3D

Et faciliter son intégration dans les pages Web

Les contenus audios et vidéos sont devenus incontournables sur le Web avec l'avènement des plateformes de médias sociaux, mais d'autres types de contenus comme la 3D, commencent à se démocratiser et pourraient représenter l'avenir du Web. Comme à son habitude, Apple veut être l'un des pionniers de cette révolution et propose d'ajouter l'élément <model> au HTML pour afficher du contenu en 3D. Le fabricant de l'iPhone explique que l'élément HTML <model> vise à permettre à un site Web d'intégrer des modèles 3D interactifs aussi facilement que tout autre média visuel.

Apple veut rendre plus facile l'affichage des médias 3D sur le Web

Le HTML est le langage de balisage conçu pour représenter les pages Web. Il permet l'affichage de plusieurs types de médias par le biais d'éléments tels que <img>, <picture> ou <video>, mais il ne fournit pas de manière native pour consommer directement du contenu 3D. L'intégration d'un tel contenu dans une page est relativement lourde et repose sur l'utilisation d'un script pour l'élément <canvas>. « Nous pensons qu'il est temps de mettre les modèles 3D sur un pied d'égalité avec les autres types de médias, déjà pris en charge », a déclaré Apple à propos de la nouvelle balise.

L'élément <model> est le travail des ingénieurs Antoine Quint, Dean Jackson et Theresa O'Connor d'Apple. Selon l'équipe, il existe une grande variété de techniques antérieures dans ce domaine. Par exemple, three.js et Babylon JS sont des frameworks WebGL qui peuvent traiter de nombreux formats différents. Il y a aussi le projet model-viewer qui affiche des modèles en ligne dans une page Web et permet aussi aux utilisateurs de certains appareils de voir l'objet 3D en réalité augmentée. Enfin, iOS Safari permet de naviguer directement vers une vue en réalité augmentée grâce à sa [fonction AR Quick Look].


Cependant, ils notent qu'il existe des cas où ces options actuelles ne peuvent pas rendre le contenu. Cela peut être dû à des restrictions de sécurité ou aux limites de <canvas>. L'élément HTML <model> vise à permettre à un site Web d'intégrer des modèles 3D interactifs aussi facilement que tout autre média visuel. Les modèles sont censés être créés par des outils de création 3D ou générés dynamiquement, mais servis comme une ressource autonome par le serveur. Et, outre le simple affichage d'un modèle 3D, l'élément <model> devrait prendre en charge l'interactivité et les animations lorsqu'il est présenté dans la page.

L'équipe estime également qu'il devrait prendre en charge des expériences plus immersives, comme la réalité augmentée. « Cette proposition ne vise pas à définir un mécanisme permettant la création d'une scène 3D dans un navigateur à l'aide de primitives déclaratives ou d'une API programmatique », a-t-elle mis en garde.

HTMLModelElement : utilisation dans une page Web

L'élément <model> est un nouvel élément HTML remplacé similaire à <video> en ce sens qu'il est remplacé visuellement par le contenu d'une ressource externe référencée via un élément <source>. Comme les autres éléments HTML, il peut être stylé à l'aide de CSS. La ressource est résolue en sélectionnant les premiers éléments <source> avec un attribut de type supporté, ce qui permet de spécifier différentes versions de la même ressource dans différents formats. Voici un exemple montrant comment un fichier USDZ peut être affiché dans une zone mesurant 400px par 300px, avec un repli vers un fichier obj.


Selon l'équipe, les navigateurs peuvent prendre en charge la manipulation directe de l'élément <model> lorsqu'il est présenté dans une page Web. Un navigateur peut permettre de faire pivoter ou de zoomer sur le modèle dans les limites de l'élément sans affecter la position de défilement ou le niveau de zoom de la page. Pour opter pour ce comportement, l'auteur peut utiliser l'attribut HTML interactif. L'exemple précédent peut être complété pour permettre interactive fournie par le navigateur. L'exemple précédent peut être complété pour permettre l'interaction fournie par le navigateur :


L'équipe a déclaré qu'il est également possible que les navigateurs prennent en charge une présentation animée du modèle, en exécutant des animations définies dans les données sources. Ces animations ne sont pas activées par défaut, mais peuvent être déclenchées au chargement en utilisant l'attribut HTML autoplay. L'exemple original peut être complété pour permettre de telles animations :


En outre, les attributs interactive et autoplay ne s'excluent pas mutuellement et peuvent être combinés. Un navigateur peut exécuter une animation par défaut qui est suspendue pendant que l'utilisateur interagit avec le modèle et qui est automatiquement reprise après une période d'inactivité. Ainsi, l'exemple original peut être complété pour permettre à la fois les animations et l'interactivité :


Enfin, comme l'élément <video>, l'élément <model> possède un attribut poster facultatif qui référence une image à afficher pendant le chargement du contenu, ou si le contenu ne se charge pas.

L'élément HTMLModelElement et l'API DOM

Chaque élément <model> est représenté dans le DOM sous forme d'instances HTMLModelElement. Les propriétés suivantes permettent un accès facile aux informations autrement représentées par des attributs et des éléments HTML :

• [C...