Ας κάνουμε μια εφαρμογή επαυξημένης πραγματικότητας για το MEMES!: 8 βήματα

2025 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2025-01-23 14:39

Σε αυτό το Instructable πρόκειται να δημιουργήσουμε μια εφαρμογή επαυξημένης πραγματικότητας για Android και IOS στο Unity3D που χρησιμοποιεί το Google API για αναζήτηση μιμιδιών. Θα χρησιμοποιήσουμε την ανίχνευση εδάφους της Vuforia στο Unity, έτσι ώστε αυτή η εφαρμογή για κινητά να λειτουργεί για τους περισσότερους χρήστες Android και IOS. Η χρήση του Vuforia θα μας επιτρέψει επίσης να έχουμε τις εικόνες αγκυροβολημένες σε μία τοποθεσία, ώστε να μπορούμε να περπατήσουμε μέσα από αυτό το πεδίο εικόνων και τα αντικείμενα θα παραμείνουν εκεί που είναι.

Θα δοκιμάσουμε επίσης το νέο IBM Watson API, ώστε να μπορούμε να κάνουμε αυτές τις αναζητήσεις με τη φωνή μας και να αξιοποιήσουμε τη φυσική τους γλώσσα.

Έτσι, τα κακά νέα είναι ότι κανένα από αυτά τα API δεν είναι εντελώς δωρεάν, αλλά τα καλά νέα είναι ότι και οι δύο είναι ελεύθεροι να δοκιμάσουν. Το προσαρμοσμένο API αναζήτησης google σας δίνει 100 δωρεάν αναζητήσεις την ημέρα και το IBM Watson API σας δίνει δωρεάν τον πρώτο μήνα.

Εν ολίγοις, αυτή η εφαρμογή θα πάρει την ομιλία μας από το μικρόφωνο στο Unity, θα την στείλει στους διακομιστές της IBM Watson, οι οποίοι θα μας επιστρέψουν το κείμενο. Στη συνέχεια, θα πάρουμε αυτό το κείμενο και θα το στείλουμε στους διακομιστές Google που θα μας επιστρέψουν μια λίστα URL διευθύνσεων εικόνας σε μορφή JSON.

Βήμα 1: Ρυθμίστε το SDK IBM Watson στο Unity

Για να ενεργοποιήσετε το API Watson, πρέπει πρώτα να λάβετε τα διαπιστευτήριά σας από τον ιστότοπό τους. Μεταβείτε στο Console.bluemix.net, δημιουργήστε και δημιουργήστε λογαριασμό και συνδεθείτε. Μεταβείτε στον λογαριασμό σας στην IBM και πλοηγηθείτε στους οργανισμούς σύντηξης cloud και δημιουργήστε έναν νέο χώρο. Τώρα μεταβείτε στον πίνακα ελέγχου και κάντε κλικ για να περιηγηθείτε στις υπηρεσίες, προσθέστε την ομιλία στην υπηρεσία κειμένου γιατί αυτό θα χρησιμοποιήσουμε. Επιλέξτε την περιοχή, τον οργανισμό και τον χώρο σας και δημιουργήστε το έργο. Τώρα θα δείτε τα διαπιστευτήριά σας API στο κάτω μέρος.

Κατεβάστε το Unity αν δεν το έχετε ήδη και εισαγάγετε το SDK IBM Watson από το κατάστημα στοιχείων στο Unity. Μπορούμε να το δοκιμάσουμε δημιουργώντας ένα κενό αντικείμενο παιχνιδιού και να το ονομάσουμε IBM Watson και να προσθέσουμε το παράδειγμα σεναρίου ροής. Αυτό το σενάριο έχει ήδη ρυθμιστεί για εγγραφή ήχου από ενότητα και αποστολή του στους διακομιστές Watson για επεξεργασία.

Προς το παρόν πρόκειται απλώς να χρησιμοποιήσουμε αυτό το παράδειγμα σεναρίου γιατί έχουμε πολλά περισσότερα να κάνουμε, αλλά ίσως την επόμενη φορά να μπούμε βαθύτερα στα πράγματα του Watson γιατί θα ήθελα να κάνω κάτι με το Vision API.

Βήμα 2: Δοκιμάστε το κείμενο σε ομιλία της IBM Watson

