בואו לעשות אפליקציית מציאות מוגברת עבור MEMES !: 8 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:16

במדריך זה נכין אפליקציית מציאות רבודה עבור Android ו- IOS ב- Unity3D המשתמשת ב- API של Google לחיפוש ממים. אנו נשתמש בזיהוי מטוס הקרקע של Vuforia ב- Unity כך שאפליקציית הנייד הזו תעבוד עבור רוב משתמשי Android ו- IOS. השימוש ב- Vuforia יאפשר לנו גם לעגן את התמונות במיקום אחד כך שנוכל לעבור בשדה התמונות הזה והאובייקטים יישארו היכן שהם נמצאים.

אנו הולכים לבדוק גם את ה- API החדש של ווטסון של IBM, כדי שנוכל לבצע את החיפושים האלה בעזרת הקול שלנו ולמנף את עיבוד השפה הטבעית שלהם.

אז החדשות הרעות הן שאף אחד מ- API זה לא בחינם לחלוטין, אך החדשות הטובות הן ששניהם חופשיים לנסות. ממשק ה- API לחיפוש מותאם אישית של Google נותן לך 100 חיפושים בחינם ליום, ו- IBM Watson API נותן לך את החודש הראשון בחינם.

בקיצור, האפליקציה הזו תקבל את הדיבור שלנו מהמיקרופון ב- Unity, תשלח את זה לשרתי IBM Watson, שיחזיר לנו את הטקסט. לאחר מכן ניקח את הטקסט הזה ונשלח אותו לשרתי Google שיחזיר לנו רשימה של כתובות אתרים בתמונה בטופס JSON.

שלב 1: הגדר את IBM Watson SDK ביחידות

כדי להפעיל את ה- Watson API עליך קודם כל לקבל את האישורים שלך מהאתר שלהם. עבור אל Console.bluemix.net, צור וחשבון, והתחבר. עבור אל חשבון IBM שלך ונווט אל ארגוני יציקה בענן וצור שטח חדש. עכשיו עבור ללוח המחוונים שלך ולחץ כדי לעיין בשירותים, הוסף את הנאום לשירות טקסט כי זה מה שאנחנו הולכים להשתמש בו. בחר את האזור, הארגון והחלל שלך וצור את הפרויקט. כעת תראה את אישורי ה- API שלך בתחתית.

הורד את Unity אם עדיין אין לך את זה וייבא את ה- IBM Watson SDK מחנות הנכסים ב- Unity. אנו יכולים לבדוק זאת על ידי יצירת אובייקט משחק ריק וקוראים לו IBM ווטסון והוספת סקריפט הזרמה לדוגמה. סקריפט זה כבר מוגדר להקלטת שמע מתוך אחדות ולשלוח אותו לשרתי ווטסון לעיבוד.

לעת עתה אנחנו פשוט הולכים להשתמש בסקריפט לדוגמה כי יש לנו עוד הרבה מה לעשות אבל אולי בפעם הבאה נוכל להיכנס לעומק הדברים של ווטסון כי הייתי רוצה לעשות משהו עם ה- Vision API.

שלב 2: בדוק את הטקסט של IBM ווטסון לדיבור

סקריפט זה מחפש אובייקט טקסט של ממשק משתמש כך שנוכל ליצור כפתור ממשק משתמש חדש זה ייתן לנו את הטקסט הדרוש לנו, נשתמש בכפתור מאוחר יותר. הגדר את הציור בקנה מידה עם גודל המסך ושנה את גודל הלחצן מעט. עוגן אותו בצד שמאל למטה. גרור את הטקסט לחריץ הריק. פתח את הסקריפט ומאפשר להוסיף את אישורי IBM ווטסון שלנו, מצא היכן נעשה שימוש בטקסט "resultsField" והגדר אותו ל- "alt.transcript" בלבד מכיוון שאנו נשתמש בטקסט זה לחיפוש בגוגל. עכשיו לפני שנוכל לבדוק זאת עלינו להפוך את גודל הטקסט עצמו לדינאמי כך שכל מה שנאמר יתאים בתוך הקופסה. חזור אל הטקסט והגדר אותו כך שיתאים ביותר. הקלד טקסט כלשהו כדי לבדוק זאת. כעת כאשר נלחץ על הפעל מילותינו יועתקו לטקסט מתוך ממשק ה- API לטקסט לדיבור של ווטסון.

