Créons une application de réalité augmentée pour MEMES ! : 8 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Dans ce Instructable, nous allons créer une application de réalité augmentée pour Android et IOS dans Unity3D qui utilise l'API Google pour rechercher des mèmes. Nous allons utiliser la détection de plan de sol de Vuforia dans Unity afin que cette application mobile fonctionne pour la plupart des utilisateurs d'Android et IOS. L'utilisation de Vuforia nous permettra également d'ancrer les images à un endroit afin que nous puissions parcourir ce champ d'images et que les objets resteront là où ils sont.

Nous allons également tester la nouvelle API IBM Watson afin de pouvoir effectuer ces recherches avec notre voix et tirer parti de leur traitement du langage naturel.

Donc, la mauvaise nouvelle est qu'aucune de ces API n'est totalement gratuite, mais la bonne nouvelle est qu'elles sont toutes les deux libres d'essayer. L'API de recherche personnalisée Google vous offre 100 recherches gratuites par jour et l'API IBM Watson vous offre le premier mois gratuit.

En bref, cette application va récupérer notre discours du microphone dans Unity, l'envoyer aux serveurs IBM Watson, qui nous renverra le texte. Nous prendrons ensuite ce texte et l'enverrons aux serveurs de Google qui nous renverront une liste d'URL d'images au format JSON.

Étape 1: Configurez le SDK IBM Watson dans Unity

Pour lancer l'API Watson, vous devez d'abord obtenir vos informations d'identification sur leur site. Accédez à Console.bluemix.net, créez un compte et connectez-vous. Accédez à votre compte IBM et accédez à Cloud Foundry Orgs et créez un nouvel espace. Allez maintenant dans votre tableau de bord et cliquez pour parcourir les services, ajoutez le service de parole au texte car c'est ce que nous allons utiliser. Choisissez votre région, votre organisation et votre espace et créez le projet. Maintenant, vous verrez vos informations d'identification API en bas.

Téléchargez Unity si vous ne l'avez pas déjà et importez le SDK IBM Watson à partir du magasin d'actifs dans Unity. Nous pouvons tester cela en créant un objet de jeu vide et l'appeler IBM Watson et ajouter l'exemple de script de streaming. Ce script est déjà configuré pour enregistrer l'audio depuis unity et l'envoyer aux serveurs Watson pour traitement.

Pour l'instant, nous allons simplement utiliser cet exemple de script car nous avons beaucoup plus à faire, mais peut-être que la prochaine fois, nous pourrons approfondir les choses Watson car j'aimerais faire quelque chose avec l'API Vision.

Étape 2: Testez IBM Watson Text to Speech

Ce script recherche un objet texte d'interface utilisateur, alors créons un nouveau bouton d'interface utilisateur, cela nous donnera le texte dont nous avons besoin, nous utiliserons le bouton plus tard. Réglez le canevas à l'échelle avec la taille de l'écran et redimensionnez un peu le bouton. Ancrez-le en bas à gauche. Faites glisser ce texte dans l'emplacement vide. Ouvrez le script et ajoutons nos informations d'identification IBM Watson, trouvez où le texte "resultsField" est utilisé et définissez-le uniquement sur "alt.transcript" car nous allons utiliser ce texte pour rechercher sur Google. Maintenant, avant de pouvoir tester cela, nous devons faire en sorte que la taille du texte lui-même soit dynamique afin que tout ce que nous disons tienne dans la boîte. Revenez au texte et réglez-le au mieux. Tapez du texte pour le tester. Maintenant, lorsque nous cliquons sur lire, nos mots seront transcrits en texte à partir de l'API Watson Text to Speech.

Étape 3: Configurez l'API de recherche personnalisée Google

La prochaine étape que nous devons faire est de configurer l'API de recherche personnalisée Google pour l'utiliser dans Unity. À un niveau élevé, nous ferons une requête HTTP de Unity aux serveurs de Google qui nous renverra une réponse au format JSON.

Accédez donc à la page de configuration de l'API JSON Google Custom Search, cliquez pour obtenir une clé API et créez une nouvelle application. Gardez ceci ouvert. Nous pouvons maintenant accéder au panneau de configuration. Mettez n'importe quoi pour que les sites recherchent, nommez-le comme vous le souhaitez et cliquez sur créer.