Αυτό το σενάριο αναζητά ένα αντικείμενο κειμένου UI, ώστε να δημιουργήσουμε ένα νέο κουμπί διεπαφής χρήστη, αυτό θα μας δώσει το κείμενο που χρειαζόμαστε, θα χρησιμοποιήσουμε το κουμπί αργότερα. Ρυθμίστε τον καμβά σε κλίμακα με το μέγεθος της οθόνης και αλλάξτε λίγο το κουμπί. Αγκυρώστε το κάτω αριστερά. Σύρετε αυτό το κείμενο στην κενή υποδοχή. Ανοίξτε το σενάριο και αφήστε να προσθέσουμε τα διαπιστευτήριά μας της IBM Watson, βρείτε πού χρησιμοποιείται το κείμενο "resultsField" και ορίστε το σε "alt.transcript" μόνο επειδή θα χρησιμοποιήσουμε αυτό το κείμενο για αναζήτηση στο Google. Τώρα, προτού μπορέσουμε να το δοκιμάσουμε, πρέπει να κάνουμε το ίδιο το μέγεθος του κειμένου δυναμικά, ώστε ό, τι λέμε να ταιριάζει στο πλαίσιο. Επιστρέψτε στο κείμενο και ρυθμίστε το ώστε να ταιριάζει καλύτερα. Πληκτρολογήστε κάποιο κείμενο για να το δοκιμάσετε. Τώρα, όταν κάνουμε κλικ στην αναπαραγωγή, οι λέξεις μας θα μεταγραφούν σε κείμενο από το API Text to Speech του Watson.

Βήμα 3: Ρύθμιση του API προσαρμοσμένης αναζήτησης Google

Το επόμενο κομμάτι που πρέπει να κάνουμε είναι να ρυθμίσουμε το προσαρμοσμένο api αναζήτησης Google για χρήση στο Unity. Σε υψηλό επίπεδο θα υποβάλλουμε ένα αίτημα HTTP από την Unity στους διακομιστές της Google, το οποίο θα μας επιστρέψει μια απάντηση σε μορφή JSON.

Μεταβείτε στη σελίδα ρύθμισης JSON API της Προσαρμοσμένης αναζήτησης Google, κάντε κλικ για να λάβετε ένα κλειδί API και να δημιουργήσετε μια νέα εφαρμογή. Κρατήστε αυτό ανοιχτό. Τώρα μπορούμε να πάμε στον πίνακα ελέγχου. Βάλτε οτιδήποτε για να αναζητήσουν οι ιστότοποι, ονομάστε το ό, τι και κάντε κλικ στη δημιουργία.

Κάντε κλικ στον πίνακα ελέγχου και σας επιτρέπει να κάνετε ορισμένες τροποποιήσεις: θέλουμε κυρίως να αναζητήσουμε μιμίδια και να ενεργοποιήσουμε την αναζήτηση εικόνων. Κάτω από ιστότοπους για αναζήτηση, μεταβείτε σε ολόκληρο τον ιστό. Κάντε κλικ στην ενημέρωση για να αποθηκεύσετε τα πάντα.

Τώρα βρείτε το google api explorer και μεταβείτε στο προσαρμοσμένο API αναζήτησης. Αυτό θα μας επιτρέψει να μορφοποιήσουμε την απάντηση JSON που λαμβάνουμε από την Google. Βάλτε λοιπόν οτιδήποτε για το ερώτημα προς το παρόν, επικολλήστε στο αναγνωριστικό της μηχανής αναζήτησής σας, τοποθετήστε 1 για το φίλτρο, ώστε να μην έχουμε διπλότυπα, βάλτε 10 κάτω από τον αριθμό, επειδή αυτός είναι ο μέγιστος αριθμός αποτελεσμάτων που μπορούμε να επιστρέψουμε κάθε φορά, βάλτε εικόνα για τύπο αναζήτησης γιατί αυτό είναι το μόνο που θέλουμε να επιστρέψουμε. Τοποθετήστε 1 για έναρξη και τέλος κάτω από τα πεδία τοποθετήστε τα "στοιχεία/σύνδεσμος" γιατί για κάθε επιστρεφόμενο στοιχείο θέλουμε μόνο το σύνδεσμο εικόνας. Τώρα, όταν κάνετε κλικ στην επιλογή Εκτέλεση, θα δείτε ότι επιστρέφονται 10 καλοί σύνδεσμοι εικόνας.

Τώρα πρέπει να πάρουμε αυτές τις εικόνες στην Unity.

Βήμα 4: Ρύθμιση του Vuforia στο Unity

Αφήστε τη Vuforia να λειτουργήσει ώστε να μπορέσουμε να αξιοποιήσουμε την ανίχνευση επιπέδου εδάφους. Αποθηκεύστε την τρέχουσα σκηνή και μεταβείτε στις ρυθμίσεις κατασκευής. Αλλάξτε την πλατφόρμα σας σε Android ή IOS και αν έχετε στο IOS κάτι για το αναγνωριστικό της δέσμης, προσθέστε μια περιγραφή χρήσης κάμερας και μικροφώνου. Κάτω από τις ρυθμίσεις XR, ελέγξτε την υποστήριξη επαυξημένης πραγματικότητας Vuforia.

