Дополненная реальность как сделать самому

Дополненная реальность как сделать самому

В этом гайде вы узнаете, как добавить 3D-модели в реальный мир. Библиотека ARCore от Google позволяет добавлять на 2D-изображение (картинка или видео) полноценные 3D-модели.

Вам необходимо предоставить системе некое опорное изображение, которое ARCore будет искать в реальном мире, чтобы на его основе добавить на изображение 3D-модель. Дополненная реальность уже широко используются, например, в книгах, газетах, журналах и т.д.

Прежде чем погрузиться в этот туториал, вам стоит ознакомиться с предыдущими двумя статьями на эту тему, которые познакомят вас с основными AR-терминами:

Что такое изображения дополненной реальности?

Согласно документации для разработчиков, изображения дополненной реальности в ARCore позволяют создавать приложения дополненной реальности, которые могут «оживлять» 2D-изображения, например, плакаты или упаковки продуктов.

Вы загружаете в ARCore какие-то опорные изображения, а он вам затем сообщает об их обнаружении во время AR-сессии, например во время съёмки видео. И эта информация используется для расположения 3D-модели на 2D-изображении.

Ограничения использования изображений дополненной реальности

Вот некоторые ограничения, с которыми вы можете столкнуться при использовании изображений дополненной реальности:

  • ARCore может обрабатывать только до 20 опорных изображений одновременно.
  • Физическая плоскость в реальном мире должна быть плоской, а её площадь должна быть больше, чем 15 см х 15 см.
  • ARCore не может отслеживать движущиеся изображения и объекты.

Выбор подходящего опорного изображения

Вот несколько советов для выбора хорошего опорного изображения для ARCore:

  • Изображения дополненной реальности поддерживают форматы PNG, JPEG и JPG.
  • Неважно, цветное будет изображение или чёрно-белое, главное, чтобы оно было высокой контрастности.
  • Разрешение изображения должно быть не менее 300 х 300 пикселей.
  • Использование изображений с высоким разрешением не означает улучшение производительности.
  • Следует избегать изображений с повторяющимися паттернами (например, узорами или горошком).
  • Используйте инструмент arcoreimg, чтобы оценить, насколько подходит ваше изображение для работы. Рекомендуется оценка не менее 75 баллов.

Как использовать инструмент arcoreimg:

  • Загрузите ARCore SDK для Android по этой ссылке.
  • Распакуйте zip-содержимое файла в любое место.
  • В извлеченной папке перейдите по пути tools > arcoreimg > windows (даже если у вас Linux или macOS).
  • Откройте командную строку в этой директории.
  • И введите эту команду:

Замените dog.png на полный путь к вашему изображению.

Начало работы с приложением дополненной реальности

Теперь, когда вы ознакомились с ARCore и выбрали хорошее изображение с оценкой 75+, пришло время приступить к написанию кода приложения.

Создание фрагмента

Мы создадим фрагмент и добавим его в нашу Activity. Создаём класс с именем CustomArFragment и наследуем его от ArFragment . Вот код для CustomArFragment :

Прежде всего, мы отключаем обнаружение плоскости. Делая это, мы убираем с экрана значок руки, который появляется сразу после инициализации фрагмента и говорит пользователю о необходимости перемещения своего смартфона для поиска плоскости. Нам это больше не нужно, поскольку мы обнаруживаем не случайные плоскости, а конкретное изображение.

Затем мы устанавливаем режим обновления для сессии LATEST_CAMERA_IMAGE . Это гарантирует, что мы будем узнавать об обновлениях изображения всякий раз, когда обновится кадр камеры.

Настройка базы данных изображений

Добавьте выбранное опорное изображение (которое вы хотите обнаружить в физическом мире) в папку assets (создайте её, если её ещё нет). Теперь мы можем добавлять изображения в нашу базу данных.

Мы создадим эту базу данных, как только будет создан фрагмент. В логи мы выведем результат этой операции:

Вот как будет выглядеть CustomArFragment :

Вскоре мы добавим метод setupAugmentedImagesDb в MainActivity . Теперь давайте добавим CustomArFragment в наш activity_main.xml :

Добавление изображения в базу данных

Сейчас мы настроим нашу базу данных изображений, обнаружим опорное изображение в реальном мире и добавим 3D-модель на изображение.

Давайте начнём с настройки нашей базы данных. Создайте публичный метод setupAugmentedImagesDb в классе MainActivity :

Мы также создали метод loadAugmentedImage , который загружает изображение из папки ресурсов и возвращает растровое изображение.

