Que recherchez-vous ?
Engine & platform

Les mises à jour de la durée d'exécution sur le web sont ici : Faites passer votre navigateur à la vitesse supérieure

BEN CRAVEN, MATTHEW BUSCEMI, ANTHONY BOWKER / UNITY TECHNOLOGIESContributor
Nov 30, 2023|15 Min
Les mises à jour de la durée d'exécution sur le web sont ici : Faites passer votre navigateur à la vitesse supérieure
Cette page a été traduite automatiquement pour faciliter votre expérience. Nous ne pouvons pas garantir l'exactitude ou la fiabilité du contenu traduit. Si vous avez des doutes quant à la qualité de cette traduction, reportez-vous à la version anglaise de la page web.

À l'occasion du salon Unite 2023, nous avons dévoilé nos dernières offres d'exécution Web. Cela comprenait plus de détails sur le support très attendu pour les navigateurs mobiles, un premier aperçu de ce que WebGPU peut faire pour les graphiques avancés et le rendu sur les navigateurs de bureau, et une annonce passionnante avec nos partenaires de Meta pour apporter des titres Unity à la plateforme Instant Games sur Facebook et Messenger. Poursuivez votre lecture pour découvrir ce qui vous attend pour votre prochain projet sur le web.

Pour commencer : Jeux sur le web

Unity a une longue histoire avec les runtimes web. En 2006, le lecteur web Unity a fait ses débuts sous la forme d'un plug-in pour les navigateurs web. Avec l'avènement du HTML5, les navigateurs ont commencé à supprimer la prise en charge des plug-ins, et le lecteur web d'Unity a été déprécié en 2015. Ensuite, nous avons adopté WebGL pour exécuter des jeux directement dans le navigateur avec asm.js. Unity était présent au début du processus de conception de WebAssembly (WASM), et nous avons évolué aux côtés de WASM depuis lors. Les performances quasi-natives du moteur Unity sont ainsi disponibles sur le web. En 2018.2, notre solution WebAssembly a remplacé asm.js par défaut.

Vous n'avez pas entendu parler de nous depuis un certain temps, mais nous pensons que nous sommes arrivés à un point d'inflexion pour le contenu d'Unity sur le web.

En plus de nos avancées technologiques, nous avons mis à jour notre système de dénomination pour la plateforme. WebGL est désormais connu sous le nom de Unity Web afin de séparer la technologie WebGL de la plateforme web de Unity. Nous voulons également nous préparer à un avenir où il y aura plus d'une norme d'équarrissage. A terme, vous pourrez créer une version utilisant WebGL, une autre avec WebGPU, ou une seule version avec les deux.

Les avantages des jeux sur plateforme web

Proposer du contenu de cette manière permet aux joueurs d'accéder instantanément à une expérience en cliquant simplement sur un lien - ou en scannant un code QR - sans avoir besoin d'installer quoi que ce soit sur leur appareil. En outre, lorsque vous introduisez votre contenu dans l'environnement sécurisé des navigateurs, vous disposez d'une connexion directe entre vous et vos joueurs, sans qu'un autre magasin en ligne ne s'interpose.

Web n'a pas d'étape d'installation comme d'autres plateformes, ce qui promet une faible friction et un engagement instantané. Toutefois, cela signifie que les utilisateurs doivent télécharger le moteur d'exécution et les ressources de démarrage lors du premier chargement. Cela signifie que pour nous, pour vous et pour tous les utilisateurs finaux, le temps de chargement est essentiel. Des efforts considérables sont déployés pour réduire les temps de chargement, et vous en saurez plus à ce sujet plus loin dans ce billet.

Considérer le contenu pour le web

La profondeur et l'étendue du moteur donnent aux développeurs la possibilité de gérer des simulations et des éléments interactifs plus complexes que les autres technologies web. Cela dit, comme les utilisateurs téléchargent d'emblée le moteur d'exécution et les éléments de démarrage, il est presque toujours préférable d'avoir une taille réduite dans le contexte du web, du moins pour l'instant.

Compte tenu de ces compromis, il y a certainement des types de jeux qui fonctionnent mieux sur le web que d'autres, tels que les jeux occasionnels et hypercasuels, avec leurs sessions de jeu de courte durée et leurs mécanismes faciles à comprendre.

