Introduction à Vuforia sur Unity pour la création d'applications de réalité augmentée

Ce que vous allez créer

Ce tutoriel va expliquer comment mettre en oeuvre une application de réalité augmentée de base avec Vuforia SDK sur Unity. Tout au long du didacticiel, vous allez apprendre à générer une scène compatible avec Vuforia et à mettre en œuvre divers scripts, y compris le lancer de rayons, afin de pouvoir interagir avec l'objet dans la scène..

Création d'un compte développeur

Avant de commencer, vous devez vous inscrire pour un compte de développeur Vuforia. Allez sur le portail des développeurs Vuforia pour créer un compte..

Une fois votre compte créé, il est temps de télécharger le package Unity de Vuforia. Accédez à la page de téléchargement et téléchargez le package spécifique à Unity..

Création d'une cible d'image

Une cible d'image est requise pour que la caméra d'un périphérique puisse reconnaître une référence et la suivre. L'orientation et la taille réelle de l'image cible affectent directement les mêmes attributs que les images superposées..

Toute image peut être assignée comme cible. Cependant, les caractéristiques de l'image cible déterminent efficacement la qualité du suivi de la cible. Dans ce tutoriel, nous allons utiliser un outil en ligne pour générer des images cibles riches en fonctionnalités. Générez une cible d'image à l'aide de l'outil en ligne Augmented Reality Marker Generator, puis enregistrez l'image sur votre ordinateur..

Préparer la scène de l'unité

Forfait Vuforia

Créez un nouveau projet 3D Unity, puis double-cliquez sur le package Unity que vous avez téléchargé pour Vuforia. Cela affichera la fenêtre suivante. Cliquez sur Tout pour sélectionner tout le contenu du paquet, puis appuyez sur Importation. Cela va importer tous les outils nécessaires pour l'application AR.

Cible d'image

L'étape suivante consiste à importer les fichiers cibles de l'image. Pour obtenir les fichiers cibles de l'image, nous devons utiliser la page de développement de Vuforia..

Accédez au portail de développeur Vuforia, puis connectez-vous à votre compte. Sous le Développer onglet, vous verrez le Gestionnaire de cible. Vous devez d'abord ajouter une base de données. Utilisez le bouton désigné et ajoutez une base de données. 

Nommez votre base de données comme vous le souhaitez et sélectionnez Dispositif comme le type.

Nous sommes maintenant prêts à ajouter une cible dans cette base de données. Clique sur le Ajouter une cible bouton, et la fenêtre suivante apparaîtra. Le type doit être sélectionné comme Image unique dans notre cas. Sélectionnez la cible d'image générée à l'aide de l'outil en ligne. Si vous ne parvenez pas à télécharger le fichier, essayez de le convertir au format de fichier .jpg, puis de le télécharger à nouveau..

La largeur est un paramètre crucial. Cela doit correspondre à la taille réelle de l'image cible que vous imprimerez éventuellement sur du papier. Je règle la largeur à 40. Il n'y a pas d'unité puisqu'elle correspond à l'unité de votre scène.

Une fois que vous avez ajouté la cible à votre base de données, Vuforia évalue votre cible. Avec le générateur d'image cible que nous avons utilisé, les fonctionnalités sont élevées et donc 5 étoiles, ce qui signifie que Vuforia peut facilement reconnaître et suivre cette cible..

Maintenant, vous devez télécharger cette base de données. Pour ce faire, appuyez sur le Télécharger la base de données bouton et sélectionnez Unity Editor comme plateforme de développement.

Une fois la base de données téléchargée, double-cliquez dessus et importez tout le contenu dans la scène Unity sur laquelle nous travaillons..

Objet ARCamera

Nous commençons par ajouter l’objet ARCamera de Vuforia à notre scène. Pour ce faire, il suffit de suivre les instructions Atouts> Vuforia> Préfabriqués répertoire et ajouter l’objet ARCamera par glisser-déposer sur la scène.

