Nouveautés pour le web spatial

Bonjour, je suis Eddy, de l’équipe visionOS Safari. C’est une grande année pour le Web spatial, avec de nouvelles fonctionnalités qui feront passer l’expérience web à la vitesse supérieure.

Nous prenons désormais charge le rendu stéréoscopique des modèles 3D en ligne avec d’autres contenus web tout en permettant aux utilisateurs d’interagir avec le modèle. Nous permettons aussi désormais la lecture de médias immersifs, une nouvelle classe de médias qui va au-delà de l’écran plat.

Developer Preview a de nouvelles fonctionnalités, comme les environnements de site web. Je suis ravi de vous montrer comment adopter ces nouvelles fonctionnalités. Je vais vous montrer comment intégrer des modèles 3D sur une page web, présenter des médias immersifs et fournir un environnement de page web personnalisé. C’est parti. Au cours des dernières décennies, l’élément HTML Image a permis aux développeurs de mettre des images sur le Web. Alors que nous entrons dans l’ère de l’Informatique spatiale, vous allez pouvoir intégrer et afficher des modèles 3D sur votre page web pour faire passer votre contenu web à la vitesse supérieure. Il s’agit d’un nouvel élément de modèle HTML. Proposé aux organismes de normalisation du Web il y a quelques années, il est désormais disponible par défaut dans Safari sur visionOS cette année. Avec un simple balisage, vos visiteurs peuvent voir des modèles 3D intégrés à d’autres contenus web. Contrairement aux bibliothèques de rendu de modèles, le rendu de l’élément de modèle est stéréoscopique, de sorte qu’on peut percevoir la profondeur de l’objet et se déplacer pour voir différents angles du modèle. Nous allons approfondir de nombreux aspects de l’intégration de modèles 3D, de la préparation de la ressource à un rendu de qualité avec les interactions, les animations, etc. Pour intégrer un modèle 3D, vous devez d’abord le créer. Désormais, dans Safari sur visionOS, l’élément de modèle prend en charge le format de fichier USDZ, très utilisé dans le secteur du contenu 3D. Avec les outils existants, vous pouvez capturer, convertir ou créer des fichiers USDZ. Vous pouvez capturer un objet réel dans un fichier de modèle 3D avec un iPhone. Téléchargez simplement l’app Reality Composer depuis l’App Store pour commencer. L’API Object Capture sur iOS permet aux apps de capturer et de générer des fichiers de modèle de la même manière. Vous avez peut-être déjà des modèles 3D pour vos cas d’utilisation, qui sont dans d’autres formats. macOS permet de convertir divers formats de modèles 3D au format USDZ avec des outils de prévisualisation ou de ligne de commande. Pour les utilisateurs avancés, des logiciels de modélisation 3D permettent de créer des modèles 3D captivants, tels que Blender, Houdini, Maya, Reality Composer Pro et bien d’autres. Beaucoup prennent en charge l’exportation vers USDZ. L’écosystème USD dispose d’un large éventail d’outils que vous pouvez utiliser dans votre flux de travail. Pour en savoir plus, consultez regardez : « Explore the USD ecosystem » de la WWDC23. Si vous n’avez jamais créé de modèle 3D auparavant, regardez « Meet Reality Composer Pro », tiré de la WWDC23. Il vous sera utile d’avoir un fichier USDZ de test prêt lorsque vous expérimenterez avec l’élément de modèle. Le moyen le plus rapide d’obtenir le fichier USDZ est de le télécharger sur developer.apple.com. Certains ont été réalisés avec Object Capture, tandis que d’autres ont été conçus avec un logiciel de modélisation 3D. Comme toutes les ressources web, essayez de réduire la taille du fichier afin qu’il se charge rapidement. Ma méthode préférée est d’utiliser Preview sur Mac pour exporter une copie avec des textures compressées. De nombreuses autres façons d’optimiser le fichier sont présentées en détail dans la séance WWDC24 : « Optimize your 3D assets for spatial computing ». Une fois le fichier de ressource prêt, insérons-le sur la page web. La syntaxe pour intégrer un modèle est simple. Appliquez juste un fichier USDZ dans l’attribut source de l’élément de modèle. N’oubliez pas la balise de fermeture. Vous pouvez également placer l’élément source dans un élément de modèle vide, comme vous le feriez avec l’élément image.

