Создание 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 на базе Web?

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

Что такое AR.js?

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

  1. На все 100% базирован на web.
  2. Очень быстро запускается даже на относительно старых телефонах.
  3. Имеет открытый исходный код (а главное бесплатный!)
  4. И последнее, но не менее важное: для его запуска и работы требуется всего около 10 строк HTML-кода!

Круто! Итак, как мне начать?

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

  • Веб-сервер для размещения вашего HTML-кода или настройте его на своем собственном http: // localhost / сервере. Вы также можете зарегистрировать учетную запись sandbox на codepen.io для легкого размещения своего кода в интернете или использовать быстрый и бесплатный glitch.com. Если вы будете использовать glitch, то для начала вам достаточно создать html проект (hello web-page).
  • Скопируйте и вставьте эти несколько строк HTML-кода в свой файл index.html:
<!doctype HTML> <html> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.5/aframe/build/aframe-ar.js"></script> <body style='margin : 0px; overflow: scroll;'> <a-scene embedded arjs> <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> </body> </html>
  • Откройте ссылку на своем устройстве и наведите камеру на это изображение.

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

  • Если через камеру вашего устройства вы видите AR блок, расположенный сверху маркера Hiro, то та-да! Вы только что создали свой самый первый AR-опыт! Просто, так ведь?

Удивительно! Но как это работает?

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

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

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script > <script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.5/aframe/build/afram e-ar.js"></script>

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

<a-scene embedded arjs>

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

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

<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>

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

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

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

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

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

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

Кастомные AR-маркеры

Вы можете захотеть создать свой собственный маркер и не полагаться на предустановленный в 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>

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

с помощью

<a-marker type = 'pattern' url = 'path / to / pattern-marker.patt'> </a-marker>

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

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

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

<a-scene embedded arjs='patternRatio: 0.7'>

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

<! doctype HTML> <html> <script src = " https://aframe.io/releases/0.9.2/aframe.min.js "> </script> <script src = " https://raw.githack.com/jeromeetienne/AR.js /2.0.5/aframe/build/aframe-ar.js "> </script> <body style = 'margin: 0px; overflow: scroll; '> <a-scene embedded arjs =' patternRatio: 0.7 '> <a-marker type =' pattern 'url =' path / to / pattern-marker.patt '> <a-box position =' 0 0,5 0 'material =' opacity: 0.5; '> </a-box> </a-marker> <a-entity camera> </a-entity> </a-scene> </body> </html>

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

Подводя итоги

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

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

0
23 комментария
Написать комментарий...
Андрей Гуртовой

Не совсем понятно как я буду телефоном наводить камеру на экране телефона.

Даже поиграться не удалось.

Ответить
Развернуть ветку
Мой Устимов

Прежде, чем жаловаться, стоит подумать. И если бы Вы подумали, то запустили бы код на GitHub Pages, зашли бы на сайт через телефон и навели бы камеру на экран компьютера

Ответить
Развернуть ветку
Андрей Гуртовой

Лучше поздно чем никогда ;-)

Ответить
Развернуть ветку
Трейдер мамкин

Когда реальные дела будут? Не наигрались ещё?)

Ответить
Развернуть ветку
Александр Кучеряев

Реальных дел с применением ar великое множество, это настолько упрощает некоторые процессы, что кажется будто это мана небесная.

Ответить
Развернуть ветку
Трейдер мамкин

Вы главное верьте в это

Ответить
Развернуть ветку
Александр Кучеряев

Давайте я привожу пример, а вы говорите с помощью чего можно сделать это лучше или почему вабще не надо?

Ответить
Развернуть ветку
Мой Устимов

Ты главное иди отсюда, нам тролли не нужны, иди делом занимайся

Ответить
Развернуть ветку
Denis Bystruev

Есть уже несколько сегментов рынка с оборотом по AR/VR более миллиарда долл.

К 2025 число таких сегментов вырастет в 3 раза.

