L'élément HTML <model> arrive sur tous les OS d'Apple

À la WWDC 2026, un ingénieur de Safari a déposé un maillet de camping en 3D sur une page produit d’e-commerce avec une seule balise, <model>, sans bibliothèque JavaScript, et a laissé les visiteurs le faire pivoter du doigt.¹ L’élément qui a rendu cela possible est livré sur visionOS depuis un certain temps. La nouveauté de 2026, c’est que le même balisage s’affiche désormais dans Safari sur iPhone, iPad et Mac, et que l’API JavaScript qui l’entoure a gagné en maturité. Apple l’a dit clairement : « Nous avons été les pionniers de l’élément Model sur visionOS… L’élément Model arrive maintenant sur iOS, iPadOS et macOS ! Le même balisage, le même élément fonctionne sur l’ensemble des plateformes d’Apple. »¹

La démonstration ci-dessous suit le parcours de la 3D clé en main que présente la session, depuis un repli statique <img> jusqu’à l’interaction en orbite, les transformations scriptées, la lecture d’animation pré-calculée et AR Quick Look. Tout ce qui figure ici provient directement de la session 215 de la WWDC 2026.

TL;DR

• L’élément <model> a fait ses débuts sur visionOS plus tôt ; la WWDC 2026 l’étend à Safari sur iOS, iPadOS et macOS et fait mûrir l’API JavaScript qui l’entoure.¹
• Un modèle s’intègre comme un média : pointez src vers un fichier USDZ, ajoutez des balises <source> avec des types MIME comme <video>, et imbriquez un <img> à l’intérieur comme repli pour les navigateurs qui ne prennent pas encore en charge l’élément.¹
• La promesse ready vous indique quand un modèle a été chargé afin que vous puissiez retirer un indicateur de chargement ; un bloc catch affiche le contenu de repli en cas d’échec.¹
• L’attribut stagemode="orbit" offre une rotation interactive avec un seul attribut ; pour un contrôle scripté, définissez stagemode="none" et pilotez entityTransform avec une DOMMatrix construite via rotateSelf.¹
• L’animation pré-calculée se lit via playbackRate plus play(), un taux négatif la fait défiler à l’envers, et envelopper le modèle dans <a rel="ar"> offre aux visiteurs sur iOS et iPadOS une expérience AR Quick Look complète.¹

Ce qui a réellement été livré

Aleksei, de l’équipe Safari, présente l’extension multiplateforme à partir de 0:37.

Le cadrage honnête a son importance ici. L’élément <model> n’est pas tout nouveau. Apple l’a d’abord livré sur visionOS, où il intégrait un rendu stéréoscopique pour qu’un produit semble avoir une vraie profondeur sur Apple Vision Pro.¹ La WWDC 2026 fait deux choses au-dessus de cette fondation : elle apporte l’élément à Safari sur iOS, iPadOS et macOS, de sorte que « votre contenu 3D atteint chaque visiteur de Safari, qu’il soit sur iPhone en déplacement, sur iPad au café ou sur Mac à son bureau », et elle étoffe l’API JavaScript qui transforme une visionneuse statique en visionneuse interactive.¹

L’argumentaire contre le statu quo est direct. Aujourd’hui, la plupart de la 3D sur le web passe par model-viewer, la populaire bibliothèque JavaScript. L’argument d’Apple : l’élément natif ne nécessite aucune bibliothèque supplémentaire, effectue son rendu « directement par la plateforme » et constitue « une norme web émergente, de sorte que votre code est pérenne ».¹ L’équipe Safari d’Apple affirme « contribuer activement à la spécification du model au W3C » et invite à donner son avis via l’Immersive Web Community Group.¹ Pour les navigateurs qui ne prennent pas encore en charge l’élément, la session renvoie à un polyfill qui « rétro-adapte l’API d’une nouvelle norme via JavaScript », avec une réserve qui mérite d’être citée : « certaines fonctionnalités de l’élément ne peuvent pas être polyfillées, comme l’affichage stéréoscopique sur les plateformes spatiales telles qu’Apple Vision Pro. »¹