L’élément de modèle fonctionne comme les autres éléments visuels du DOM. Vous le placez à l’endroit où vous souhaitez que le modèle soit affiché. Notez que le modèle est toujours rendu derrière la surface de la page. L’élément de modèle est comme une ouverture sur un espace virtuel derrière la page, et le modèle vit dans cet espace. Cela empêche le contenu de sortir de la page de manière inattendue, en cas de défilement de l’élément de modèle. Par défaut, le navigateur met à l’échelle le modèle pour l’adapter aux limites de l’élément. Pour ce faire, ajustez et centrez la face x-y de la zone de délimitation du modèle dans l’élément.

Certains serveurs web ou CDN anciens peuvent ne pas reconnaître l’extension de fichier USDZ et peuvent renvoyer le mauvais type de contenu dans l’en-tête de réponse HTTP. Pour renvoyer le type de contenu correct, vous devrez peut-être ajouter une configuration au serveur web. Voici quelques exemples de spécification du type MIME USDZ pour différents serveurs web. Pour en savoir plus, consultez la documentation de votre logiciel de serveur web spécifique. Pour créer un excellent site web, vous devez tenir compte des appareils qui seront utilisés pour le consulter. Par conséquent, vous devez fournir une image de secours rétrocompatible. Pour la fournir, vous pouvez la placer à l’intérieur de l’élément de modèle.

J’aime fournir un rendu 2D de mon modèle afin que les utilisateurs d’autres navigateurs puissent se faire une idée de ce à quoi ressemble l’objet. Au lieu d’une image statique, vous pouvez fournir une expérience de visualisation 2D avec des bibliothèques tierces telles que Three.js, BabylonJS, model-viewer, et bien d’autres.

Cet exemple utilise la bibliothèque model-viewer. Cette bibliothèque dessine un modèle donné sur un canevas 2D à l’aide de JavaScript. Vous pouvez l’utiliser comme expérience de secours en encapsulant l’élément de modèle autour du code de la visionneuse 2D. Avec cette configuration, les utilisateurs de Safari sur visionOS voient un rendu stéréoscopique avec profondeur. Les utilisateurs d’autres navigateurs voient un rendu 2D à la place. Si vous avez un comportement de secours vraiment personnalisé à l’esprit, JavaScript peut détecter si l’élément de modèle est pris en charge.

Vous pouvez vérifier l’existence d’un objet window.HTMLModelElement. Pour rappel, il est déconseillé de détecter si l’agent utilisateur est visionOS Safari. Il est fragile et pourrait devenir problématique quand d’autres navigateurs commenceront à prendre en charge l’élément de modèle. N’oubliez pas de détecter la fonctionnalité, pas l’agent. Un fichier USDZ peut facilement dépasser 10 Mo. Son chargement peut donc durer plusieurs secondes sur les réseaux plus lents. Vous voudrez peut-être savoir quand le modèle est complètement chargé, afin de pouvoir effectuer des mises à jour de l’interface utilisateur. Un exemple courant est l’indicateur de chargement.

L’élément de modèle a la propriété ready, qui renvoie un objet Promise. Lorsque le modèle est entièrement chargé, l’objet Promise est résolu. Vous pouvez ensuite masquer l’indicateur de chargement et afficher l’élément de modèle. ready promise peut échouer en cas d’erreur de chargement. N’oubliez pas de traiter l’erreur de manière appropriée, par exemple en fournissant un bouton Réessayer. D’après mon expérience, fournir des indices visuels à vos visiteurs indiquant que le chargement est en cours aide à ce qu’ils restent sur votre page.

Le modèle est désormais intégré. Peaufinons son apparence sur votre site web. L’élément de modèle définit un espace virtuel pour le rendu du modèle. Pour que l’élément de modèle se fonde bien dans la page, il est conseillé de définir la couleur de l’espace sur la même couleur que le contenu web environnant.