Cliquez sur le panneau de configuration et faisons quelques modifications: nous voulons principalement rechercher des mèmes et activer la recherche d'images. Sous les sites à rechercher, passez à l'ensemble du Web. Cliquez sur mettre à jour pour tout enregistrer.

Recherchez maintenant l'explorateur d'API Google et accédez à l'API de recherche personnalisée. Cela nous permettra de formater la réponse JSON que nous obtenons de Google. Alors mettez n'importe quoi pour la requête pour l'instant, collez votre identifiant de moteur de recherche, mettez 1 pour le filtre afin que nous n'ayons pas de doublons, mettez 10 sous num car c'est le nombre maximum de résultats que nous pouvons retourner à la fois, mettre dans l'image pour le type de recherche parce que c'est tout ce que nous voulons retourner. Mettez 1 pour commencer, et enfin sous les champs mis dans "éléments/lien" car pour chaque élément renvoyé, nous ne voulons que le lien de l'image. Maintenant, lorsque vous cliquez sur Exécuter, vous verrez que nous obtenons 10 jolis liens d'image renvoyés.

Maintenant, nous devons mettre ces images dans Unity.

Étape 4: Configurez Vuforia dans Unity

Faisons fonctionner Vuforia afin que nous puissions tirer parti de leur détection de plan de masse. Enregistrez votre scène actuelle et accédez aux paramètres de construction. Basculez votre plate-forme sur Android ou IOS et si vous utilisez IOS pour l'identifiant du bundle, ajoutez une description d'utilisation de la caméra et du microphone. Sous les paramètres XR, vérifiez la réalité augmentée Vuforia prise en charge.

Maintenant, dans la scène, supprimez la caméra principale et ajoutez une Vuforia ARCamera. Accédez à la section de configuration et changez le mode de suivi en positionnel. Décochez toutes les bases de données car nous n'en avons pas besoin.

Ajoutez maintenant un moteur de recherche d'avion et nous devons remplacer son comportement par défaut car nous voulons déployer l'étape du plan au sol une seule fois, alors trouvons le script Déployer l'étape une fois sur le site Web de Vuforia. Apportez ce script dans Unity et placez-le sur le chercheur d'avion, en supprimant l'ancien script qui s'y trouvait. Changez le mode en interactif et assurez-vous que la fonction "OnInteractiveHitTest" est appelée sur cet événement Unity. Pendant que nous sommes ici, définissons le bouton que nous avons créé plus tôt sur actif une fois que nous avons trouvé le plan de masse, définissons son état par défaut sur inactif. Maintenant, mettez un plan au sol dans la scène et changez-le en mi-air parce que nous voulons que toutes les images flottent dans les airs. Faites glisser ce plan au sol dans l'emplacement vide sur le chercheur d'avion.

Étape 5: Créez une image préfabriquée

Avant de commencer à assembler toutes ces pièces, nous devons créer un objet de jeu préfabriqué que nous pouvons instancier à chaque fois qu'une image est chargée. Créez donc un objet de jeu vide sous la scène du plan de sol et appelez-le "picPrefab". Créez un quad en tant qu'enfant de celui-ci et redimensionnez-le par 2, faites pivoter son y de 180 degrés de sorte que le vecteur avant des parents qui est représenté par une flèche bleue soit l'avant du quad.

Créez un nouveau script appelé "PictureBehavior" et ajoutez-le à notre picPrefab.

Maintenant, faites glisser cette image préfabriquée dans votre dossier d'actifs et c'est sur quoi nous allons mettre chaque image.

Notre script "PictureBehavior" devrait ressembler à ceci:

en utilisant System. Collections;

