HoloLens (1ère génération) Entrée 210 : Regard

Important

Les didacticiels Mixed Reality Academy ont été conçus avec HoloLens (1ère génération), Unity 2017 et Mixed Reality casques immersifs à l’esprit. Nous estimons qu’il est important de laisser ces tutoriels à la disposition des développeurs qui recherchent encore des conseils pour développer des applications sur ces appareils. Ces didacticiels ne seront pas mis à jour avec les derniers ensembles d’outils ou interactions utilisés pour HoloLens 2 et peuvent ne pas être compatibles avec les versions plus récentes d’Unity. Ils sont fournis dans le but de fonctionner sur les appareils pris en charge. Une nouvelle série de tutoriels a été publiée pour HoloLens 2.

Le regard est la première forme d’entrée et révèle l’intention et la sensibilisation de l’utilisateur. MR Input 210 (également appelé explorateur Project) est une présentation approfondie des concepts liés au regard pour Windows Mixed Reality. Nous ajouterons une prise de conscience contextuelle à nos curseurs et hologrammes, en tirant pleinement parti de ce que votre application sait sur le regard de l’utilisateur.

Nous avons ici un astronaute amical pour vous aider à apprendre les concepts de regard. Dans MR Basics 101, nous avons eu un curseur simple qui vient de suivre votre regard. Aujourd’hui, nous passons d’une étape au-delà du curseur simple :

  • Nous faisons en sorte que le curseur et nos hologrammes prennent en compte le regard : les deux changent en fonction de l’endroit où l’utilisateur cherche ou où l’utilisateur ne regarde pas . Cela les rend sensibles au contexte.
  • Nous ajouterons des commentaires à nos curseurs et hologrammes pour donner plus de contexte à l’utilisateur sur ce qui est ciblé. Ces commentaires peuvent être audio et visuels.
  • Nous allons vous montrer des techniques de ciblage pour aider les utilisateurs à atteindre des cibles plus petites.
  • Nous allons vous montrer comment attirer l’attention de l’utilisateur sur vos hologrammes avec un indicateur directionnel.
  • Nous allons vous apprendre des techniques pour prendre vos hologrammes avec l’utilisateur au fur et à mesure qu’elle se déplace dans votre monde.

Important

Les vidéos incorporées dans chacun des chapitres ci-dessous ont été enregistrées à l’aide d’une version antérieure d’Unity et de la Mixed Reality Shared Computer Toolkit. Bien que les instructions pas à pas soient exactes et actuelles, vous pouvez voir des scripts et des visuels dans les vidéos correspondantes obsolètes. Les vidéos restent incluses pour la postérité et parce que les concepts couverts s’appliquent toujours.

Prise en charge des appareils

Cours HoloLens Casques immersifs
Réalité mixte - Entrées - Cours 210 : Pointage du regard ✔️ ✔️

Avant de commencer

Prérequis

Fichiers projet

  • Téléchargez les fichiers requis par le projet. Nécessite Unity 2017.2 ou version ultérieure.
  • Annulez l’archivage des fichiers sur votre bureau ou d’autres emplacements faciles à atteindre.

Notes

Si vous souhaitez consulter le code source avant de le télécharger, il est disponible sur GitHub.

Errata et notes

  • Dans Visual Studio, « Uniquement mon code » doit être désactivé (désactivé) sous Outils-Options-Débogage>> afin d’atteindre les points d’arrêt dans votre code.

Chapitre 1 - Configuration d’Unity

Objectifs

  • Optimiser Unity pour le développement HoloLens.
  • Importer les ressources et configurer la scène.
  • Affichez l’astronaute dans le HoloLens.

Instructions

  1. Démarrez Unity.
  2. Sélectionnez Nouveau projet.
  3. Nommez le projet ModelExplorer.
  4. Entrez l’emplacement en tant que dossier De regard que vous avez précédemment non archivé.
  5. Vérifiez que le projet est défini sur 3D.
  6. Cliquez sur Create Project (Créer le projet).

Paramètres Unity pour HoloLens