Τώρα στη σκηνή διαγράψτε την κύρια κάμερα και προσθέστε μια Vuforia ARCamera. Μεταβείτε στην ενότητα διαμόρφωσης και αλλάξτε τη λειτουργία παρακολούθησης σε θέση. Καταργήστε την επιλογή όλων των βάσεων δεδομένων γιατί δεν τις χρειαζόμαστε.

Τώρα προσθέστε ένα πρόγραμμα ανίχνευσης επιπέδου και πρέπει να παρακάμψουμε την προεπιλεγμένη συμπεριφορά του, επειδή θέλουμε να αναπτύξουμε το στάδιο του επιπέδου εδάφους μόνο μία φορά, ώστε να μπορέσουμε να βρούμε το σενάριο ανάπτυξης μιας φοράς στον ιστότοπο της Vuforia. Φέρτε αυτό το σενάριο στην Unity και βάλτε το στο πρόγραμμα ανίχνευσης, αφαιρώντας το παλιό σενάριο που ήταν εκεί. Αλλάξτε τη λειτουργία σε διαδραστική και βεβαιωθείτε ότι η συνάρτηση "OnInteractiveHitTest" καλείται σε αυτό το Unity Event. Ενώ είμαστε εδώ, ας ενεργοποιήσουμε το κουμπί που κάναμε νωρίτερα όταν βρούμε το επίπεδο γείωσης, και ορίστε την προεπιλεγμένη του κατάσταση σε ανενεργό. Τώρα βάλτε ένα επίγειο αεροπλάνο στη σκηνή και αλλάξτε το σε μεσαίο αέρα επειδή θέλουμε όλες οι εικόνες να αιωρούνται στον αέρα. Σύρετε αυτό το επίπεδο γείωσης στην κενή υποδοχή του εύρετρου επιπέδου.

Βήμα 5: Δημιουργήστε ένα Prefab εικόνας

Πριν ξεκινήσουμε να συγκεντρώνουμε όλα αυτά τα κομμάτια, πρέπει να δημιουργήσουμε ένα προκατασκευασμένο αντικείμενο παιχνιδιού που μπορούμε να υποδεικνύουμε κάθε φορά που φορτώνεται μια εικόνα. Δημιουργήστε λοιπόν ένα κενό αντικείμενο παιχνιδιού κάτω από το στάδιο του επιπέδου εδάφους και ονομάστε το "picPrefab". Δημιουργήστε ένα τετράγωνο ως παιδί αυτού και κλιμακώστε το κατά 2, περιστρέψτε το y κατά 180 μοίρες, έτσι ώστε το διάνυσμα των γονέων προς τα εμπρός που εμφανίζεται ως μπλε βέλος να είναι το μπροστινό μέρος του τετραγώνου.

Δημιουργήστε ένα νέο σενάριο που ονομάζεται "PictureBehavior" και προσθέστε το στο picPrefab.

Τώρα σύρετε αυτό το πρότυπο εικόνας στο φάκελο περιουσιακών στοιχείων σας και αυτό είναι που θα βάλουμε κάθε εικόνα.

Το σενάριο "PictureBehavior" θα πρέπει να μοιάζει με αυτό:

χρησιμοποιώντας System. Collections;

