Lassen Sie uns eine Augmented-Reality-App für MEMES erstellen! - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:21

In diesem Instructable werden wir eine Augmented-Reality-App für Android und IOS in Unity3D erstellen, die die Google-API verwendet, um nach Memes zu suchen. Wir werden die Groundplane-Erkennung von Vuforia in Unity verwenden, damit diese mobile App für die meisten Android- und IOS-Benutzer funktioniert. Die Verwendung von Vuforia ermöglicht es uns auch, die Bilder an einem Ort zu verankern, damit wir durch dieses Bildfeld gehen können und die Objekte dort bleiben, wo sie sind.

Wir werden auch die neue IBM Watson API testen, damit wir diese Suchen mit unserer Stimme durchführen und ihre natürliche Sprachverarbeitung nutzen können.

Die schlechte Nachricht ist also, dass keine dieser APIs völlig kostenlos ist, aber die gute Nachricht ist, dass sie beide kostenlos ausprobiert werden können. Die benutzerdefinierte Google-Such-API bietet Ihnen 100 kostenlose Suchen pro Tag und die IBM Watson-API bietet Ihnen den ersten Monat kostenlos.

Kurz gesagt, diese App wird unsere Sprache vom Mikrofon in Unity empfangen und an die IBM Watson-Server senden, die uns den Text zurückgeben. Wir nehmen diesen Text dann und senden ihn an die Google-Server, die uns eine Liste der Bild-URLs im JSON-Format zurückgeben.

Schritt 1: Einrichten des IBM Watson SDK in Unity

Um die Watson-API zum Laufen zu bringen, müssen Sie zuerst Ihre Anmeldeinformationen von deren Website abrufen. Gehen Sie zu Console.bluemix.net, erstellen Sie ein Konto und melden Sie sich an. Gehen Sie zu Ihrem IBM-Konto, navigieren Sie zu Cloud Foundry Orgs und erstellen Sie einen neuen Bereich. Gehen Sie nun zu Ihrem Dashboard und klicken Sie auf, um Dienste zu durchsuchen, und fügen Sie den Sprach-zu-Text-Dienst hinzu, da wir ihn verwenden werden. Wählen Sie Ihre Region, Organisation und Ihren Raum und erstellen Sie das Projekt. Jetzt sehen Sie unten Ihre API-Anmeldeinformationen.

Laden Sie Unity herunter, falls Sie es noch nicht haben, und importieren Sie das IBM Watson SDK aus dem Asset Store in Unity. Wir können dies testen, indem wir ein leeres Spielobjekt erstellen und es IBM Watson nennen und das Beispiel-Streaming-Skript hinzufügen. Dieses Skript ist bereits so eingestellt, dass es Audio von Unity aufzeichnet und zur Verarbeitung an die Watson-Server sendet.

Im Moment verwenden wir nur dieses Beispielskript, weil wir noch viel mehr zu tun haben, aber vielleicht können wir beim nächsten Mal tiefer in die Watson-Sachen einsteigen, weil ich etwas mit der Vision-API machen möchte.

Schritt 2: Testen Sie IBM Watson Text to Speech

Dieses Skript sucht nach einem UI-Textobjekt, also können wir eine neue UI-Schaltfläche erstellen. Dies gibt uns den Text, den wir benötigen. Wir werden die Schaltfläche später verwenden. Stellen Sie die Leinwand so ein, dass sie mit der Bildschirmgröße skaliert, und ändern Sie die Größe der Schaltfläche ein wenig. Verankern Sie es unten links. Ziehen Sie diesen Text in den leeren Slot. Öffnen Sie das Skript und fügen Sie unsere IBM Watson-Anmeldeinformationen hinzu, finden Sie heraus, wo der Text "resultsField" verwendet wird, und setzen Sie ihn nur auf "alt.transcript", da wir diesen Text verwenden werden, um Google zu durchsuchen. Bevor wir dies testen können, müssen wir die Textgröße selbst dynamisch gestalten, damit alles, was wir sagen, in das Feld passt. Gehen Sie zurück zum Text und stellen Sie ihn optimal ein. Geben Sie etwas Text ein, um es zu testen. Wenn wir jetzt auf „Wiedergabe“klicken, werden unsere Wörter in Text von der Watson Text-to-Speech-API transkribiert.

Schritt 3: Richten Sie die Google Custom Search API ein

Als nächstes müssen wir die benutzerdefinierte Google-Such-API für die Verwendung in Unity einrichten. Auf hoher Ebene werden wir eine HTTP-Anfrage von Unity an die Google-Server stellen, die uns eine Antwort im JSON-Format zurückgibt.