В setupAugmentedImagesDb мы сначала инициализируем нашу базу данных для текущей сессии, а затем добавляем изображение в эту базу данных. Мы назвали наше изображение tiger. Затем мы устанавливаем эту базу данных в конфиг и возвращаем true , сообщая о том, что изображение успешно добавлено.

Читайте также:  Xml viewer online на русском

Обнаружение опорных изображений в реальном мире

Теперь мы начнем обнаруживать наши опорные изображения в реальном мире. Для этого мы создадим слушателя, который будет вызываться каждый раз при обновлении видеокадра, и этот кадр будет проанализирован на предмет наличия там опорного изображения.

Добавьте эту строку в метод onCreate() в MainActivity :

Теперь добавьте метод onUpdateFrame в MainActivity :

В первой строке мы получаем сам кадр. Кадр можно представить, как обычный скриншот из видео. Если вы знакомы с тем, как работает видео, вы знаете, что это просто набор изображений, которые очень быстро сменяют друг друга, создавая впечатление чего-то движущегося. Мы просто берём одну из этих картинок.

После того, как мы получили кадр, мы анализируем его на предмет наличия на нём нашего опорного изображения. Мы берём список всех элементов, отслеженных ARCore, используя frame.getUpdatedTrackables . Затем мы перебираем её и проверяем, присутствует ли в кадре наше изображение tiger.

Если совпадение найдено, то мы просто берём и размещаем 3D-модель поверх обнаруженного изображения.

Примечание. Флаг shouldAddModel используется для того, чтобы мы добавляли 3D-модель только один раз.

Размещение 3D-модели над опорным изображением

Теперь, когда мы нашли наше опорное изображение в реальном мире, мы можем добавлять 3D-модель поверх него. Добавим методы placeObject и addNodeToScene :

  • placeObject : этот метод используется для построения отрендеренного объекта по заданному Uri . Как только рендеринг завершён, объект передаётся в метод addNodeToScene , где объект прикрепляется к узлу, и этот узел помещается на сцену.
  • addNodeToScene : этот метод создаёт узел из полученного якоря, создаёт другой узел, к которому присоединяется визуализируемый объект, затем добавляет этот узел в якорный узел и помещает его на сцену.

Вот так теперь выглядит MainActivity :

Теперь запустите ваше приложение. Вы должны увидеть экран, как показано ниже. Подвигайте телефон немного над опорным объектом. И как только ARCore обнаружит опорное изображение в реальном мире, добавит на него вашу 3D-модель.

Все объекты окружающего нас мира по-своему уникальны. Уникальность объектов живой и неживой природы и является основой всех сервисов по созданию эффектов дополненной реальности. За свою жизнь хотя бы раз каждый человек видел фильм (фантастический или боевик), в котором мы могли наблюдать за действием “из глаз” главного героя, возможно это был даже робот. На экране были отлично различимы объекты из реальной жизни, цвета могли быть чуть изменены, но это не главное. На фоне реальных объектов нашего окружения дополнительно появлялась полезная по сюжету информация, картинки, схемы помещений, статистические данные и многое другое.

Задача объяснить принцип действия технологии (базовый механизм) решается в два счета. Первым шагом — создается образ объекта в сети (загружается на сервера). Как правило, этим образом является просто изображение (jpg, png или даже pdf). Второй шаг — это наложение дополнительной информации на объект, которая будет видна только на экране устройства, через камеру которого Вы будете смотреть на первоначальный объект. Вся информация будет сначала загружена на сервера компании, чьим инструментом создания эффектов дополненной реальности мы пользуемся. А после — информация будет загружаться на десятки, сотки, тысячи и миллионы других устройств пользователей, которые захотят посмотреть на объект в т.ч. в виртуальном мире.

Начнём с небольшого промо-ролика сервиса по созданию дополненной реальности Layar:

Подробнее о многих сферах, где технологии дополненной реальности применяются уже очень давно можно прочитать на странице Википедии, которая посвящена этим технологиям.

Перенесемся от теории к практике, это кейс стоит одним из последних в курсе, поэтому будучи опытным пользователем не будем долго расписывать все свойства и отличительные черты приложений и сервисов, позволяющих создавать Дополненные реальности, а сразу перейдём к созданию продуктов.

В ходе модуля будут рассмотрены два сервиса по созданию эффектов дополненной реальности. Первый сервис — Layar, его отличительной особенностью является возможность создания Дополненной реальности, которая будет видна всем пользователям по всему миру, при условии наличия на их устройствах gриложения для мобильных устройств.