שלב 3: הגדר את ממשק ה- API לחיפוש מותאם אישית של Google

היצירה הבאה שעלינו לעשות היא להגדיר את ה- API לחיפוש מותאם אישית של גוגל לשימוש ב- Unity. ברמה גבוהה נגיש בקשת HTTP מאוניטי לשרתי Google שתחזיר לנו תגובה בפורמט JSON.

אז עבור לדף ההגדרה של JSON API של חיפוש מותאם אישית של Google, לחץ כדי לקבל מפתח API וליצור אפליקציה חדשה. שמור על זה פתוח. כעת נוכל לעבור ללוח הבקרה. הכנס כל דבר לאתרים לחיפוש, תן לו שם כלשהו ולחץ על צור.

לחץ על לוח הבקרה ומאפשר לבצע כמה שינויים: אנו רוצים בעיקר לחפש ממים ולהפעיל את חיפוש התמונות. תחת אתרים לחיפוש העבר את זה לרשת שלמה. לחץ על עדכן כדי לשמור הכל.

כעת מצא את סייר ה- api של Google ועבור לממשק API לחיפוש מותאם אישית. זה יאפשר לנו לעצב את תגובת ה- JSON שאנו מקבלים מגוגל. אז הכנס כל דבר לשאילתה לעת עתה, הדבק את מזהה מנוע החיפוש שלך, הכנס 1 למסנן כדי שלא נקבל כפילויות, הכנס 10 תחת מספר מכיוון שזה מספר התוצאות המרבי שנוכל להחזיר בכל פעם, הכניסו תמונה לסוג החיפוש כי זה כל מה שאנחנו רוצים להחזיר. הכניסו 1 להתחלה, ולבסוף תחת שדות הכניסו "פריטים/קישור" מכיוון שלכל פריט שהוחזר אנחנו רוצים רק את הקישור לתמונה. כעת, כאשר תלחץ על execute תראה כי אנו מקבלים 10 קישורים נחמדים לתמונות.

כעת עלינו להכניס את התמונות הללו ליחידות.

שלב 4: הגדר את Vuforia באחדות

בואו לגרום ל- Vuforia לעבוד כדי שנוכל למנף את זיהוי מטוס הקרקע שלהם. שמור את הסצנה הנוכחית שלך ועבור להגדרות הבנייה. העבר את הפלטפורמה שלך ל- Android או ל- IOS ואם אתה משתמש ב- IOS הכניס משהו למזהה החבילה, הוסף מצלמה ותיאור השימוש במיקרופון. תחת הגדרות XR בדוק את מציאות הרבודה של Vuforia נתמכת.

עכשיו בזירה מחק את המצלמה הראשית והוסף מצלמת Vuforia AR. עבור אל סעיף התצורה ושנה את מצב המעקב למיקום. בטל את הסימון של כל מסדי הנתונים מכיוון שאיננו זקוקים להם.

כעת הוסף מאתר מטוסים ועלינו לבטל את התנהגות ברירת המחדל שלו מכיוון שאנו רוצים לפרוס את שלב המטוס הקרקע רק פעם אחת, כך שנמצא את התסריט לפרוס שלב פעם באתר Vuforia. הכנס את התסריט הזה ליחידות והכנס אותו לאתר המטוס, והסר את התסריט הישן שהיה שם. שנה את המצב לאינטראקטיבי וודא שהפונקציה "OnInteractiveHitTest" נקראת לאותו אירוע אחדות. בזמן שאנחנו כאן בואו נגדיר את הכפתור שעשינו קודם לכן לפעיל לאחר שמצאנו את מטוס הקרקע, הגדר את מצב ברירת המחדל שלו כבלתי פעיל. עכשיו הכנס מטוס קרקע לזירה ושנה אותו לאמצע האוויר כי אנחנו רוצים שכל התמונות צפות באוויר. גרור את המטוס הקרקע הזה לתוך החריץ הריק במאתר המטוסים.

שלב 5: צור משטח טרומי לתמונה