Le format de contenu est USDZ, « Universal Scene Description, compressé en un seul fichier » qui « regroupe tout ce dont un modèle 3D a besoin : géométrie, matériaux, textures, animations ».¹ Safari prend en charge d’autres formats, mais la session recommande USDZ pour une expérience optimale.¹ La provenance des ressources est une autre question. Apple recommande une approche Capturer, Convertir, Créer : numériser de vrais objets avec un iPhone, convertir des fichiers existants ou créer de toutes pièces dans des outils comme Blender.¹ La session note également que des outils génératifs existent dans l’écosystème ; les applications citées, Tripo3D et Meshy.ai, sont des services tiers, et non des produits Apple.¹

Déposer un modèle sur la page

L’élément se comporte comme les balises média que tout développeur web connaît déjà. « Tout comme la balise <img> ou la balise <video>, vous pointez la balise <model> vers un fichier avec l’attribut source, et le navigateur s’occupe du reste. Aucun plugin requis. »¹ Vous pouvez aussi utiliser une balise <source> imbriquée avec un type MIME, le même modèle que <video> (la session montre le modèle sans en nommer la valeur ; model/vnd.usdz+zip est le type de média USDZ standard). Le repli est ce qui rend l’adoption sûre aujourd’hui : placez un <img> à l’intérieur du <model>, et les anciennes versions de Safari ou les navigateurs sans prise en charge affichent l’image à la place.¹

<model src="mallet.usdz">
  <source src="mallet.usdz" type="model/vnd.usdz+zip">
  <img src="mallet.jpg" alt="Maillet de camping" width="480" height="480">
</model>

Les modèles 3D peuvent atteindre « des dizaines de mégaoctets ou plus », le chargement prend donc du temps.¹ La promesse ready est résolue lorsque le modèle a réellement été chargé et qu’il est prêt à s’afficher. Affichez un indicateur de chargement pendant l’attente, masquez-le lorsque ready est résolue, et gérez tout imprévu dans le bloc catch en révélant le contenu de repli :

const model = document.querySelector("model");

try {
  await model.ready;
  spinner.hidden = true;       // model is loaded and ready to display
} catch (error) {
  spinner.hidden = true;
  fallback.hidden = false;     // show fallback content on failure
}

Un détail de rendu fait trébucher les gens. L’élément <model> « est rendu dans son propre espace virtuel, il ne reprendra donc pas l’arrière-plan de la page ».¹ Pour correspondre au design de votre page, définissez background-color directement sur le modèle. La session ajoute une contrainte : « l’arrière-plan est toujours rendu opaque ; même si vous spécifiez une couleur avec transparence, elle sera convertie. »¹

Laisser les visiteurs l’explorer

L’interactivité la moins coûteuse ne coûte qu’un seul attribut. Avec stagemode="orbit", les visiteurs « font pivoter librement le modèle de gauche à droite, et s’ils l’inclinent vers le haut ou vers le bas, il revient doucement à son angle d’origine ».¹ Le modèle se redimensionne aussi légèrement plus petit pour qu’aucune partie ne soit coupée pendant la rotation.¹ Pour la plupart des pages produit, cet unique attribut constitue toute la fonctionnalité : « le stagemode orbit vous offre de la 3D interactive avec un seul attribut. »¹

Lorsque vous avez besoin d’angles précis, pilotez plutôt le modèle depuis JavaScript. La propriété entityTransform « vous permet de définir des angles de vue précis via JavaScript ».¹ Pour l’utiliser, désactivez d’abord l’orbite : retirez l’attribut stagemode ou définissez-le sur "none".¹ La session avertit que les transformations manuelles peuvent couper ou masquer des parties du modèle s’il est tourné hors de la zone visible ; vous devrez donc peut-être ajuster la position.¹ Vous construisez l’orientation avec une DOMMatrix, qui « représente l’orientation du modèle dans l’espace 3D », appelez rotateSelf pour définir la rotation, puis l’affectez :

// disable orbit: <model stagemode="none"> in the markup

// capture the original orientation up front, for Reset
const initialTransform = model.entityTransform;