Sélectionnez l'objet ARCamera et sous le Inspecteur onglet, vous verrez le Clé de licence d'application section. Cette clé de licence sera obtenue à partir du portail des développeurs Vuforia..

Connectez-vous à votre compte Vuforia sur le portail des développeurs et sous le Développer onglet, vous trouverez le Gestionnaire de licence section. Clique le Ajouter une clé de licence bouton. Sur la page suivante, sélectionnez Développement en tant que type de projet et définissez un nom d’application pour votre projet. Ce nom n’est pas crucial et vous pourrez le modifier ultérieurement si vous le souhaitez..

Frappé Suivant, puis confirmez votre clé de licence à la page suivante.

Sélectionnez la licence que vous venez de créer. Il révélera la clé de licence que nous devons copier et coller dans l'objet ARCamera. Copiez cette licence puis collez-la dans le Clé de licence d'application section sous les paramètres ARCamera.

Sous Comportement de charge de base de données, vérifier la Charger la base de données ARdemo option. Une fois que vous l'avez cochée, une autre option appelée Activer apparaîtra juste en dessous. Cochez cette option aussi.

le Ardemo partie de la Charger la base de données ARdemo l'option dépend de la façon dont vous avez nommé votre base de données.

Objet cible de l'image

Le deuxième objet dont nous avons besoin dans notre scène est le Cible d'image objet.

Sous le Atouts> Vuforia> Préfabriqués répertoire, vous trouverez également l’objet "ImageTarget". Ajoutez cet objet à votre scène et sélectionnez-le pour afficher les options..

Sous le Comportement de la cible d'image section, vous verrez le Base de données option. Sélectionnez votre base de données dans le menu déroulant, puis sélectionnez la cible d'image spécifique que vous souhaitez affecter à l'objet cible d'image dans le menu déroulant de "Cible de l'image". Si vous avez plusieurs cibles d'image pour une base de données, elles seront toutes répertoriées ici..

Les paramètres de largeur et de hauteur seront automatiquement définis en fonction de la valeur que vous avez attribuée lors de la création des cibles d'image dans le portail pour développeurs de Vuforia..

Augmenter les graphiques

L'étape suivante consiste à créer les graphiques et à les lier à la cible de l'image. Vous pouvez créer un GameObject ou importer votre propre modèle 3D dans Unity et l'utiliser. Dans ce tutoriel, nous allons utiliser un simple objet cube 3D dans un souci de simplicité..

Ajouter un objet de cube à la scène comme indiqué dans la figure suivante.

Définissez ses paramètres x, y et z pour le Échelle option sous Transformer à 40, afin qu'il corresponde à la taille de la cible d'image générée.

Si vous définissez une autre valeur de largeur pour votre cible d'image lors de sa génération dans le portail de développeur, utilisez la valeur que vous avez sélectionnée afin de correspondre à la taille complète de la cible d'image..

La dernière étape pour que notre application AR fonctionne consiste à définir l'objet de cube en tant qu'enfant de la cible de l'image. Pour ce faire, faites simplement glisser l'objet cube et déposez-le sur l'objet imageTarget dans le menu de la hiérarchie..

L'état final de la scène devrait être comme suit:

Maintenant frappé le Jouer bouton pour exécuter votre application. Il utilisera votre webcam. Obtenez l’image cible imprimée ou ouvrez-la à partir de votre téléphone pour que Vuforia puisse la détecter via votre webcam. J'ai fait le dernier et a ouvert l'image cible de mon téléphone. 

Voici la capture d'écran réelle de la vue de la webcam. Vous pouvez voir que l'objet cube couvre la totalité de l'image cible, car nous avons fait correspondre les valeurs du facteur de mise à l'échelle à la fois pour l'objet 3D et l'image cible..

Scripts d'interaction

