Afficher et interagir avec du contenu web

Utilisez WebSlate pour afficher du contenu web interactif dans votre environnement 3D Mesh. Bénéficiez d’une expérience de navigation complète sur PC ou Quest 2 avec une entrée intuitive, une personnalisation, une sécurité et une gestion des performances.

Vous pouvez utiliser WebSlates pour :

• Interaction avec des cartes, des diagrammes et des données

• Affichage des tableaux de bord, des pages web, des photos et des vidéos

• Présentation de contenu qui met en évidence les produits et services, les histoires client et l’identité de la marque

Fonctionnalités WebSlate

• Spécifiez une URL par défaut : choisissez votre emplacement, faites glisser-déplacer le préfabriqué, puis ajoutez une URL. Répétez si vous souhaitez plusieurs WebSlates dans votre scène.

• Entrée et audio intégrée : navigation web de l’utilisateur final, interaction avec les applications et affichage de vidéos deviennent disponibles dans Mesh.

• Navigation sécurisée : verrouillez les URL de redirection pour empêcher les redirections malveillantes et les navigations de liens hypertexte involontaires.

• Personnalisation visuelle : modifiez la qualité pour optimiser les appareils des utilisateurs. Attirez les utilisateurs d’une distance avec du contenu facile à afficher.

• Scriptable : avec le script visuel et le script cloud, vous pouvez activer le basculement entre les pages avec un bouton.

• Intégration de l’outil Analyseur de performances de contenu : mesurez le temps moyen nécessaire pour que l’URP affiche des webSlates dans une trame et trouvez des problèmes de chargement de contenu.

• Test en mode Lecture avec émulation mesh : interagir avec votre contenu en tant qu’utilisateur, directement à partir de l’éditeur Unity.

• Authentification manuelle dans l’expérience : accédez au contenu sécurisé à partir de l’expérience en vous connectant à votre compte et en affichant le contenu lors de l’exécution.

Fonctionnement de WebSlate

Si vous avez configuré un projet Unity pour créer des environnements Mesh, l’ajout d’un WebSlate à votre environnement est un processus simple.

Dans Mesh, WebSlate charge une page interactive via une URL fournie. L’URL qui lui est donnée dans l’environnement sera la même que celle chargée dans Mesh. Dans le kit de ressources Mesh, le prefab WebSlate contient un paramètre d’URL que les développeurs peuvent spécifier pour contrôler le contenu affiché dans leur environnement Mesh.

• Lorsqu’ils sont chargés sur l’application Mesh pour PC et Quest, les pages web chargées par un WebSlate sont interactives par le biais de la souris, du clavier et de l’entrée du contrôleur XR Quest.

• La taille et la forme du WebSlate correspondent à celle du quad GameObject sur lequel il est placé. En règle générale, il s’agit du quad cuit à l’intérieur du préfabriqué WebSlate.

• Plusieurs webSlates peuvent être ajoutés à une scène. Le nombre d’utilisateurs dans votre environnement Mesh n’affecte pas les performances de WebSlate ; Les ressources WebSlate sont initialisées localement sur l’ordinateur de l’utilisateur.

• Les webSlates peuvent être configurés avec des scripts visuels ou cloud pour ajouter des comportements interactifs et une synchronisation entre les utilisateurs.

• WebSlate peut afficher des pages web et prend en charge l’interaction, mais ne fonctionne pas en tant que navigateur et ne prend pas en charge les signets, l’historique ou les déplacements arrière.

• Vous pouvez afficher un aperçu de votre webSlate dans votre projet Unity avant de charger votre scène sur Mesh en appuyant sur Play.

Configuration requise/dépendances

WebSlate dépend des packages Unity.InputSystem et Unity.XR.Interaction.Toolkit Unity, situés dans le kit de ressources Mesh.

Ajouter un préfabriqué WebSlate à votre projet Unity

Il existe deux versions de prefabs WebSlate disponibles dans le kit de ressources Mesh que vous pouvez ajouter à votre scène. Si vous préférez un WebSlate propre sans composants supplémentaires, ajoutez le préfabriqué WebSlate. Si vous souhaitez un WebSlate contenu dans un cadre stylisé avec des fonctionnalités supplémentaires, ajoutez le préfabriqué WebSlateFramed .

Ajouter le préfabriqué WebSlate à partir d’un menu

Pour ajouter l’un des préfabriqués à votre scène :

