Вы когда-нибудь задумывались, как получить Дополненную реальность (AR) на стандартные мобильные телефоны? Сегодня я покажу вам, как это сделать с помощью HTML и Javascript.

Немного истории

Дополненная реальность с нами уже много лет. На самом деле Мортон Хейлиг провел первый эксперимент с дополненной реальностью в 1962 году. Разумеется, он сделал это без компьютера, как вы можете видеть здесь:

Только в 1990 году Томас П. Коделл придумал фразу «дополненная реальность». С годами дополненная реальность развивалась вместе с виртуальной реальностью (VR). Настольные приложения AR/VR появлялись во многих формах, и в конечном итоге AR/VR пришли в наши браузеры.

Это был 2015 год, когда я увидел первые настоящие демонстрации AR в браузерах; в 2022 году Web AR по-прежнему считается «развивающейся технологией». К сожалению, это означает хаос в разных форматах и ​​непоследовательное поведение на разных устройствах. Более того, AR сама по себе является сложной темой, поэтому я разделил этот пост в блоге на три части:

  1. Типы дополненной реальности
  2. 3D модели
  3. Как внедрить веб-AR

Типы дополненной реальности

AR имеет множество форм. Некоторые из них подходят для Интернета, а некоторые более причудливы и не связаны с Интернетом. Примеры дополненной реальности, не связанной с Интернетом, включают эту фантастическую песочницу или будущую навигацию Мерседес.

Теперь давайте рассмотрим типы, подходящие для веб-браузеров.

На основе местоположения

Механизм этого типа AR прост. Сначала приложение получает данные GPS и сравнивает их с точкой интереса. Затем, когда пользователи достигают нужного места, приложение находит подходящее место для показа 3D-модели, наложенной на наш реальный мир. Pokemon Go представляет собой отличный пример того, как работает дополненная реальность на основе местоположения.

На основе маркеров

AR на основе маркеров требует маркера для отображения дополненной сцены. Маркеры — это графические узоры, которые камеры легко распознают. Например, на следующем рисунке показан знаменитый маркер Hiro. Он назван в честь пионера дополненной реальности Хироказу Като, который разработал одну из первых библиотек дополненной реальности для мобильных устройств в 1999 году.

Обычно вы можете распечатать маркеры на бумаге или на реальных предметах. Поэтому, когда камера видит один из этих маркеров, она показывает 3D-объект поверх него, как вы можете видеть на следующем изображении:

Отслеживание изображений

Отслеживание изображений позволяет сканировать изображение, рисунок или любое изображение и отображать содержимое поверх него. Это тот же механизм, что и у маркеров дополненной реальности, но для отслеживания изображений требуется больше ресурсов процессора, поскольку изображения обычно сложнее, чем специализированные маркеры, такие как маркер Hiro.

Без маркеров

Безмаркерный AR не требует маркера или местоположения, поскольку он рисует 3D-модель непосредственно на поверхности в вашей среде. IKEA использует преимущества этого типа дополненной реальности. Вы думаете о покупке нового предмета мебели? Затем вы можете загрузить их приложение, чтобы посмотреть, как ваш новый стул впишется в ваш дом.

Фильтры дополненной реальности на основе лиц

Это известный пример использования AR. Я думаю, пример объясняет сам себя. :).

3D-модели

Теперь, когда мы закончили с предыдущим кратким и неполным списком типов AR, давайте посмотрим, что требуется для работы AR.

Во-первых, вам нужен бинарный файл, описывающий вашу 3D-модель. Графические дизайнеры используют несколько форматов 3D-моделей, тогда как в Интернете есть только два конкурирующих формата: USDZ для Apple и GLB для Android.

USD означает универсальное описание сцены, а USDZ — это просто заархивированный доллар США. Pixar разработала формат долларов США для своих внутренних целей, а не для дополненной реальности.

Формат GLB — это двоичный формат glTF. В отличие от USD, glTF был разработан Khronos Group как оптимизированный формат для дополненной реальности.

