Сбер AIJ 11.12.24
Сбер AIJ 11.12.24
Сбер AIJ 11.12.24

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

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

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

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

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.

Следите за новыми постами
Следите за новыми постами по любимым темам
21К открытий22К показов