Как доставлять контент дополненной реальности в Интернет с открытым исходным кодом, простым и кроссбраузерным способом.

Также доступен на итальянском.

Это первая часть серии статей об AR.js. Ниже приводится список статей, написанных на данный момент:

Чтобы быть в курсе последних новостей о AR.js и Web AR, вы можете следить за мной!

Отказ от ответственности: AR.js v3 отсутствует, с новой документацией, которую можно найти по адресу: https://ar-js-org.github.io/AR.js-Docs/. Узнайте больше там, если вы обнаружили проблемы с этим руководством.

Еще одна библиотека AR?

Для тех, кто этого еще не знает, AR.js - отличный проект с более чем 10 тысячами звезд на Github, который позволяет легко и весело разрабатывать приложения дополненной реальности с помощью веб-технологий. С помощью нескольких простых строк Javascript и некоторого 3D-моделирования практически сразу же можно разработать веб-приложение с дополненной реальностью.

Среди его наиболее интересных характеристик:

  • Производительность, ~ 60 FPS на моем двухлетнем телефоне (!)
  • Совместимость, кроссбраузерность, работает на всех браузерах телефонов (и, очевидно, на настольных компьютерах), поддерживает webgl и webrtc (то есть практически все телефоны Android и iPhone выше iOS 11)
  • Простота, это оболочка различных фреймворков, которая упрощает разработку веб-дополненной реальности. Он построен на основе a-frame и three.js.

Так что нам не нужны гололены, картон или дорогие телефоны; нам просто нужно получить доступ к веб-приложению AR.js, и тогда мы сможем испытать AR.

Как такое возможно? Что ж, оказывается, AR.js работает с маркерами (не всегда, но если мы хотим быть кроссбраузерными, мы должны использовать маркеры).

Маркеры

Маркеры - это своего рода упрощенные qr-коды. В AR.js мы определяем определенные 3D-сцены для определенных маркеров, поэтому, когда камера распознает маркер, веб-приложение показывает 3D-модель поверх него. Также маркеры могут содержать qr-коды.

Маркеры узора

Важной особенностью AR.js является возможность использования пользовательских маркеров, типом по умолчанию является «узор». Я провел небольшое исследование ограничений маркеров рисунков, их размера и формы. Я узнал, что:

  • Максимальное разрешение маркера 16x16 пикселей.
  • Они должны быть квадратной формы
  • У них не может быть белых / прозрачных областей, только светло-серые (например, # F0F0F0).
  • Они не могут содержать цвета, только черный и светло-серый
  • Они должны содержать простой текст, например одну букву, число или символ.

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

Еще один важный аспект, о котором следует помнить, - иметь высокий контраст между «фоном» маркера и окружающей средой; например, если маркер имеет светло-серые символы на черном фоне, камере будет сложно распознать маркер, если он напечатан и помещен на черный стол или отображается на черном экране.

Маркеры штрих-кода

Маркеры также могут быть штрих-кодами. Они представляют собой число в виде символа, созданного с помощью исчисления на матрице. Предлагается создавать маркеры на основе матрицы с большим расстоянием Хэмминга (см. Эту таблицу), чтобы камера могла их лучше распознать. Матрица также определяет максимальное количество возможных маркеров (например, матрица AR_MATRIX_CODE_3x3_PARITY65 может генерировать 32 различных маркера штрих-кода).

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

This - онлайн-генератор маркеров штрих-кода, который я использовал для следующего примера.

Я показываю вам базовый код из документации и блога AR.js, а также несколько обходных путей, поскольку в настоящее время есть несколько открытых проблем, касающихся настраиваемых маркеров.

В этом простом HTML мы:

  • Импортировать библиотеки
  • Скажите AR.js распознавать шаблоны штрих-кода, созданные с помощью матрицы 3x3 (строка 12).
  • Определите два тега ‹a-marker›, каждый из которых идентифицируется двумя разными значениями штрих-кода (18 и 22).
  • Определите объект статической камеры (строка 30).

Чтобы избежать проблем, используйте определенные теги и атрибуты, как показано выше. На момент написания этой статьи (апрель 2018 г.) этот пример работает и основан на новейшей версии AR.js (версия 1.5.5). Также необходимо использовать удаленные URL-адреса для ресурсов шаблона вместо относительных URL-адресов.

Если вы хотите использовать пользовательские маркеры вместо маркеров штрих-кода, вы можете сгенерировать их с помощью ранее связанного инструмента и вместо использования

<a-marker type="barcode" value="6" (...)

вы можете использовать

<a-marker type="pattern" preset="custom" url="...." (...)

где «url» - это удаленный абсолютный URL-адрес вашего файла «.patt», который находится где-то удаленно (например, в том же репозитории HTML-файла).

Выкройки в деталях

Чтобы упростить обнаружение маркеров камерой, полезно помнить о некоторых простых правилах создания маркеров штрих-кода / рисунка.

Например, шаблоны, созданные для «синего» изображения и «красного» изображения, очень похожи (вы можете проверить их на следующих изображениях); это очень затруднит обнаружение.

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

Итак, стоит ли AR.js?

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

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

Изменить (март 2019 г.): я обновил версию AR.js и версии a-frame. На самом деле ничего особенного не изменилось.

Особая благодарность xho за рецензирование этой статьи, до него она была не очень удобна для чтения :)

Chialab - дизайнерская компания. Разрабатывая стратегию, дизайн, программное обеспечение и контент, мы создаем захватывающие отношения между брендами и людьми. Https: //www.chialab.i т.