Приложение всегда можно найти (по одноименному за просу в магазинах App Store, Google Play или др.), либо перейдя по прямым сссылкам с сайта сервиса. Первый шаг — откроем сайт Layar в браузере, после открытия сайта — можно сразу перейти в меню Продукты — Приложения Layar, для того, чтобы посмотреть, где найти ссылки на приложения для Мобильных платформ:

Читайте также:  Как запустить сири на айфоне

Любые эффекты, которые мы создадим в этом сервисе будут видны только через приложения, которые необходимо скачать и установить на Ваши устройства, так что смелее. Скачивайте и переходите к следующему шагу инструкции.

Приложение скачано и установлено — Вы большие молодцы! Теперь временно отложим телефон или планшет и вернемся к экрану компьютера, где нам предстоит зарегистрироваться на сервисе. Для начала — можно ознакомиться с ценовой политикой сервиса. Как мы видим, существует и бесплатная возможность пользоваться сервисом, но некоторые параметры и функционал будут урезаны. Пользователи, которые выберут бесплатную версию в качестве основной — не смогут создавать широко-кастомизируемые кнопки, настраивать из под себя, использовать гео-метки для дополненной реальности.

Перейдём к регистрации на ресурсе, для этого нажмём Login в правом верхнем углу, а после Sing Up:

Теперь Вам предстоит заполнить все необходимые поля, для завершения регистрации и ещё раз нажать Sing Up:

После успешного завершения этапа регистрации — переходите на предыдущий экран и в этот раз после Login — можно смело указывать данные, которые Вы указали при регистрации и входить.

Мы оказались на странице создания «Кампаний» — так для этого сервиса называются продукты, которые Вы создаёте для использования эффектов Дополненной реальности (если интересно: это связано с тем, что продукт изначально позиционируется как маркетинговый инструмент продвижения, т..е Layar это чаще b2b-сервис для продвижения других продуктов разных компаний, чем для создания физическими лицами массовыми пользователями своих кампаний).

Область экрана разделена на две части. Слева — все созданные ранее продукты, а также кнопка для создания новой «Кампании». Справа — информационный блок, в который выводятся полезная информация о том, как работать в сервисе, обучающие видео, ссылки на другие ресурсы в сети.

Создадим новую кампанию. На скриншоте ниже кампания называется «Мой новый проект», тип «Другое (Other)». После небоходимо подтвердить создание, нажмём на кнопку «Create campaing».

Экран, который мы видим — немного изменится. Теперь это будут три вертикальные блока. Слева — «кадры», аналогично тому, как они выглядят в сервисах по созданию презентаций. Центральный блок — загрузка новых объектов. А справа — возможные варианты эффектов дополненной реальности, которые могут быть наложены на наш продукт. В качестве объектов, на котоые будут добавлены эффекты дополненной реальности — могут быть задействованы фотографии в форматах jpg или png, это могут быть pdf-файлы (хитрость: можно сохранить презентацию в формате pdf, а после загрузить её одним файлом, после на некоторые кадры из презентации появится возможность наложить эффекты дополненной реальности).

Последний вариант загрузки объектов — zip-архив. Если на компьютере есть папка (либо её можно просто сделать) с pdf-файлами или изображениями или микс обоих вариантов, такой архив также можно загрузить в Layar.

После загрузки файлов — они будут отображены как кадры, которые мы увидим в левой панели инструментов. В рассматириваемом примере была загружена фотография логотипа «Science-In-Box: Нанотехнологии в чемодане».

Теперь обратимся к правому меню. В нём расположены (в т.ч. разбиты по категориям) объекты и эффекты, которые могут быть использованы для создания дополненной реальности. Изучите их подробнее.

Возьмём один из самых привлекательных эффектов — наложение видео на исходный объект. Для этого нажмём и перетянем выбранный эффект на центральное поле, как показано на рисунке ниже:

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

В рассматриваемом примере был выбран видео-ролик с канала Школьной лиги РОСНАНО, рассказывающий подробнее о Наночемодане. Ролик создан с применением эффекта видео-скрайбинга в ресурсе Sparkol Videoscribe. Для получение ссылки на ролик на YouTube необходимо нажать «Поделиться», а после перейти в текстовое поле ниже, откуда скопировать появившуюся ссылку.

Читайте также:  Какая версия adobe premiere pro лучше

Теперь вставляем адрес ссылки в элемент Layar, который мы только что добавили на наш загруженный объект. Добавляем название, изменяем размеры и эффекты появления элемента на экране и нажимаем «Save».