Rufen Sie also die Einrichtungsseite für die JSON-API von Google Custom Search auf, klicken Sie auf, um einen API-Schlüssel abzurufen und eine neue App zu erstellen. Halten Sie diese offen. Jetzt können wir zur Systemsteuerung gehen. Geben Sie alles ein, damit die Sites durchsuchen können, benennen Sie es wie auch immer und klicken Sie auf Erstellen.

Klicken Sie auf die Systemsteuerung und nehmen Sie einige Änderungen vor: Wir möchten hauptsächlich nach Memes suchen und die Bildsuche aktivieren. Wechseln Sie unter zu durchsuchende Websites auf das gesamte Web. Klicken Sie auf Aktualisieren, um alles zu speichern.

Suchen Sie nun den Google-API-Explorer und gehen Sie zur benutzerdefinierten Such-API. Dadurch können wir die JSON-Antwort formatieren, die wir von Google erhalten. Geben Sie also vorerst etwas für die Abfrage ein, fügen Sie Ihre Suchmaschinen-ID ein, geben Sie 1 für den Filter ein, damit wir keine Duplikate erhalten, geben Sie 10 unter num ein, da dies die maximale Anzahl von Ergebnissen ist, die wir gleichzeitig zurückgeben können. Geben Sie ein Bild für den Suchtyp ein, denn das ist alles, was wir zurückgeben möchten. Geben Sie 1 für Start ein und geben Sie schließlich unter Felder "Artikel/Link" ein, da wir für jeden zurückgegebenen Artikel nur den Bildlink benötigen. Wenn Sie jetzt auf Ausführen klicken, sehen Sie, dass wir 10 schöne Bildlinks zurückgeben.

Jetzt müssen wir diese Bilder in Unity übertragen.

Schritt 4: Richten Sie Vuforia in Unity ein

Lassen Sie uns Vuforia zum Laufen bringen, damit wir ihre Groundplane-Erkennung nutzen können. Speichern Sie Ihre aktuelle Szene und gehen Sie zu den Build-Einstellungen. Wechseln Sie Ihre Plattform zu Android oder IOS und wenn Sie auf IOS etwas für die Bundle-Kennung eingeben, fügen Sie eine Beschreibung der Kamera- und Mikrofonnutzung hinzu. Überprüfen Sie unter XR-Einstellungen, dass Vuforia Augmented Reality unterstützt wird.

Löschen Sie nun in der Szene die Hauptkamera und fügen Sie eine Vuforia ARCamera hinzu. Gehen Sie zum Konfigurationsabschnitt und ändern Sie den Tracking-Modus auf Positional. Deaktivieren Sie alle Datenbanken, da wir sie nicht benötigen.

Fügen Sie nun einen Flugzeugfinder hinzu, und wir müssen sein Standardverhalten überschreiben, da wir die Groundplane-Stufe nur einmal bereitstellen möchten. Bringen Sie dieses Skript in Unity und legen Sie es in den Flugzeugfinder ab, wobei Sie das alte Skript entfernen, das dort war. Ändern Sie den Modus auf interaktiv und stellen Sie sicher, dass die Funktion "OnInteractiveHitTest" für dieses Unity-Ereignis aufgerufen wird. Während wir hier sind, lassen Sie uns die Schaltfläche, die wir zuvor erstellt haben, auf aktiv setzen, sobald wir die Grundebene gefunden haben, und setzen Sie ihren Standardzustand auf inaktiv. Fügen Sie nun eine Groundplane in die Szene ein und ändern Sie sie in Mid-Air, weil wir wollen, dass alle Bilder in der Luft schweben. Ziehen Sie diese Grundebene in den leeren Steckplatz im Ebenenfinder.

Schritt 5: Erstellen Sie ein Bild-Präfab

Bevor wir all diese Teile zusammensetzen, müssen wir ein vorgefertigtes Spielobjekt erstellen, das wir jedes Mal, wenn ein Bild geladen wird, instanziieren können. Erstellen Sie also ein leeres Spielobjekt unter der Groundplane-Bühne und nennen Sie es "picPrefab". Erstellen Sie ein Quad als Kind davon und skalieren Sie es um 2, drehen Sie sein y um 180 Grad, so dass der Vorwärtsvektor der Eltern, der als blauer Pfeil angezeigt wird, die Vorderseite des Quads ist.

Erstellen Sie ein neues Skript namens "PictureBehavior" und fügen Sie es unserem picPrefab hinzu.

