Présentation de la version 1.1

Créez des modèles 3D pour votre page Web aussi facilement que lorsque vous codez du code HTML.

Joe Medley

Rochman

Les modèles 3D sont plus pertinents que jamais. Les marchands apportent des expériences d'achat en magasin au domicile des clients. Les musées rendent les modèles 3D de leurs artefacts accessibles à tous sur le Web. Malheureusement, il peut être difficile d'ajouter un modèle 3D à un site Web de manière à offrir une expérience utilisateur de qualité sans une connaissance approfondie des technologies 3D ou sans avoir à héberger du contenu 3D sur un site tiers. Le composant Web <model-viewer>, introduit début 2019, vise à simplifier la mise en ligne de modèles 3D sur le Web. Il suffit d'écrire quelques lignes de code HTML. Depuis, l'équipe s'efforce de répondre aux commentaires et aux demandes de la communauté. Son aboutissement a été la version 1.0 de <model-viewer>, publiée plus tôt cette année. Nous annonçons maintenant le lancement de <model-viewer> 1.1. Vous pouvez lire les notes de version dans GitHub.

Quelles sont les nouveautés depuis l'année dernière ?

La version 1.1 prend en charge la réalité augmentée (RA) sur le Web, les améliorations de vitesse et de fidélité, ainsi que d'autres fonctionnalités fréquemment demandées.

Réalité augmentée

Visualiser un modèle 3D sur une toile vierge est idéal, mais pouvoir le visualiser chez vous, c'est encore mieux. Pour une 3D et une RA entièrement intégrées au navigateur, Chrome Android prend en charge la réalité augmentée à l'aide de WebXR .

Lorsqu'il sera prêt, vous pourrez l'utiliser en ajoutant un attribut ar à la balise <model-viewer>. D'autres attributs vous permettent de personnaliser l'expérience de RA WebXR, comme indiqué dans l'exemple WebXR sur modelviewer.dev. L'exemple de code ci-dessous montre à quoi cela peut ressembler.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

Cela ressemble à la vidéo intégrée présentée sous ce titre.

Commandes de la caméra

<model-viewer> donne désormais un contrôle total sur la caméra virtuelle de la vue (la perspective du spectateur). Cela inclut la cible de la caméra, l'orbite (position par rapport au modèle) et le champ de vision. Vous pouvez également activer la rotation automatique et définir des limites d'interaction utilisateur (par exemple, des champs de vision maximum et minimaux).

Annotations

Vous pouvez également annoter vos modèles en HTML et CSS. Cette fonctionnalité est souvent utilisée pour "associer" des étiquettes à des parties du modèle d'une manière qui se déplace avec le modèle lorsqu'il est manipulé. Les annotations sont personnalisables, y compris leur apparence et le degré de visibilité qu'elles sont masquées par le modèle. Les annotations fonctionnent également en RA.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

Pour en savoir plus, consultez la page de documentation sur les annotations.

Éditeur

La version 1.1 introduit et héberge un outil de modification <model-viewer> qui vous permet de prévisualiser rapidement votre modèle, d'essayer différentes configurations <model-viewer> (ex. : exposition et douceur de l'ombre), de générer une image poster et d'obtenir de manière interactive les coordonnées des annotations.

Amélioration de l'affichage et des performances

La fidélité d'affichage a été considérablement améliorée, en particulier pour les environnements HDR (High Dynamic Range). <model-viewer> utilise désormais également un chemin de rendu direct lorsqu'un seul élément <model-viewer> se trouve dans la fenêtre d'affichage, ce qui améliore les performances (en particulier sur Firefox). Enfin, la mise à l'échelle dynamique de la résolution a amélioré la fréquence d'images. L'exemple ci-dessous présente certaines de ces améliorations récentes.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

Stabilité

<model-viewer> atteignant sa première version majeure, la stabilité de l'API est une priorité. Les modifications destructives seront donc évitées jusqu'à la publication de la version 2.0.

Étape suivante

La version 1.0 de <model-viewer> inclut les fonctionnalités les plus demandées, mais l'équipe n'a pas encore terminé. D'autres fonctionnalités seront ajoutées, ainsi que des améliorations des performances, de la stabilité, de la documentation et des outils. Si vous avez des suggestions, signalez un problème dans GitHub. De plus, les demandes d'extraction sont toujours les bienvenues. Pour rester connecté, suivez <model-viewer> sur Twitter et consultez le chat de la communauté sur Spectrum.