Для того, чтобы убедиться, что наш эффект успешно был загружен и сохранён — возвращаемся на мобильное устройство, на которое в начале мы загрузили и установили мобильное приложение Layar. Нажимаем настройки, осуществляем вход под тем же логином и паролем, что используется на сайте, для создания нашей кампании.

Теперь самое главное:

1) В браузере нажимаем кнопку TEST, как показано на рисунке ниже. Так Вы перейдёте в тестовый режим.

2) На экране мобильного гаджета наводим на экран компьютера.

3) Нажимаем на экран один раз, когда камера сфокусировалась на объекте — перед нами должен появится объект дополненной реальности, который мы наложили в предыдущие шаги (важный момент: чем тяжоловеснее был загружен контент: рисунок или видео, и, чем медленнее канал, который использует устройство для подключение к интернету, тем дольше может идти анализ)

4) Поздравляем — теперь Вы можете попробовать навести гаджет на реальный предмет. В нашем случае — это баннер с изображением логопита. Результат — мы видим добавленный нами ролик на экране устройства.


Помимо Layar, существует также популярный сервис Aurasma

Кстати, видео о том, как этот сервис можно использовать в образовании (на английском языке)

Во многом он похож на Layar, поэтому мы не станем подробно рассказывать о работе с ним.

Однако там есть ряд интересных особенностей, которые делают его привлекательным для образования. Например, возможность создания каналов, на которые можно подписываться для отображения объектов виртуальной реальности, при этом доступный функционал при создании таких объектов достаточно широкий даже в бесплатных версиях.

Задание

Выполните одно из двух предложенных заданий:

1. Создайте несколько (минимум 3) кадра в программе Layar (можно использовать программу Aurasma) c наложением эффектов дополненной реальности.

Если Вы используете сервис Layar, то сделайте скриншоты экрана Вашего устройства в момент появления объекта дополненной реальности в тестовом режиме. Процедура создания скриншота отличается в зависимости от платформы (iOS, Android, Windows Phone) и в зависимости от конкретной модели. Для устройств фирмы Apple это кнопка Home+кнопка выключения экрана; про устройства других производителей ищите информацию в интернете по запросу «Как сделать скриншот на *название модели*»

Если Вы используете сервис Aurasma, Вам следует прислать название созданного канала сервисе Aurasma или ссылку на канал.

Трудоёмкость — 3 часа, 4 зачётные единицы

2. Пришлите отчёт (минимум 4 фотографии и до 2500 знаков текста) о проведении образовательного события (урока, квеста и т.п.) с применением дополненной реальности. Загрузите отчёт через поле «Отправить работу» на главной странице курса.

Трудоёмкость — 12-18 часов, 8 зачётных единиц

Конкурсно-образовательная платформа проекта "Школьная лига РОСНАНО"

Brands that ROAR

What is ROAR AR

Augmented Reality Content Management platform that overlays real world objects with digitally immersive information. With ROAR you can augment real world with videos, sound, 2d and 3d graphic models, animations, gamification and much more.

Why ROAR AR

ROAR is built to enable the creation of AR for small and large enterprise in a simple automated way.

Increased revenue from users

Reduced operational costs

Acquiring new users

Improving your customer retention

Use Cases

ROAR for Retail and Brands

  • Create innovative, immersive digital Augmented Reality content cost efficiently.
  • Scale digital AR content using ROAR and engage your consumers in a more innovative way
  • Build many AR experiences and publish multiple times across different platforms and channels without relying on technical skills
  • Track the user engagement analytics to derive valuable insights for your business

Create AR Content and Experience in just 3 Steps within 3 minutes

Create and Edit the Marker (image) to Augment

Publish ROAR — Simply Publish the AR experience across all the platforms — iOS, Android and Web

View ROAR — Use ROAR Scanner to view the AR experience

Ссылка на основную публикацию
Гугл карта магнитогорска с улицами и домами
Карта Магнитогорска со спутника. Исследуйте спутниковую карту Магнитогорска онлайн в реальном времени. Подробная карта Магнитогорска создана на основе спутниковых снимков...
Газовый компрессор для заправки газом авто
Ниже представлены домашние газовые заправки российского, итальянского и французского производства. В сравнительной таблице приведены основные технические характеристики и цены на...
Газпромбанк саратов личный кабинет
Газпромбанк на сегодня это стабильная и универсальная финансовая организация, работающая на территории РФ. Банк занимает третье место среди других кредитных...
Гугл карта сургута с улицами и домами
Карта Сургута со спутника. Исследуйте спутниковую карту Сургута онлайн в реальном времени. Подробная карта Сургута создана на основе спутниковых снимков...
Adblock detector