มาสร้างแอป Augmented Reality สำหรับ MEMES!: 8 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

ในคำแนะนำนี้ เราจะสร้างแอปความเป็นจริงเสริมสำหรับ 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: ตั้งค่า IBM Watson SDK ใน Unity

หากต้องการใช้ Watson API คุณต้องรับข้อมูลประจำตัวจากเว็บไซต์ของพวกเขาก่อน ไปที่ Console.bluemix.net สร้างบัญชี และเข้าสู่ระบบ ไปที่บัญชี IBM ของคุณและไปที่องค์กร Cloud Foundry และสร้างพื้นที่ใหม่ ไปที่แดชบอร์ดของคุณแล้วคลิกเพื่อเรียกดูบริการ เพิ่มบริการเสียงพูดเป็นข้อความเพราะนั่นคือสิ่งที่เราจะใช้ เลือกภูมิภาค องค์กร และพื้นที่ของคุณ แล้วสร้างโครงการ ตอนนี้คุณจะเห็นข้อมูลรับรอง API ของคุณที่ด้านล่าง

ดาวน์โหลด Unity หากคุณยังไม่มี และนำเข้า IBM Watson SDK จากที่จัดเก็บสินทรัพย์ใน Unity เราสามารถทดสอบได้โดยการสร้างอ็อบเจ็กต์เกมเปล่าและเรียกมันว่า IBM Watson และเพิ่มตัวอย่างสคริปต์การสตรีม สคริปต์นี้ได้รับการตั้งค่าให้บันทึกเสียงจากความสามัคคีและส่งไปยังเซิร์ฟเวอร์ Watson เพื่อประมวลผล

สำหรับตอนนี้ เราจะใช้สคริปต์ตัวอย่างนี้เพราะว่าเรายังมีอะไรให้ทำอีกมาก แต่บางทีคราวหน้าเราอาจเจาะลึกลงไปในเนื้อหาที่วัตสันได้ เพราะผมอยากจะทำอะไรบางอย่างกับ Vision API

ขั้นตอนที่ 2: ทดสอบ IBM Watson Text to Speech

สคริปต์นี้กำลังมองหาวัตถุข้อความ UI ดังนั้นให้สร้างปุ่ม UI ใหม่ ซึ่งจะให้ข้อความที่เราต้องการ เราจะใช้ปุ่มนั้นในภายหลัง ตั้งค่าผ้าใบให้ปรับขนาดตามขนาดหน้าจอและปรับขนาดปุ่มเล็กน้อย ยึดไว้ที่ด้านล่างซ้าย ลากข้อความนั้นลงในช่องว่าง เปิดสคริปต์และเพิ่มข้อมูลประจำตัว IBM Watson ของเรา ค้นหาตำแหน่งที่ใช้ข้อความ "resultsField" และตั้งค่าเป็น "alt.transcript" เท่านั้น เนื่องจากเราจะใช้ข้อความนี้เพื่อค้นหา google ก่อนที่เราจะสามารถทดสอบสิ่งนี้ได้ เราต้องทำให้ขนาดตัวอักษรเป็นแบบไดนามิก ดังนั้นสิ่งที่เราพูดจะพอดีกับกล่อง กลับไปที่ข้อความและตั้งค่าให้เหมาะสมที่สุด พิมพ์ข้อความเพื่อทดสอบ ตอนนี้เมื่อเราคลิกเล่นคำของเราจะถูกคัดลอกเป็นข้อความจาก Watson Text to Speech API

ขั้นตอนที่ 3: ตั้งค่า Google Custom Search API

ชิ้นต่อไปที่เราต้องทำคือตั้งค่า api การค้นหาที่กำหนดเองของ Google เพื่อใช้ใน Unity ในระดับสูง เราจะทำการร้องขอ HTTP จาก Unity ไปยังเซิร์ฟเวอร์ของ Google ซึ่งจะส่งคืนการตอบกลับในรูปแบบ JSON

ไปที่หน้าการตั้งค่า Google Custom Search JSON API คลิกเพื่อรับคีย์ API และสร้างแอปใหม่ เปิดไว้แบบนี้ ตอนนี้เราสามารถไปที่แผงควบคุม ใส่อะไรก็ได้เพื่อให้เว็บไซต์ค้นหา ตั้งชื่ออะไรก็ได้ แล้วคลิกสร้าง

คลิกแผงควบคุมและทำการปรับเปลี่ยนบางอย่าง: เราต้องการค้นหามีมเป็นหลัก และเปิดการค้นหารูปภาพ ใต้ไซต์เพื่อค้นหาให้สลับไปยังทั้งเว็บ คลิกอัปเดตเพื่อบันทึกทุกอย่าง