Итак, если они оба делают одно и то же, то почему браузеры требуют от нас поддержки двух форматов? Это похоже на ситуацию с разными кабелями, такими как USB-C и Lighting Cable, когда Apple и Google не могутдоговориться об одном формате 3D-моделей для дополненной реальности. gLFT минималистична, тогда как USDZ содержит выразительную, но сложную систему композиции. Мы можем помочь себе понять различия с помощью следующего расплывчатого сравнения:

gLFT в доллары США — это как PNG в файл Photoshop.

Причина, по которой Apple выбрала USDZ, для меня остается загадкой. Я вижу в этом еще один ненужный уровень сложности. Тем более, что некоторые веб-библиотеки дополненной реальности конвертируют GLB в USDZ на лету.

Как внедрить дополненную реальность в Интернете

Теперь давайте посмотрим, какие инструменты вы можете использовать, чтобы добавить AR на свои телефоны. Я нашел три способа перенести дополненную реальность на мобильные телефоны:

  1. Встроенные решения устройств
  2. JS-библиотеки, использующие WebRTC и WebGL
  3. JS-библиотеки с использованием WebXR API

Встроенные решения

Яблоко

У вас должен быть iPhone с поддержкойAR Quick Look. Остальное легко. Вам нужна только одна правильно отформатированная ссылка и 3D-модель в формате USDZ, как в следующем примере:

Android

Android предлагает аналогичный инструмент: Scene Viewer. Вам нужен только правильно отформатированный URL-адрес, чтобы открыть средство просмотра сцен.

Несмотря на утверждение, что это должно работать в Firefox, мне не удалось заставить его работать. Тем не менее, он отлично работает в браузерах Chrome или Chromium.

JS-библиотеки, использующие WebRTC и WebGL

AR можно реализовать с помощью двух не связанных между собой API: WebGL и WebRTC.

Авторы библиотеки используют WebGL для рисования 3D-моделей на холсте HTML, а WebRTC обеспечивает доступ к камере устройства. Итак, совместив эти два API, вы сможете рисовать 3D-модели на видеопотоке с камеры вашего устройства.

Следующие библиотеки JS используют эту синергию и предлагают хороший AR, который можно использовать на устройствах Android или iOS.

AR.JS

AR.js представляет собой библиотеку более высокого уровня для дополненной реальности в Интернете.

Он использует внутренние низкоуровневые библиотеки, такие как Three.js, A-Frame и ARToolKit.js. Таким образом, вы можете обеспечить отличные возможности дополненной реальности с небольшим объемом кода.

Авторы утверждают, что их библиотека — единственная, которая поддерживает все эти типы дополненной реальности:

  • Отслеживание изображений
  • AR на основе местоположения
  • Отслеживание маркеров

В следующем примере вы можете увидеть разметку A-Frame, дополненную функциональностью AR.JS.

A-Frame и Three.js

AR.JS использует A-Frame и Three.js в качестве библиотек рендеринга вместо того, чтобы писать собственные функции для показа 3D-моделей. Вы можете выбрать, какую библиотеку рендеринга вы хотите использовать. Я предпочитаю A-Frame Three.JS, так как код Three.JS кажется более сложным. Проверьте следующие два примера, чтобы увидеть разницу:

AR с Three.JS

AR с A-Frame

MindAR

MindAR — это библиотека javascript с открытым исходным кодом. Он поддерживает отслеживание изображений и отслеживание лиц. MindAR, как и AR.JS, использует библиотеку A-Frame. Плюс недавно авторы начали работать над прямой интеграцией с three.js

Как вы можете видеть в коде, он похож на AR.JS, разметку A-Frame с функциями MindAR.

JS-библиотеки, использующие WebXR API

Несмотря на то, что комбинация WebGL и WebRTC кажется удобным подходом, авторы браузеров хотели чего-то более нативного, поэтому родился WebXR .

Это мощный API, охватывающий множество вариантов использования, от дополненной реальности до игр. API содержит богатую функциональность, охватывающую рендеринг 3D-сцен и взаимодействие с виртуальными объектами через ваш экран. Подробнее можно прочитать здесь, в объяснителе.