χρησιμοποιώντας System. Collections. Generic; χρησιμοποιώντας το UnityEngine. δημόσια τάξη PictureBehavior: MonoBehaviour {public Renderer quadRenderer; ιδιωτικό Vector3 επιθυμητόPosition; void Start () {// κοιτάξτε τη μετατροπή της κάμερας. LookAt (Camera.main.transform); Vector3 სასურველიAngle = νέο Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (wishAngle); // δύναμη στον αέρα επιθυμητή Θέση = transform.localPosition; transform.localPosition += νέο Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, სასურველიPosition, Time.deltaTime * 4f); } public void LoadImage (url συμβολοσειράς) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (url συμβολοσειράς) {WWW www = νέο WWW (url); απόδοση απόδοσης www; quadRenderer.material.mainTexture = www.texture; }}

Βήμα 6: Δημιουργήστε ένα σενάριο για το API Google

Τώρα ας σύρετε την αναφορά στον τετραπλό απόδοση από το "picPrefab".

Έχουμε μόνο δύο σενάρια για να φτιάξουμε, οπότε ας δημιουργήσουμε ένα σενάριο C# που ονομάζεται GoogleService.cs και PictureFactroy.cs.

Στο "GoogleService" επικολλήστε αυτόν τον κώδικα που κάνει το αίτημά μας:

χρησιμοποιώντας System. Collections;

χρησιμοποιώντας System. Collections. Generic; χρησιμοποιώντας το UnityEngine. χρησιμοποιώντας το UnityEngine. UI; δημόσια τάξη GoogleService: MonoBehaviour {public PictureFactory pictureFactory; δημόσιο κουμπί κειμένουText; private const string API_KEY = "ΒΑΛΤΕ ΚΛΕΙΔΙ API ΕΔΩ !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; query = WWW. EscapeURL (ερώτημα + "μιμίδια"); // διαγραφή παλιών εικόνων pictureFactory. DeleteOldPictures (); // αποθήκευση διανύσματος κάμερας προς τα εμπρός, ώστε να μπορούμε να μετακινούμαστε ενώ τοποθετούνται αντικείμενα Vector3 cameraForward = Camera.main.transform.forward; // μπορούμε να πάρουμε μόνο 10 αποτελέσματα κάθε φορά, οπότε πρέπει να κάνουμε βρόχο και να αποθηκεύσουμε την πρόοδό μας αλλάζοντας τον αριθμό έναρξης μετά από κάθε 10 int rowNum = 1; για (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 +" & πεδία = στοιχεία%2Flink & key = " + API_KEY; WWW www = νέο WWW (url); απόδοση απόδοσης www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } απόδοση απόδοσης νέο WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (αληθινό); } List ParseResponse (κείμενο συμβολοσειράς) {List urlList = new List (); string urls = text. Split ('\ n'); foreach (γραμμή συμβολοσειράς σε urls) {if (line. Contain ("link")) {string url = line. Substring (12, line. Length-13); // το φιλτράρισμα με png ή jpg δεν φαίνεται να λειτουργεί από την Google, οπότε το κάνουμε εδώ: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} επιστροφή urlList; }}

Βήμα 7: Δημιουργήστε το εργοστάσιό μας για εικόνες

Μέσα στο PictureFactory.cs βάζετε αυτόν τον κώδικα για να δημιουργήσετε όλες τις εικόνες μας και φορτώνει τις υφές τους από μια διεύθυνση URL.

χρησιμοποιώντας System. Collections;

χρησιμοποιώντας System. Collections. Generic; χρησιμοποιώντας το UnityEngine. δημόσια τάξη PictureFactory: MonoBehaviour {public GameObject picPrefab; δημόσια GoogleService googleService, 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 (url συμβολοσειράς στο urlList) {Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instantiate (picPrefab, pos, Quaternion.identity, this.transform); εικ. GetComponent (). LoadImage (url); picNum ++; }} Vector3 GetPosition (int picNum, int rowNum, Vector3 camForward) {Vector3 pos = Vector3.zero; εάν (picNum <= 5) {pos = camForward + new Vector3 (picNum * -3, 0, rowNum * 3.5f); } else {pos = camForward + new Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } επιστροφή pos? }}

Βήμα 8: Τελειώσαμε

Δημιουργήστε κενό αντικείμενο παιχνιδιού που ονομάζεται GoogleService και τοποθετήστε το σενάριο "GoogleSerivice" σε αυτό.

Σύρετε το σενάριο "PictureFactory" στη σκηνή του εδάφους, επειδή όλες οι εικόνες μας θα δημιουργηθούν ως παιδιά αυτού του αντικειμένου παιχνιδιού.

Σύρετε τις κατάλληλες αναφορές στον επιθεωρητή, κάντε το ίδιο πράγμα για την υπηρεσία google.

Το τελευταίο πράγμα που πρέπει να κάνουμε είναι να βεβαιωθούμε ότι η λειτουργία "GetPictures" καλείται. Ας πάμε λοιπόν στο συμβάν "onClick" του κουμπιού μας και το καλούμε από εκεί.

Τώρα μπορούμε να κάνουμε κλικ στο play και να το δοκιμάσουμε. Βεβαιωθείτε ότι έχετε ενεργοποιήσει το στάδιο του επιπέδου γείωσης και το κουμπί. Πείτε μια λέξη και κάντε κλικ στο κουμπί για να πραγματοποιήσετε την αναζήτηση σε αυτό το κείμενο!

Τώρα για να λάβετε αυτήν την εφαρμογή στο τηλέφωνό σας, συνδέστε την και μεταβείτε στο Αρχείο-> Ρυθμίσεις κατασκευής. Πατήστε build and run!

Ενημερώστε με στα σχόλια εάν έχετε οποιεσδήποτε ερωτήσεις!