1. Cliquez avec le bouton droit dans la hiérarchie, puis dans le menu contextuel, effectuez l’une des opérations suivantes :

   Pour ajouter le WebSlate propre sans composants supplémentaires :
   Sélectionnez Mesh Toolkit>WebSlate.

   Pour ajouter le WebSlate avec le cadre stylisé et les fonctionnalités supplémentaires :
   Sélectionnez Mesh Toolkit>WebSlateFramed.

2. Ajoutez une URL au WebSlate pour afficher du contenu.

   Conseil : vous pouvez également cliquer sur le bouton « + » en haut à gauche de la fenêtre Hiérarchie pour afficher le même menu.

   

   

Rechercher et ajouter le préfabriqué WebSlate

Vous pouvez également rechercher et ajouter un préfabriqué WebSlate.

1. Dans le champ De recherche, tapez « WebSlate ». Vérifiez que le filtre All est sélectionné.

   

2. Faites glisser le préfabriqué souhaité dans l’affichage Scène ou la hiérarchie.

   

3. Dans l’inspecteur, accédez au composant WebSlate, puis ajoutez l’URL que vous souhaitez afficher sur WebSlate :

   

Vérifiez que votre WebSlate est lisible

Il est important de s’assurer que tous les participants d’une expérience Mesh peuvent lire tout le contenu d’un WebSlate confortablement. Nous vous recommandons de créer un espace de plancher vide devant un WebSlate afin que les participants puissent s’y rapprocher et ajuster leur position pour une meilleure vue. Si votre expérience contient des sièges, affichez le WebSlate à partir de chaque siège pour vous assurer qu’un participant assis dans ce siège peut lire le texte sur Le WebSlate. Si vous contrôlez le contenu qui s’affiche sur un WebSlate, testez différentes tailles de police pour le texte afin de déterminer la taille optimale pour l’affichage. Dans l’exemple d’expérience ci-dessous, le texte « Microsoft Teams » au milieu du WebSlate est plus grand que suffisamment grand pour un affichage confortable, mais le texte beaucoup plus petit dans les coins est difficile à lire. Dans ce type de scénario, vous n’auriez pas le contrôle sur le texte dans la vidéo de diffusion en continu. Vous devriez donc envisager de rapprocher les sièges. En outre, les sièges qui sont plus centrés et qui regardent directement le WebSlate fourniront une meilleure vue que les sièges qui sont hors des côtés.

Aperçu de WebSlate en mode Lecture avec émulation maillage

Pour afficher une URL affichée plus rapidement dans votre WebSlate, vous pouvez utiliser le mode Lecture avec l’émulation maillage. Outre le test dans ce mode, la seule autre façon de voir votre WebSlate consiste à le charger à l’aide du chargeur du kit de ressources Mesh et à l’afficher dans une expérience Mesh.

Pour ajouter le mode Play avec l’émulation mesh à votre projet, suivez les instructions de l’article Mesh Emulator.

Pour afficher votre page web dans WebSlate :
Appuyez sur le bouton Lecture de l’éditeur Unity.

Activer l’interaction WebSlate pour le mode Play avec émulation maillage

Pour activer l’interaction dans WebSlate, vous devez configurer quelques éléments.

1. Ajoutez l’émulateur Mesh à votre scène pour activer le mode Lecture avec émulation de maillage.

2. Créez un Plan GameObject. Ce sera votre plancher. Vérifiez que GameObject est positionné à l’origine (0,0,0) :

   

3. Positionnez le WebSlate de sorte qu’il se trouve devant le caractère MeshEmulatorSetup :

   

4. Cliquez sur le bouton Lecture, puis double-cliquez pour interagir avec la page Web affichée dans Le WebSlate :

   

Félicitations ! Vous avez ajouté un WebSlate personnalisé à votre scène Unity et testé l’interaction en mode Play avec l’émulation mesh.

Vous êtes maintenant prêt à charger l’environnement sur Mesh et à partager votre création avec le monde !

WebSlate dans visual Scripting

Avec Visual Scripting, les développeurs peuvent implémenter des fonctionnalités et un comportement WebSlate sans avoir besoin de taper du code. Au lieu de cela, une interface visuelle basée sur des nœuds est fournie, ce qui permet aux utilisateurs de définir et de connecter différentes actions et événements dans une scène. Certains développeurs constatent que cela peut simplifier le processus d’ajout d’interactivité et de comportement.