En outre, vous pouvez tirer parti de la nature peu contraignante du Web en prenant une petite partie d'un jeu plus vaste, par exemple votre niveau de tutorat, et en créant sa propre version Web, distincte du reste du jeu et accessible à tous. Cela permet aux joueurs de vivre une première expérience sans installer quoi que ce soit sur leur appareil et vous donne la possibilité de les convertir à l'application native complète une fois qu'ils se sont familiarisés avec les mécanismes.

La NASA et Artemis I

Le site web Artemis Real-time Orbit Website (AROW) est un outil interactif de suivi en temps réel de la mission Artemis I, lancé en novembre dernier et construit avec Unity.

Dans la mythologie, Artémis est la sœur jumelle d'Apollon, c'est pourquoi la NASA a donné le nom de cette figure grecque à la série de missions qui marque son retour sur la surface de la lune.

Les amateurs d'espace du monde entier ont pu suivre la position de la capsule Orion en orbite, ainsi que son éventuel lieu d'amerrissage dans l'océan Pacifique, le tout à partir de leurs navigateurs web de bureau. La NASA prévoit de s'appuyer sur cet outil pour toutes les futures missions Artemis et de l'étendre au suivi non seulement de la capsule Orion, mais aussi de tous les composants de la mission.

AROW a été créé par un stagiaire, Seth Lambert, qui est devenu depuis un membre à temps plein de l'équipe de communication de la NASA.

Prise en charge des navigateurs mobiles dans Unity 6

Lors d'Unity, nous avons été fiers d'annoncer que la prise en charge des navigateurs Android et iOS arrivera dans Unity 6. Vous pourrez bientôt faire tourner vos jeux Unity n'importe où sur le web, y compris dans les navigateurs iOS ou Android eux-mêmes. Vous pourrez également intégrer vos jeux dans une vue web d'une application native ou utiliser notre modèle d'application web progressive pour que votre jeu se comporte davantage comme une application native, avec son propre raccourci et sa fonctionnalité hors ligne. Nous sommes convaincus que si vous avez ciblé l'Unity Web sur mobile, vous avez probablement eu du succès avec les appareils mobiles haut de gamme sortis au cours des deux ou trois dernières années, mais vos résultats ont pu varier en fonction de votre contenu. D'ici à la sortie d'Unity 6, nous aurons des indications plus claires sur la configuration matérielle minimale requise pour Unity Web sur mobile.

Vous pouvez voir ici notre récent projet d'échantillon 2D Récolte heureuse fonctionnant dans Safari sur un iPhone 15 Pro.

Exemple de projet Unity 2D Happy Harvest fonctionnant dans le navigateur web mobile Safari sur l'Apple iPhone 15 Pro.
Un timing parfait

Safari a commencé à prendre en charge WebGL2, ce qui permet à Unity Web de fonctionner sur iOS ainsi que sur les appareils Android. Nous avons assisté à des progrès constants en matière de vitesse et de fiabilité des réseaux mobiles, ainsi qu'à une amélioration constante de la puissance des processeurs et des processeurs graphiques. Le public moderne étant avide d'expériences instantanées avec très peu de friction, nous pensons que les joueurs sont désormais prêts pour un contenu interactif de courte durée.

Partenariat stratégique Unity x Meta pour les jeux instantanés

Comme annoncé lors de la Keynote Unity, Unity s'est associé à Meta pour développer le support de leur plateforme Instant Games. En débloquant cet écosystème pour les créateurs, les joueurs pourront trouver et jouer instantanément à des jeux sur Facebook et dans les conversations Messenger. Avec une audience de centaines de millions de joueurs, il s'agit d'une opportunité fantastique pour vous d'étendre la portée de votre contenu à une toute nouvelle cohorte.

"L'étroite collaboration entre Meta et Unity a déjà donné des premiers résultats prometteurs en termes de gains de performance pour les jeux HTML5 construits avec Unity", a noté Andrew Mo, chef de produit pour Facebook Gaming chez Meta. "Nous sommes ravis de poursuivre sur cette lancée au cours de l'année à venir et nous sommes impatients de permettre aux développeurs de jeux d'apporter plus facilement leur contenu sur Facebook et Messenger."

