لنصنع تطبيقًا للواقع المعزز لـ MEMES: 8 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:41

في Instructable ، سننشئ تطبيقًا للواقع المعزز لنظامي Android و IOS في Unity3D يستخدم واجهة برمجة تطبيقات Google للبحث عن الميمات. سنستخدم اكتشاف الطائرة الأرضية من Vuforia في Unity ، لذا سيعمل تطبيق الجوّال هذا مع معظم مستخدمي Android و IOS. سيسمح لنا استخدام Vuforia أيضًا بتثبيت الصور في مكان واحد حتى نتمكن من السير في حقل الصور هذا وستبقى الكائنات في مكانها.

سنقوم أيضًا باختبار واجهة برمجة تطبيقات IBM Watson API الجديدة حتى نتمكن من إجراء عمليات البحث هذه بصوتنا والاستفادة من معالجة اللغة الطبيعية.

لذا فالأخبار السيئة هي أن أيا من API هاتين مجانيتين تمامًا ، ولكن الخبر السار هو أنهما يتمتعان بالحرية في المحاولة. تمنحك واجهة برمجة تطبيقات البحث المخصص من Google 100 عملية بحث مجانية يوميًا ، وتمنحك واجهة برمجة تطبيقات IBM Watson أول شهر مجانًا.

باختصار ، سيحصل هذا التطبيق على خطابنا من الميكروفون في Unity ، ويرسل ذلك إلى خوادم IBM Watson ، والتي ستعيد إلينا النص. سنأخذ بعد ذلك هذا النص ونرسله إلى خوادم Google التي ستعيد إلينا قائمة عناوين URL للصور بصيغة JSON.

الخطوة 1: قم بإعداد IBM Watson SDK في الوحدة

للحصول على Watson API ، تحتاج أولاً إلى الحصول على بيانات الاعتماد الخاصة بك من موقعهم. انتقل إلى Console.bluemix.net ، وأنشئ حسابًا ، وقم بتسجيل الدخول. انتقل إلى حساب IBM الخاص بك وانتقل إلى مؤسسات إنشاء السحابة وإنشاء مساحة جديدة. انتقل الآن إلى لوحة التحكم وانقر لتصفح الخدمات ، وأضف الكلام إلى خدمة الرسائل النصية لأن هذا هو ما سنستخدمه. اختر منطقتك ومؤسستك ومساحتك وقم بإنشاء المشروع. الآن سترى بيانات اعتماد API الخاصة بك في الأسفل.

قم بتنزيل Unity إذا لم يكن لديك بالفعل واستورد IBM Watson SDK من مخزن الأصول في Unity. يمكننا اختبار ذلك من خلال إنشاء كائن لعبة فارغ وتسميته IBM Watson وإضافة المثال النصي المتدفق. تم تعيين هذا البرنامج النصي بالفعل لتسجيل الصوت من الوحدة وإرساله إلى خوادم Watson للمعالجة.

في الوقت الحالي ، سنستخدم هذا البرنامج النصي النموذجي فقط لأن لدينا الكثير لنفعله ولكن ربما في المرة القادمة يمكننا التعمق في أشياء Watson لأنني أرغب في القيام بشيء ما باستخدام Vision API.

الخطوة الثانية: اختبر تحويل النص إلى كلام IBM Watson

يبحث هذا البرنامج النصي عن كائن نصي لواجهة المستخدم ، لذا يتيح إنشاء زر واجهة مستخدم جديد ، وهذا سيعطينا النص الذي نحتاجه ، وسنستخدم الزر لاحقًا. اضبط اللوحة على مقياس مع حجم الشاشة وقم بتغيير حجم الزر قليلاً. ثبته إلى أسفل اليسار. اسحب هذا النص إلى الفتحة الفارغة. افتح البرنامج النصي ودعنا نضيف بيانات اعتماد IBM Watson الخاصة بنا ، وابحث عن مكان استخدام نص "resultsField" وقم بتعيينه على "alt.transcript" فقط لأننا سنستخدم هذا النص للبحث في google. الآن قبل أن نتمكن من اختبار ذلك ، نحتاج إلى جعل حجم النص نفسه ديناميكيًا بحيث يتناسب كل ما نقوله داخل المربع. ارجع إلى النص واضبطه على أفضل نحو. اكتب نصًا لاختباره. الآن عند النقر فوق تشغيل ، سيتم نسخ كلماتنا إلى نص من Watson Text to Speech API.

الخطوة 3: إعداد Google Custom Search API

