Как создать дополненную реальность, написав 12 строк кода

Создать дополненную реальность можно за несколько минут. Чтобы познакомиться с основами AR, достаточно базового знания HTML.

18320

AR.js — библиотека для создания дополненной реальности. Она объединена с фреймворком A-Frame, который предназначен для разработки VR в вебе. Главный плюс AR.js — очень простой процесс создания AR-приложений. Достаточно импортировать библиотеку и добавить объекты, которые будет видеть пользователь при выполнении заданных условий — например, наведении камеры на маркер или нахождении в указанном месте.

Все ссылки на документацию будут в конце статьи, а пока посмотрим самое интересное — как это работает на практике. Результат будет примерно такой:

На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

Важно: чтобы посмотреть примеры AR-контента, нужно второе устройство с камерой — например, смартфон. В тексте есть ссылки на CodePen. Откройте их на устройстве с камерой и разрешите браузеру доступ.

Как создать AR-приложение за несколько минут

Импортируем в HTML-код A-Frame и AR.js:

Затем внутри <body> создадим сцену, которая будет охватывать все необходимые нам элементы: маркер, камеру, AR-объект.

Следующий шаг — добавление маркера. Пока используем preset Hiro. Это дефолтный маркер AR.js, его изображение вы найдёте ниже:

Добавим AR-объект внутри <a-marker>. Попробуем один из примитивов, которые предлагает фреймворк A-Frame:

Напоследок добавляем камеру. Одна должна быть за пределами маркера. Это нужно для того, чтобы AR-объект появлялся только при наведении камеры на маркер. Если в объективе нет маркера, дополнительный контент не отображается на экране.

Вот полный код:

Чтобы проверить работоспособность:

Откройте в браузере на смартфоне это приложение на CodePen.
Разрешите доступ к камере.
Наведите камеру на маркер Hiro, который размещён ниже.

Вместо геометрической фигуры можно вставить другую 3D-модель. Рекомендуемый формат — glTF. Вот полный код:

Ещё одна интересная возможность — вставка AR-текста на английском языке. Его свойствами можно управлять с помощью атрибутов, подробно описанных в документации. Полный код:

Держите ещё несколько инструментов для создания дополненной реальности.

Как создать свой маркер для AR-объекта

В примерах выше используется стандартный маркер Hiro. Но мы можем создать другое изображение с помощью онлайн-инструмента AR.js Marker Training. Правда, оно должно отвечать целому ряду требований.

максимальное разрешение маркера — 16*16 пикселей;
квадратная форма;
используется только чёрный или светло-серый цвет (например, #F0F0F0);
нет прозрачных областей;
содержит простой текст — букву или цифру.

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

В качестве маркера также можно использовать штрих-код. Подробнее об этом можно узнать из статьи разработчика AR.js Николо Карпиньоли (Nicolo Carpignoli).

Что ещё можно сделать с помощью AR.js

Нереальное реально. 9 эффективных кейсов AR-технологий

tproger.ru

Отслеживание маркеров — лишь один из типов дополненной реальности. Библиотеку можно также использовать для создания следующих интерактивов:

Отслеживание изображений — при наведении камеры на 2D-изображение пользователь видит поверх него или рядом с ним AR-контент. Это может быть другое 2D-изображение, GIF, 3D-модель, видео.
Дополненная реальность на основе местоположения. Пользователь видит AR-контент в заданных локациях.

Подробное описание применения и примеры кода можно найти в документации AR.js и A-Frame.

Если дополненной реальности мало, посмотрите, как создать простое VR-приложение под Android с помощью Unity.