اجازه دهید یک برنامه واقعیت افزوده برای MEMES بسازید!: 8 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:57

در این دستورالعمل قصد داریم یک برنامه واقعیت افزوده برای Android و IOS در Unity3D بسازیم که از API Google برای جستجوی الگوهای رفتاری استفاده می کند. ما از تشخیص هواپیمای زمینی Vuforia در Unity استفاده می کنیم تا این برنامه تلفن همراه برای اکثر کاربران Android و IOS کار کند. استفاده از Vuforia همچنین به ما این امکان را می دهد که تصاویر را در یک مکان لنگر بزنیم تا بتوانیم در این زمینه از تصاویر قدم بزنیم و اشیاء در همان جایی که هستند بمانند.

ما همچنین قصد داریم API جدید IBM Watson را آزمایش کنیم تا بتوانیم این جستجوها را با صدای خود انجام دهیم و از پردازش زبان طبیعی آنها استفاده کنیم.

بنابراین خبر بد این است که هیچ کدام از این API ها کاملاً رایگان نیستند ، اما خبر خوب این است که هر دو آزمایشی رایگان هستند. API جستجوی سفارشی google روزانه 100 جستجوی رایگان به شما می دهد و API IBM Watson اولین ماه را رایگان به شما می دهد.

به طور خلاصه ، این برنامه سخنرانی ما را از میکروفون Unity دریافت می کند ، آن را به سرورهای IBM Watson ارسال می کند ، که متن را به ما باز می گرداند. سپس آن متن را گرفته و به سرورهای Google ارسال می کنیم که لیستی از آدرس های تصویر را به صورت JSON به ما باز می گرداند.

مرحله 1: SDK IBM Watson را در Unity تنظیم کنید

برای فعال کردن API واتسون ، ابتدا باید اعتبار خود را از سایت آنها دریافت کنید. به Console.bluemix.net بروید ، ایجاد و حساب کنید و وارد شوید. به حساب IBM خود بروید و به Orgs ریخته گری ابر بروید و فضای جدیدی ایجاد کنید. اکنون به داشبورد خود بروید و برای مرور خدمات کلیک کنید ، گفتار را به سرویس متنی اضافه کنید زیرا این چیزی است که ما از آن استفاده می کنیم. منطقه ، سازمان و فضای خود را انتخاب کرده و پروژه را ایجاد کنید. اکنون اعتبار API خود را در پایین مشاهده خواهید کرد.

اگر Unity را ندارید بارگیری کنید و IBM Watson SDK را از فروشگاه دارایی در Unity وارد کنید. ما می توانیم این را با ایجاد یک شیء بازی خالی آزمایش کرده و آن را IBM Watson نامیده و نمونه اسکریپت جریان را اضافه کنیم. این اسکریپت در حال حاضر برای ضبط صدا از وحدت و ارسال آن به سرورهای واتسون برای پردازش تنظیم شده است.

در حال حاضر ما فقط از این اسکریپت نمونه استفاده می کنیم زیرا کارهای بیشتری برای انجام دادن داریم ، اما شاید دفعه بعد بتوانیم عمیق تر به مطالب واتسون بپردازیم زیرا من می خواهم کاری با API ویژن انجام دهم.

مرحله 2: متن به گفتار IBM Watson را آزمایش کنید

این اسکریپت به دنبال یک شی متن UI است ، بنابراین اجازه دهید یک دکمه UI جدید ایجاد کنیم ، این متن مورد نیاز ما را به ما می دهد ، بعداً از دکمه استفاده خواهیم کرد. بوم را در مقیاس اندازه صفحه تنظیم کنید و اندازه دکمه را کمی تغییر دهید. آن را در سمت چپ پایین لنگر بزنید. آن متن را به شکاف خالی بکشید. اسکریپت را باز کنید و اجازه دهید اعتبارنامه IBM Watson خود را اضافه کنید ، محل استفاده از متن "resultsField" را بیابید و آن را فقط روی "alt.transcript" تنظیم کنید زیرا ما از این متن برای جستجوی Google استفاده می کنیم. اکنون قبل از اینکه بتوانیم این را آزمایش کنیم ، باید اندازه متن را به صورت پویا ایجاد کنیم تا هر چه می گوییم داخل کادر قرار گیرد. به متن برگردید و آن را به بهترین شکل تنظیم کنید. برای آزمایش آن ، برخی از متن ها را تایپ کنید. اکنون وقتی روی play کلیک می کنیم ، کلمات ما به متن از API Watson Text to Speech رونویسی می شود.