Lorsque vous ajoutez un élément de modèle à une page, il est remplacé par l’espace virtuel, de sorte que les utilisateurs ne voient pas la couleur de fond d’origine de cette région. Pour résoudre ce problème, définissez la couleur de l’espace virtuel à l’aide de l’attribut CSS background-color. Définissez-la sur l’élément de modèle lui-même, pas sur ses ancêtres. Si vous avez spécifié une couleur de fond avec alpha, elle sera convertie en opaque. Si vous ne voulez pas vous répéter pour la définition des couleurs, vous pouvez utiliser une propriété personnalisée CSS. Une fois que l’élément de modèle se fond dans la page, laissez libre cours à votre créativité.

Dans cet exemple précédent, j’ai étendu l’élément de modèle sous le panneau de droite. J’ai appliqué un effet de verre dépoli au panneau, révélant l’appareil photo en dessous sous un certain angle, donnant une forte impression de superposition.

Il y a plusieurs façons d’obtenir le même effet, mais je vais vous montrer ma façon de faire. D’abord, je m’assure que l’élément de modèle s’étend derrière le panneau avec la position : absolue. Le filtre d’arrière-plan donne l’effet de verre dépoli en floutant les pixels de l’élément de modèle. Le dégradé linéaire crée un reflet spéculaire sur le bord pour donner une impression d’épaisseur, et la couleur du panneau reste claire afin que le texte soit facile à lire. Ces techniques CSS ne sont pas nouvelles, mais elles surpassent les attentes lorsqu’elles sont combinées avec l’effet de profondeur de l’élément de modèle. La page a maintenant fière allure, mais nous pouvons affiner encore le modèle en ajustant l’effet d’éclairage. Ici, j’applique un éclairage différent au même fichier de modèle. Remarquez à quel point ils sont différents selon l’éclairage choisi. Pour contrôler l’effet d’éclairage, vous devez utiliser un type spécial d’image pour définir l’apparence de l’environnement du modèle, afin de réfléchir la lumière appropriée. On parle alors d’éclairage basé sur l’image, ou IBL en abrégé. L’image est souvent appelée fichier IBL. Le fichier IBL peut sembler déformé, car il projette l’intégralité de l’environnement à 360 degrés sur une image plane. Cette projection sphérique aplatie, ou projection équirectangulaire, est très courante pour les fichiers IBL. Notez que le fichier IBL ne fait pas partie du fichier USDZ. Il doit être spécifié lors du rendu.

Pour spécifier l’IBL des éléments de modèle, vous devez utiliser l’attribut environmentmap. Si vous n’en fournissez pas, le navigateur appliquera un éclairage par défaut au modèle. Comme l’IBL ne fait pas partie du fichier USDZ, lorsque le fichier de modèle est utilisé en dehors de la page web, il n’a pas le même effet d’éclairage. L’app de présentation peut ainsi appliquer l’éclairage le plus adapté à l’expérience visuelle. Je vous conseille d’envisager d’utiliser les formats OpenEXR et Radiance HDR pour le fichier IBL. Ces deux formats rendent les reflets beaucoup plus réalistes, car ils représentent le niveau de luminosité de plusieurs ordres de grandeur. D’un autre côté, un IBL JPEG aura l’air très terne et plat. Une fois que le modèle a fière allure, vous devez permettre aux visiteurs d’interagir avec lui. L’élément de modèle offre diverses interactions utilisateur prêtes à l’emploi. Par défaut, pincez et maintenez l’élément de modèle pour lancer un glisser-déposer. Les utilisateurs peuvent déposer le modèle dans une autre app ou à un emplacement vide pour le voir dans leur espace via Coup d’œil. C’est un moyen fantastique de voir le modèle dans sa taille réelle, avec les effets d’éclairage réalistes qui y ont été appliqués pour le rendre réel. Les utilisateurs peuvent le coller sur une surface, le retourner, l’agrandir ou le réduire. Outre le glisser-déposer, vous pouvez activer le pincement et le glissement sur l’élément de modèle pour faire pivoter le modèle lorsqu’il est affiché. Vous pouvez incliner le modèle dans un sens ou l’autre. Le modèle réinitialise l’inclinaison au relâchement du geste.