الجزء التالي الذي يتعين علينا القيام به هو إعداد واجهة برمجة تطبيقات البحث المخصص من Google لاستخدامها في Unity. على مستوى عالٍ ، سنقوم بتقديم طلب HTTP من Unity إلى خوادم Google والذي سيعود إلينا برد بتنسيق JSON.

لذا انتقل إلى صفحة إعداد Google Custom Search JSON API ، وانقر للحصول على مفتاح API وإنشاء تطبيق جديد. ابق هذا مفتوحا. الآن يمكننا الذهاب إلى لوحة التحكم. أدخل أي شيء للمواقع للبحث فيه ، وقم بتسميته أيا كان ، وانقر فوق إنشاء.

انقر فوق لوحة التحكم ودعنا نقوم ببعض التعديلات: نريد البحث في الميمات بشكل أساسي وتشغيل البحث عن الصور. ضمن مواقع البحث ، قم بتبديل ذلك إلى الويب بالكامل. انقر فوق تحديث لحفظ كل شيء.

الآن ابحث عن مستكشف واجهة برمجة تطبيقات google وانتقل إلى واجهة برمجة تطبيقات البحث المخصصة. سيسمح لنا ذلك بتنسيق استجابة JSON التي نحصل عليها من Google. لذا ضع أي شيء للاستعلام الآن ، الصق معرف محرك البحث الخاص بك ، ضع 1 في عامل التصفية حتى لا نحصل على نسخ مكررة ، ضع 10 تحت num لأن هذا هو الحد الأقصى لعدد النتائج التي يمكننا إرجاعها في كل مرة ، ضع صورة لنوع البحث لأن هذا كل ما نريد إرجاعه. ضع 1 في البداية ، وأخيرًا أسفل الحقول الموضوعة في "العناصر / الرابط" لأننا نريد رابط الصورة فقط لكل عنصر يتم إرجاعه. الآن عند النقر فوق "تنفيذ" ، سترى أننا حصلنا على 10 روابط صور رائعة تم إرجاعها.

الآن علينا الحصول على هذه الصور في الوحدة.

الخطوة 4: قم بإعداد Vuforia in Unity

لنجعل Vuforia تعمل حتى نتمكن من الاستفادة من اكتشاف الطائرة الأرضية. احفظ المشهد الحالي وانتقل إلى إعدادات البناء. قم بتبديل النظام الأساسي الخاص بك إلى Android أو IOS وإذا وضعت على IOS شيئًا ما لمعرف الحزمة ، أضف وصفًا لاستخدام الكاميرا والميكروفون. ضمن إعدادات XR ، تحقق من دعم الواقع المعزز لـ Vuforia.

الآن في المشهد ، احذف الكاميرا الرئيسية وأضف Vuforia ARCamera. انتقل إلى قسم التكوين وقم بتغيير وضع التتبع إلى الموضع. قم بإلغاء تحديد جميع قواعد البيانات لأننا لسنا بحاجة إليها.

أضف الآن أداة البحث عن طائرة ونحتاج إلى تجاوز سلوكها الافتراضي لأننا نريد نشر مرحلة المستوى الأرضي مرة واحدة فقط ، لذا دعنا نعثر على البرنامج النصي Deploy Stage مرة واحدة على موقع Vuforia الإلكتروني. أحضر هذا النص إلى Unity وضعه على مكتشف الطائرة ، وأزل النص القديم الذي كان موجودًا هناك. قم بتغيير الوضع إلى الوضع التفاعلي وتأكد من استدعاء وظيفة "OnInteractiveHitTest" في حدث الوحدة هذا. بينما نحن هنا ، دعنا نضبط الزر الذي أنشأناه سابقًا على الوضع النشط بمجرد العثور على المستوى الأرضي ، فقم بتعيين حالته الافتراضية على غير نشط. الآن ضع طائرة أرضية في المشهد وقم بتغييرها إلى منتصف الهواء لأننا نريد أن تطفو كل الصور في الهواء. اسحب مستوى الأرض هذا إلى الفتحة الفارغة في مكتشف الطائرة.

الخطوة 5: إنشاء صورة مسبقة

قبل أن نبدأ في تجميع كل هذه القطع معًا ، نحتاج إلى إنشاء كائن لعبة مُجهز مسبقًا يمكننا إنشاء مثيل له في كل مرة يتم فيها تحميل صورة. لذلك قم بإنشاء كائن لعبة فارغ تحت مرحلة الطائرة الأرضية وسميها "picPrefab". قم بإنشاء رباعي كطفل من ذلك وقم بقياسه بمقدار 2 ، وقم بتدوير y بمقدار 180 درجة بحيث يكون متجه الوالدين الذي يظهر كسهم أزرق في مقدمة الرباعية.

