Сергей Почекутов
Сергей Почекутов
0
Обложка: Как создать дополненную реальность, написав 12 строк кода

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

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

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

Как создать AR с помощью AR.js

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

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

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

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

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

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

<a-scene embedded arjs></a-scene>

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

<a-marker preset='hiro'></a-marker>

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

<a-sphere position="0 0 0" radius="0.8" color="#2AA29F"></a-sphere>

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

<a-entity camera></a-entity>

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

<head>
  <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
  <a-scene embedded arjs>
    <a-marker preset='hiro'> 
      <a-sphere position="0 0 0" radius="0.8" color="#2AA29F"></a-sphere>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>

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

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

Наводим камеру — появляется объект дополненной реальности. Убираем камеру — объект исчезает.

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

<head>
  <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
  <a-scene embedded arjs>
    <a-marker preset="hiro">
      <a-entity  
      rotation="-90 0 0"
      scale="0.1 0.1 0.1" 
      gltf-model="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf">
      </a-entity>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
Изображение AR-объекта

Дополненная реальность работает в браузере

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

<head>
  <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
  <a-scene embedded arjs>
    <a-marker preset="hiro">
      <a-entity 
      position="0 -3 0"
      rotation="-60 0 0"
      text="align: center; width: 10; color: #2AA29F; font: roboto; value: Hello, Tproger">
      </a-entity>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>

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

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

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

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

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

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

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

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


tproger.ru

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

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

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

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

Дополненная реальность