Pour activer ce comportement de rotation, spécifiez stagemode égal à orbit sur l’élément de modèle. La rotation se fait le long de l’axe y, avec une petite inclinaison verticale autorisée pendant le geste. Le moteur de rendu met le modèle à l’échelle et le décale pour s’assurer qu’il reste derrière la surface de la page pendant la rotation. Si ce comportement de rotation stagemode ne suffit pas à votre scénario, vous pouvez implémenter manuellement des interactions personnalisées. Si vous souhaitez déplacer et orienter le modèle manuellement de manière spécifique, utilisez JavaScript. Vous pouvez contrôler l’emplacement et l’orientation exacts où vous souhaitez que le modèle soit dans l’espace virtuel. Pour ce faire, modifiez la matrice de transformation exposée par l’élément de modèle.

La matrice de transformation est exposée via la propriété entityTransform. Lorsque le modèle est chargé, le navigateur calcule la transformation nécessaire pour le placement par défaut et l’enregistre dans la propriété entityTransform. La propriété est renseignée une fois que promise ready est résolu.

Voyons un exemple de personnalisation du placement du modèle. Ici, nous voulons offrir un lien qui fera pivoter le modèle pour qu’il soit tourné vers la droite. Dans la fonction turnRight, lisez la matrice de transformation calculée par le navigateur à partir de la propriété entityTransform. Ensuite, appliquez une rotation de 90 degrés le long de l’axe y à l’aide de la méthode rotateAxisAngle, qui est une API de la classe DOMMatrix. 0-1-0 signifie l’axe y, et 90 signifie une rotation de 90 degrés. Lorsque la nouvelle matrice est prête, redéfinissez-la sur la propriété entityTransform pour qu’elle prenne effet. Les opérations possibles avec une matrice entityTransform incluent une mise à l’échelle, une rotation et une translation uniformes. Vous recevrez une erreur si vous essayez d’affecter une matrice contenant des opérations non autorisées à la propriété entityTransform. La transformation d’entité par défaut devrait suffire à la plupart des scénarios. Mais certains voudront peut-être comprendre les mathématiques derrière le calcul par défaut. Pour ce faire, revenons aux bases et examinons le comportement de transformation d’entité pour une matrice d’identité.

Si vous définissez la transformation d’entité sur une matrice d’identité, elle aligne l’origine du fichier USDZ sur le point central de l’élément de modèle. N’oubliez pas que le modèle n’est rendu que dans l’espace derrière la surface de la page. Toutes les parties qui vont au-delà sont donc coupées. De plus, le rendu est tel que 1 cm dans le fichier USDZ équivaut exactement à 1 cm en CSS, soit environ 38px en CSS. Sur visionOS, la fenêtre Safari s’agrandit à mesure qu’elle s’éloigne de l’utilisateur. Lorsque le modèle est affiché sur la page, il n’y a donc aucune relation entre les unités utilisées dans le fichier USDZ et les unités physiques dans le monde réel. Pour présenter un objet dans sa taille physique réelle, le meilleur moyen est de le faire glisser hors de la page et de le visualiser via Coup d’œil, comme nous l’avons vu précédemment. La propriété entityTransform peut être utilisée de manière très créative. Dans cet exemple précédent, elle zoome sur différentes parties du modèle lorsque nous parcourons différentes fonctionnalités de cette caméra. Pour le déplacer, vous pouvez même animer l’ouverture et la fermeture de l’écran de la caméra à l’aide d’animations de modèle. Je vais vous montrer comment. Le format de fichier USDZ permet de définir des animations dans le fichier lui-même et est pris en charge dans les principaux outils de création. Certains fichiers USDZ contiennent plusieurs pistes d’animations. L’élément de modèle permet de lire la première piste d’animation définie dans le fichier USDZ. Pour les animations en boucle simples, vous pouvez utiliser les attributs loop et autoplay. Pour contrôler l’animation manuellement, vous pouvez utiliser les méthodes de lecture et de pause sur l’élément de modèle. Vous pouvez déterminer si l’animation est en cours de lecture à l’aide de la propriété paused. Ces quelques API peuvent vous sembler familières, car ce sont les mêmes que celles de l’élément vidéo.