Nous devons indiquer à Unity que l’application que nous essayons d’exporter doit créer une vue immersive au lieu d’une vue 2D. Pour ce faire, nous ajoutons HoloLens en tant qu’appareil de réalité virtuelle.

  1. Accédez à Modifier > Project Paramètres > Lecteur.
  2. Dans le panneau Inspector for Player Paramètres, sélectionnez l’icône Windows Store.
  3. Développez le groupe XR Settings.
  4. Dans la section Rendering (Rendu), cochez la case Virtual Reality Supported (Réalité virtuelle prise en charge) pour ajouter une nouvelle liste Virtual Reality SDKs (SDK de réalité virtuelle).
  5. Vérifiez que Windows Mixed Reality apparaît dans la liste. Si ce n’est pas le cas, sélectionnez le + bouton en bas de la liste et choisissez Windows Holographique.

Ensuite, nous devons définir notre back-end de script sur .NET.

  1. Accédez à Modifier > Project Paramètres > Player (vous pouvez toujours l’avoir à partir de l’étape précédente).
  2. Dans le panneau Inspector for Player Paramètres, sélectionnez l’icône Windows Store.
  3. Dans la section Autres Paramètres Configuration, vérifiez que le serveur principal de script est défini sur .NET

Enfin, nous allons mettre à jour nos paramètres de qualité pour obtenir des performances rapides sur HoloLens.

  1. Accédez à Modifier > Project Paramètres > Qualité.
  2. Cliquez sur la flèche pointant vers le bas dans la ligne par défaut sous l’icône Windows Store.
  3. Sélectionnez Très faible pour les applications du Windows Store Windows.

Importer des ressources de projet

  1. Cliquez avec le bouton droit sur le dossier Ressources dans le panneau Project.
  2. Cliquez sur Importer un package personnalisé de package>.
  3. Accédez aux fichiers projet que vous avez téléchargés, puis cliquez sur ModelExplorer.unitypackage.
  4. Cliquez sur Ouvrir.
  5. Une fois le package chargé, cliquez sur le bouton Importer .

Configurer la scène

  1. Dans la hiérarchie, supprimez l’appareil photo principal.
  2. Dans le dossier HoloToolkit , ouvrez le dossier Entrée , puis ouvrez le dossier Prefabs .
  3. Faites glisser et déposez le préfabriqué MixedRealityCameraParent du dossier Prefabs dans la hiérarchie.
  4. Cliquez avec le bouton droit sur la lumière directionnelle dans la hiérarchie, puis sélectionnez Supprimer.
  5. Dans le dossier Hologrammes, faites glisser et déposez les ressources suivantes à la racine de la hiérarchie :
    • AstroMan
    • Lumières
    • SpaceAudioSource
    • SpaceBackground
  6. Démarrez le mode ▶ De lecture pour afficher l’astronaute.
  7. Cliquez à nouveau sur Mode ▶ Lecture pour arrêter.
  8. Dans le dossier Hologrammes, recherchez la ressource Fitbox et faites-la glisser à la racine de la hiérarchie.
  9. Sélectionnez la boîte de réception dans le panneau Hiérarchie .
  10. Faites glisser la collection AstroMan de la hiérarchie vers la propriété Collection d’hologrammes de la boîte de réception dans le panneau Inspector .

Enregistrer le projet

  1. Enregistrez la nouvelle scène : Enregistrer > la scène sous.
  2. Cliquez sur Nouveau dossier et nommez le dossier Scènes.
  3. Nommez le fichier « ModelExplorer » et enregistrez-le dans le dossier Scènes .

Créer le projet

  1. Dans Unity, sélectionnez Build de fichier > Paramètres.
  2. Cliquez sur Ajouter des scènes ouvertes pour ajouter la scène.
  3. Sélectionnez plateforme Windows universelle dans la liste plateforme, puis cliquez sur Changer de plateforme.
  4. Si vous développez spécifiquement pour HoloLens, définissez l’appareil cible sur HoloLens. Sinon, laissez-le sur n’importe quel appareil.
  5. Vérifiez que le type de build est défini sur D3D et que le SDK est défini sur La dernière installation (qui doit être sdk 16299 ou ultérieure).
  6. Cliquez sur Générer.
  7. Créez un dossier nommé « Application ».
  8. Cliquez sur le dossier Application .
  9. Appuyez sur Sélectionner un dossier.

Une fois Unity terminé, une fenêtre Explorateur de fichiers s’affiche.

  1. Ouvrez le dossier Application .
  2. Ouvrez la solution ModelExplorer Visual Studio.

