дополненная реальность как создать приложение
Как создать дополненную реальность, написав 12 строк кода
Авторизуйтесь
Как создать дополненную реальность, написав 12 строк кода
AR.js — библиотека для создания дополненной реальности. Она объединена с фреймворком A-Frame, который предназначен для разработки VR в вебе. Главный плюс AR.js — очень простой процесс создания AR-приложений. Достаточно импортировать библиотеку и добавить объекты, которые будет видеть пользователь при выполнении заданных условий — например, наведении камеры на маркер или нахождении в указанном месте.
Все ссылки на документацию будут в конце статьи, а пока посмотрим самое интересное — как это работает на практике. Результат будет примерно такой:
Слева — метка, справа — AR-объект, который появляется при наведении камеры / Источник: medium.com/@jerome_etienne
Важно: чтобы посмотреть примеры AR-контента, нужно второе устройство с камерой — например, смартфон. В тексте есть ссылки на CodePen. Откройте их на устройстве с камерой и разрешите браузеру доступ.
Как создать AR-приложение за несколько минут
Импортируем в HTML-код A-Frame и AR.js:
Затем внутри создадим сцену, которая будет охватывать все необходимые нам элементы: маркер, камеру, AR-объект.
Следующий шаг — добавление маркера. Пока используем preset Hiro. Это дефолтный маркер AR.js, его изображение вы найдёте ниже:
Напоследок добавляем камеру. Одна должна быть за пределами маркера. Это нужно для того, чтобы AR-объект появлялся только при наведении камеры на маркер. Если в объективе нет маркера, дополнительный контент не отображается на экране.
Чтобы проверить работоспособность:
Наводим камеру — появляется объект дополненной реальности. Убираем камеру — объект исчезает.
Вместо геометрической фигуры можно вставить другую 3D-модель. Рекомендуемый формат — glTF. Например, в этом пене при наведении камеры на маркер на экране отобразится модель города. Вот полный код:
Дополненная реальность работает в браузере
Ещё одна интересная возможность — вставка AR-текста на английском языке. Его свойствами можно управлять с помощью атрибутов, подробно описанных в документации. Чтобы посмотреть пример, откройте на смартфоне ссылку на этот пен и наведите камеру на маркер Hiro. А вот его полный код:
Как создать свой маркер для AR-объекта
В примерах выше используется стандартный маркер Hiro. Но мы можем создать другое изображение с помощью онлайн-инструмента AR.js Marker Training. Правда, оно должно отвечать целому ряду требований.
Также нужно помнить о контрасте. Если у маркера чёрный фон, то окружающая среда должна быть светлой. В противном случае распознавание не сработает.
В качестве маркера также можно использовать штрих-код. Подробнее об этом можно узнать из статьи разработчика AR.js Николо Карпиньоли (Nicolo Carpignoli).
Что ещё можно сделать с помощью AR.js
Отслеживание маркеров — лишь один из типов дополненной реальности. Библиотеку можно также использовать для создания следующих интерактивов:
❓ Как освоить разработку приложений AR/VR с нуля
Denver 83
Разработка технологий дополненной (AR) и виртуальной реальности (VR) все еще находится в зачаточном состоянии – именно поэтому сейчас идеальное время, чтобы научиться создавать такой контент. Вы можете придумать захватывающие миры и среды с возможностью взаимодействия в трех измерениях. Порог вхождения в эту сферу все еще относительно невысок, однако новичку придется разобраться с 3D-моделированием и сканированием, движками 3D-игр, панорамными фотографиями и видео. Необходимо знание языков C, C++, C# и комплектов для разработки программного обеспечения (SDK). Давайте обо всем по порядку.
Аппаратное обеспечение
Дополненная и виртуальная реальность и вся 3D-разработка в целом требуют производительного оборудования. Если мы посмотрим на требования двух самых популярных платформ VR ( HTC Vive и Oculus Rift ), то увидим их схожесть. Рекомендуемые технические характеристики компьютера на сегодняшний день таковы:
Устройства виртуальной реальности
Устройства VR/AR классифицируются по степени свободы (DOF или Degrees of freedom), т.е. по способу перемещения объекта. Тут есть два варианта: 3-DOF и 6-DOF. Три степени свободы означают, что вы сможете взаимодействовать с виртуальным миром в трех измерениях (в системе координат X, Y, Z) с помощью головного дисплея (HMD), но не сможете двигаться вперед или назад. С шестью степенями свободы двигаться получится во всех шести направлениях.
Эти устройства поддерживают три степени свободы:
А у этих шесть степеней свободы:
Под каждое устройство используются разные SDK и языки программирования, у них разные ограничения, но есть и общие черты:
На этом этапе нужно выбрать одно или несколько устройств для разработки.
Движки 3D-игр и языки программирования
3D-модели
Первое, что вам понадобится для разработки AR/VR – это 3D-модели. Есть два варианта: сделать их самостоятельно или использовать готовые шаблоны. Самостоятельное создание моделей – сложный путь, но в конечном итоге он может оказаться самым лучшим и рентабельным. В этом случае вам придется освоить специальные программы. Например, такие:
В интернете всегда можно найти и шаблонные 3D-модели:
Этот вариант подходит начинающим разработчикам без навыков.
Веб-разработка и виртуальная реальность
Стоит упомянуть два фреймворка:
Дополненная реальность
Проблемы
Первая проблема связана с новизной индустрии AR/VR – существует не так много передовых практик для разработки приложений. Еще один недостаток VR – это укачивание. При длительном использовании устройства у людей может возникнуть дезориентация, вызванная неестественными движениями. Возникает она из-за несоответствия между физическими и визуальными сигналами к действию.
Чтобы стать разработчиком AR/VR, необходимо пройти несколько этапов:
Несколько полезных ссылок для изучения технологий AR/VR:
Выводы
Технологии AR/VR пока сыроваты. Они имеют массу ограничений, да и оборудование стоит недешево. Тем не менее, потенциал виртуальной и дополненной реальности огромен, а большинство специализирующихся в этой области профессиональных разработчиков не имеет большого опыта. К тому же некоторые из приобретенных в процессе освоения модного направления навыков (например, языки C/C++) можно применить и в других областях программирования. Попробовав, вы ничего не теряете. Удачи!
Создание AR-игры с помощью Vuforia
[Под катом есть объёмные GIF]
Дополненная реальность (Augmented reality, AR) внезапно стала очень популярным термином. Благодаря Vuforia разработчики с лёгкостью могут дополнять физический мир цифровым контентом.
Хотя выпуск ARKit и ARCore позволил повысить известность дополненной реальности, уже существовали другие платформы и SDK. Одним из них был Vuforia; а недавно Unity заключила с Vuforia партнёрское соглашение и интегрировала эту AR-платформу в игровой движок Unity.
В этом туториале я создам AR-игру с помощью Vuforia SDK, интегрированного с движком Unity. В процессе работы я расскажу о следующих ключевых компонентах:
Примечание: в этом туториале по Vuforia подразумевается, что вы уже знаете основы разработки в Unity. Если вы новичок в Unity, то изучите отличный туториал Getting Started In Unity.
Разработка AR-игр в Unity
На рынке есть множество AR-устройств, но основной целью AR-приложений является мобильное пространство таких платформ, как iOS и Android. Именно здесь удобно сочетание Unity и Vuforia — в кросс-платформенной разработке. Ещё один плюс заключается в том, что приложение можно тестировать в редакторе. Для этого всего лишь нужна веб-камера!
Перед началом работы скачайте последнюю версию Unity и установите компонент Vuforia Augmented Reality Support. Если вы пользуетесь Unity Hub, то можете добавить этот компонент в уже установленную версию Unity.
Приступаем к работе
Теперь, когда у вас есть Unity, Vuforia и веб-камера, необходимо скачать пример проекта (отсюда).
После скачивания извлеките файлы и откройте в Unity проект How to Make an AR Game Using Vuforia Starter. Когда проект загрузится, откройте сцену Starter из папки Scenes и посмотрите на окно Hierarchy:
Просмотрев состав проекта, нажмите на кнопку Play в редакторе, чтобы заполнить заказ в нашей игре про пиццу.
Отлично, мы можем поиграть с пиццей, но наша настоящая задача заключается в том, чтобы превратить это в AR-игру.
Примечание: ассеты UI для этого туториала скачаны с shareicon.net
Знакомимся с шеф-поваром Vuforia
Чтобы сделать это, нам нужно заставить виртуальную пиццу отображаться на изображении-трекере, которое мы держим в реальном мире. После добавления в заказ начинки вы сможете физически «подать» пиццу, вынеся её за пределы видимости камеры…
Но всему своё время. Для начала нужно заменить Main Camera на AR Camera. Удалите из сцены Main Camera, а затем нажмите правой клавишей мыши в Hierarchy.
Нажмите Import и дождитесь, пока Vuforia Package импортируется в проект, при этом добавится довольно много файлов.
Можно не обращать внимания на новые файлы в папках Editor и Streaming Assets. Это просто шаблоны; нужные нам файлы включены в проект.
В папке Vuforia хранятся все префабы и скрипты, используемые платформой Vuforia, которую мы будем применять.
Стоит также упомянуть о файле VuforiaConfiguration внутри папки Resources. Этот файл добавлен, потому что для разработки приложения Vuforia необходима лицензия. Однако при желании можно получить бесплатную лицензию разработчика на Vuforia Developer Portal.
Примечание: если в вашем проекте нет лицензионного ключа приложения (App License Key), то его можно найти в файле README. Скопируйте строку в поле инспектора файла VuforiaConfiguration.
Теперь, когда у нас в сцене есть AR Camera, осталось сделать только одно — включить дополненную реальность!
Нажмите в редакторе Play и скажите «привет» самому себе!
Примечание: если вы нажали на play и появился экран «Vuforia Initialization Failed», то попробуйте перезапустить Unity. Это случайный баг, который появляется только на некоторых системах.
Введение в распознавание образов
Любоваться на себя — это, конечно, здорово, но разве мы не собирались делать игру про пиццу?
По умолчанию Vuforia работает с распознаванием образов (Image Recognition). Распознавание образов, также называемое распознаванием трекеров (Tracker Recognition) или трекингом изображений (Image Tracking) — это процесс, при котором камера распознаёт заранее заданное изображение и знает, что с ним делать, например, выполнять поверх него рендеринг какого-то контента. Лучше всего это работает тогда, когда изображение трекинга каким-то образом соответствует контенту, например, планы этажей для рендеринга зданий хорошо работают поверх изображения со зданием.
Как это работает: очень важно хорошо подобрать качественное изображение для трекинга. При использовании Vuforia можно загрузить выбранное изображение на портал разработчика, чтобы проверить качество его отслеживания, и это нужно делать до того, как начинать разработку. Портал разработчика присваивает изображению рейтинг, но, что более важно, показывает его «характерные точки». Чтобы трекер был хорошим, эти характерные точки (feature points) должны быть густо распределены по изображению и в них не должно присутствовать повторяющихся паттернов. Во время выполнения камера ищет эти характерные точки, чтобы вычислить своё расположение относительно изображения.
Для этого туториала изображение и база данных трекинга уже настроены. Изображение пиццы находится в папке Materials, которую вы скачали ранее. В идеале стоит его распечатать. Или же его можно открыть на каком-нибудь цифровом устройстве, а затем «показать» его камере. Вот как выглядит изображение в Vuforia Tracker Database:
Как видите, характерные точки хорошо распределены. К тому же это пицца, что удобно!
Добавление в сцену Image Targets
Теперь у нас в сцене есть Image Target GameObject. Посмотрите на этот target в инспекторе, и вы увидите несколько компонентов. Самыми важными являются Image Target Behavior и Default Trackable Event Handler. Второй мы подробнее рассмотрим позже, а пока убедимся, что опции раскрывающегося списка Image Target Behavior настроены следующим образом:
Помните добавленные ранее к проекту файлы, которые я попросил игнорировать? Вы их нашли! Vuforia добавляет несколько примеров баз данных Image Target, чтобы мы могли начать разработку и использовать их для примеров, например того, которым мы пользуемся, уже добавленного в материалы.
Примечание: трекер Pizza — единственный image target в вашей базе данных; однако в одной базе данных могут быть сотни изображений. Кроме того, в одном приложении может быть несколько баз данных.
Теперь, когда мы настроили в сцене AR Camera и Image Tracker, у нас есть всё необходимое для работы дополненной реальности! Нажмите в Editor на кнопку Play и поставьте распечатанное изображение напротив камеры.
У нас появилась пицца!
Прикрепление Game Objects к Trackers в качестве дочерних объектов
Пицца немного маленькая, но она крепко приклеилась к изображению-трекеру. Можно также заметить, что если убрать отслеживаемое изображение, то пицца останется висеть в воздухе.
Дело в том, что пока веб-камера может видеть изображение-трекер, Vuforia способен обновлять позицию AR Camera в сцене. Если хотите увидеть это в действии, настройте Unity Editor таким образом, чтобы были одновременно видны окна Game и Scene, затем выберите AR Camera и нажмите Play.
Как же заставить пиццу вести себя правильно, когда работает камера? Выберите ImageTarget в Hierarchy. Вы увидите, что его масштаб по каждой оси имеет значение 10. Этим управляет компонент Image Target Behaviour. В разделе advanced можно увидеть, что параметр Width имеет значение 10. Он был задан при загрузке изображения на сайт Vuforia Developer.
Подсказка: вы не понимаете, почему Image Target в этом туториале была задана ширина 10? Когда размер не является существенным фактором для приложения, то установка значения 10 обеспечивает камере повышенную вероятность трекинга, при этом сохраняя хорошую позицию для контента между ближней и дальней плоскостями AR Camera. Однако иногда нужно, чтобы дополненная реальность имела определённый масштаб. В таком случае нужно задать размер изображения-трекера таким образом, чтобы он соответствовал физическим измерениям при загрузке на портал разработчика.
Снова нажмите Play и вы увидите, что пицца находится поверх изображения, а также исчезает, когда изображение пропадает из кадра.
Изучение DefaultTrackableEventHandler
Это поведение берётся из DefaultTrackableEventHandler объекта ImageTarget. Откройте скрипт и просмотрите его.
Скрипт хорошо откомментирован, но стоит обратить внимание на некоторые аспекты:
Переварите пока эту информацию.
Создание собственных действий трекинга
Настало время сделать что-нибудь с этой информацией!
Удалите из ImageTarget компонент DefaultTrackableEventHandler. Затем добавьте PizzaTrackableEventHandler, который можно найти в папке Scripts. Затем откройте PizzaTrackableEventHandler. Это клон DefaultTrackableEventHandler, но код в OnTrackingFound и в OnTrackingLost удалён — эту задачу предстоит решить вам!
Включение и отключение компонентов Renderer пригождается почти в каждом AR-приложении, поэтому вернём этот код. Если вы застрянете, то можно скопировать его из DefaultTrackableEventHandler или найти под спойлером ниже.
Мы готовы превратить этот проект в игру в дополненной реальности!
Посмотрите на UI и найдите кнопку, которую нужно нажать игроку, чтобы завершить свою пиццу.
В начале PizzaTrackableEventHandler добавим UnityEvent для вызова, когда Image теряет трекинг.
А теперь вызовем событие в методе OnTrackingLost:
Это делает PizzaTrackableEventHandler более гибким, потому что теперь мы можем задавать выполнение любых действий при потере трекинга. Сохраните PizzaTrackableEventHandler, вернитесь в Unity Editor и дождитесь завершения компиляции. Когда она закончится, сделайте так, чтобы GameManager.CompleteOrder() вызывался при потере трекинга трекера пиццы. Наконец, отключите или удалите CompleteOrderButton в UI.
Сохраните сцену, нажмите Play и подайте пиццу!
Куда двигаться дальше
Поздравляю, вы завершили туториал!
Пример проекта можно скачать отсюда.
Дополнительную информацию о разработке с помощью Vuforia в Unity можно изучить в Vuforia Developer Library или в руководстве Unity.
Не забудьте настроить для себя аккаунт разработчика на портале Vuforia. Можете также попробовать загрузить туда несколько разных трекеров, чтобы проверить, как они отслеживаются.
Для более подробного изучения прочитайте о виртуальных кнопках. На веб-сате Vuforia есть примеры материалов. Проверьте, сможете ли вы создать эти виртуальные кнопки для замены UI в игре про пиццу.
Практическое руководство по разработке AR — продукта. Выбор SDK и стоимость
От студии Black VR (Часть 2)
Практическое руководство от команды студии разработки дополненной и виртуальной реальности для тех, кто задумался о создании своего продукта с AR. Техническая информация поможет вам определиться с продуктом и технологиями для его разработки.
Вопрос, который задают нам клиенты чаще всего — «Что входит в создание приложения дополненной реальности?» Это очень важный вопрос, который требует некоторого обучения со стороны заказчика. Это необходимо для того, чтобы вы, как клиент смогли понять сколько денег и времени потребуется, как строится работа, с чего начать и как в результате получить максимальную выгоду от продукта. Накопленный нами опыт за 5 с лишним лет работы на рынке разработки интерактивных технологий позволяет создать нам краткое руководство к действию.
➕ В предыдущей 1 части мы рассказывали о факторах формирования стоимости подобных приложений, во сколько может обойтись с нуля разработка AR на российском рынке с примерами реальных кейсов, а также немного сравнили стоимость часа разработки в других странах.
В последующей серии частей мы подробнее обсудим во сколько может обойтись стоимость 3d-моделирования, анимации, кода и др., далее обсудим особенности работы с маркет-плейсами и что в итоге должно быть отражено в ТЗ.
Вот несколько вещей, которые следует учитывать при создании AR.
Что дальше? Мы познакомим вас со значительной частью самых современных инструментов для работы с дополненной реальностью, которая обеспечивает весь процесс разработки AR, включая рендеринг контента и наложение виртуальных объектов на реальный мир, поэтому важно сразу выбрать платформу разработки AR на основе желаемого результата будущего приложения (коммерция, игры, демонстрация и т. д.), а также списка функций приложения.
Чтобы проанализировать реальный мир и построить виртуальный объект, задав его координаты относительно плоскости или 2d изображения нам понадобятся специальные средства для разработки дополненной реальности, такие — как SDK.
Software Development Kit — набор средств разработки, это как раз то, о чем мы с вами говорим.
Если вы полны решимости использовать эту технологию и создать мобильное приложение с дополненной реальностью в 2021 году, вам понадобится соответствующий комплект для разработки программного обеспечения AR (SDK).
Все представители SDK упрощают разработку за счет повышения уровня абстракции и предоставления понятного API. При этом каждый такой фреймворк предназначен для определенной отрасли, например, игровой. У этого подхода есть преимущество — баланс между скоростью разработки и действительно высокой гибкостью.
Мы решили помочь, рассказав вам, какие SDK доступны на рынке и на какие критерии следует обращать внимание при выборе программного обеспечения для создания приложений дополненной реальности. Они имеют свои сильные стороны, как и слабые, а иногда и вовсе приходится работать сразу с несколькими, чтобы достичь определенных результатов.
Выбирая лучшее программное обеспечение для создания приложений дополненной реальности, вы должны принять во внимание, какой тип дополненной реальности потребуется вашему приложению, подробнее с примерами о типах мы говорили тут.
Деньги. Это то, что в первую очередь должен учитывать любой предприниматель. Поэтому вам следует проверить, какие виды лицензий предлагает каждый SDK дополненной реальности. Обычно бывают бесплатные и коммерческие лицензии. Излишне говорить, что бесплатные функции обычно довольно ограничены, поэтому для создания многофункционального мобильного AR — приложения требуется коммерческая лицензия.
Существует также программное обеспечение дополненной реальности с открытым исходным кодом, в которое разработчики могут вносить свой вклад и добавлять дополнительные функции.
Выбирая SDK дополненной реальности, вы должны проверить, с какими платформами он работает. Конечно, почти любой SDK поддерживает как Android, так и iOS (две наиболее широко используемые мобильные операционные системы).
Но что, если вы решите разработать приложение для Windows Mobile? Некоторые пакеты AR SDK совместимы с универсальной платформой Windows (UWP), которая поможет вам создавать приложения AR для смартфонов и компьютеров под управлением Windows. Существуют также платформы дополненной реальности, которые позволяют разрабатывать приложения AR для macOS. Даже если вам не нужны эти функции сейчас, они могут понадобиться когда-нибудь в будущем.
Сегодня большинство приложений AR работают через смартфоны, что означает, что пользователи могут видеть виртуальные объекты на экранах своих гаджетов. Однако, есть другой способ наложить объекты AR прямо на реальный мир — умные очки. В отличие от смартфонов, умные очки позволяют использовать дополненную реальность без помощи рук. Поскольку умные очки становятся все более популярными (вспомните Microsoft HoloLens, Vuzix Blade 3000, Epson Moverio BT — 300 и многие другие), возможность создавать мобильные приложения AR, совместимые с этими гаджетами, безусловно, является преимуществом.
Если вы хотите создать мобильное приложение AR, способное распознавать множество разных маркеров, вам следует проверить, поддерживает ли комплект разработчика дополненной реальности распознавание облака. Благодаря этой функции маркеры хранятся в облаке, а приложение не требует много места на мобильном устройстве.
Другой важный аспект — количество распознаваемых маркеров. Некоторые комплекты для разработки дополненной реальности поддерживают 100 маркеров, но другие могут распознавать тысячи из них. Излишне говорить, что чем больше маркеров программа разработки AR сможет распознать, тем более продвинутые возможности AR вы сможете создать.
Unity — один из самых продвинутых игровых движков в мире. Обычно он используется для создания игр, компьютеров и консолей, но Unity также поддерживает приложения с дополненной реальностью. Благодаря Unity можно создавать действительно потрясающую графику, поэтому проверьте, совместим ли SDK с Unity.
Обратной стороной использования Unity является его ресурсоемкость, поэтому многие компании предпочитают разрабатывать нативные приложения для iOS и Android.