Pour les scénarios plus complexes, vous pouvez utiliser un logiciel de modélisation 3D pour créer une chronologie du modèle, en animant différents états. Dans le fichier de modèle my camera, j’anime d’abord l’ouverture et la fermeture du flash de l’appareil photo, puis l’ouverture et la fermeture de son écran. Les informations d’animation sont stockées dans le fichier USDZ. Lorsque vous placez un modèle animé dans l’élément de modèle, vous pouvez accéder à n’importe quel point de la chronologie à l’aide de la propriété currentTime. Par exemple, si je veux ouvrir le flash de l’appareil photo, il me suffit de définir la propriété currentTime sur 1. Gardez à l’esprit que l’unité de la propriété currentTime est la seconde. De même, si je veux ouvrir l’écran, je la règle sur 3. Observez la façon dont le modèle est mis à jour instantanément sans aucune animation implicite. Vous pouvez ainsi passer à des horodatages discontinus pour obtenir l’effet spécifique requis. Vous pouvez créer des expériences intéressantes en connectant la propriété currentTime à certaines interactions.

Ici, j’ai un curseur avec une plage de valeurs comprise entre 2 et 3. Il doit couvrir la partie de la chronologie où l’écran s’ouvre. J’ajoute un écouteur d’événement pour surveiller le changement de valeur du curseur. Lorsque cela se produit, je règle l’heure actuelle sur la valeur du curseur. Mes visiteurs pourront ainsi utiliser le curseur pour contrôler la position de l’écran. Cette idée peut s’appliquer à d’autres interactions, comme le défilement d’une page ou un glissement personnalisé. Vous pouvez aussi combiner currentTime et entityTransform de manière créative. Dans l’exemple précédent d’appareil photo, l’animation est pilotée par un minuteur. Les parties individuelles sont animées avec la propriété currentTime, tandis que le mouvement de l’ensemble de l’appareil photo est animé avec la propriété entityTransform. L’apparence de la page est agréable, mais vous voudrez peut-être l’affiner encore en ajoutant une touche personnelle, comme permettre aux utilisateurs de graver sur le produit. Mais vous ne pouvez pas savoir à l’avance quel texte mettre dans le modèle USDZ. C’est là que les modèles générés dynamiquement entrent en jeu. Si votre scénario nécessite l’affichage d’un modèle qui dépend de l’entrée utilisateur à l’exécution, utilisez JavaScript pour générer un fichier USDZ dans le navigateur et l’afficher dans l’élément de modèle. Three.js est une puissante bibliothèque JavaScript qui permet de créer des modèles 3D par programmation. Three.js est un vaste sujet en soi. Nous n’allons donc pas en discuter en détail aujourd’hui. Globalement, vous avez un objet THREE.Scene qui contient le modèle que vous avez créé de manière procédurale. Supposons que vous ayez déjà un objet de scène bien conçu. Three.js inclut un module d’exportation USDZ que vous pouvez importer. Une fois importé, vous pouvez utiliser la méthode parseAsync pour générer le blob de données pour le fichier USDZ complet de la scène de modèle. Vous pouvez créer une URL d’objet pointant vers le blob que vous avez généré à l’aide de la méthode URL.createObjectURL. Maintenant que vous avez l’URL de l’objet, vous pouvez le définir sur l’attribut source de l’élément de modèle pour qu’il s’affiche. Avec cette technique, vous n’êtes plus limité à l’utilisation des fichiers USDZ statiques connus que vous avez préparés hors ligne.

Vous pouvez ajouter des personnalisations aux modèles en fonction des entrées de données des visiteurs, comme l’ajout d’un nom sur un produit ou la modification de la couleur du texte.

Notez que le modèle peut toujours être glissé et vu dans l’espace des utilisateurs.

Nous n’avons couvert que quelques-unes des nombreuses API prises en charge par l’élément de modèle. Les autres pourraient vous être utiles lorsque vous adopterez des modèles sur vos pages web.