Si vous déployez sur HoloLens :

  1. À l’aide de la barre d’outils supérieure dans Visual Studio, remplacez la cible de Débogage par Version et par ARM vers x86.
  2. Cliquez sur la flèche déroulante en regard du bouton Ordinateur local, puis sélectionnez Ordinateur distant.
  3. Entrez votre adresse IP de l’appareil HoloLens et définissez le mode d’authentification sur Universel (protocole non chiffré). Cliquez sur Sélectionner. Si vous ne connaissez pas votre adresse IP de l’appareil, recherchez Paramètres > Options avancées d’Internet > réseau&.
  4. Dans la barre de menus supérieure, cliquez sur Déboguer -> Démarrer sans débogage ou appuyez sur Ctrl + F5. Si c’est la première fois que vous déployez sur votre appareil, vous devez l’associer à Visual Studio.
  5. Une fois l’application déployée, ignorez la boîte de réception avec un mouvement de sélection.

Si vous déployez sur un casque immersif :

  1. À l’aide de la barre d’outils supérieure de Visual Studio, remplacez la cible de Débogage par Mise en production et par ARM vers x64.
  2. Vérifiez que la cible de déploiement est définie sur ordinateur local.
  3. Dans la barre de menus supérieure, cliquez sur Déboguer -> Démarrer sans débogage ou appuyez sur Ctrl + F5.
  4. Une fois l’application déployée, ignorez la boîte de réception en tirant le déclencheur sur un contrôleur de mouvement.

Chapitre 2 - Commentaires des curseurs et des cibles

Objectifs

  • Conception et comportement visuels du curseur.
  • Commentaires de curseur basés sur le regard.
  • Commentaires d’hologramme basés sur le regard.

Nous allons baser notre travail sur certains principes de conception de curseur, à savoir :

  • Le curseur est toujours présent.
  • Ne laissez pas le curseur devenir trop petit ou trop grand.
  • Évitez d’obstruer le contenu.

Instructions

  1. Dans le dossier HoloToolkit\Input\Prefabs , recherchez la ressource InputManager .
  2. Faites glisser-déplacer l’InputManager sur la hiérarchie.
  3. Dans le dossier HoloToolkit\Input\Prefabs , recherchez la ressource Cursor .
  4. Faites glisser et déposez le curseur sur la hiérarchie.
  5. Sélectionnez l’objet InputManager dans la hiérarchie.
  6. Faites glisser l’objet Cursor de la hiérarchie dans le champ Curseurde SimpleSinglePointerSelector d’InputManager, en bas de l’inspecteur.

Simple Single Pointer Selector set-up

Génération et déploiement

  1. Régénérer l’application à partir du Paramètres de build de fichiers>.
  2. Ouvrez le dossier Application.
  3. Ouvrez la solution ModelExplorer Visual Studio.
  4. Cliquez sur Déboguer -> Démarrer sans débogage ou appuyez sur Ctrl + F5.
  5. Observez comment le curseur est dessiné et comment il change d’apparence s’il touche un hologramme.

Instructions

  1. Dans le panneau Hierarchy, développez l’objet AstroMan-GEO_G-Back_Center.>>
  2. Double-cliquez sur Interactible.cs pour l’ouvrir dans Visual Studio.
  3. Supprimez les commentaires des lignes dans les rappels IFocusable.OnFocusEnter() et IFocusable.OnFocusExit() dans Interactible.cs. Ceux-ci sont appelés par l’InputManager du Mixed Reality Shared Computer Toolkit lorsque le focus (par regard ou par pointage de contrôleur) entre et quitte le collisionneur de GameObject spécifique.
/* TODO: DEVELOPER CODING EXERCISE 2.d */

void IFocusable.OnFocusEnter()
{
    for (int i = 0; i < defaultMaterials.Length; i++)
    {
        // 2.d: Uncomment the below line to highlight the material when gaze enters.
        defaultMaterials[i].EnableKeyword("_ENVIRONMENT_COLORING");
    }
}

void IFocusable.OnFocusExit()
{
    for (int i = 0; i < defaultMaterials.Length; i++)
    {
        // 2.d: Uncomment the below line to remove highlight on material when gaze exits.
        defaultMaterials[i].DisableKeyword("_ENVIRONMENT_COLORING");
    }
}

Notes