// Side view: rotate 135 degrees around the Y axis
sideButton.addEventListener("click", () => {
  const matrix = new DOMMatrix();
  matrix.rotateSelf(0, 135, 0);
  model.entityTransform = matrix;
});

// Reset to the original orientation
resetButton.addEventListener("click", () => {
  model.entityTransform = initialTransform;
});

Affecter une transformation bascule la vue instantanément. Pour adoucir la transition, la session anime la rotation avec requestAnimationFrame, en utilisant une durée d’animation de 500 millisecondes, « une demi-seconde, ce qui paraît vif mais fluide », en lissant la rotation au fil des images et en mettant à jour entityTransform avec une nouvelle DOMMatrix à chaque image.¹ Le compromis honnête, selon les propres mots d’Apple : les transformations personnalisées « vous donnent un contrôle total, mais elles exigent un travail supplémentaire : boîtes englobantes, découpage, code d’animation manuel ».¹ Recourez aux transformations scriptées quand vous en avez besoin, et appuyez-vous sur stagemode="orbit" quand ce n’est pas le cas.

Lire l’animation pré-calculée, puis passer à la réalité augmentée

Les modèles peuvent aussi porter leur propre mouvement. Les animations « sont généralement créées dans des outils 3D comme Blender ou Maya et pré-calculées dans le fichier USDZ », et l’élément « lit la première piste d’animation ».¹ Deux lignes de JavaScript contrôlent la lecture : définissez playbackRate sur le modèle, puis appelez sa méthode play(). Une valeur positive lit vers l’avant, une valeur négative inverse la lecture, et la session utilise 5 et -5 pour une lecture plus rapide :

function play(rate) {
  model.playbackRate = rate;   // positive plays forward, negative reverses
  model.play();
}

play(5);    // fast forward
play(-5);   // fast reverse

La dernière étape fait sortir le produit de l’écran pour l’amener dans la pièce. « Enveloppez le modèle dans une balise <a> avec l’attribut rel="ar", pointez vers la même ressource, et sur iOS et iPadOS, vos clients bénéficient d’une expérience AR Quick Look complète. »¹

<a rel="ar" href="mallet.usdz">
  <model src="mallet.usdz">
    <img src="mallet.jpg" alt="Maillet de camping">
  </model>
</a>

Sur visionOS, l’élément faisait déjà de la 3D « une partie naturelle du web », avec un rendu stéréoscopique qui permet aux clients de « sortir le produit de la page et de l’examiner comme s’il était entre leurs mains », et il alimente des environnements de site web immersifs qui placent le visiteur à l’intérieur d’une scène depuis Safari.¹

Le livrer plus léger

Les fichiers locaux sont superbes ; les mêmes fichiers transitant par internet se chargent lentement. La session exécute un outil en ligne de commande, usdcrush, sur le modèle : « sans aucune perte de qualité, le fichier passe de 7,9 Mo à 1,9 Mo », et les deux versions ouvertes côte à côte dans Safari paraissent identiques.¹ Un outil complémentaire, usdrecord, génère une vignette ou une image de repli directement à partir d’un fichier 3D lorsque vous n’en avez pas encore, avec des options comme le format de sortie ou le rendu depuis une caméra personnalisée présente dans le fichier.¹ Les deux outils « sont déjà installés sur votre Mac » dans le cadre d’une suite USD plus large, et la session note que vous pouvez scripter usdrecord sur un catalogue entier.¹ Pour le format lui-même, l’Alliance for OpenUSD publie la spécification USDZ complète comme « une référence claire et neutre vis-à-vis des fournisseurs » ainsi que des outils de conversion.¹

Ce que les labs ont ajouté sur la taille et le chargement

Les labs de la WWDC ont comblé quelques détails que la session avait laissés ouverts.

Côté compression, usdcrush encode désormais les textures en AVIF ; il utilisait auparavant JPEG.² Apple a également indiqué être en discussion avec l’Alliance for Open Media au sujet d’un format approprié de compression de maillage.²

Côté taille, le panel n’a donné aucune limite stricte mais a suggéré que la qualité visuelle maximale se situe autour de 10 Mo pour un modèle intégré à la page. Les environnements immersifs peuvent légitimement être plus volumineux.²