Jusqu'à présent, nous avons développé une application AR de base qui reconnaît et suit notre image cible et affiche les graphiques 3D désignés. Cependant, pour une application AR complète, nous devons également pouvoir interagir avec les objets, augmentant ainsi la réalité..

Pour ce faire, nous devons être en mesure de détecter l'endroit où nous avons cliqué ou touché dans le cas d'un appareil mobile. Nous ferons cela en mettant en place un traceur de rayons.

Tout d’abord, créez un dossier nommé "scripts" sous Les atouts garder tout organisé. Nous allons stocker nos fichiers de script dans ce dossier. Créez ensuite un fichier de script C # dans ce dossier. Nommez-le "rayTracer". La dénomination est importante car le code suivant doit correspondre à ce nom de fichier spécifique. Si vous préférez utiliser un nom différent pour votre fichier de script, vous devez également modifier le code fourni en conséquence..

Script Ray-Tracer

Copiez et collez le code suivant dans le fichier de script C # que vous venez de créer et nommé "rayTracer"..

utiliser UnityEngine; using System.Collections; using System.Collections.Generic; classe publique rayTracer: MonoBehaviour liste privée touchList = nouvelle liste(); GameObject privé [] touchPrev; coup privé de RaycastHit; void Update () #if UNITY_EDITOR if (Input.GetMouseButton (0) || Input.GetMouseButtonDown (0) || Input.GetMouseButtonUp (0)) touchPrev = new GameObject [touchList.Count]; touchList.CopyTo (touchPrev); touchList.Clear (); Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition); //Debug.DrawRay(ray.origin, ray.direction * 10000, Color.green, 10, false); if (Physics.Raycast (ray, out hit)) destinataire de GameObject = hit.transform.gameObject; touchList.Add (destinataire); if (Input.GetMouseButtonDown (0)) recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver);  if (Input.GetMouseButtonUp (0)) recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver);  if (Input.GetMouseButton (0)) recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver);  foreach (GameObject g dans touchPrev) if (! touchList.Contains (g)) g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);  #endif if (Input.touchCount> 0) touchPrev = new GameObject [touchList.Count]; touchList.CopyTo (touchPrev); touchList.Clear (); foreach (Touch Touch dans Input.touches) Ray Ray = Camera.main.ScreenPointToRay (touch.position); if (Physics.Raycast (ray, out hit)) destinataire de GameObject = hit.transform.gameObject; touchList.Add (destinataire); if (touch.phase == TouchPhase.Began) destinataire.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver);  if (touch.phase == TouchPhase.Ended) destinataire.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver);  if (touch.phase == TouchPhase.Stationary || touch.phase == TouchPhase.Moved) recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver);  if (touch.phase == TouchPhase.Canceled) destinataire.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);  foreach (GameObject g dans touchPrev) if (! touchList.Contains (g)) g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);  

Ce script détecte les deux clics de souris si vous travaillez sur l'éditeur Unity et les entrées tactiles si vous avez déployé votre application sur un périphérique mobile doté d'un écran tactile..

Une fois que vous avez créé votre script rayTracer, vous devez l'activer en l'attribuant à l'un des objets de la scène. J'ai sélectionné l'objet ARCamera et ajouté les scripts rayTracer en tant que composant à l'aide du Ajouter un composant bouton sous le Inspecteur languette.

Matériel objet

Nous allons maintenant assigner un matériau à notre objet Cube et en changer la couleur lors de l'interaction avec le cube..

Sous Les atouts, créer un matériau et nommez-le comme vous le souhaitez.

Assignez maintenant ce matériau en glissant-déposant sur l'objet cube.

Script d'interaction

Créez un nouveau script C # sous le dossier scripts et nommez-le "interaction".

Copiez le code C # suivant dans votre fichier de script "interaction", puis ajoutez ce fichier de script à l'objet cube en tant que composant, comme nous l'avons fait avec le fichier de script "rayTracer". Cependant, cette fois, il devrait s'agir d'un composant de l'objet cube. Cela est important pour pouvoir uniquement interagir avec l'objet cube..