قم بإنشاء نص جديد يسمى "PictureBehavior" وإضافته إلى picPrefab الخاص بنا.

الآن اسحب هذه الموافقة المسبقة عن علم إلى مجلد الأصول الخاص بك وهذا ما سنضع كل صورة عليه.

يجب أن يبدو البرنامج النصي "PictureBehavior" كما يلي:

باستخدام System. Collections.

باستخدام System. Collections. Generic ؛ باستخدام UnityEngine ؛ فئة عامة PictureBehavior: MonoBehaviour {public Renderer quadRenderer؛ Vector3 الخاص المطلوب void Start () {// look at camera transform. LookAt (Camera.main.transform) ؛ Vector3 مطلوبAngle = Vector3 جديد (0، transform.localEulerAngles.y، 0) ؛ convert.rotation = كواترنيون.أولر (الزاوية المرغوبة) ؛ // القوة في الهواء المطلوب الموضع = convert.localPosition ؛ convert.localPosition + = Vector3 جديد (0 ، 20 ، 0) ؛ } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition، WantPosition، Time.deltaTime * 4f)؛ } LoadImage عام باطل (عنوان url سلسلة) {StartCoroutine (LoadImageFromURL (url)) ؛ } IEnumerator LoadImageFromURL (سلسلة url) {WWW www = new WWW (url)؛ العائد على شبكة الاتصالات العالمية ؛ quadRenderer.material.mainTexture = www.texture ؛ }}

الخطوة 6: إنشاء برنامج نصي لـ Google API

الآن دعنا نسحب الإشارة إلى العارض الرباعي من "picPrefab".

لم يتبق لدينا سوى نصين ، لذا فلنقم بإنشاء نص C # يسمى GoogleService.cs و PictureFactroy.cs.

داخل "GoogleService" ، قم بلصق هذا الرمز الذي يجعل طلبنا:

باستخدام System. Collections.

باستخدام System. Collections. Generic ؛ باستخدام UnityEngine ؛ باستخدام UnityEngine. UI ؛ فئة عامة من GoogleService: MonoBehaviour {public PictureFactory pictureFactory؛ نص زر نص عام ؛ سلسلة const خاصة API_KEY = "PUT API KEY هنا !!!!!" ؛ GetPictures باطل عام () {StartCoroutine (PictureRoutine ()) ؛ } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (خطأ) ؛ استعلام سلسلة = buttonText.text ؛ الاستعلام = WWW. EscapeURL (استعلام + "memes") ؛ // حذف الصور القديمة 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 = new WWW (url) ؛ العائد على شبكة الاتصالات العالمية ؛ pictureFactory. CreateImages (ParseResponse (www.text) ، rowNum ، cameraForward) ؛ rowNum ++ ؛ } العائد إرجاع WaitForSeconds جديد (5f)؛ buttonText.transform.parent.gameObject. SetActive (صواب) ، } List ParseResponse (سلسلة نصية) {List urlList = new List ()؛ سلسلة urls = text. Split ('\ n') ؛ foreach (سطر سلسلة في عناوين url) {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؛ }}

الخطوة السابعة: إنشاء مصنع الصور الخاص بنا

وضع داخل 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)؛ }}} الفراغ العام 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 (). LoadImage (url) ، الرقم ++ ؛ }} 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) ؛ } else {pos = camForward + new Vector3 ((picNum٪ 5) * 3، 0، rowNum * 3.5f) ؛ } عودة نقاط البيع؛ }}

الخطوة 8: لقد انتهينا

قم بإنشاء كائن لعبة فارغ يسمى GoogleService ووضع البرنامج النصي "GoogleSerivice" عليه.

اسحب البرنامج النصي "PictureFactory" إلى مرحلة المستوى الأرضي لأن جميع صورنا سيتم إنشاؤها كأطفال لعنصر اللعبة هذا.

اسحب المراجع المناسبة في المفتش ، افعل نفس الشيء لخدمة google.

آخر شيء يتعين علينا القيام به هو التأكد من استدعاء وظيفة "GetPictures" الخاصة بنا. فلننتقل إلى حدث "onClick" الموجود على الزر الخاص بنا ونتصل به من هناك.

الآن يمكننا النقر فوق تشغيل واختبار ذلك. تأكد من تمكين مرحلة المستوى الأرضي والزر. قل كلمة ، وانقر فوق الزر لإجراء البحث على هذا النص!

الآن للحصول على هذا التطبيق على هاتفك ، قم بتوصيله وانتقل إلى ملف-> إنشاء إعدادات. اضغط على البناء والركض!

اسمحوا لي أن أعرف في التعليقات إذا كان لديك أي أسئلة!