Safari 27 apporte l’élément model à l’iPhone et au Mac, ainsi que les plans de découpe à WebGPU
Safari 27 est sorti le 14 septembre aux côtés d’iOS 27, d’iPadOS 27 et de macOS 27. Apple le propose également sous forme de mise à jour autonome pour macOS Sequoia et Tahoe. L’équipe WebKit a publié trois jours plus tard un récapitulatif de ses fonctionnalités. D’après son décompte, cette version comprend 83 nouvelles fonctionnalités et 844 correctifs, contre les 58 fonctionnalités et 525 correctifs annoncés lors de la bêta de juin. Trois de ces fonctionnalités concernent tous ceux qui effectuent du rendu 3D dans un navigateur. WebKit : fonctionnalités de Safari 27.0.
L’environnement 3D d’un site web enveloppant Safari sur visionOS 27, présenté lors d’une session WWDC d’Apple. Image : Apple.
L’élément model quitte le casque
L’élément HTML <model> est apparu sur visionOS afin de permettre l’intégration d’un fichier 3D dans une page aussi simplement qu’une vidéo. Safari 27 l’apporte à iOS, iPadOS et macOS. Il suffit de lui fournir un fichier USDZ ou glTF, ou de répertorier les deux à l’aide d’éléments enfants <source> comme pour une vidéo. Le navigateur gère alors le chargement et l’affichage, et l’utilisateur peut faire pivoter l’objet sans que vous ayez à écrire de moteur de rendu. Un attribut environmentmap accepte un fichier HDR pour l’éclairage. Sur visionOS 27, le même élément va plus loin : un site peut fournir un environnement immersif sous forme de modèle et, à l’aide d’un seul appel JavaScript, en envelopper toute la fenêtre du navigateur. C’est ainsi que le cinéma de l’image ci-dessus a été créé. Cette version ajoute également la propriété CSS dynamic-range-limit aux éléments model, afin qu’une page puisse déterminer la marge HDR qu’un modèle est autorisé à utiliser. Elle corrige aussi deux bogues de la première implémentation : le mauvais fonctionnement de entityTransform et la rupture des interactions gestuelles après le rechargement d’un lecteur de modèle.
Le balisage : deux formats source, une carte d’environnement HDR et une théière éclairée par celle-ci. Image : Apple.
Un même fichier 3D rendu sur Mac, iPad et iPhone. Image : Apple / WebKit.
Il est tentant d’en conclure que « les visionneuses 3D sont désormais intégrées au navigateur », et c’est globalement vrai pour les photos de produits. Ce n’est pas le cas pour les jeux. L’élément model affiche un modèle. Il n’exécute ni votre boucle de jeu, ni votre moteur physique, ni vos shaders, et il n’existe que dans Safari. Chrome et Firefox ne l’ont pas encore intégré. Une page qui en dépend a donc besoin d’une solution de repli qui sera, en pratique, la visionneuse WebGL ou WebGPU que vous auriez de toute façon développée.
Plans de découpe dans WGSL
Le changement le plus utile pour les moteurs est plus discret. Safari 27 prend en charge la valeur intégrée clip_distances dans WGSL, qui permet à un vertex shader de définir ses propres plans de découpe et d’écarter la géométrie avant la rastérisation. Les reflets plans, le rendu de portails, les vues en coupe et les surfaces d’eau en dépendent tous. Jusqu’à présent, une application WebGPU qui en avait besoin dans Safari devait les simuler dans le fragment shader avec un discard, ce qui consomme du fill rate précisément lors des passes qui sont déjà les plus coûteuses.
Canvas, WebGL et les autres API avec gestion des couleurs bénéficient également de deux espaces colorimétriques prédéfinis, srgb-linear et display-p3-linear. Si vous effectuez votre propre tone mapping ou composez du contenu HDR dans un canevas, vous pouvez désormais transmettre au navigateur des données en lumière linéaire et le laisser gérer la fonction de transfert, au lieu d’effectuer vous-même l’encodage en sRGB et de perdre de la précision au passage.
La session WWDC d’Apple consacrée à cette version présente l’élément model et les autres changements apportés à WebKit.
Pourquoi cela nous concerne
Notre moteur utilise WebGPU lorsque le navigateur le prend en charge et WebGL dans le cas contraire. Depuis l’arrivée de WebGPU dans Safari l’année dernière, c’est le navigateur que nous testons avec le plus d’appréhension. Les plans de découpe faisaient partie des lacunes. Les reflets sur l’eau sont précisément le type de passe qui en a besoin. Jusqu’à présent, avec WebGPU, les seules options étaient une matrice de projection oblique ou un discard dans le fragment shader, qui consomme du fill rate sur les téléphones, où celui-ci constitue l’essentiel du budget de rendu. Safari 27 comble cette lacune sur la seule plateforme où nous ne pouvons pas demander aux utilisateurs de changer de navigateur, car sur iOS, tous les navigateurs reposent sur Safari.
Les espaces colorimétriques linéaires apportent une amélioration moins visible. La sortie HDR figurait parmi les fonctionnalités phares de Godot 4.7, et sur le Web, le passage d’une cible de rendu linéaire à l’écran restait la partie délicate. Permettre au canevas d’accepter directement des données linéaires supprime une conversion que les moteurs doivent actuellement effectuer eux-mêmes.
Nous utiliserons l’élément model pour ce qu’il fait bien : afficher une ressource unique sur une page. Notre visionneuse GLB et notre bibliothèque de ressources conserveront leur moteur de rendu three.js, car c’est la solution qui fonctionne dans tous les navigateurs. Mais disposer d’un chemin natif dans Safari pour les aperçus rapides reste intéressant. Si vous souhaitez vérifier ce que votre propre navigateur prend en charge avant que tout cela ne vous concerne, l’outil de vérification WebGL et WebGPU vous le dira, tandis que le guide comparatif entre WebGPU et WebGL explique pourquoi la différence est plus importante qu’il n’y paraît.