Familiarisez-vous avec l’élément de modèle sur la page de documentation de MDN et la proposition d’élément de modèle sur le site web de W3C. Vous trouverez les URL en cliquant sur les liens associés à cette séance. Parlons désormais d’une autre catégorie de contenu, les médias immersifs. L’an dernier, vous avez pu commencer à afficher des photos panoramiques et spatiales à partir de votre site web. Nous étendons la prise en charge de la vidéo spatiale, de la vidéo à 180°, à 360° et à large champ de vision, ainsi qu’Apple Immersive Video. La présentation des photos panoramiques et spatiales a aussi été mise à jour. L’iPhone 15 Pro ou tout modèle plus récent permet de filmer des vidéos spatiales depuis l’app Appareil photo, et de les voir dans l’espace depuis l’app Photos sur Apple Vision Pro. Avec visionOS, trois nouveaux types de médias immersifs sont pris en charge : la vidéo à 180 degrés, la vidéo à 360 degrés et la vidéo à grand champ de vision. Ces types de médias vont au-delà d’une surface plane et enveloppent l’utilisateur pour offrir une expérience immersive. Apple Immersive Video est aussi désormais pris en charge, avec une vidéo stéréo haute résolution parfaitement calibrée pour chaque objectif de la caméra qui l’a capturée. Pour en savoir plus sur ces nouveaux types de médias, reportez-vous à la séance WWDC de cette année, « Explore video experiences for visionOS ».

Lorsqu’un fichier multimédia immersif est intégré à la page, tel que cette vidéo à 360 degrés, il s’affiche sous forme de vidéo 2D. Pour permettre aux utilisateurs de la visionner de manière immersive, présentez la vidéo en plein écran. Elle entourera l’utilisateur avec la projection correcte. Le lecteur plein écran permet également les contenus stéréoscopiques, que l’on trouve souvent dans les formats 180° et Apple Immersive Video. Peut-être avez-vous déjà capturé des médias immersifs auparavant. L’heure est venue de les présenter sur votre site web. Vous pouvez y intégrer tous ces types de médias à l’aide de l’élément vidéo existant. Aucun nouvel élément ou attribut n’est impliqué. Vous pouvez aussi utiliser HTTP Live Streaming pour diffuser des ressources vidéo volumineuses comme d’habitude. Pour les médias à 180°, 360° et à grand champ de vision, le fichier doit respecter le format APMP, qui contient des métadonnées supplémentaires pour décrire la projection du média. Pour savoir comment convertir vos médias en APMP, regardez la séance WWDC de cette année : « Learn about the Apple Projected Media Profile ». Pour en savoir plus sur Apple Immersive Video, consultez « Learn about Apple Immersive Video technologies ». Voici un exemple d’APMP à grand champ de vision. Les métadonnées capturent les paramètres de caméra utilisés pendant l’enregistrement. visionOS présente ensuite le média sous une forme qui aligne chaque pixel à l’emplacement prévu, ce qui permet une projection correcte pendant la lecture. Remarquez à quel point les lignes droites semblent droites même sur les bords lorsqu’elles sont visualisées en plein écran. C’est le pouvoir d’APMP. Les commandes par défaut de l’élément vidéo permettent aux utilisateurs d’activer le plein écran. Vous pouvez aussi activer le plein écran par programmation avec l’API requestfFullScreen à partir de JavaScript. Cette API est la même que celle que vous utiliseriez pour présenter des photos panoramiques et spatiales à partir de votre page web. Pour le panorama, vous pouvez désormais fournir différentes sources pour le même élément d’image, afin d’afficher une vignette appropriée avant de passer en plein écran. Une fois que vous passerez en plein écran, la variante la plus large sera utilisée.