Nous utilisons EnableKeyword et DisableKeyword ci-dessus. Pour pouvoir les utiliser dans votre propre application avec le nuanceur Standard du Shared Computer Toolkit, vous devez suivre les instructions Unity pour accéder aux matériaux via un script. Dans ce cas, nous avons déjà inclus les trois variantes de matériel mis en surbrillance nécessaires dans le dossier Ressources (recherchez les trois matériaux avec mise en surbrillance dans le nom).

Génération et déploiement

  1. Comme avant, générez le projet et déployez sur le HoloLens.
  2. Observez ce qui se passe quand le regard est destiné à un objet et quand il n’est pas.

Chapitre 3 - Techniques de ciblage

Objectifs

  • Facilitez la ciblage des hologrammes.
  • Stabiliser les mouvements naturels de la tête.

Instructions

  1. Dans le panneau Hiérarchie , sélectionnez l’objet InputManager .
  2. Dans le panneau Inspecteur , recherchez le script de stabilisateur de regard . Cliquez dessus pour l’ouvrir dans Visual Studio, si vous voulez regarder.
    • Ce script itère sur des exemples de données Raycast et permet de stabiliser le regard de l’utilisateur pour le ciblage de précision.
  3. Dans l’inspecteur, vous pouvez modifier la valeur Exemples de stabilité stockée . Cette valeur représente le nombre d’échantillons que le stabilisateur itère pour calculer la valeur stabilisée.

Chapitre 4 - Indicateur directionnel

Objectifs

  • Ajoutez un indicateur directionnel sur le curseur pour vous aider à trouver des hologrammes.

Instructions

Nous allons utiliser le fichier DirectionIndicator.cs qui va :

  1. Affichez l’indicateur directionnel si l’utilisateur ne regarde pas les hologrammes.
  2. Masquez l’indicateur directionnel si l’utilisateur examine les hologrammes.
  3. Mettez à jour l’indicateur directionnel pour pointer vers les hologrammes.

C’est parti.

  1. Cliquez sur l’objet AstroMan dans le panneau Hiérarchie , puis cliquez sur la flèche pour le développer.
  2. Dans le panneau Hiérarchie , sélectionnez l’objet DirectionalIndicator sous AstroMan.
  3. Dans le panneau Inspecteur , cliquez sur le bouton Ajouter un composant .
  4. Dans le menu, tapez l’indicateur direction de la zone de recherche. Sélectionnez le résultat de la recherche.
  5. Dans le panneau Hiérarchie , faites glisser et déposez l’objet Cursor sur la propriété Cursor dans l’Inspecteur.
  6. Dans le panneau Project, dans le dossier Hologrammes, faites glisser et déposez la ressource DirectionalIndicator sur la propriété Directional Indicator dans l’inspecteur.
  7. Générez et déployez l’application.
  8. Regardez comment l’objet indicateur directionnel vous aide à trouver l’astronaute.

Chapitre 5 - Panneaux d’affichage

Objectifs

  • Utilisez des panneaux d’affichage pour avoir des hologrammes toujours face à vous.

Nous allons utiliser le fichier Billboard.cs pour conserver un GameObject orienté de telle sorte qu’il soit confronté à l’utilisateur à tout moment.

  1. Dans le panneau Hiérarchie , sélectionnez l’objet AstroMan .
  2. Dans le panneau Inspecteur , cliquez sur le bouton Ajouter un composant .
  3. Dans le menu, tapez dans la zone de recherche Billboard. Sélectionnez le résultat de la recherche.
  4. Dans l’Inspecteur , définissez l’axe croisé dynamique sur Y.
  5. Essayez ! Générez et déployez l’application comme précédemment.
  6. Découvrez comment l’objet Billboard vous fait face, quelle que soit la façon dont vous changez le point de vue.
  7. Supprimez le script de l’AstroMan pour l’instant.

Chapitre 6 - Tag-Along

Objectifs

  • Utilisez Tag-Along pour que nos hologrammes nous suivent autour de la salle.

À mesure que nous travaillons sur ce problème, nous serons guidés par les contraintes de conception suivantes :

  • Le contenu doit toujours être d’un coup d’œil.
  • Le contenu ne doit pas être de la même façon.
  • Le contenu de verrouillage de la tête est mal à l’aise.

La solution utilisée ici consiste à utiliser une approche « tag-along ».