utiliser UnityEngine; using System.Collections; interaction de classe publique: MonoBehaviour public static Color defaultColor; public static Color selectedColor; matériel public statique mat; void Start () mat = GetComponent ().Matériel; mat.SetFloat ("_ Mode", 2); mat.SetInt ("_ SrcBlend", (int) UnityEngine.Rendering.BlendMode.SrcAlpha); mat.SetInt ("_ DstBlend", (int) UnityEngine.Rendering.BlendMode.OneMinusSrcAlpha); mat.SetInt ("_ ZWrite", 0); mat.DisableKeyword ("_ ALPHATEST_ON"); mat.EnableKeyword ("_ ALPHABLEND_ON"); mat.DisableKeyword ("_ ALPHAPREMULTIPLY_ON"); mat.renderQueue = 3000; defaultColor = new Color32 (255, 255, 255, 255); selectedColor = new Color32 (255, 0, 0, 255); mat.color = defaultColor;  void touchBegan () mat.color = selectedColor;  void touchEnded () mat.color = defaultColor;  void touchStay () mat.color = selectedColor;  void touchExit () mat.color = defaultColor; 

Dans ce script "d'interaction", nous nous référons au matériau de l'objet cube en tant que "mat".

Nous avons créé deux objets matériels différents nommés couleur par défaut et couleur sélectionnée. couleur par défaut est sélectionné pour être blanc, comme l'indiquent les paramètres RGBA, qui sont (255, 255, 255, 255).

Nous initialisons la couleur matérielle de l'objet cube comme couleur par défaut par la ligne suivante:

mat.color = defaultColor;

Nous avons quatre fonctions différentes pour quatre états différents:

  • toucherBegan () est appelé à l'instant où vous avez touché l'objet.
  • touchEnded () s'appelle quand vous relâchez votre doigt.
  • touchStay () est appelée juste après que vous ayez touché l'objet, cette fonction suit toucherBegan (). Ainsi, si vous affectez différentes couleurs à votre matériau dans ces fonctions, il est peu probable que vous voyiez la couleur affectée dans le menu déroulant. touchStay () fonction, car c'est le tout premier instant où le toucher est reconnu.
  • touchExit () est appelé lorsque vous faites glisser votre doigt hors de la surface de l'objet cube, au lieu de relâcher votre doigt, qui appelle touchEnded () fonction comme expliqué ci-dessus.

Dans notre code, lorsque nous touchons l’objet cube, nous assignons le couleur sélectionnée objecter à mat.color, qui est la couleur du matériau de notre objet cube.

En assignant le couleur sélectionnée dans le touchStay () fonction, nous nous assurons que la couleur de l'objet cube sera égale à couleur sélectionnée tant que nous gardons le doigt sur l'objet cube. Si nous relâchons notre doigt ou le faisons glisser hors de l'objet cube, nous assignons  couleur par défaut au paramètre de couleur du matériau en appelant le touchEnded () ou touchExit () fonctionne conformément à l'action que nous avons prise.

Exécutez maintenant le projet et cliquez sur l'objet cube une fois que l'image cible est reconnue et que l'objet cube est apparu. Il doit redevenir rouge et blanc lorsque vous relâchez votre clic ou que vous le déplacez hors de la surface de l'objet cube..

Vous pouvez expérimenter différentes couleurs pour les quatre actions différentes afin de bien les comprendre..

Conclusion

Dans ce didacticiel, nous avons présenté le kit de développement logiciel Vuforia SDK pour Unity, ainsi que son portail de développeur, et nous avons vu comment générer une image cible et une clé de licence appropriée.. 

En plus de cela, nous avons généré des fichiers de script personnalisés afin de pouvoir interagir avec les graphiques augmentés. Ce tutoriel est juste une introduction pour vous permettre de commencer à utiliser Vuforia avec Unity et de créer vos propres applications AR..