Il a ajouté : "Nous pensons qu'il y a beaucoup de potentiel à rendre les jeux instantanément accessibles, en particulier lorsqu'ils sont conçus pour être joués avec vos amis et votre communauté. Et nous sommes ravis de nous associer à Unity pour libérer ce potentiel sur notre plateforme."

"Il y a beaucoup de potentiel à rendre les jeux instantanément accessibles, en particulier lorsqu'ils sont conçus pour être joués avec vos amis et votre communauté [...] nous sommes ravis de nous associer à Unity pour libérer ce potentiel sur notre plateforme." - Andrew Mo, chef de produit pour Facebook Gaming, Meta

L'équipe de la plateforme Web Unity travaille sur un certain nombre de choses pour faciliter ce partenariat, notamment une cible de construction dédiée afin que vous puissiez tester, optimiser et publier des jeux dans un flux rationalisé adapté aux jeux instantanés. Il y aura un SDK C# pour interfacer avec les API des jeux instantanés et une multitude de nouvelles optimisations nettes pour s'assurer que les joueurs peuvent entrer dans les jeux en quelques secondes.

Nous travaillons également en partenariat avec des studios de jeux pour valider ce nouvel outil. Les partenaires de lancement comprennent Coatsink, qui a quelques jeux sur les plates-formes Meta, dont Ready, Set, Cook ! Peu après la signature de Coatsink en tant que partenaire de lancement, l'équipe d'Unity a appliqué quelques premières optimisations à ce jeu, et les résultats ont été extrêmement prometteurs.

Illustration pour Ready, Set, Cook ! de Coatsink

Avec une baisse de 25 % du temps de chargement, les sessions actives ont augmenté de 50 % et les taux de clics sont passés de 35 % à 58 %. Cela signifie qu'au tout début de ce travail d'optimisation, Ready, Set, Cook ! est passé d'une situation où la plupart des joueurs n'ont jamais vu de jeu à une situation où la majorité d'entre eux se lancent dans une partie avec leurs amis. Ce n'est que la partie émergée de notre iceberg d'optimisation, mais vous pouvez voir comment des réductions relativement faibles du temps de chargement peuvent faire une énorme différence en termes d'engagement.

Ce graphique montre une comparaison entre la version originale fournie par Coatsink et la version optimisée avec nos derniers outils Instant Games-ready. Comme vous pouvez le constater, nous avons déjà réduit le temps d'interactivité de Ready, Set, Cook ! de plus de 50 %. Ce test particulier a été effectué sur un Pixel 5 étranglé à 48 Mbps.

Graphique à barres illustrant la différence de temps de chargement - en secondes - entre la version originale et la version optimisée de Ready, Set, Cook ! Pour 48 Mbps (12 à 5,5), 86 Mbps (8,2 à 3,7) et 176 Mbps (6,1 à 3,6)

Dans le graphique ci-dessus, vous pouvez voir quels étaient les temps de chargement avant l'optimisation et où nous en sommes actuellement en utilisant Ready, Set, Cook ! comme titre de banc d'essai . Tout d'abord, la vitesse est limitée à 48 Mbps - il s'agit de la vitesse médiane des réseaux mobiles dans le monde, telle que rapportée par Ookla, sans même tenir compte de la 5G. À la vitesse médiane du haut débit dans le monde, soit 86 Mbps, nous sommes encore plus rapides. Sur une connexion 5G solide à 176 Mbps, nous avons constaté des vitesses encore plus rapides, mais nous avons également rencontré des rendements décroissants car la bande passante du réseau n'est plus le principal facteur limitant.

Comment atteindre des vitesses fulgurantes

Pour obtenir des temps de chargement rapides, il est nécessaire d'examiner tous les aspects du téléchargement et de l'initialisation de votre jeu dans le navigateur web.

Anatomie de la construction d'un site web

Une construction web se compose de plusieurs fichiers :

  • Fichier WebAssembly (.wasm) : Il s'agit de l'exécutable binaire comprenant le moteur Unity et votre logique de jeu.
  • Un fichier de ressources volumineux (.data) : Il s'agit des métadonnées globales et des ressources des scènes incluses dans la compilation.
  • Il peut y avoir des regroupements d'actifs ou des Addressables.
  • Votre modèle WebGL (HTML et CSS), et quelques fichiers JavaScript du Framework Unity pour le faire fonctionner.
Meilleures pratiques pour le développement de sites web mobiles