Un objet tag-along ne quitte jamais complètement la vue de l’utilisateur. Vous pouvez considérer l’étiquette comme un objet attaché à la tête de l’utilisateur par des bandes en caoutchouc. À mesure que l’utilisateur se déplace, le contenu reste à l’intérieur d’un coup d’œil facile en faisant glisser vers le bord de la vue sans quitter complètement. Lorsque l’utilisateur regarde vers l’objet tag-along, il s’affiche plus complètement.

Nous allons utiliser le fichier SimpleTagalong.cs qui va :

  1. Déterminez si l’objet Tag-Along se trouve dans les limites de la caméra.
  2. Si ce n’est pas le frustum de la vue, positionnez le Tag-Along partiellement dans le frustum de vue.
  3. Sinon, positionnez la Tag-Along sur une distance par défaut de l’utilisateur.

Pour ce faire, nous devons d’abord modifier le script Interactible.cs pour appeler TagalongAction.

  1. Modifiez Interactible.cs en effectuant l’exercice de codage 6.a (sans commentaire les lignes 84 à 87).
/* TODO: DEVELOPER CODING EXERCISE 6.a */
// 6.a: Uncomment the lines below to perform a Tagalong action.
if (interactibleAction != null)
{
    interactibleAction.PerformAction();
}

Le script InteractibleAction.cs , associé à Interactible.cs , effectue des actions personnalisées lorsque vous appuyez sur des hologrammes. Dans ce cas, nous allons en utiliser un spécifiquement pour le tag-along.

  • Dans le dossier Scripts, cliquez sur la ressource TagalongAction.cs pour l’ouvrir dans Visual Studio.
  • Effectuez l’exercice de codage ou remplacez-le par ceci :
    • En haut de la hiérarchie, dans le type de barre de recherche ChestButton_Center et sélectionnez le résultat.
    • Dans le panneau Inspecteur , cliquez sur le bouton Ajouter un composant .
    • Dans le menu, tapez l’action Tagalong de la zone de recherche. Sélectionnez le résultat de la recherche.
    • Dans Hologrammes dossier, recherchez la ressource Tagalong.
    • Sélectionnez l’objet ChestButton_Center dans la hiérarchie. Faites glisser et déposez l’objet TagAlong du panneau Project sur l’Inspecteur dans la propriété Object To Tagalong.
    • Faites glisser l’objet Action Tagalong de l’Inspecteur vers le champ Action interactible sur le script Interactible .
  • Double-cliquez sur le script TagalongAction pour l’ouvrir dans Visual Studio.

Interactible set-up

Nous devons ajouter les éléments suivants :

  • Ajoutez des fonctionnalités à la fonction PerformAction dans le script TagalongAction (héritée d’InteractibleAction).
  • Ajoutez des panneaux publicitaires à l’objet regardé et définissez l’axe croisé dynamique sur XY.
  • Ajoutez ensuite une Tag-Along simple à l’objet.

Voici notre solution, de TagalongAction.cs :

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License. See LICENSE in the project root for license information.

using HoloToolkit.Unity;
using UnityEngine;

public class TagalongAction : InteractibleAction
{
    [SerializeField]
    [Tooltip("Drag the Tagalong prefab asset you want to display.")]
    private GameObject objectToTagalong;

    private void Awake()
    {
        if (objectToTagalong != null)
        {
            objectToTagalong = Instantiate(objectToTagalong);
            objectToTagalong.SetActive(false);

            /* TODO: DEVELOPER CODING EXERCISE 6.b */

            // 6.b: AddComponent Billboard to objectToTagAlong,
            // so it's always facing the user as they move.
            Billboard billboard = objectToTagalong.AddComponent<Billboard>();

            // 6.b: AddComponent SimpleTagalong to objectToTagAlong,
            // so it's always following the user as they move.
            objectToTagalong.AddComponent<SimpleTagalong>();

            // 6.b: Set any public properties you wish to experiment with.
            billboard.PivotAxis = PivotAxis.XY; // Already the default, but provided in case you want to edit
        }
    }

    public override void PerformAction()
    {
        // Recommend having only one tagalong.
        if (objectToTagalong == null || objectToTagalong.activeSelf)
        {
            return;
        }

        objectToTagalong.SetActive(true);
    }
}
  • Essayez ! Générez et déployez l’application.
  • Regardez comment le contenu suit le centre du point de regard, mais pas en continu et sans le bloquer.