График отсюда: https://medium.com/@sonalimishra_12187/forecast-size-of-the-ar-vr-market-worldwide-in-2020-and-2025-by-segment-67776027a3c0

Ответить
Развернуть ветку
Мой Устимов

Сам то тут что делаешь? Не наигрался ещё? Или ума не хватает понять, что польза AR огромная?.. А хотя чего объяснять - иди делом занимайся, картошку чисть, покажи делом, а не языком мели.

Ответить
Развернуть ветку
Dmitry Mikushin

Я недавно смотрел на Aruco - это большой брат  AR.js для более вовлечённой разработки. Мне показались значимыми две проблемы.

Во-первых, нужно удалять искажение линзы камеры (это называется distortion) с помощью шахматной доски. Без этой процедуры границы метки - не прямые, а слегка дугообразные, что затрудняет распознавание.

Во-вторых, если юзер не просто балуется технологией, а осматривает крупный вирутальный объект вблизи (например, анатомическую модель в натуральную величину), то метка может находиться вне зоны видимости шлема. Чтобы это преодолеть, я так понимаю нужно повесить в помещении ещё одну камеру и ещё одну-две метки на стены и синхронизиэовать эту камеру с камерой шлема, что нетривиально.

Какие у вас рекомендации по этим пробемам?

Ответить
Развернуть ветку
Artem Reva

это тоже классная либа, но из другой оперы, там плюсы, шлемы, всё сложнее

Ответить
Развернуть ветку
Artem Reva

Фантастика просто, много лет работаю с фронтом, но такое вижу впервые )))!!! Спасибо автор, поиграюсь вечером.

Народ, у кого есть идеи коммерческой или fun реализации, но нет навыков в разработке - обращайтесь, давайте попробуем.

Ответить
Развернуть ветку
Alex Dremlin

Добродня, не знаю как критикам, а мне кажется очевидной по крайней мене одна область возможного применения

Ответить
Развернуть ветку
Rustam Mirzakhmedov

Не годится для коммерческих проектов, так как без черной квадратной рамки у таргета не обойтись, если вы конечно не создаете проект для продвижения телевизоров с квадратным дисплеем

Ответить
Развернуть ветку
Artem Reva

А как это связано с соотношением сторон у телевизора?
Они ведь могут выводить квадратные картинки, эти картинки прекрасно работают на ноутбуке - можно в телефоне открыть предложенный сайт и навести на картинку в этой статье (открыв её на экране ноутбука или планшета) и всё будет работать

Ответить
Развернуть ветку
Yurij Georgievich

А как Гугл делает https://google.com/search?q=The+Child&hl=en-US&stick=H4sIAAAAAAAAAFPi1U_XNzTMsDTJKipILnrEaMEt8PLHPWEp_UlrTl5j1OTiCs7IL3fNK8ksqRSS5mKDsgSl-LlQdfIsYuUMyUhVcM7IzEkBAIPvsB5WAAAA
Можно?там телефоном рисуешь квадрат на поверхности и модель появляется.

Ответить
Развернуть ветку
Александр Герасимов

работает только в приложении Гугль на айфоне и на ведрах из списка поддерживаемых аркором (который в большинстве случаев нужно ставить отдельно) 

Ответить
Развернуть ветку
Ольга Леонтьева

Маркеры в AR.js значительно ограничивают варианты применения технологии на web-сайтах. 

Ответить
Развернуть ветку
Андрей Архипов

Поковырялся. Так не удалось телефоном испытать код.. :(

Ответить
Развернуть ветку
Мой Устимов

У Дударя глянь, там все понятно и просто

Ответить
Развернуть ветку
Yurij Georgievich

Для этого удобно распечатать на листе бумаге или ручкой нарисовать этот маркер. 

Ответить
Развернуть ветку
Alexander Shvetsov

Блин это работало 3 месяца назад, почему сейчас куб не повялется? ни на андроиде ни на иос(

Ответить
Развернуть ветку
20 комментариев
Раскрывать всегда