Как создать дополненную реальность, написав 12 строк кода
Создать дополненную реальность можно за несколько минут. Чтобы познакомиться с основами AR, достаточно базового знания HTML.
22К открытий24К показов
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
Отслеживание маркеров — лишь один из типов дополненной реальности. Библиотеку можно также использовать для создания следующих интерактивов:
- Отслеживание изображений — при наведении камеры на 2D-изображение пользователь видит поверх него или рядом с ним AR-контент. Это может быть другое 2D-изображение, GIF, 3D-модель, видео.
- Дополненная реальность на основе местоположения. Пользователь видит AR-контент в заданных локациях.
Подробное описание применения и примеры кода можно найти в документации AR.js и A-Frame.
Если дополненной реальности мало, посмотрите, как создать простое VR-приложение под Android с помощью Unity.
22К открытий24К показов