Pour commencer, il y a quelques bonnes pratiques à suivre pour créer une bonne version :

  • Indiquer au compilateur et à l'éditeur de liens de construire pour une taille de code optimale
  • Utilisation de la compression Brotli
  • Ajout de balises HTTP de préchargement à votre modèle web pour charger en amont tous les lots de ressources et les Addressables nécessaires à la première scène.

Nous en ferons la valeur par défaut dans la prochaine cible de construction des jeux instantanés.

Pensez également à réduire le temps de chargement perçu par vos joueurs en affichant un écran d'accueil ou une animation pendant que le moteur Unity se charge et s'initialise.

Réduction des fichiers de ressources

En fonction de votre jeu, les ressources peuvent être plus grandes ou plus petites que le WebAssembly.

Tout d'abord, il convient de prendre en compte certaines bonnes pratiques. Le temps de chargement de la première scène étant critique, il faut envisager d'utiliser le système Unity Addressables pour décomposer chaque élément en un téléchargement distinct. Ensuite, ajoutez des balises de préchargement HTTP pour précharger les Addressables nécessaires à la première scène. Les scènes suivantes chargeront alors les actifs à la demande à partir du système Addressables.

Si votre jeu utilise beaucoup d'audio, assurez-vous d'utiliser de l'audio compressé, et envisagez de le forcer en Mono et de réduire la qualité audio.

Deuxièmement, examinons les paramètres graphiques utilisés. Le choix des textures compressées ETC Crunch permet de réduire la taille des téléchargements et de limiter l'utilisation de la mémoire GPU sur les appareils mobiles. Si vous utilisez des textures compressées ASTC, examinez attentivement la taille des blocs, en choisissant des blocs plus grands pour des textures plus petites. De même, configurez l'élimination des ombres dans les paramètres du lecteur de votre projet.

WebAssembly de nouvelle génération

La technologie WebAssembly n'est pas en reste, et nous apportons les mises à jour à Unity. Nous sommes extrêmement reconnaissants du travail accompli par les communautés Web du W3C pour soutenir ces technologies avancées. Les jeux en ligne ne sont pas possibles sans les investissements et le soutien de tous les développeurs de navigateurs. Nous apprécions particulièrement notre collaboration avec l'équipe Chrome de Google. Ensemble, nous avons travaillé sur le renforcement des cas d'utilisation de WebAssembly pour les jeux et sur les performances graphiques pour les charges de travail complexes liées aux jeux.

Le compilateur Emscripten permet d'intégrer votre compilation Unity il2cpp à WebAssembly. Avec chaque nouvelle version LTS (Long Term Support), nous incluons la dernière version d'Emscripten, ce qui permet des développements plus rapides et des versions plus petites et plus optimisées (qui peuvent prendre un certain temps à construire).

Dans Unity 6, vous pourrez activer la prise en charge de la mémoire de 4 Go. Cela permet des expériences 3D en temps réel plus importantes sur le web, en utilisant la mémoire plus importante dont disposent les navigateurs de bureau. À l'avenir, cela ouvrira la voie à la prise en charge de la mémoire 64 bits lorsque tous les navigateurs la prendront en charge.

Actuellement, lorsque vous activez la prise en charge des exceptions pour les web builds, il y a un certain surcoût, par exemple lorsque du code est ajouté à toutes les fonctions pour prendre en charge try/catch. Avec la gestion native des exceptions de WebAssembly, qui sera disponible en option dans Unity 6, les exceptions seront disponibles avec peu de surcharge.

Dans Unity 6 également, vous pouvez activer la prise en charge SIMD de WebAssembly. Cela permet d'accélérer les calculs mathématiques de l'unité centrale grâce à des instructions vectorisées. Il fonctionne sur les appareils x64 et ARM, en mappant les instructions SIMD de WebAssembly vers SSE ou Arm NEON lorsque la page web est chargée. Les améliorations varient en fonction de l'appareil et du navigateur, mais elles sont perceptibles.

Ces fonctions sont facultatives et ne sont disponibles que sur les versions les plus récentes des navigateurs web.

De WebGL à WebGPU

L'introduction d'un nouveau WebGPU marque une étape importante pour l'accélération graphique sur le web, ouvrant la voie à des bonds sans précédent dans la fidélité du rendu graphique pour les jeux web Unity.