לפני שנתחיל להרכיב את כל החלקים האלה עלינו ליצור אובייקט משחק טרומי שנוכל ליצור מיידית בכל פעם שתועלה תמונה. אז צור אובייקט משחק ריק מתחת לבמה של המטוס הקרקע וקרא לו "picPrefab". צור מרובע כילד של זה והגדל אותו ב -2, סובב את y שלו ב -180 מעלות כך שהווקטור קדימה של ההורים המוצג כחץ כחול הוא החלק הקדמי של המרובע.

צור סקריפט חדש בשם "PictureBehavior" והוסף אותו ל- picPrefab שלנו.

עכשיו גרור את התמונה הטרומית הזו לתיקיית הנכסים שלך ועל זה אנחנו הולכים לשים כל תמונה.

התסריט "PictureBehavior" שלנו אמור להיראות כך:

שימוש ב- System. Collections;

באמצעות System. Collections. Generic; שימוש ב- UnityEngine; מעמד ציבורי PictureBehavior: MonoBehaviour {public Renderer quadRenderer; פרטי וקטור 3 רצוי מיקום; void Start () {// להסתכל על המצלמה transform. LookAt (Camera.main.transform); Vector3 wantedAngle = Vector3 חדש (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (רצוי אנגל); // כוח לאוויר winsPosition = transform.localPosition; transform.localPosition += וקטור 3 חדש (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, winsPosition, Time.deltaTime * 4f); } LoadImage (כתובת אתר מחרוזת) של ריק ציבורי {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (מחרוזת כתובת אתר) {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; כפתור טקסט פומבי; private string string API_KEY = "PUT API KEY HERE !!!!!"; חלל ציבורי GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (שקר); שאילתת מחרוזת = 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=" + שאילתה + "& cx = 011535004225295624669%3Afeb1gwic6bs & filter = 1 & num = 10 & searchType = image & start = " + i +" & fields = items%2Flink & key = " + API_KEY; WWW www = WWW חדש (url); תשואה תשואה www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } תשואה תשואה WaitForSeconds חדשה (5f); buttonText.transform.parent.gameObject. SetActive (נכון); } רשימה ParseResponse (טקסט מחרוזת) {List urlList = רשימה חדשה (); string url = text. Split ('\ n'); foreach (קו מחרוזת בכתובות אתרים) {if (line. Contains ("קישור")) {string url = line. Substring (12, line. Length-13); // סינון לפי png או jpg לא נראה פועל מגוגל ולכן אנו עושים זאת כאן: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} החזר urlList; }}

שלב 7: צור את מפעל התמונות שלנו

בתוך PictureFactory.cs שמים את הקוד הזה כדי ליצור את כל התמונות שלנו ומטעין את המרקמים שלהן מכתובת אתר.

שימוש ב- 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 id של CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; מרכז וקטור 3 = Camera.main.transform.position; foreach (כתובת אתר מחרוזת ב- 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; אם (picNum <= 5) {pos = camForward + וקטור 3 חדש (picNum * -3, 0, rowNum * 3.5f); } אחרת {pos = camForward + וקטור 3 חדש ((picNum % 5) * 3, 0, rowNum * 3.5f); } החזר פו; }}

שלב 8: סיימנו

צור משחק אובייקט ריק בשם GoogleService והנח עליו את הסקריפט "GoogleSerivice".

גרור את התסריט "PictureFactory" לבמה של המטוס הקרקע מכיוון שכל התמונות שלנו עומדות להיווצר כילדות של אובייקט המשחק הזה.

גרור את הפניות המתאימות במפקח, עשה את אותו הדבר עבור שירות Google.

הדבר האחרון שעלינו לעשות הוא לוודא שהפונקציה "GetPictures" מתקשרת אלינו. אז נלך לאירוע "onClick" של הכפתור שלנו ונתקשר אליו משם.

כעת נוכל ללחוץ על הפעלה ולבדוק זאת. הקפד להפעיל את שלב המטוס הקרקע ואת הכפתור. אמור מילה ולחץ על הכפתור לביצוע החיפוש על הטקסט הזה!

עכשיו כדי לקבל את האפליקציה הזו בטלפון, חבר אותה והיכנס לקובץ-> הגדרות בנייה. היכה build and run!

הודע לי בתגובות אם יש לך שאלות!