مرحله 3: API جستجوی سفارشی Google را تنظیم کنید

قسمت بعدی که باید انجام دهیم این است که api جستجوی سفارشی Google را برای استفاده در Unity راه اندازی کنیم. در سطح بالا ما درخواست HTTP از Unity به سرورهای Google ارائه می دهیم که پاسخی را در قالب JSON به ما باز می گرداند.

بنابراین به صفحه تنظیمات JSON API جستجوی سفارشی Google بروید ، برای دریافت کلید API و ایجاد یک برنامه جدید کلیک کنید. این را باز نگه دارید. حالا می توانیم به کنترل پنل برویم. هر چیزی را برای جستجو در سایتها قرار دهید ، نام آن را هرچه می خواهید بگذارید و روی ایجاد کلیک کنید.

روی کنترل پنل کلیک کنید و اجازه دهید برخی تغییرات را انجام دهیم: ما می خواهیم عمدتا الگوهای رفتاری را جستجو کرده و جستجوی تصویر را روشن کنیم. در جستجوی سایتها ، آن را به کل وب تغییر دهید. برای ذخیره همه چیز روی به روز رسانی کلیک کنید.

اکنون google api explorer را بیابید و به API جستجوی سفارشی بروید. این به ما امکان می دهد پاسخ JSON را که از Google دریافت می کنیم قالب بندی کنیم. بنابراین فعلاً هر چیزی را برای پرس و جو وارد کنید ، شناسه موتور جستجوی خود را بچسبانید ، 1 را برای فیلتر وارد کنید تا تکراری نشویم ، 10 را زیر عدد قرار دهید زیرا این حداکثر تعداد نتایجی است که می توانیم در یک زمان برگردانیم ، تصویر را برای نوع جستجو قرار دهید زیرا این تنها چیزی است که ما می خواهیم برگردانیم. برای شروع 1 را وارد کنید و در نهایت در فیلدهای "items/link" قرار دهید زیرا برای هر مورد بازگشتی ما فقط پیوند تصویر را می خواهیم. حالا وقتی روی اجرا کلیک می کنید ، می بینید که 10 پیوند تصویر زیبا بازگردانده شده است.

حالا ما باید این تصاویر را به Unity برسانیم.

مرحله 4: Vuforia را در Unity تنظیم کنید

اجازه دهید Vuforia کار کند تا بتوانیم از تشخیص سطح زمین آنها استفاده کنیم. صحنه فعلی خود را ذخیره کرده و به تنظیمات ساخت بروید. پلتفرم خود را به Android یا IOS تغییر دهید و اگر در IOS چیزی برای شناسه بسته نصب کرده اید ، توضیحات استفاده از دوربین و میکروفون را اضافه کنید. در تنظیمات XR ، پشتیبانی از واقعیت افزوده Vuforia را بررسی کنید.

اکنون در صحنه دوربین اصلی را حذف کرده و یک Vuforia ARCamera اضافه کنید. به قسمت پیکربندی بروید و حالت ردیابی را به موقعیتی تغییر دهید. تیک همه پایگاه های داده را بردارید زیرا به آنها نیازی نداریم.

اکنون یک یاب هواپیما اضافه کنید و ما باید رفتار پیش فرض آن را نادیده بگیریم زیرا ما می خواهیم مرحله هواپیمای زمینی را فقط یک بار مستقر کنیم ، بنابراین اجازه می دهد اسکریپت Deploy Stage one را در وب سایت Vuforia پیدا کنیم. آن اسکریپت را وارد Unity کنید و آن را در هواپیمای یاب قرار دهید و خط قدیمی را که در آنجا بود حذف کنید. حالت را به حالت تعاملی تغییر دهید و مطمئن شوید که تابع "OnInteractiveHitTest" در آن رویداد وحدت فراخوانی می شود. در حالی که ما اینجا هستیم اجازه دهید دکمه ای را که قبلاً ساخته بودیم فعال کنیم پس از اینکه سطح زمین را پیدا کردیم ، حالت پیش فرض آن را غیرفعال کنید. حالا یک هواپیمای زمینی را وارد صحنه کنید و آن را به حالت میانی تغییر دهید زیرا ما می خواهیم همه تصاویر در هوا شناور باشند. این هواپیمای زمینی را به شکاف خالی هواپیمای یاب بکشید.