Pour les photos spatiales, l’API requestFullscreen fonctionne de la même manière. La photo spatiale s’affiche sous forme d’image 2D plate lorsqu’elle est affichée directement, et sous forme spatiale lorsqu’elle est présentée en plein écran. Personnellement, je dois toujours indiquer à mes visiteurs que cette image particulière est spatiale et qu’ils devraient appuyer dessus pour voir sa vraie beauté. Cela devrait devenir beaucoup plus facile à l’avenir avec le nouvel attribut, controls, qui a été ajouté en tant que fonctionnalité de Developer Preview depuis visionOS 2.4. Cet attribut ajoute un badge de photo spatiale, indiquant que l’image est une photo spatiale. Couplé au bouton plein écran, vos visiteurs peuvent facilement visualiser la version spatiale de l’image, le tout sans que vous ayez à écrire une seule ligne JavaScript. Comme toutes les fonctionnalités de Developer Preview, vous devrez l’activer explicitement pour l’essayer. Pour ce faire, accédez à Réglages > Apps > Safari > Avancé > Indicateurs de fonctionnalité, puis activez l’API Spatial Image Controls. Pendant que nous y sommes, activons également les environnements de site web, car nous allons en parler maintenant. L’environnement de site web est une nouvelle fonctionnalité de Developer Preview ajoutée cette année pour permettre aux sites web de fournir un environnement virtuel à leurs visiteurs. Voici comment cela fonctionne. Cet exemple de page spécifie un fichier USDZ comme environnement, et les utilisateurs peuvent choisir d’afficher l’environnement via le menu des pages, tout en gardant Safari et le site web dans la vue. Digital Crown leur permet de s’immerger totalement dans leur environnement, sans se laisser distraire. C’est un moyen fantastique d’étendre le site web au-delà des limites de la fenêtre du navigateur.

Pour fournir un environnement, utilisez un élément de lien spécifiant que rel est égal à spatial-backdrop. Utilisez ensuite l’attribut href pour référencer le fichier USDZ d’environnement. Tout comme les modèles 3D, vous pouvez utiliser l’attribut environmentmap pour fournir un IBL personnalisé pour le fichier USDZ. Avec un environnement bien conçu, vos visiteurs auront l’impression d’être téléportés dans un autre endroit comme un restaurant, un sous-marin ou un donjon. Comme il s’agit d’une fonctionnalité de Developer Preview, activez-la dans Réglages pour pouvoir la tester. Le balisage est susceptible de changer en fonction du processus de normalisation web. Apple dirige activement le développement de cette fonctionnalité, et votre avis contribuera à façonner son avenir. Pour en savoir plus sur la création d’un environnement personnalisé, consultez la séance « Create custom environments for your immersive apps in visionOS » de la WWDC24. Nous avons couvert de nombreuses fonctionnalités du Web spatial aujourd’hui. Nous avons parlé du nouvel élément de modèle HTML, avec sa prise en charge des interactions, de l’éclairage personnalisé et du placement manuel. L’élément vidéo existant vous permet d’afficher divers nouveaux médias immersifs directement à partir de votre site web. Et vous avez eu un aperçu de ce à quoi ressembleront les environnements de site web.

Pour vous aider, nous avons ajouté quelques exemples d’utilisation de l’élément de modèle sur webkit.org. Il n’y a pas de meilleure façon de le découvrir que de le voir via votre Apple Vision Pro. Lorsque vous vous sentirez prêt, n’hésitez pas à ajouter des modèles 3D à votre page web. pour offrir à vos visiteurs une nouvelle expérience époustouflante. Si votre site web propose de la vidéo, l’heure est venue de commencer à inclure des médias immersifs sur votre site web. Nous serions ravis que vous testiez l’ajout d’environnements personnalisés et que vous nous fassiez part de votre avis. Outre le Web spatial, les nouvelles fonctionnalités pour le Web sont nombreuses. Découvrez-les plus en détail dans la séance « What’s new for Safari and WebKit » de cette année.

Vous pouvez envoyer des rapports de bogue et des demandes de fonctionnalités pour la technologie web sur bugs.webkit.org, l’outil de suivi des problèmes pour WebKit. Pour les problèmes concernant l’interface de Safari, visionOS ou d’autres plates-formes Apple, veuillez les signaler à feedbackassistant.apple.com. Nous sommes impatients de voir tout ce que vous allez faire avec ces nouvelles technologies. Merci. Bonne WWDC.