Карта дня, май, перетяжка
Карта дня, май, перетяжка
Карта дня, май, перетяжка

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

Аватар Сергей Почекутов
Отредактировано

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

22К открытий24К показов

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

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

Как создать дополненную реальность, написав 12 строк кода 1
Слева — метка, справа — AR-объект, который появляется при наведении камеры / Источник: medium.com/@jerome_etienne

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

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

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

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

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

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

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

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

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

  1. Откройте в браузере на смартфоне это приложение на CodePen.
  2. Разрешите доступ к камере.
  3. Наведите камеру на маркер Hiro, который размещён ниже.
Как создать дополненную реальность, написав 12 строк кода 2
Наводим камеру — появляется объект дополненной реальности. Убираем камеру — объект исчезает.

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

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

Ещё одна интересная возможность — вставка 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К показов