en utilisant System. Collections. Generic; en utilisant UnityEngine; public class PictureBehavior: MonoBehaviour { public Renderer quadRenderer; vecteur privé3 souhaitéPosition; void Start(){ //regardez la transformation de la caméra. LookAt (Camera.main.transform); Vector3 desireAngle = new Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (angledesired); //force dans l'airPosition désirée = transform.localPosition; transform.localPosition += nouveau Vector3 (0, 20, 0); } void Update(){ transform.localPosition = Vector3. Lerp (transform.localPosition, desirePosition, Time.deltaTime * 4f); } public void LoadImage(string url){ StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL(string url){ WWW www = new WWW(url); rendement rendement www; quadRenderer.material.mainTexture = www.texture; } }

Étape 6: créez un script pour l'API Google

Maintenant, faisons glisser la référence au rendu quad depuis notre "picPrefab".

Nous n'avons plus que deux scripts à créer, créons donc un script C# appelé GoogleService.cs et PictureFactroy.cs.

Dans "GoogleService" collez ce code qui fait notre demande:

en utilisant System. Collections;

en utilisant System. Collections. Generic; en utilisant UnityEngine; en utilisant UnityEngine. UI; public class GoogleService: MonoBehaviour { public PictureFactory pictureFactory; public Text buttonTexte; private const string API_KEY = "PUT API KEY HERE!!!!!"; public void GetPictures(){ StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine(){ buttonText.transform.parent.gameObject. SetActive (false); requête de chaîne = buttonText.text; query = WWW. EscapeURL (requête + " mèmes "); //supprimer les anciennes images pictureFactory. DeleteOldPictures(); //enregistrer le vecteur avant de la caméra afin que nous puissions nous déplacer pendant que les objets sont placés Vector3 cameraForward = Camera.main.transform.forward; // nous ne pouvons obtenir que 10 résultats à la fois, nous devons donc parcourir et enregistrer notre progression en changeant le numéro de départ après chaque 10 int rowNum = 1; for (int i = 1; i <= 60; i += 10) { string url = "https://www.googleapis.com/customsearch/v1?q=" + query + "&cx=011535004225295624669%3Afeb1gwic6bs&filter=1&num =10&searchType=image&start=" + i + "&fields=items%2Flink&key=" + API_KEY; WWW www = nouveau WWW (url); rendement rendement www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); RowNum++; } return return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } List ParseResponse(string text){ List urlList = new List (); string urls = text. Split ('\n'); foreach (string line in urls) { if (line. Contains("link")){ string url = line. Substring (12, line. Length-13); // le filtrage par png ou jpg ne semble pas fonctionner depuis Google, nous le faisons donc ici: if (url. Contains (".jpg") || url. Contains (".png")) { urlList. Add (url); } } } return urlList; } }

Étape 7: Créez notre usine d'images

À l'intérieur de PictureFactory.cs, mettez ce code pour créer toutes nos images et chargez leurs textures à partir d'une URL.

en utilisant System. Collections;

en utilisant System. Collections. Generic; en utilisant UnityEngine; public class PictureFactory: MonoBehaviour { public GameObject picPrefab; service Google public service google; public void DeleteOldPictures(){ if (transform.childCount > 0) { foreach (Transform child in this.transform) { Destroy (child.gameObject); } } } public void CreateImages(ListurlList, int resultNum, Vector3 camForward){ int picNum = 1; Vector3 center = Camera.main.transform.position; foreach (chaîne url dans urlList) { Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instantiate (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent (). LoadImage (url); PicNum++; } } Vector3 GetPosition(int picNum, int rowNum, Vector3 camForward){ Vector3 pos = Vector3.zero; if (picNum <= 5) { pos = camForward + nouveau Vector3 (picNum * -3, 0, rowNum * 3.5f); } else { pos = camForward + new Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } retour pos; } }

Étape 8: Nous avons terminé

Créez un gameobject vide appelé GoogleService et placez-y le script "GoogleSerivice".

Faites glisser le script "PictureFactory" sur la scène du plan de masse car toutes nos images vont être créées en tant qu'enfants de cet objet de jeu.

Faites glisser les références appropriées dans l'inspecteur, faites la même chose pour le service Google.

La dernière chose à faire est de s'assurer que notre fonction "GetPictures" est appelée. Allons donc à l'événement "onClick" de notre bouton et appelons-le à partir de là.

Maintenant, nous pouvons cliquer sur play et tester cela. Assurez-vous d'activer l'étage de plan de masse et le bouton. Dites un mot et cliquez sur le bouton pour effectuer la recherche sur ce texte !

Maintenant, pour obtenir cette application sur votre téléphone, branchez-la et accédez à Fichier-> Paramètres de création. Appuyez sur construire et exécutez !

Faites-moi savoir dans les commentaires si vous avez des questions!