Pour activer le script visuel à l’aide de WebSlate, vous devez configurer quelques éléments.

1. Accédez à Modifier les>paramètres du projet.

2. Dans la liste de gauche, sélectionnez Visual Scripting.

   

3. Développez la bibliothèque de nœuds. Cette opération affiche la liste d’assemblys.

4. En bas de la liste des assemblys à droite, cliquez sur le bouton Ajouter (+). Cela ajoute un nouvel élément à la liste qui affiche « (Aucun assembly) ».

5. Cliquez sur la nouvelle entrée d’assembly, puis dans le champ De recherche, tapez « Webslate ». Cela réduit la liste à Microsoft.Mesh.WebSlate. Sélectionnez cet élément pour l’ajouter à la liste d’assemblys.

   

   Visual Scripting ajoute Microsoft.Mesh.WebSlate et ses nœuds à la bibliothèque de nœuds. Pour utiliser les nœuds de votre projet, sélectionnez le bouton Régénérer les nœuds .

   

   URL de chargement

   Les développeurs peuvent désormais modifier dynamiquement le contenu web en temps réel en chargeant de nouvelles URL via Visual Scripting. Cette fonctionnalité étend l’étendue de différentes applications, notamment la modification du contenu web en fonction des préférences utilisateur ou la mise à jour en réponse aux données en temps réel.

   

   Charger du contenu HTML

   Cette nouvelle fonctionnalité dans WebSlate permet aux développeurs de supprimer des fichiers HTML en tant que TextAssets dans la scène Unity avec peu d’effort. Cette intégration simplifie non seulement le flux de travail, mais permet également des commentaires immédiats en mode Play Unity, ce qui améliore la modification et le débogage en temps réel. En outre, il prend en charge le changement de contenu dynamique, offrant une flexibilité et une expérience utilisateur plus interactive.

   

   Créez ou réutilisez du code HTML existant pour afficher/interagir dans votre environnement Mesh : si vous ne souhaitez pas héberger de contenu HTML ou que vous disposez de fichiers hors connexion sécurisés, vous pouvez ajouter du code HTML à l’emplacement et l’inclure dans le cadre de la ressource dans votre scène.

   Chargement dynamique au moment de l’exécution : le chargement du code HTML à partir de fichiers permet aux développeurs d’apporter des modifications en temps réel à l’aide de Visual Scripting. Cette fonctionnalité dynamique améliore l’expérience utilisateur.

   Boucle de commentaires rapide en mode Play Unity : avec le contenu HTML chargé à partir de fichiers, les développeurs peuvent instantanément voir les effets de leurs modifications lors de l’inf unity Play Mode.

WebSlate dans le script cloud

Les développeurs peuvent également ajouter un WebSlate à des environnements à l’aide de scripts cloud Mesh. Cela signifie qu’un WebSlate peut être parcouru par un script cloud Mesh, puis synchronisé entre les utilisateurs. Par exemple, vous pouvez créer un script cloud Mesh contenant un nœud WebSlate et un ou plusieurs nœuds interagissants. Ensuite, vous pouvez configurer le gestionnaire d’événements Click de votre InteractableNode pour parcourir le WebSlate vers une autre URL. En ajoutant un script cloud Mesh avec WebSlate, vos utilisateurs peuvent mettre à jour le contenu WebSlate de manière interactive.

Pour obtenir des conseils supplémentaires sur le nœud WebSlate dans Mesh Apps, consultez la vue d’ensemble des scripts visuels.

Conseils généraux

• Vous pouvez placer un WebSlate sur GameObjects autre qu’un Quad en ajoutant WebSlate.cs en tant que composant de script directement à votre objet 3D de votre choix et en ajoutant UnlitWebSlate.mat à MeshRenderer Materials. Notez que cela peut entraîner un étirement de texture visuelle, une inversion et/ou une rotation.

• Un WebSlate charge une URL par défaut. Vous devez remplacer cette URL par une URL que vous préférez pour chaque WebSlate en cours d’utilisation. Le paramètre de luminosité est défini sur 1,0 (100 % de la luminosité du navigateur).

• Les webSlates se suspendent automatiquement après avoir été désactivés pendant trop longtemps. Si vous devez vous assurer qu’une ardoise donnée est toujours en cours d’exécution (par exemple, un flux en direct ou une lecture audio continue), cochez le bouton « Empêcher la suspension » sur l’association WebSlate. Consultez ci-dessous pour connaître les implications en matière de performances.