Côté chargement, le panel a reconnu une lacune : il n’existe pas aujourd’hui de pseudo-classe CSS pour l’état de chargement d’un modèle, la promesse ready évoquée plus haut est donc l’outil adapté à cette tâche.² Le panel a aussi établi une distinction en deux phases qu’il faut garder à l’esprit : les octets téléchargés ne sont pas la même chose que la ressource traitée et utilisable.²

Points clés à retenir

Pour les développeurs web : - Ajoutez <model> dès aujourd’hui avec un repli <img> imbriqué à l’intérieur, afin que les navigateurs non compatibles se rabattent sur une image statique et que Safari compatible passe automatiquement à de la 3D interactive.¹ - Conditionnez l’affichage à la promesse ready et gérez les échecs dans catch, car un USDZ de plusieurs mégaoctets met un temps réel à se charger.¹

Pour les artistes 3D : - Pré-calculez votre première piste d’animation dans le USDZ avec Blender ou Maya ; l’élément la lit et expose playbackRate plus play() pour un contrôle avant et arrière.¹ - Exécutez usdcrush avant la livraison pour réduire la taille du fichier sans perte de qualité visible, et usdrecord pour générer le repli <img> à partir du modèle lui-même.¹

Pour les équipes produit et commerce : - Utilisez stagemode="orbit" pour une rotation interactive avec un seul attribut, et réservez le entityTransform scripté aux cas qui nécessitent des angles précis ou une interface personnalisée.¹ - Enveloppez le modèle dans <a rel="ar"> pour que les acheteurs sur iOS et iPadOS puissent placer le produit dans leur propre espace via AR Quick Look.¹

FAQ

L’élément HTML <model> est-il tout nouveau en 2026 ?

Non. Apple a d’abord livré l’élément <model> sur visionOS. La WWDC 2026 l’étend à Safari sur iOS, iPadOS et macOS avec le même balisage, et fait mûrir l’API JavaScript qui l’entoure (la promesse ready, entityTransform, la lecture d’animation pré-calculée et <a rel="ar">).¹

Comment ajouter un repli pour les navigateurs sans prise en charge de <model> ?

Imbriquez une balise <img> à l’intérieur de la balise <model>. Les anciennes versions de Safari et les navigateurs qui ne prennent pas encore en charge l’élément affichent l’image à la place, de sorte que les visiteurs voient quand même le produit. Un polyfill est également disponible, même si certaines fonctionnalités comme l’affichage stéréoscopique de visionOS ne peuvent pas être polyfillées.¹

Quel format de fichier l’élément <model> utilise-t-il ?

USDZ, Universal Scene Description compressé en un seul fichier qui regroupe géométrie, matériaux, textures et animations. Safari prend en charge d’autres formats, mais Apple recommande USDZ pour une expérience optimale, et l’Alliance for OpenUSD publie la spécification complète.¹

Comment rendre un modèle interactif ?

Définissez stagemode="orbit" pour une rotation libre de gauche à droite avec un seul attribut. Pour des angles précis, définissez stagemode="none", construisez une DOMMatrix avec rotateSelf, et affectez-la à la propriété entityTransform du modèle, en animant au fil des images avec requestAnimationFrame si vous souhaitez une transition fluide.¹

Comment amener un modèle web en réalité augmentée ?

Enveloppez le <model> dans une balise <a> avec l’attribut rel="ar" pointant vers la même ressource USDZ. Sur iOS et iPadOS, cela offre aux visiteurs une expérience AR Quick Look complète pour qu’ils puissent placer le produit dans leur environnement.¹

L’élément <model> repose sur la même fondation USD qu’Apple promeut à travers ses plateformes : voir le nouveau framework USD natif en Swift d’Apple, USDKit, et le contexte spatial dans les nouveautés de visionOS 27. Les arguments en faveur d’une balise plutôt que d’une bibliothèque rejoignent l’argumentaire plus large du manifeste no-build et de HTML, le format que veulent les agents. Le hub complet de la série est la série Écosystème Apple.

Références