Нека направим приложение за разширена реалност за MEMES !: 8 стъпки

2025 Автор: John Day | [email protected]. Последно модифициран: 2025-01-23 14:36

В тази инструкция ще направим приложение за разширена реалност за 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 акаунт и отидете до организации за леене на облаци и създайте ново пространство. Сега отидете на таблото си за управление и щракнете, за да прегледате услугите, добавете речта към текстовата услуга, защото това ще използваме. Изберете вашия регион, организация и пространство и създайте проекта. Сега ще видите вашите идентификационни данни за API в долната част.

Изтеглете Unity, ако още нямате такъв и импортирайте IBM Watson SDK от хранилището на активи в Unity. Можем да изпробваме това, като създадем празен игрален обект и го наречем IBM Watson и добавим примерния поточен скрипт. Този скрипт вече е настроен да записва аудио от единство и да го изпраща до сървърите на Watson за обработка.

Засега просто ще използваме този примерен скрипт, защото имаме още много работа, но може би следващия път можем да навлезем по -задълбочено в нещата на Watson, защото бих искал да направя нещо с Vision API.

Стъпка 2: Тествайте IBM Watson Text to Speech

Този скрипт търси текстов обект на потребителския интерфейс, така че нека създадем нов бутон на потребителския интерфейс, което ще ни даде текста, от който се нуждаем, ще използваме бутона по -късно. Задайте мащаба на платното с размера на екрана и преоразмерете малко бутона. Закрепете го в долния ляв ъгъл. Плъзнете този текст в празния слот. Отворете скрипта и ви позволява да добавите нашите идентификационни данни на IBM Watson, да намерите къде се използва текстът „resultsField“и да го настроите само на „alt.transcript“, защото ще използваме този текст за търсене в Google. Сега, преди да можем да тестваме това, трябва да направим самия размер на текста динамично, така че каквото и да кажем, ще се побере в кутията. Върнете се към текста и го настройте най -добре. Въведете текст, за да го изпробвате. Сега, когато щракнем върху възпроизвеждане, думите ни ще бъдат транскрибирани в текст от API на Watson Text to Speech API.

Стъпка 3: Настройте API на Google за персонализирано търсене

Следващото парче, което трябва да направим, е да настроим API на Google за персонализирано търсене, което да се използва в Unity. На високо ниво ще отправим HTTP заявка от Unity до сървърите на Google, което ще ни върне отговор във формат JSON.

Затова отидете на страницата за настройка на Google Custom Search JSON API, щракнете, за да получите 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 веднъж на уебсайта на Vuforia. Вкарайте този скрипт в Unity и го поставете на самолета, като премахнете стария скрипт, който беше там. Променете режима на интерактивен и се уверете, че функцията "OnInteractiveHitTest" ще бъде извикана при това Unity събитие. Докато сме тук, нека настроим бутона, който направихме по -рано, на активен, след като намерим земната равнина, задаваме състоянието му по подразбиране на неактивно. Сега поставете наземна равнина в сцената и я променете на въздух, защото искаме всички снимки да се носят във въздуха. Плъзнете тази заземена равнина в празния слот на самолета.

Стъпка 5: Създайте сглобяема картина

Преди да започнем да сглобяваме всички тези парчета, трябва да създадем сглобяем игрален обект, който можем да създаваме при всяко зареждане на картина. Затова създайте празен игрален обект под сцената на земната равнина и го наречете "picPrefab". Създайте четириъгълник като дете на това и го мащабирайте с 2, завъртете y на 180 градуса, така че векторът на родителите напред, който е показан като синя стрелка, е предната част на четириъгълника.

Създайте нов скрипт, наречен "PictureBehavior" и го добавете към нашия picPrefab.

Сега плъзнете тази сглобяема снимка в папката с активи и това е, върху което ще поставим всяка снимка.

Нашият скрипт "PictureBehavior" трябва да изглежда така:

използване на System. Collections;

използване на System. Collections. Generic; използване на UnityEngine; PictureBehavior от публичен клас: MonoBehaviour {публичен Renderer quadRenderer; частен Vector3 желанПозиция; void Start () {// погледнете камерата transform. LookAt (Camera.main.transform); Vector3 desireAngle = нов Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (желан ъгъл); // сила във въздуха желанPosition = transform.localPosition; transform.localPosition += нов Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, desirePosition, Time.deltaTime * 4f); } public void LoadImage (низ от URL) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (низов URL) {WWW www = нов WWW (url); възвръщаемост на доходността www; 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; публичен Text buttonText; private const string API_KEY = "ПОСТАВЕТЕ API КЛЮЧ ТУК !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); низова заявка = buttonText.text; заявка = WWW. EscapeURL (заявка + "меми"); // изтриване на стари изображения pictureFactory. DeleteOldPictures (); // запазваме вектора на камерата напред, за да можем да се движим, докато се поставят обекти Vector3 cameraForward = Camera.main.transform.forward; // можем да получим само 10 резултата наведнъж, така че трябва да преминем през цикъла и да запазим напредъка си, променяйки началния номер след всеки 10 int rowNum = 1; for (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); rowNum ++; } yield return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (вярно); } List ParseResponse (низ от текст) {List urlList = нов List (); string urls = text. Split ('\ n'); foreach (низ от ред в URL адреси) {if (line. Contains ("link")) {url 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; 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 + нов Vector3 (picNum * -3, 0, rowNum * 3.5f); } else {pos = camForward + new Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } return pos; }}

Стъпка 8: Готови сме

Създайте празен игрови обект, наречен GoogleService, и поставете скрипта „GoogleSerivice“върху него.

Плъзнете скрипта "PictureFactory" на сцената на земята, защото всички наши снимки ще бъдат създадени като деца на този обект на игра.

Плъзнете съответните препратки в инспектора, направете същото за услугата google.

Последното нещо, което трябва да направим, е да се уверим, че нашата функция "GetPictures" ще бъде извикана. Така че нека да преминем към събитието „onClick“на нашия бутон и да го извикаме от там.

Сега можем да кликнете върху игра и да тествате това. Уверете се, че сте активирали етапа на равнината на земята и бутона. Кажете дума и щракнете върху бутона, за да извършите търсенето по този текст!

Сега, за да получите това приложение на телефона си, включете го и отидете на File-> Build Settings. Натиснете изграждане и бягане!

Кажете ми в коментарите, ако имате въпроси!