Давайте сделаем приложение дополненной реальности для МЕМОВ!: 8 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:53

В этом руководстве мы собираемся создать приложение дополненной реальности для 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, если у вас его еще нет, и импортируйте SDK IBM Watson из хранилища ресурсов в Unity. Мы можем проверить это, создав пустой игровой объект, назвав его IBM Watson и добавив пример скрипта потоковой передачи. Этот сценарий уже настроен на запись звука из Unity и отправку его на серверы Watson для обработки.

На данный момент мы просто воспользуемся этим примером сценария, потому что у нас есть еще много дел, но, возможно, в следующий раз мы сможем углубиться в материал Watson, потому что я хотел бы что-то сделать с Vision API.

Шаг 2. Протестируйте текст в речь IBM Watson

Этот скрипт ищет текстовый объект пользовательского интерфейса, поэтому давайте создадим новую кнопку пользовательского интерфейса, которая даст нам нужный текст, мы будем использовать эту кнопку позже. Настройте масштаб холста в соответствии с размером экрана и немного измените размер кнопки. Прикрепите его к нижнему левому краю. Перетащите этот текст в пустой слот. Откройте скрипт и давайте добавим наши учетные данные IBM Watson, найдем, где используется текст «resultsField», и установим для него только «alt.transcript», потому что мы собираемся использовать этот текст для поиска в Google. Теперь, прежде чем мы сможем это проверить, нам нужно динамически изменить размер текста, чтобы все, что мы говорим, поместилось внутри поля. Вернитесь к тексту и установите его как можно лучше. Введите текст, чтобы проверить это. Теперь, когда мы нажимаем кнопку воспроизведения, наши слова будут преобразованы в текст из 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. Перейдите в раздел конфигурации и измените режим трекинга на позиционный. Снимите отметку со всех баз данных, потому что они нам не нужны.

Теперь добавьте искатель плоскости, и нам нужно переопределить его поведение по умолчанию, потому что мы хотим развернуть этап заземления только один раз, поэтому давайте найдем сценарий развертывания этапа один раз на веб-сайте Vuforia. Перенесите этот скрипт в Unity и поместите его в поисковик самолетов, удалив старый скрипт, который был там. Измените режим на интерактивный и убедитесь, что функция «OnInteractiveHitTest» вызывается при этом событии Unity. Пока мы здесь, давайте сделаем кнопку, которую мы сделали ранее, активной, как только мы найдем плоскость земли, установим ее состояние по умолчанию в неактивное. Теперь поместите наземный самолет в сцену и измените его так, чтобы он находился в воздухе, потому что мы хотим, чтобы все изображения парили в воздухе. Перетащите эту наземную плоскость в пустой слот искателя плоскости.

Шаг 5: Создайте префаб изображения

Прежде чем мы начнем собирать все эти части вместе, нам нужно создать готовый игровой объект, который мы можем создавать каждый раз при загрузке изображения. Итак, создайте пустой игровой объект под сценой плоскости земли и назовите его «picPrefab». Создайте четырехугольник как его дочерний элемент и масштабируйте его на 2, поверните его y на 180 градусов так, чтобы прямой вектор родителей, показанный синей стрелкой, находился в передней части четырехугольника.

Создайте новый скрипт под названием «PictureBehavior» и добавьте его в наш picPrefab.

Теперь перетащите этот префаб рисунка в папку с ресурсами, и это то, на что мы собираемся поместить каждое изображение.

Наш сценарий PictureBehavior должен выглядеть так:

using System. Collections;

using System. Collections. Generic; using UnityEngine; открытый класс PictureBehavior: MonoBehaviour {общедоступный Renderer quadRenderer; частный Vector3 desirePosition; void Start () {// смотрим на камеру transform. LookAt (Camera.main.transform); Vector3 желаемыйAngle = новый Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (желаемый угол); // поднять в воздух желаемую позицию = 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-адрес); yield return www; quadRenderer.material.mainTexture = www.texture; }}

Шаг 6. Создайте скрипт для Google API

Теперь перетащим ссылку на четырехъядерный рендерер из нашего «picPrefab».

Нам осталось создать только два сценария, поэтому давайте создадим сценарий C # под названием GoogleService.cs и PictureFactroy.cs.

Внутри "GoogleService" вставьте этот код, который выполняет наш запрос:

using System. Collections;

using System. Collections. Generic; using UnityEngine; с использованием UnityEngine. UI; общедоступный класс GoogleService: MonoBehaviour {общедоступный PictureFactory pictureFactory; общедоступный текст buttonText; частная константная строка API_KEY = "ПОСТАВЬТЕ КЛЮЧ API ЗДЕСЬ !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); строка query = buttonText.text; query = 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); yield return www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } yield return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } Список ParseResponse (текст строки) {Список urlList = new List (); строка urls = text. Split ('\ n'); foreach (строка строки в URL-адресах) {if (line. Contains ("link")) {строка url = line. Substring (12, line. Length-13); // фильтрация по png или jpg не работает в Google, поэтому мы делаем это здесь: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} return urlList; }}

Шаг 7: Создайте нашу фабрику изображений

Внутри PictureFactory.cs поместите этот код для создания всех наших изображений и загрузите их текстуры из URL-адреса.

using System. Collections;

using System. Collections. Generic; using UnityEngine; открытый класс PictureFactory: MonoBehaviour {общедоступный GameObject picPrefab; общедоступный GoogleService googleService; public void DeleteOldPictures () {если (transform.childCount> 0) {foreach (преобразовать дочерний элемент в this.transform) {уничтожить (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; если (picNum <= 5) {pos = camForward + new 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 нашей кнопки и вызовем его оттуда.

Теперь мы можем нажать кнопку воспроизведения и проверить это. Обязательно включите этап заземления и кнопку. Произнесите слово и нажмите кнопку, чтобы выполнить поиск по этому тексту!

Теперь, чтобы установить это приложение на свой телефон, подключите его и перейдите в Файл-> Настройки сборки. Хит построить и запустить!

Дайте мне знать в комментариях, если у вас возникнут вопросы!