«Единственная» проблема заключается в том, что Firefox и Safari вообще не поддерживают его, как вы можете видеть здесь:

Это удивительно, ведь у Mozilla есть собственный браузер Firefox Reality, предназначенный для VR-шлемов. Apple, еще один крупный игрок, утверждает, что AR/VR является одним из ее приоритетов, но нам все еще нужно дождаться лучшей поддержки.

Просмотр моделей

Google предлагает элегантную библиотеку под названием Model-viewer для отображения 3D-моделей в вашей среде. Он поддерживает WebXR API и собственные решения (Scene Viewer или Quick Look).

Пример:

Однако в этой заявленной поддержке браузеров есть подвох. Авторы библиотеки заявляют, что она должна работать с двумя последними основными версиями всех вечнозеленых настольных и мобильных браузеров, а также с двумя последними версиями Safari. Однако я не могу заставить его работать в Firefox на Android.

Как вы можете видеть в этой проблеме, это не работает даже на некоторых Android Chrome. В этом случае средство просмотра модели невиновно, так как проблема, вероятно, в реализации мобильного устройства.

A-Frame поддерживает дополненную реальность

Как вы уже видели, библиотека Javascript A-Frame отлично подходит для просмотра 3D-моделей. Тем не менее, он также поддерживает AR через WebXR API, что означает, что он работает только на Android Chrome и Edge.

Вы можете посмотреть пример здесь.

Примечания

Связь между библиотеками WebXR и JS с использованием WebRTC и WebGL

Как я уже сказал, некоторые библиотеки JS используют комбинацию WebGL и WebRTC для рендеринга AR. Но они утверждают, что переведут свое решение с WebGL и WebRTC на родной WebXR, когда поддержка улучшится. Это было бы действительно круто!

Полифил WebXR

Что касается отсутствия WebXR в Safari и Firefox, я нашел полифилл. К сожалению, последняя версия была опубликована в 2020 году, плюс в их репозитории есть пара старых неотвеченных отчетов об ошибках. Поэтому используйте его с осторожностью.

Смерть WebVR

Ни один обзор Web AR не будет полным без упоминания WebVR. WebVR API был впервые задуман в 2014 году командой Mozilla. Google принял во внимание API в 2016 году, немного отрефакторил его и включил в Chrome. Однако в 2019 году была опубликована новая спецификация WebXR, и WebVR устарел.

Единственными браузерами, которые поддерживают WebVR, являются браузеры на основе Chromium и Firefox, но, как сообщается, в будущем его поддержка будет прекращена.

Реальная поддержка

Из-за большого количества противоречивой информации я решил самостоятельно проверить поддержку каждой упомянутой библиотеки.

Я использовал эти устройства:

  • iPhone 2020, iPhone 13
  • Samsung Galaxy A52s, Motorola Moto E7 Plus

Результаты:

QuickLook — собственное решение Apple

Он работал во всех браузерах iOS.

Scene Viewer — собственное решение Google.

Я попробовал его на Android Chrome & Edge, и он отлично работает. Однако мне не удалось запустить его в Firefox.

Модель-просмотрщик:

Он работал во всех браузерах iOS и Android Chrome и Edge.

AR.JS и MindAR

Он работал во всех браузерах iOS или Android!

AR-кадр

Это работало только на Android Chrome и Edge!

Заключение

После некоторого мучительного путешествия по изучению текущего состояния Web AR я могу порекомендовать только AR.JS или MindAR. Оба кажутся отлично поддерживаемыми библиотеками AR со многими функциями. Model-viewer отлично работает для безметочного AR, но мне не удалось заставить Model-viewer работать на Android Firefox.

Последний общий совет: будьте осторожны, все тестируйте и не забудьте предоставить своим пользователям надлежащий запасной вариант на случай, если устройство пользователя не совместимо с AR.

Мы — ACTUM Digital, и эту статью написал Марек, старший разработчик интерфейса Apollo Division.

Если вам нужна помощь с вашим проектом или инициативой, просто напишите нам. 🚀