مرحله 5: یک Prefab تصویر ایجاد کنید

قبل از اینکه همه این قطعات را کنار هم قرار دهیم ، باید یک شیء بازی از پیش ساخته ایجاد کنیم که می توانیم هر بار بارگیری یک تصویر آن را مثال بزنیم. بنابراین یک شی بازی خالی در زیر سطح صفحه زمین ایجاد کنید و آن را "picPrefab" بنامید. یک کودک چهارگانه در فرزند خود ایجاد کنید و مقیاس آن را 2 برابر کنید ، y آن را 180 درجه بچرخانید تا بردار رو به جلو والدین که به صورت یک پیکان آبی نشان داده می شود ، جلوی چهار باشد.

یک اسکریپت جدید به نام "PictureBehavior" ایجاد کنید و آن را به picPrefab ما اضافه کنید.

حالا این پیش زمینه عکس را به پوشه دارایی های خود بکشید و این چیزی است که ما قصد داریم هر عکس را روی آن قرار دهیم.

اسکریپت "PictureBevior" ما باید به این شکل باشد:

با استفاده از System. Collections ؛

با استفاده از System. Collections. Generic؛ استفاده از UnityEngine ؛ کلاس عمومی PictureBehavior: MonoBehaviour {public Renderer quadRenderer؛ خصوصی Vector3 requiredPosition؛ void Start () {// نگاه به camera transform. LookAt (Camera.main.transform) ؛ Vector3 სასურველიAngle = جدید Vector3 (0 ، transform.localEulerAngles.y ، 0) ؛ transform.rotation = Quaternion. Euler (სასურველიAngle) ؛ // نیروی به هوا სასურველიPosition = transform.localPosition؛ transform.localPosition += new 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 = new 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؛ عمومی متن buttonText؛ 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 +" & field = 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 (درست) ؛ } List ParseResponse (متن رشته) {List urlList = new list ()؛ string urls = text. Split ('\ n')؛ foreach (خط رشته در آدرس های اینترنتی) {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)؛ }}} return urlList؛ }}

مرحله 7: کارخانه تولید تصویر ما را ایجاد کنید

Inside 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)؛ 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) ؛ } else {pos = camForward + new Vector3 ((picNum٪ 5) * 3 ، 0 ، rowNum * 3.5f) ؛ } post pos؛ }}

مرحله هشتم: ما تمام شدیم

یک gameobject خالی به نام GoogleService ایجاد کنید و اسکریپت "GoogleSerivice" را روی آن قرار دهید.

اسکریپت "PictureFactory" را روی سطح زمین بکشید زیرا همه تصاویر ما به عنوان فرزندان این شیء بازی ایجاد می شوند.

مراجع مربوطه را در بازرس بکشید ، همین کار را برای سرویس google انجام دهید.

آخرین کاری که باید انجام دهیم این است که مطمئن شویم عملکرد "GetPictures" ما فراخوانی می شود. بنابراین اجازه دهید به رویداد "onClick" دکمه خود برویم و آن را از آنجا فراخوانی کنیم.

اکنون می توانیم روی play کلیک کرده و این را آزمایش کنیم. مطمئن شوید که سطح صفحه زمین و دکمه را فعال کنید. یک کلمه بگویید و روی دکمه کلیک کنید تا جستجو در آن متن انجام شود!

اکنون برای دریافت این برنامه بر روی تلفن خود ، آن را وصل کرده و به مسیر File-> Build Settings بروید. ساخت و اجرا را بزنید!

اگر سوالی داشتید در نظرات به من اطلاع دهید!