Лучшие инструменты разработки дополненной реальности в 2021
В начале 2 части мы рассказывали на что стоит обратить внимание при выборе SDK для разработки своего продукта с дополненной реальностью, и теперь, когда вы знаете, какие функции вам следует рассмотреть, пришло время сделать обзор самых популярных, на наш взгляд, лучших framework дополненной реальности на рынке. Хотя их довольно много, мы отобрали семь AR SDK.
Его можно использовать для создания сцен AR на основе маркеров. Инструмент поставляется с расширением A-Frame и three.js, которое работает с любым смартфоном, независимо от версии его ОС, включая Android, iOS 11 и Windows Mobile.
Для создания AR-решения на основе AR JS необходимо лишь создать HTML-файл и подключить в него соответствующие библиотеки. Маркеры очень стабильны, но ограничены по форме, цвету и размеру. Предлагается для тех случаев, когда требуется много разных маркеров с разным содержанием, например, в книгах, листовках и флаерах с AR.
- Дополненная реальность на любом смартфоне в браузере.
- Настраиваемые, сенсорными жестами AR-объекты.
- Легкодоступная и быстрая разработка Marker Tracking (маркер с определенным паттерном).
- AR на основе местоположения.
Пример AR.js на основе маркеров, или отслеживания изображений с последними версиями a-frame (1.0.0 и выше), сенсорные жесты для масштабирования и поворота контента
Отлично, если ваш проект будет находиться на сайте, что использует защищенный протокол https, иначе доступ к камере может блокироваться. Не подходит для разнообразного функционала.
8th Wall — лидер в области дополненной реальности на базе Интернета (WebAR). Платформа 8th Wall также используется для разработки дополненной реальности, которая работает на всех устройствах — приложение не требуется и обеспечивает максимально широкий охват, поддерживая более 3 миллиардов смартфонов на iOS и Android.
Targets работает как с плоскими, так и с изогнутыми поверхностями, такими как бутылки, чашки и банки, обеспечивает потоковую передачу объемного видео в WebAR (или то, что часто называют голограммами).
В версии 16 система SLAM теперь на 50% точнее, чем раньше, с частотой кадров, которая на 70% выше, в зависимости от используемого устройства, обновление вышло этой весной. Это означает уменьшение дрейфа, дрожания и задержки для более плавного, и стабильного воспроизведения, согласно, информации на сайте 8th Wall.
- Поддержка маркеров (Image Target), World Effects, Face Effects, SLAM.
- Поддержка React, Vue.js, A-Frame, Babylon.js, Three.js.
- Функция записи видео в браузере.
- Разные стадии развертывания, включая промежуточную среду, защищенную паролем.
- Оценка освещения и относительный масштаб.
- Можно использовать в сочетании с движками Unity и Unreal.
Функции, которые раскрывают весь потенциал этого AR SDK, доступны без коммерческой лицензии за 99$ в месяц, но обязательно с водяными знаками 8th Wall, неважно коммерческий проект или нет.
Ежемесячная оплата лицензии также различается в зависимости от просмотров. Коммерческая лицензия Basic обойдется — от 1250$ в месяц, пакет Standart — от 3000$, Premium — от 5000$. И конечно же есть специальное предложение в пакете Pro. Также можно воспользоваться бесплатной пробной 14-дневной версией.
Основываясь на приведенных выше критериях, мы составили сравнительную таблицу 7 ведущих платформ дополненной реальности.
На данном этапе мы можем уже наблюдать, что еще не запустив производство, уже требуются значительные расходы только на этапе проектирования, не говоря уже об итоговой стоимости самого проекта.
Чтобы выбрать подходящий фреймворк для разработки — для каждого конкретного проекта нужно найти оптимальный баланс между применимостью, стоимостью и скоростью разработки, а также гибкостью и управляемостью, учитывая более широкий круг параметров.
Теперь, когда вы знаете, какие SDK дополненной реальности доступны и какие основные функции они предлагают, вы можете выбрать наиболее подходящий инструмент для создания отличных приложений AR. Решите, какие функции вам нужны в мобильном приложении или веб-браузере (WebAR), проверьте список SDK, примите во внимание цены и вы готовы разработать первоклассное приложение.
➕Читайте также начало 2 части «Практическое руководство по разработке AR — продукта. Выбор SDK и стоимость» — о том, на что нужно обращать внимание при выборе SDK.
➕Читайте 1 часть «Цена на дополненную реальность под ключ: как формируется стоимость» — где мы рассказали о стоимости разработки приложения дополненной реальности и формирования цены на российском рынке.
Как создать дополненную реальность, написав 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-объект внутри . Попробуем один из примитивов, которые предлагает фреймворк A-Frame:
Напоследок добавляем камеру. Одна должна быть за пределами маркера. Это нужно для того, чтобы AR-объект появлялся только при наведении камеры на маркер. Если в объективе нет маркера, дополнительный контент не отображается на экране.
Чтобы проверить работоспособность:
- Откройте в браузере на смартфоне это приложение на CodePen.
- Разрешите доступ к камере.
- Наведите камеру на маркер Hiro, который размещён ниже.
Наводим камеру — появляется объект дополненной реальности. Убираем камеру — объект исчезает.
Вместо геометрической фигуры можно вставить другую 3D-модель. Рекомендуемый формат — glTF. Вот полный код:
Дополненная реальность работает в браузере
Ещё одна интересная возможность — вставка AR-текста на английском языке. Его свойствами можно управлять с помощью атрибутов, подробно описанных в документации. Полный код:
Как создать свой маркер для AR-объекта
В примерах выше используется стандартный маркер Hiro. Но мы можем создать другое изображение с помощью онлайн-инструмента AR.js Marker Training. Правда, оно должно отвечать целому ряду требований.
- максимальное разрешение маркера — 16*16 пикселей;
- квадратная форма;
- используется только чёрный или светло-серый цвет (например, #F0F0F0);
- нет прозрачных областей;
- содержит простой текст — букву или цифру.
Также нужно помнить о контрасте. Если у маркера чёрный фон, то окружающая среда должна быть светлой. В противном случае распознавание не сработает.
В качестве маркера также можно использовать штрих-код. Подробнее об этом можно узнать из статьи разработчика AR.js Николо Карпиньоли (Nicolo Carpignoli).
Что ещё можно сделать с помощью AR.js
Отслеживание маркеров — лишь один из типов дополненной реальности. Библиотеку можно также использовать для создания следующих интерактивов:
- Отслеживание изображений — при наведении камеры на 2D-изображение пользователь видит поверх него или рядом с ним AR-контент. Это может быть другое 2D-изображение, GIF, 3D-модель, видео.
- Дополненная реальность на основе местоположения. Пользователь видит AR-контент в заданных локациях.
Подробное описание применения и примеры кода можно найти в документации AR.js и A-Frame.