Создание AR из 10 строк HTML-кода (AR.js)

AR.js — это библиотека для создания опыта Web-AR. Она очень проста в использовании и может стать вашей площадкой для экспериментов. Мы подготовили перевод отличной статьи, которая поможет вам изучить эту библиотеку быстрее и сделать первый проект Web-AR.

Дополненная реальность (AR) прямо сейчас задает тренды в техническом пространстве и многие крупные компании, такие как IKEA, Coca-Cola и ZARA внедряют AR-технологии в свои продукты и маркетинг. Как веб-дизайнер/разработчик из Webpuppies я был чрезвычайно очарован количеством возможностей, которые может предложить AR. Однако у меня было очень мало знаний касаемо того, как они были разработаны.

Я хотел найти самое простое решение, позволяющее отображать хотя бы трехмерный объект с помощью камеры моего телефона. Я не хотел полагаться на сторонние приложения, не говоря уже о самоличной разработке громоздких AR-приложений. И в этом мне помогла библиотека AR.js.

Я хорошенько поискал и нашел ответ; AR на базе веб-технологий с использованием библиотеки AR.js. Для тех, кто хочет окунуться в пространство дополненной реальности, но боится того, что будет сложно, хочу уверить — сложно не будет. Вам нужно всего лишь написать несколько строк HTML-кода и вуаля! Вы можете создать свой самый первый AR-проект менее чем за 10 минут!

Как следует из названия, AR на базе веб-технологий в основном позволяет пользователям запускать специализированную камеру, которая может обнаруживать и отображать AR-объекты, просто перейдя по ссылке. Создавая AR в web, пользователям не нужно загружать дополнительные приложения для того, чтобы просто увидеть AR в действии.

AR.js — это облегченная библиотека для AR, созданная Jerome Etienne и поддерживаемая Nicolò Carpignoli. Она построена на основе библиотеки three.js и jsartoolkit и объединена с A-frame (библиотекой для разработки VR в web) для AR экспириенса. Тут используются маркеры, чтобы камера могла обнаруживать и отображать AR объект. В этом методе создания дополненной реальности замечательно то, что он:

Во-первых, вам нужно настроить несколько вещей:

Если вы хотите предварительно посмотреть, как все это дело будет выглядеть, не приступая к коду, посмотрите пример здесь.

Давайте просмотрим код построчно:

1. Библиотека A-frame и AR.js импортируется с помощью этих двух скриптов:

2. В тело HTML мы включаем <a-scene> из библиотеки A-frame и сообщаем A-frame, что мы хотим инициализировать AR.js с embedded arjs с помощью <a-scene>.

Таким образом <a-scene> охватывает все, что мы хотим поместить внутрь, включая маркер, камеру и AR-объект. Проще говоря, A-frame позволяет 3D-моделям работать в сети, а AR.js преобразует веб-сцену в AR-сцену.

3. Затем мы хотим добавить объект, который будет включен в <a-scene>. На данный момент мы используем готовые к использованию элементы A-frame, называемые примитивами.

Вы можете поэкспериментировать с другими примитивами, доступными в библиотеке A-frame. Вот несколько примеров, которые можно использовать для замены <a-box>:

4. Наконец, мы сообщаем A-Frame, что хотим, чтобы arjs управлял камерой, добавляя:

<a-marker-camera> использует заданный маркер под названием hiro, который является маркером в библиотеке AR.js.

Готово! Конечно, в сцене A-frame есть гораздо больше, c чем можно поиграть, например, добавить анимацию, взаимодействие с объектами или даже добавить в сцену свою собственную 3D-модель. Вы можете узнать больше обо всех возможностях, которые предоставляет AR.js тут, а также ознакомиться с документацией по A-frame здесь.

Вы можете захотеть создать свой собственный маркер и не полагаться на предустановленный в AR.js маркер hiro. Что ж, почему бы и нет? Вот что нужно сделать для создания собственного AR-маркера:

1. Подготовьте изображение, которое вы хотите установить в качестве пользовательского маркера. Есть несколько условий, касающихся изображений, чтобы все вышло:

— Они должны быть квадратной формы.

— У них не может быть белых/прозрачных областей, только светло-серые (например, # F0F0F0 или RGB (240, 240, 240)). Обратите внимание на фон, окружающий изображение.

— Лучше всего они работают, имея асимметричную форму.

2. Перейдите по ссылке AR.js Custom Marker Training.

3. Нажмите «Upload» и загрузите изображение. Дефолтное значение для рисунка установлено на 0,50. Также есть ползунок «пропорции рисунка», который увеличивает/уменьшает количество черной границы, окружающей изображение. Вы можете изменить соотношение по своему усмотрению, но вполне возможно, что потребуется добавить дополнительные строчки кода в том случае, если соотношение будет не установлено на 0,50.

4. Нажмите «Download Marker», после чего будет создан .patt файл. Добавьте этот .patt файл в свой каталог, где находится index.html. Щелкните «Download Image», чтобы создать маркер в виде .png изображения.

5. Вам нужно будет заменить <a-marker-camera>

с помощью

где path/to/pattern-marker.patt находится в .patt файле, который вы разместили ранее. Вы могли заметить, что <a-marker-camera> теперь просто <a-marker>. Так куда же делась камера? Что ж, не волнуйтесь, ведь вам просто нужно добавить отдельную a-entity камеру:

6. Если вы увеличили/уменьшили соотношение на странице AR.js Custom Marker Training (например, соотношение установлено на 0,7), вам нужно будет добавить следующие параметры в embedded arjs:

Весь код будет выглядеть таким образом:

Вы поймете, что <a-box> примитив находится внутри <a-marker> тега, а примитив — <a-entity camera> вне его. Это потому, что он позволяет отображать объект только после того, как камера обнаруживает настраиваемый маркер и исчезает, когда на него не направлена камера.

Создать дополненную реальность было очень легко, не правда ли? Это не единственный метод создания дополненной реальности в веб, конечно, есть больше фреймворков и инструментов, которые могут создавать гораздо более захватывающие AR-проекты. В AR-пространстве есть бесчисленные возможности и в ближайшие дни эта технология будет быстро расти.

Больше статей на телеграм-канале

#ar #дополненнаяреальность