WebGPU est conçu dans le but d'exploiter et d'exposer les capacités modernes du GPU sur le web. Cette nouvelle API web y parvient en fournissant une interface d'accélération graphique moderne mise en œuvre en interne via des API GPU natives telles que DirectX 12, Vulkan ou Metal, en fonction de l'appareil de bureau que vous utilisez.

Le WebGPU permettra de prendre en charge de nouvelles fonctions de rendu très intéressantes et d'atteindre un niveau de fidélité graphique jusqu'à présent inconnu sur les ordinateurs de bureau en ligne. À l'instar d'autres API graphiques modernes, le contrôle de niveau inférieur sur la configuration du rendu et l'exécution du GPU ouvre de nouvelles possibilités d'optimisation, qui pourraient conduire à une réduction des frais généraux du CPU et du GPU et à une amélioration du débit et de la latence.

WebGPU apporte également pour la première fois des shaders de calcul sur le web. Le GPU Compute Skinning améliore radicalement les performances de rendu des personnages en maillage. Désormais, les transformations des sommets sont toutes transférées au GPU. La démo ci-dessus tire parti du GPU Skinning pour mailler la peau de ces robots avec le squelette sous-jacent, tout en maintenant un taux de rafraîchissement relativement élevé. Si l'on utilisait l'unité centrale, on obtiendrait un nombre de FPS à un chiffre.

Démonstration interactive du calcul de la peau du personnage Adam dans WebGPU

Un autre exemple est le VFX Graph d'Unity, qui génère de manière procédurale la géométrie directement dans les shaders de calcul. Dans la simulation de particules ci-dessous, un peu plus d'un demi-million de particules sont animées, et elles sont toutes déplacées par des nuanceurs de calcul sur le GPU.

Démonstration interactive VFX Graph mettant en scène le logo Google Chrome, l'icône du cube Unity et le logo WebGPU.

Vous avez peut-être déjà vu la démo Boat Attack ci-dessus. Maintenant, vous pouvez voir qu'il fonctionne entièrement sur WebGPU. Le WebGPU est activé dès aujourd'hui sur Google Chrome et Microsoft Edge sur macOS et Windows. Dans ce dernier exemple, nous affichons une attaque de bateau interactive, rendue par WebGPU.

Capture d'écran de la démo WebGPU Boat Attack

Tout au long du développement du backend d'Unity pour le WebGPU, les ingénieurs graphiques d'Unity ont travaillé en étroite collaboration avec l'équipe Chrome pour tester le WebGPU avec de grandes scènes et des shaders complexes, ce qui a donné des résultats fantastiques.

Le backend graphique WebGPU est encore en cours de développement et nous ne recommandons pas de l'utiliser pour des cas d'utilisation en production. Cependant, il est disponible dès maintenant en accès anticipé. Les détails sur la façon de commencer se trouvent dans le forum graphique.

Passons en revue

Le web est incroyablement puissant en raison de son potentiel d'engagement sans friction et de connexion directe avec vos joueurs. Comme ils téléchargent d'emblée le WASM et les ressources de démarrage, la réduction du temps de chargement est essentielle pour les projets web. En raison de ces compromis, les petits éléments de contenu sont généralement mieux adaptés au web.

À la fin de l'année 2024, créez et déployez vos jeux instantanés sur Facebook et Messenger pour accéder à un tout nouveau public. Si vous souhaitez travailler directement avec Unity et Meta pour bénéficier d'un accès rapide aux outils et ressources nécessaires à la réussite de vos jeux instantanés, ou si vous souhaitez être tenu au courant de cette nouvelle initiative de soutien à la plateforme, enregistrez votre intérêt dès aujourd'hui.

La prise en charge du web mobile commence dans Unity 6. En savoir plus sur Unity 6 à partir de la Keynote Unite.

Si vous êtes du genre bricoleur, lisez notre message sur le forum à propos de WebGPU - à venir dans Unity 6 - pour obtenir des informations sur l'accès anticipé au backend WebGPU. Ensuite, découvrez encore plus des derniers développements du moteur grâce aux sessions Unite 2023 désormais disponibles et à la demande, notamment la session Unite "Faites découvrir instantanément votre jeu Unity à plus de joueurs sur le web" (intégrée ci-dessous).