ตอนนี้ค้นหา google api explorer และไปที่ API การค้นหาที่กำหนดเอง ซึ่งจะทำให้เราสามารถจัดรูปแบบการตอบสนอง JSON ที่เราได้รับจาก Google ดังนั้นใส่อะไรก็ได้สำหรับข้อความค้นหาตอนนี้ วางใน ID เครื่องมือค้นหาของคุณ ใส่ 1 ในตัวกรองเพื่อไม่ให้ซ้ำกัน ใส่ 10 ใต้ num เพราะนั่นคือจำนวนผลลัพธ์สูงสุดที่เราสามารถส่งคืนได้ในแต่ละครั้ง ใส่รูปภาพสำหรับประเภทการค้นหาเพราะนั่นคือทั้งหมดที่เราต้องการส่งคืน ใส่ 1 ในการเริ่มต้น และสุดท้ายภายใต้ฟิลด์ใส่ใน "รายการ/ลิงก์" เพราะสำหรับแต่ละรายการที่ส่งคืน เราเพียงต้องการลิงก์รูปภาพ ตอนนี้เมื่อคุณคลิกดำเนินการ คุณจะเห็นว่าเราได้รับลิงก์รูปภาพ 10 ลิงก์ที่ส่งคืน

ตอนนี้เราต้องนำรูปภาพเหล่านี้ไปไว้ใน Unity

ขั้นตอนที่ 4: ตั้งค่า Vuforia ใน Unity

ให้ Vuforia ทำงานเพื่อให้เราสามารถใช้ประโยชน์จากการตรวจจับระนาบพื้นดินได้ บันทึกฉากปัจจุบันของคุณและไปที่การตั้งค่าบิลด์ เปลี่ยนแพลตฟอร์มของคุณเป็น Android หรือ IOS และหาก IOS ของคุณใส่ข้อมูลบางอย่างสำหรับตัวระบุบันเดิล ให้เพิ่มคำอธิบายการใช้กล้องและไมโครโฟน ภายใต้การตั้งค่า XR ให้ตรวจสอบ Vuforia augmented reality ที่รองรับ

ตอนนี้ในฉากลบกล้องหลักและเพิ่ม Vuforia ARCamera ไปที่ส่วนการกำหนดค่าและเปลี่ยนโหมดการติดตามเป็นตำแหน่ง ยกเลิกการเลือกฐานข้อมูลทั้งหมดเพราะเราไม่ต้องการมัน

ตอนนี้เพิ่มตัวค้นหาเครื่องบินและเราจำเป็นต้องแทนที่พฤติกรรมเริ่มต้นเพราะเราต้องการปรับใช้ระยะระนาบพื้นเพียงครั้งเดียว ให้ค้นหา Deploy Stage ครั้งเดียวสคริปต์บนเว็บไซต์ Vuforia นำสคริปต์นั้นเข้าสู่ Unity และวางไว้บนตัวค้นหาเครื่องบิน ลบสคริปต์เก่าที่มีอยู่ เปลี่ยนโหมดเป็นแบบโต้ตอบและตรวจสอบให้แน่ใจว่าได้เรียกใช้ฟังก์ชัน "OnInteractiveHitTest" ในเหตุการณ์ Unity นั้น ขณะที่เราอยู่ที่นี่ ให้ตั้งค่าปุ่มที่เราตั้งไว้ก่อนหน้านี้ให้ทำงานเมื่อเราพบระนาบพื้นแล้ว ตั้งค่าสถานะเริ่มต้นเป็นไม่ทำงาน ตอนนี้ใส่ระนาบพื้นเข้าไปในฉากแล้วเปลี่ยนเป็นกลางอากาศเพราะเราต้องการให้ภาพทั้งหมดลอยอยู่ในอากาศ ลากระนาบพื้นนี้ลงในช่องว่างบนตัวค้นหาเครื่องบิน

ขั้นตอนที่ 5: สร้างภาพสำเร็จรูป

ก่อนที่เราจะเริ่มรวบรวมชิ้นส่วนเหล่านี้ เราต้องสร้างวัตถุเกมสำเร็จรูปที่เราสามารถสร้างอินสแตนซ์ได้ทุกครั้งที่โหลดรูปภาพ ดังนั้นให้สร้างวัตถุเกมว่างใต้ระนาบพื้นและเรียกมันว่า "picPrefab" สร้างรูปสี่เหลี่ยมเป็นลูกของสิ่งนั้นและปรับขนาดเป็น 2 หมุน y ของมัน 180 องศาเพื่อให้เวกเตอร์พาเรนต์ไปข้างหน้าซึ่งแสดงเป็นลูกศรสีน้ำเงินคือด้านหน้าของรูปสี่เหลี่ยม

สร้างสคริปต์ใหม่ชื่อ "PictureBehavior" และเพิ่มลงใน picPrefab ของเรา

ตอนนี้ลากรูปสำเร็จรูปนี้ไปยังโฟลเดอร์ทรัพย์สินของคุณและนี่คือสิ่งที่เราจะใส่แต่ละภาพ

สคริปต์ "PictureBehavior" ของเราควรมีลักษณะดังนี้:

ใช้ System. Collections;

