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


30.12.2020 Время чтения - 7 минут 418

web ar with ar js

Дополненная реальность (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 объект. В этом методе создания дополненной реальности замечательно то, что он:

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

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

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

  1. Веб-сервер для размещения вашего HTML-кода или настройте его на своем собственном http: // localhost / сервере. Вы также можете зарегистрировать учетную запись sandbox на codepen.io для легкого размещения своего кода в интернете или использовать быстрый и бесплатный glitch.com. Если вы будете использовать glitch, то для начала вам достаточно создать html проект ( hello web-page ).
  2. Скопируйте и вставьте эти несколько строк 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. Откройте ссылку на своем устройстве и наведите камеру на это изображение:

AR.js маркер

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

4. Если через камеру вашего устройства вы видите 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/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-маркера:

  1. Подготовьте изображение, которое вы хотите установить в качестве пользовательского маркера. Есть несколько условий, касающихся изображений, чтобы все вышло:
  • Они должны быть квадратной формы.
  • У них не может быть белых/прозрачных областей, только светло-серые (например, # F0F0F0 или RGB (240, 240, 240)). Обратите внимание на фон, окружающий изображение.
  • Лучше всего они работают, имея асимметричную форму.

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

AR.js Maker 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