Дополненная реальность (AR) прямо сейчас задает тренды в техническом пространстве и многие крупные компании, такие как IKEA, Coca-Cola и ZARA внедряют AR технологии в свои продукты и маркетинг. Как веб-дизайнер/разработчик из Webpuppies я был чрезвычайно очарован количеством возможностей, которые может предложить AR. Однако у меня было очень мало знаний касаемо того, как они были разработаны. Я хотел найти самое простое решение, позволяющее отображать хотя бы трехмерный объект с помощью камеры моего телефона. Я не хотел полагаться на сторонние приложения, не говоря уже о самоличной разработке громоздких AR-приложений. И в этом мне помогла библиотека AR.js.
Подписывайтесь на наш телеграм-канал — https://t.me/arvrdesign
Я хорошенько поискал и нашел ответ; 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 объект. В этом методе создания дополненной реальности замечательно то, что он:
- На все 100% базирован на web .
- Очень быстро запускается даже на относительно старых телефонах.
- Имеет открытый исходный код (а главное бесплатный!).
- И последнее, но не менее важное: для его запуска и работы требуется всего около 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>3. Откройте ссылку на своем устройстве и наведите камеру на это изображение:
Если вы хотите предварительно посмотреть, как все это дело будет выглядеть, не приступая к коду, посмотрите пример здесь.
4. Если через камеру вашего устройства вы видите AR блок, расположенный сверху маркера Hiro, то та-да! Вы только что создали свой самый первый AR-опыт! Просто, так ведь?
Удивительно! Но как это работает?
Давайте просмотрим код построчно:
- Библиотека 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/aframe-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-маркера:
- Подготовьте изображение, которое вы хотите установить в качестве пользовательского маркера. Есть несколько условий, касающихся изображений, чтобы все вышло:
- Они должны быть квадратной формы.
- У них не может быть белых/прозрачных областей, только светло-серые (например, # 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-пространстве есть бесчисленные возможности и в ближайшие дни эта технология будет быстро расти.
Читайте также: AR порталы | Путь в виртуальные миры становится доступнее
Подписывайтесь на наш телеграм-канал — https://t.me/arvrdesign