• Pour dimensionner l’URL de l’image à la taille du WebSlate, habillage de l’URL en HTML. Utilisez l’API WebSlate LoadHTML via un script visuel pour afficher ce contenu HTML sur votre WebSlate. Ajoutez le code HTML construit à la propriété HTMLContent. Vous pouvez également utiliser l’API LoadHTMAsset et passer le code HTML en tant que ressource. Remplacez l’URL de l’image par l’URL de votre image.

  Exemple de code HTML avec l’URL d’image et le graphe de script visuel à l’aide de l’API LoadHTML et LoadHTMLAsset :

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>

  

  

Performances

• Étant donné qu’un WebSlate est une page web chargée, il est important de prendre en compte les implications en matière de performances :

  • Les scènes sont généralement performantes à 60fps avec jusqu’à 10 WebSlates actifs. La dégradation de la fréquence d’images et des performances générales peut être observée en proportion du nombre de WebSlates placés dans une scène, quel que soit le contenu.

  • Le contenu est chargé et exécuté dans le WebSlate sur un thread distinct des threads de mise à jour et de rendu de la scène, et il est donc peu probable d’affecter directement la fréquence d’images. Toutefois, il est toujours important de prendre en compte le coût de l’exécution de JavaScript sur une page Web en termes de complexité du runtime et d’utilisation de la mémoire.

  • Pour économiser sur les performances, les WebSlates qui sont hors écran pour plus de 30 ans sont automatiquement suspendus. Ils reprendront rapidement à l’écran, mais cela peut avoir un impact sur les services en cours d’exécution sur la page hébergée. S’il s’agit d’un problème, les développeurs peuvent désactiver la suspension avec la case à cocher « Empêcher la suspension » du préfabriqué. Notez que cela peut entraîner l’utilisation de davantage de ressources par la scène, car ces WebSlates restent actifs à tout moment.

  

• Étant donné que les WebSlates n’ont pas d’interface utilisateur de navigation externe par défaut, la meilleure pratique consiste à charger uniquement des URL personnalisées, où la navigation de site est cyclique et peut être effectuée à l’intérieur de la page. Cela peut être effectué avec une barre latérale de navigation ou des liens vers une page hub, par exemple.

• L’outil Content Analyseur de performances (CPA) inclut un analyseur WebSlate qui mesure le temps moyen nécessaire au pipeline de rendu d’Unity pour restituer des webSlates dans une trame.

  • Les mesures sont basées sur l’enregistreur du profileur Unity et nécessitent le mode Lecture. L’analyseur déplace la caméra sur chaque WebSlate pour collecter suffisamment d’échantillons de profileur et calcule le temps de rendu moyen.

  • Cela fournit une analyse de premier niveau et générale des temps de rendu WebSlate dans le contexte du pipeline de rendu d’Unity. Elle ne fournit pas la fréquence d’images du contenu WebSlate lui-même.

  • Si le pipeline de rendu d’Unity dépasse le seuil pour afficher les WebSlates (actuellement 10 ms), l’outil CPA fournit un avertissement.

  • Les mêmes mesures sont également disponibles pour le Profileur de performances. Le groupe sur le Profileur de performances change généralement les couleurs du vert au rouge lorsque l’allocation budgétaire d’une catégorie est dépassée. Pour l’instant, le groupe WebSlate ne s’affiche qu’en vert jusqu’à ce qu’un budget de temps de rendu raisonnable soit rationalisé pour webSlates.

  

Restrictions de sécurité

• Les webSlates sont verrouillés sur les URL vers lesquelles ils accèdent, empêchant les redirections malveillantes. Toutes les navigations de liens hypertexte involontaires vers des domaines extérieurs sont bloquées, sauf si elles sont explicitement répertoriées comme domaine autorisé (voir ci-dessous).

• Les webSlates sont limités à la navigation dans le domaine initial ou les redirections de l’URL et du serveur spécifiés.

• La navigation au sein d’un WebSlate est exclusivement limitée au protocole HTTPS.

• L’accès de l’appareil à la webcam, au microphone et à la géolocalisation est bloqué.

Liste verte du domaine WebSlate

