Поле боя — дополненная реальность. Часть II: как распознать объект и показать 3D модель

В предыдущей статье мы познакомились с основами процесса. Теперь можно приступить к рассмотрению кейса. Если вы пропустили начало — не беда, жмите по ссылке ^[1] и догоняйте.

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

• Задачи должны быть выполнены в рамках одного мультиплатформенного решения. (iOS/Android).
• Изображения и объекты для распознавания можно изменить одним щелчком мыши.
• 3D модели и анимация должны загружаться просто без танцев с вершинами и полигонами.
• 3D модели должны откликаться на нажатие.

Процесс работы мы условно разделили на следующие шаги:

• Распознать изображение или объект. После распознавания на этом месте отобразить модель с 3D объектом.
• Показать 3D объект на экране, по аналогии с «pokemon go», без привязки к конкретному месту. При нажатии проигрывается анимация.
• Показать 3D объект по заданным координатам как POI (точку интереса).

Давайте разберем первую часть, а именно научимся распознавать изображение и отобразим на его месте 3D объект.

Выбор платформы

Во время работы над кейсом вышел в бету ARKit и нам удалось немного в нем покопаться. Это довольно сильный инструмент, но даже такой крутой SDK как ARKit не имеет в себе систему распознавания объектов. В нём заложен так называемый «plane detection» — он распознает пол или другую горизонтальную плоскость.

При желании можно использовать ARKit, как основу для решения поставленной задачи, но нам понадобиться добавить сюда OpenCV для распознавания объектов, и скорее всего, Unity, для загрузки GUI компонентов. Самое смешное то, что поди да найди мультиплатформенное решение, которое сможет распознать пол, ведь даже ARKit с этим справляется не так уж хорошо.

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

Зная, в какой объём работы в итоге вылился проект, я скажу, что ни на йоту не жалею о выбранном решении.

С чем мы работали

Существует большое количество технологий для AR, мы остановились на Wikitude SDK и SLAM.

Почему? Все очень просто:

SLAM (simultaneous localization & mapping) в отличие от marker-based, позволяет не привязывать отображаемый 3D объект к какому–то конкретному изображению. Эти два отличных друг от друга подхода, влияют на положение координат объекта относительно мира. Еще, перед началом работы рекомендую познакомиться с фреймворком Wikitude SDK на официальном сайте ^[2].

Таблица сравнения фреймворков по работе с AR:

Реализация

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

Прежде всего настоятельно рекомендую ознакомиться с документацией ^[3].

У нас мультиплатформенное решение, поэтому используем JS. За основу можете взять готовое приложение с примерами, там подготовлена вся основа для вызова модулей с JS кодом.

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

Соответственно заведём папку с модулем под JS с аналогичным path:

Получаем ключ

Помимо этого для старта вам следует получить ключик и использовать его в коде. Без ключа будет работать, но на всём экране будет надпись «trial».

Пример Wikitude организован в виде таблицы с ячейками. Каждая ячейка представлена моделью типа WTAugumentedRealityExperience. Вы помните чуть раньше мы смотрели содержимое файла Examples.plist? Так вот каждый элемент этого листа и есть представление объекта WTAugumentedRealityExperience.

Пожалуйста, взгляните на картинку. На ней вы увидите конструктор данной модели. В него передаются файлы из вышеупомянутого .plist-а. Мир тесен!

Загружаем рисунок

Начнем с загрузки рисунка для распознавания. Для этого мы заходим на сайт специального инструмента wikitude target manager ^[4].

После регистрации создаём новый проект.

Интересно, что при добавлении 3D объекта нам надо будет загрузить видео, в котором снят этот объект. Это особенно полезно для создания очень точного рисунка объекта для распознавания. На своём сайте они показывают пожарную машину, у которой можно включать сирену при нажатии на распознанную машину.

Пример съёмки видео. Машинка стоит на крутящемся подносе, съёмка происходит со всех ракурсов.

После создания проекта, мы добавляем в него все цели для распознавания. Один проект может содержать несколько целей. Это сделано еще и потому, что прямо там можно добавлять анимацию или объекты, сопровождающие распознавание.

Добавляя картинки для распознавания, они оцениваются системой по шкале от 0 до 3. От «совсем не подходит» до «очень даже подходит».

Общие советы:

• Больше контраста на картинке.
• Помимо текста должен быть графический материал.
• jpg размером от 500 до 1000 пикселей.
• Убирайте пустые места.
• Просто лого недостаточно, добавьте дополнительный графический материал.

На изображении выше картинка, которую мы загрузили. Включена тепловая карта и рейтинг.

Как выглядит редактор изнутри:

Важно, что объекты Augmentations могут быть использованы, а могут и нет. Об этом мы поговорим чуть позже, когда разговор зайдет об отображении 3D объектов и анимации.

В левом верхнем углу расположены две иконки: первая для облачного распознавания, вторая для offline распознавания. Мы качаем файл во втором варианте и на выходе получаем *.wtc формат. (Wikitude target collection).

Добавляем файл в наш проект и поехали писать код.

И на этом всё распознавание. Теперь при наведении на изображение появится машинка.

В данном случае мы чуть–чуть схитрили и использовали уже загруженную в проект 3D модель.

И на этом сегодня все. В следующий раз мы разберём подробнее загрузку 3D моделей и анимации для них, а также рассмотрим как сделать привязку объекта к точке интереса и показать модель по технологии SLAM.

До новых встреч!

Автор: Reksoft

Источник ^[5]