Добавление виртуальных вещей в реальный мир — это то, что сделало огромный скачок в популярности, особенно с QR-кодами. С помощью дополненной реальности (AR) мы можем брать изображения реального мира и отображать на них цифровые объекты, подобно тому, как это делала Nintendo DS с игровыми картами.
В этом уроке мы создадим браузерное AR-приложение, которое будет отображать интересные вещи поверх изображений. К концу этого курса вы будете знать, как работать с AR в приложении Redwood.
Настройка приложения Redwood
Мы начнем с создания нового приложения Redwood. В терминале выполните следующую команду.
$ yarn create redwood-app ar-demo
В результате будет создано множество файлов, с которыми вы сможете работать как на фронтенде, так и на бэкенде, но мы сосредоточимся на фронтенде. Весь код для React front-end вы можете найти в директории web.
Есть несколько библиотек, которые нужно добавить в наше приложение, чтобы получить необходимую нам функциональность AR, и мы будем делать это немного по-другому.
Добавьте необходимые библиотеки
Существует не так много готовых библиотек JavaScript AR, а те, что есть, имеют свой собственный уникальный набор проблем, но мы будем использовать AR.js, поскольку многие другие построены на ее основе.
Вы также увидите, что системы JavaScript AR обычно используют Three.js или A-frame для обработки объектов рендеринга. Приложение, которое мы создаем, немного уникально тем, что оно построено вокруг браузера. Большинство AR-приложений создаются для использования на мобильных устройствах, но это способ, с помощью которого все разработчики JavaScript могут играть с AR без необходимости знания мобильной разработки.
Сложность работы с AR в браузере заключается в том, что доступные нам библиотеки должны находиться в <body> приложения, что трудно сделать с помощью любого из фреймворков. Поэтому мы начнем с добавления библиотек, с которыми мы работаем, в <head> нашего файла index.html в каталоге web > src.
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
Мы используем версию A-frame библиотеки AR.js. Теперь, когда мы импортировали библиотеки, давайте добавим необходимые нам элементы внутри <body>.
Настройка элементов AR
Это покажется странным всем, кто работал во фреймворке, потому что обычно мы ничего не добавляем в DOM подобным образом. Это причуда этой библиотеки AR, потому что она требует, чтобы элементы находились непосредственно внутри <body>, а не в компоненте. Я немного покопался, пытаясь найти способы сделать это компонентом, и посмотрел на некоторые другие библиотеки, но не смог найти ничего готового к использованию.
Есть способы сделать это компонентом, но это потребует некоторого времени и мастерства! Пока же важно увидеть, как это работает, чтобы вы хотя бы знали, как работать с AR.
Итак, внутри <body> добавьте следующий код.
<a-scene embedded arjs>
<a-marker type="pattern" url="https://raw.githubusercontent.com/flippedcoder/blog-examples/main/clear-world/pattern-check.patt">
<a-sphere radius="1" color="#EF2D5E"></a-sphere>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
Это дает вам AR-среду, которая позволит вам обнаружить, когда в камере отображается определенная картинка. Эти изображения называются маркерами. Поэтому в любой момент, когда вы запустите это приложение и наведете курсор на маркер, вы получите определенное взаимодействие в браузере.
Поскольку мы используем A-frame, это взаимодействие может быть любым: от простого объекта, отображаемого поверх маркера, до целой игры, создаваемой поверх маркера. Вы можете получить массу удовольствия, играя с A-frame и тем, что вы хотите отобразить на своем маркере.
В коде есть несколько моментов, на которые следует обратить внимание. Все содержится в <a-scence>, который является тегом A-frame, создающим виртуальную среду. Тег <a-marker> — это то, как мы включаем функциональность AR в приложении. Мы говорим приложению искать изображение, которое имеет тип шаблона, и даем ему абсолютную ссылку на файл шаблона.
Если найдено правильное изображение маркера и оно соответствует шаблону, то <a-sphere> отображается поверх маркера. Все, что вы создадите внутри тега <a-marker>, будет отображаться поверх изображения маркера, так что не стесняйтесь проявлять творчество!
Наконец, у нас есть тег <a-camera>. Он открывает веб-камеру или камеру на вашем телефоне, чтобы вы могли нацелиться на изображение маркера в реальной жизни.
Вот, собственно, и все по части кода! Теперь нам нужно создать изображение маркера. Есть инструмент, который позволяет нам сделать это легко.
Создание изображения маркера
Чтобы создать изображение маркера и соответствующий файл шаблона, зайдите на этот сайт: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html. Вы можете загрузить изображение по своему усмотрению, но помните, что фон и передний план должны быть очень контрастными, поэтому лучше всего подходят простые изображения. Вы также можете использовать пример изображения, который там представлен.
Вам нужно будет загрузить изображение и маркер. Маркер — это файл шаблона, а изображение — файл, на который вы будете наводить камеру. Когда у вас будет файл маркера, вы можете загрузить его в свой собственный репозиторий на GitHub и заменить ссылку в коде выше.
Теперь, когда у вас готовы файл маркера и изображение, мы можем запустить приложение и посмотреть, как это выглядит!
Запуск AR-приложения
В терминале выполните следующую команду.
$ yarn redwood dev
Это запустит приложение Redwood, и вы должны увидеть в браузере нечто подобное.
Теперь, если вы откроете это изображение на мобильном устройстве, вы должны увидеть в браузере розовый шар поверх него.
Теперь вы работаете с AR прямо в браузере, а если вы прокрутите страницу вниз, то увидите остальную часть приложения в нижней части. Это очень удобно, если AR-часть вашего приложения — лишь малая часть того, что нужно пользователю.
Готовый код
Вы можете посмотреть полный код в папке clear-world этого репозитория или посмотреть в этой Code Sandbox.
Заключение
Добавление AR в веб на самом деле все еще остается довольно сложной задачей, учитывая, что большинство библиотек было создано для мобильных устройств. Есть еще много возможностей для развития и создания веб-приложений AR для проектов, которым может понадобиться нечто большее, чем просто интерфейс AR, и им нужно полнофункциональное веб-приложение, поддерживающее его.