ใช้ System. Collections. Generic; ใช้ UnityEngine; PictureBehavior คลาสสาธารณะ: MonoBehaviour { Renderer quadRenderer สาธารณะ; ตำแหน่งที่ต้องการ Vector3 ส่วนตัว; ถือเป็นโมฆะ Start(){ //ดูที่กล้อง transform. LookAt (Camera.main.transform); Vector3 requireAngle = ใหม่ Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (มุมที่ต้องการ); //บังคับไปในอากาศที่ต้องการPosition = transform.localPosition; transform.localPosition += ใหม่ Vector3 (0, 20, 0); } เป็นโมฆะ อัปเดต () { transform.localPosition = Vector3. Lerp (transform.localPosition, ตำแหน่งที่ต้องการ, Time.deltaTime * 4f); } โมฆะสาธารณะ LoadImage (url สตริง) { StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (url สตริง){ WWW www = WWW ใหม่ (url); ผลตอบแทนผลตอบแทน www; quadRenderer.material.mainTexture = www.texture; } }

ขั้นตอนที่ 6: สร้างสคริปต์สำหรับ Google API

ตอนนี้ให้ลากการอ้างอิงไปยัง quad renderer จาก "picPrefab" ของเรา

เราเหลือสคริปต์ให้สร้างเพียงสองสคริปต์ ให้สร้างสคริปต์ C# ชื่อ GoogleService.cs และ PictureFactroy.cs

ภายใน "GoogleService" วางรหัสนี้ที่ทำให้คำขอของเรา:

ใช้ System. Collections;

ใช้ System. Collections. Generic; ใช้ UnityEngine; ใช้ UnityEngine. UI; GoogleService คลาสสาธารณะ: MonoBehavior { PictureFactory สาธารณะ pictureFactory; ปุ่มข้อความสาธารณะข้อความ; สตริง const ส่วนตัว API_KEY = "ใส่คีย์ API ที่นี่!!!!!"; โมฆะสาธารณะ GetPictures(){ StartCoroutine (PictureRoutine ()); } IEnumerator Picture Routine () { buttonText.transform.parent.gameObject. SetActive (เท็จ); ข้อความค้นหาสตริง = buttonText.text; แบบสอบถาม = 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 + "&fields=items%2Flink&key=" + API_KEY; WWW www = WWW ใหม่ (url); ผลตอบแทนผลตอบแทน www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); แถวหมายเลข++; } ผลตอบแทนใหม่ WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (จริง); } รายการ ParseResponse (ข้อความสตริง) { รายการ urlList = รายการใหม่ (); string urls = text. Split ('\n'); foreach (บรรทัดสตริงใน urls) { if (line. Contains ("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 { GameObject picPrefab สาธารณะ; GoogleService สาธารณะ googleService; โมฆะสาธารณะ DeleteOldPictures (){ ถ้า (transform.childCount > 0) { foreach (แปลงเด็กใน this.transform) { ทำลาย (child.gameObject); } } } โมฆะสาธารณะ CreateImages (ListurlList, int resultNum, Vector3 camForward) { int picNum = 1; ศูนย์ Vector3 = Camera.main.transform.position; foreach (url สตริงใน urlList) { Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = สร้างอินสแตนซ์ (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent ().โหลดอิมเมจ (url); picNum++; } } Vector3 GetPosition (int picNum, int rowNum, Vector3 camForward) { Vector3 pos = Vector3.zero; ถ้า (picNum <= 5) { pos = camForward + Vector3 ใหม่ (picNum * -3, 0, rowNum * 3.5f); } อื่น ๆ { pos = camForward + Vector3 ใหม่ ((picNum % 5) * 3, 0, rowNum * 3.5f); } ส่งคืน pos; } }

ขั้นตอนที่ 8: เสร็จแล้ว

สร้าง gameobject เปล่าที่เรียกว่า GoogleService และใส่สคริปต์ "GoogleSerivice" ลงไป

ลากสคริปต์ "PictureFactory" ลงบนพื้นระนาบเนื่องจากรูปภาพทั้งหมดของเรากำลังจะถูกสร้างขึ้นในฐานะลูกของวัตถุเกมนี้

ลากการอ้างอิงที่เหมาะสมในตัวตรวจสอบ ทำสิ่งเดียวกันสำหรับบริการของ Google

สิ่งสุดท้ายที่เราควรทำคือตรวจสอบให้แน่ใจว่ามีการเรียกใช้ฟังก์ชัน "GetPictures" ไปที่เหตุการณ์ "onClick" ของปุ่มของเราแล้วเรียกจากที่นั่น

ตอนนี้เราสามารถคลิกเล่นและทดสอบได้ ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานระยะระนาบพื้นและปุ่ม พูดคำหนึ่งคำแล้วคลิกปุ่มเพื่อทำการค้นหาข้อความนั้น!

ในการดาวน์โหลดแอปนี้บนโทรศัพท์ของคุณ ให้เสียบปลั๊กแล้วไปที่ File->Build Settings ตีสร้างและเรียกใช้!

แจ้งให้เราทราบในความคิดเห็นหากคุณมีคำถาม!