Pour garantir la sécurité contre les vecteurs d’attaque involontaires basés sur l’URL, tels que le hameçonnage, les WebSlates limitent par défaut la navigation vers les URL incluses dans le domaine de la première page chargée dans le WebSlate. Par exemple, un WebSlate lancé sur https://www.microsoft.com/ accède uniquement aux pages dont l’URL commence par « www.microsoft.com ». Bien que cela garantit que les utilisateurs ne diffèrent pas accidentellement du flux de navigation prévu, il peut s’agir d’une valeur par défaut trop restrictive pour certains cas d’usage, tels que l’authentification utilisateur, pendant laquelle il peut y avoir des redirections vers des sous-domaines ou des fournisseurs d’authentification tiers.

La façon de prendre en charge ces cas d’usage consiste à ajouter des domaines à la liste verte de WebSlate.

Ajouter automatiquement des domaines (recommandé)

Lorsque vous utilisez webSlates dans l’éditeur Unity, vous avez la possibilité d’activer « Collecter les domaines autorisés ». Cette opération supprime la restriction de navigation de domaine afin que vous puissiez naviguer librement lors de l’exécution en mode Play pour tester votre scénario. Pendant que vous naviguez en mode Lecture, le WebSlate journalise les domaines que vous visitez en arrière-plan.

Dans ce cas, nous développons la navigation de microsoft.com pour inclure également learn.microsoft.com.

Une fois que vous avez quitté le mode Lecture, vous trouverez une ressource appelée « WebViewAllowedDomains.asset » dans votre dossier Ressources de niveau supérieur.

En cliquant sur cette ressource, vous obtiendrez la liste des domaines supplémentaires que vous avez visités au-delà du domaine de votre URL initiale. Vous pouvez cliquer avec le bouton droit, copier, puis coller les valeurs dans le champ « Domaines autorisés » du composant WebSlate.

Remarque

Cette option est impossible à activer dans les scènes chargées. Le fait de laisser « Collecter les domaines autorisés » activé ne supprime pas la restriction dans votre scène finale. Toutefois, votre liste de domaines autorisés persiste et autorise la navigation tant que les domaines sont ajoutés à WebSlate.

Ajouter manuellement des domaines

Si vous connaissez déjà les domaines dont vous aurez besoin, vous pouvez les ajouter manuellement au WebSlate en développant la liste déroulante « Domaines autorisés » et en ajoutant vos domaines supplémentaires à la liste dans l’interface utilisateur graphique Unity.

Flux en direct alimentés par WebSlate

Pour ce faire, intégrez WebSlate Prefab dans votre environnement et fournissez l’URL de flux dynamique. Dans le cas où l’URL de flux dynamique n’est pas disponible au préalable, vous pouvez utiliser un service de redirection d’URL pour générer une URL et fournir celle-ci vers WebSlate. Cette approche offre la possibilité de mettre à jour l’URL de redirection au dernier moment sans avoir à republier l’environnement volumineux avec l’URL de flux dynamique. Vérifiez que vous sélectionnez l’option « Empêcher la suspension » pendant la configuration de WebSlate pour l’empêcher de suspendre après 30 secondes si quelqu’un n’affiche pas activement le WebSlate. Les webSlates ne nécessitent pas de configuration avec les outils hôtes. Les événements sans hôte peuvent donc être créés et servir d’espaces de dépôt avec du contenu significatif.

Limitations et problèmes connus

Limitations générales

• Les webSlates sont actuellement pris en charge dans l’application Mesh sur les appareils PC autonomes et Quest. Les webSlates ne sont disponibles que pour la préversion dans l’éditeur Unity sur Windows.

• Les webSlates dans la préversion de l’éditeur ne disposent pas de quelques fonctionnalités d’entrée (double-clic, glisser).

• Lorsque vous regardez à distance sur Quest, la lisibilité est faible.

• L’audio n’est pas localisé spatialement.

• La synchronisation de contenu web est limitée aux applications qui utilisent des API web pour synchroniser du contenu.

Problèmes connus

Consultez les sections WebSlate de l’article sur les problèmes connus du kit de ressources Mesh.

Commentaires sur le contenu web dans Mesh

Nous aimons les commentaires et les rapports de bogues ! Si vous souhaitez fournir des commentaires, utilisez le bouton Commentaires à l’intérieur de n’importe quelle expérience Mesh. Cela garantit que vos commentaires et rapports de bogues seront examinés et incorporés rapidement. Pour les commentaires WebSlate, incluez « [contenu web] » ou une mention de WebSlate dans vos commentaires.