Ziehen Sie nun dieses Bild-Prefab in Ihren Assets-Ordner und darauf werden wir jedes Bild setzen.

Unser Skript "PictureBehavior" sollte so aussehen:

Verwenden von System. Collections;

mit System. Collections. Generic; mit UnityEngine; public class PictureBehavior: MonoBehaviour { public Renderer quadRenderer; privater Vektor3 gewünschtePosition; Void Start () {// Blick auf die Kamera transform. LookAt (Camera.main.transform); Vector3 selectedAngle = new Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (desiredAngle); // in die Luft drängen erwünschtPosition = transform.localPosition; transform.localPosition += new Vector3 (0, 20, 0); aufrechtzuerhalten. Void Update () { transform.localPosition = Vector3. Lerp (transform.localPosition, gewünschtePosition, Time.deltaTime * 4f); } public void LoadImage (string url) { StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (String-URL) { WWW www = neues WWW (URL); Rendite Rendite www; quadRenderer.material.mainTexture = www.texture; } }

Schritt 6: Erstellen Sie ein Skript für die Google API

Ziehen wir nun die Referenz auf den Quad-Renderer aus unserem "picPrefab".

Wir müssen nur noch zwei Skripte erstellen, also erstellen wir ein C#-Skript namens GoogleService.cs und PictureFactroy.cs.

Fügen Sie in "GoogleService" diesen Code ein, der unsere Anfrage stellt:

Verwenden von System. Collections;

mit System. Collections. Generic; mit UnityEngine; Verwenden von UnityEngine. UI; public class GoogleService: MonoBehaviour { public PictureFactory pictureFactory; öffentlicher Text buttonText; private const string API_KEY = "API-SCHLÜSSEL HIER EINGEBEN!!!!!"; public void GetPictures () { StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); String-Abfrage = buttonText.text; Abfrage = WWW. EscapeURL (Abfrage + "Meme"); // Alte Bilder löschen pictureFactory. DeleteOldPictures(); // Kameravorwärtsvektor speichern, damit wir uns bewegen können, während Objekte platziert werden Vector3 cameraForward = Camera.main.transform.forward; // Wir können nur 10 Ergebnisse gleichzeitig erhalten, also müssen wir unseren Fortschritt durchlaufen und speichern, indem wir die Startnummer alle 10 ändern 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 = neues WWW (URL); Rendite Rendite www; pictureFactory. CreateImages (ParseResponse(www.text), rowNum, cameraForward); rowNum++; } Ertrag return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (wahr); } 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); //Filtern nach png oder jpg scheint von Google nicht zu funktionieren, also machen wir es hier: if (url. Contains (".jpg") || url. Contains (".png")) { urlList. Add (url); } } } return URL-Liste; } }

Schritt 7: Erstellen Sie unsere Bilderfabrik

In PictureFactory.cs steckt dieser Code, um alle unsere Bilder zu erstellen und ihre Texturen von einer URL zu laden.

Verwenden von System. Collections;

mit System. Collections. Generic; mit UnityEngine; öffentliche Klasse PictureFactory: MonoBehaviour { öffentliches GameObject picPrefab; öffentlicher GoogleService googleService; public void DeleteOldPictures(){ if (transform.childCount > 0) { foreach (Transformation 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 (String-URL in 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 + new Vector3 (picNum * -3, 0, rowNum * 3.5f); aufrechtzuerhalten. Sonst { pos = camForward + new Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } Rückgabeposition; } }

Schritt 8: Wir sind fertig

Erstellen Sie ein leeres Spielobjekt namens GoogleService und legen Sie das Skript "GoogleService" darauf ab.

Ziehen Sie das Skript "PictureFactory" auf die Grundebene, da alle unsere Bilder als Kinder dieses Spielobjekts erstellt werden.

Ziehen Sie die entsprechenden Referenzen in den Inspektor ein, machen Sie dasselbe für den Google-Dienst.

Als letztes müssen wir sicherstellen, dass unsere Funktion "GetPictures" aufgerufen wird. Gehen wir also zum "onClick"-Ereignis unseres Buttons und rufen es von dort aus auf.

Jetzt können wir auf Play klicken und dies testen. Stellen Sie sicher, dass die Groundplane-Stufe und die Schaltfläche aktiviert sind. Sagen Sie ein Wort und klicken Sie auf die Schaltfläche, um die Suche nach diesem Text durchzuführen!

Um diese App nun auf Ihr Telefon zu laden, schließen Sie sie an und gehen Sie zu Datei-> Build-Einstellungen. Hit bauen und ausführen!

Lass es mich in den Kommentaren wissen, wenn du Fragen hast!