Привет! Я Света, фронтенд-разработчик в отделе рекламных спецпроектов в KTS.

Не так давно при работе над одной из задач мне потребовалось разобраться, какие существуют библиотеки для работы с AR в вебе. Я провела небольшое исследование, покопалась в документации, отыскала кучу примеров и решила, что этим материалом будет полезно поделиться.

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

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

Оглавление

Какие термины важно понимать
Обзор библиотек
- Фреймворки и библиотеки на основе WebXR API и на основе WebGL
- Платные альтернативы, имитирующие WebXR API
  - 8th Wall
Поддержка AR в вебе
Заключение

Какие термины важно понимать

WebXR API — стандарт, который позволяет реализовывать как дополненную (AR), так и виртуальную реальность (VR) прямо в браузере. Он отвечает за поиск совместимых устройств, и рендеринг 3D-сцены, а также управляет различными точками при отрисовке сцены. Однако WebXR не знает, как загружать 3D-модели и управлять ими, как их рендерить, текстурировать и так далее – для этого нужны другие инструменты.

WebAR — это общий термин для всех способов использования технологий дополненной реальности (AR) в вебе, включая нативные SDK и сторонние библиотеки.

ARCore и ARKit — нативные SDK для создания AR-приложений на Android и iOS соответственно. Через WebXR они могут быть подключены к веб-приложению, если браузер поддерживает их интеграцию.

WebGL — графический движок для создания и рендеринга 3D-графики в веб-браузере. Он помогает рисовать и оживлять ваши 3D-модели в AR; в частности, именно он накладывает текстуры, освещение и шейдеры.

WebRTC — технология, которая позволяет веб-приложениям захватывать и передавать потоковое аудио и видео и обмениваться другими данными. Хотя она не создана непосредственно для AR, библиотеки используют ее API для доступа к камере устройства.

Типы AR:

Marker-based (на основе маркера) — виртуальный объект появляется поверх специального маркера (например, Hiro, Kanji, barcode) или изображения.
Markerless (без маркера) — модель размещается перед пользователем на реальных поверхностях и не требует сканировать маркеры или картинки. Для этого обычно используется технология SLAM, которая строит точную модель окружающей среды в реальном времени.
Location-Based (на основе местоположения) — модель размещается в пространстве на основе данных о геопозиции устройства.

Обзор библиотек

Веб-приложение с дополненной реальностью можно создать с помощью библиотек и фреймворков на основе WebXR API или WebGL (например, Three.js, A-Frame, AR.js, model-viewer) или с помощью альтернативных решений, имитирующих WebXR API (например, 8th Wall).

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

Фреймворки и библиотеки на основе WebXR API и на основе WebGL

Three.js

*Промо для веб-приложения AR Fake Sneakers компании Lusion*

Three.js — одна из самых популярных библиотек для работы с 3D-графикой в вебе. Под капотом она использует WebGL и будет отличным выбором, если требуется создать сложную 3D-сцену.

Для создания полноценного приложения с Markerless AR в Three.js есть специальные методы и классы, которые позволяют работать с WebXR API. А упростить работу с AR на React помогут библиотеки React Three Fiber и @react-three/xr.

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

Документация: Three.js Docs

Гитхаб: https://github.com/mrdoob/three.js/

Примеры:

Markerless AR: WebXR Sneakers, Hit Test Example
Интеграция с AR.js (потребуется Hiro-маркер): AR.js Example

A-Frame

A-Frame — это фреймворк на основе Three.js. Он упрощает создание AR и VR-приложений благодаря декларативному синтаксису и использованию обычного HTML: для создания сцены достаточно добавить необходимые теги, которые есть в A-Frame, не нужно даже сильно углубляться в JavaScript.

Есть одно "но": AR-функции A-Frame пока поддерживаются только в Chromium-браузерах на Android из-за WebXR API — поддержка этой технологии пока еще сильно ограничена. Этот момент важно учитывать, особенно если вам необходимо, чтобы ваше приложение работало в Safari или на iOS.

С созданием AR на основе маркеров или геолокации A-Frame сам по себе не справится. Вам понадобятся дополнительные библиотеки, такие как AR.js.

Чтобы интегрировать A-Frame с React, существуют библиотеки aframe-react и react-aframe-ar, но на данный момент они устарели и не поддерживаются авторами. При использовании платформы 8th Wall можно обратить внимание на библиотеку react-8thwall-aframe.

Документация: A-Frame Docs

Гитхаб: https://github.com/aframevr/aframe/

Примеры:

AR.js

*Слева — Hiro-маркер, справа — 3D-модель поверх него*

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

Для отображения контента вы можете выбрать одну из двух сборок: для Three.js или для A-Frame. Если вас интересует AR на основе геопозиции с Three.js, обратите внимание на отдельный проект от тех же разработчиков — LocAR.js.

AR.js работает во всех в браузерах, где доступны WebGL и WebRTC. И тот, и другой уже активно поддерживаются.

Но имейте в виду: при интеграции с React могут возникать проблемы. В таком случае можно воспользоваться библиотекой-оберткой react-three-arjs или попробовать альтернативный вариант — встроить код с AR.js в iframe.

Документация: AR.js Docs

Гитхаб: https://github.com/AR-js-org/AR.js

Коллекция примеров с использованием AR.js:

Model-Viewer

Model-Viewer — это библиотека от Google, реализованная в виде веб-компонента. Ее основной API — это пользовательский HTML-элемент <model-viewer>. Под капотом Model-Viewer использует Three.js.

Библиотека поддерживает WebXR, что позволяет добавлять AR-функциональность в браузеры на базе Chromium. Если WebXR не поддерживается, Model-Viewer может использовать SceneViewer (для Android) и QuickLook (для iOS). Однако несмотря на свою широкую поддержку, Model-Viewer не работает в Firefox.

Как и другие веб-компоненты, <model-viewer> отлично работает в проектах на React. Если вам нужно подключить типы для работы с библиотекой, рекомендую хорошую статью, где можно почитать об этом подробнее.

Для быстрой проверки работы 3D-модели на мобильных устройствах вы можете воспользоваться удобным инструментом Model Editor.

Документация: Model Viewer Docs

Гитхаб: https://github.com/google/model-viewer

Витрина примеров на сайте: https://modelviewer.dev/examples/augmentedreality/

Babylon.js

*Фрагмент из видео-туториала на канале BabylonJS*

Babylon.js — это мощный движок для работы с 3D-графикой в вебе, использующий WebGL/WebGPU. Библиотека предоставляет богатый API, включающий инструменты для работы с физикой, анимациями, светом и тенью, а также обширную библиотеку 3D-шейдеров. Для создания AR и VR Babylon.js использует WebXR API.

Силами этой библиотеки можно реализовать как Markerless, так и Marker Based AR, хотя последний тип пока имеет экспериментальный API. Для маркерного AR можно также воспользоваться библиотекой BabylonAR, где трекинг реализован с помощью модуля ArUco из OpenCV.

Для базовой работы Babylon.js в проекте на React не потребуется дополнительных пакетов: для инициализации достаточно использовать код из соответствующего раздела документации. Чтобы упростить интеграцию, можно взять уже готовый компонент из пакета babylonjs-hook. Для создания сцен и интерфейсов с помощью привычного синтаксиса React-компонентов, жизненного цикла и хуков документация предлагает библиотеку react-babylonjs.

Песочница: Babylon.js Playground

Документация: WebXR и Babylon.js

Гитхаб: https://github.com/BabylonJS/Babylon.js

Некоторые демо из документации (может потребоваться время на загрузку моделей):

Простой пример AR: https://playground.babylonjs.com/#F41V6N#32
Изменение освещенности в зависимости от окружения: https://playground.babylonjs.com/#NAZYHG#5
Измерение расстояния между моделями: https://playground.babylonjs.com/#GG06BQ#97

MindAR

*Отслеживание изображения, интерактивный пример*

Библиотека MindAR специализируется на трекинге изображений и лиц. Она ориентирована на AR с использованием маркеров и поддерживает отслеживание пользовательских изображений. Более того, MindAR может отслеживать несколько маркеров одновременно, что не всегда доступно в других библиотеках с AR-возможностями.

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

Для создания AR MindAR использует WebGL и WebRTC, поэтому приложения, сделанные на этой библиотеке, должны поддерживаться и в Safari, и в Firefox. Для обработки и отображения 3D-контента MindAR использует Three.js или A-Frame.

Документация: MindAR Documentation

Гитхаб: https://github.com/hiukim/mind-ar-js

Примеры из документации:

Трекинг лица: https://hiukim.github.io/mind-ar-js-doc/face-tracking-samples/tryon.html
Пример с изображениями: https://hiukim.github.io/mind-ar-js-doc/samples/advanced.html (нужно отсканировать это изображение: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.png)
Трекинг нескольких маркеров: https://hiukim.github.io/mind-ar-js-doc/examples/multi-tracks

PlayCanvas

PlayCanvas — это движок для создания веб-графики и игр, который использует возможности WebGL.

Для реализации Markerless AR в библиотеке имеется свой API, который под капотом использует WebXR. Это, опять же, сужает количество устройств, однако движок поддерживается также платными платформами вроде 8th Wall и Zappar, которые позволят запустить приложение в Safari. Для создания AR с маркерами можно использовать AR Starter Kit, который, в свою очередь, использует ARToolkit.

Одним из удобных инструментов PlayCanvas является редактор сцен, который упрощает процесс создания приложений. В редакторе можно использовать готовые шаблоны (например, WebXR AR Starter Kit или Model Viewer) чтобы быстро начать проект с поддержкой AR.

Документация: PlayCanvas Developer Site

Гитхаб: https://github.com/playcanvas/engine

Примеры:

Тут можно ~~потрогать~~ посадить траву: https://playcanvas.com/project/672464/
Взаимодействие с UI-элементами: https://playcanvas.vercel.app/#/xr/xr-ui
Marker-based AR с Hiro маркером: https://playcanv.as/p/eJ1ygzym/

Больше источников и примеров можно найти в репозитории awesome-playcanvas.

JSARToolKit5

JSARToolKit5 — это библиотека, представляющая собой JavaScript-реализацию ARToolKit, одного из первых инструментов для создания AR. Она ориентирована исключительно на трекинг разных видов маркеров, включая квадратные со штрих-кодами, наборы из нескольких маркеров и NFT-маркеры.

Эта библиотека часто используется как основа для других решений с marker-based AR, поэтому неоднократно упоминалась выше. Однако сама по себе JSARToolKit5 не умеет отображать 3D-модели – для этого ее обычно интегрируют с библиотеками вроде Three.js, которые отвечают за визуализацию.

Гитхаб (более новый форк): https://github.com/artoolkitx/jsartoolkit5

Несколько простых примеров можно посмотреть здесь:

https://kalwalt.github.io/jsartoolkit5/examples/

Платные альтернативы, имитирующие WebXR API

Для создания веб-приложений с дополненной реальностью существуют и платные платформы, предлагающие расширенные возможности, такие как упрощение разработки и обеспечение кроссплатформенности. Одним из таких решений является 8th Wall.

8th Wall

Платформа 8th Wall использует свою собственную имплементацию SLAM, которая не полагается на встроенную поддержку WebXR API в браузере. Алгоритмы трекинга работают напрямую с камерой устройства и сенсорами через стандартные веб-API, такие как WebRTC и WebGL. Это делает Markerless AR доступным даже в Safari на iOS. Более того, движок был разработан с учётом производительности мобильных устройств.

Платформа предоставляет возможность создания проектов бесплатно в собственном интерактивном редакторе и позволяет интегрировать другие библиотеки, например, A-Frame, Three.js, PlayCanvas. На платформе можно реализовать все виды AR, даже Location-based и AR с фильтрами для лица.

Однако бесплатная версия имеет неприятные ограничения: пользователи не могут разрабатывать проект локально и изменять базовые файлы проекта, которые лежат под капотом (например, app.js, body.html), что делает сложную кастомизацию невозможной.

Документация: 8th Wall Documentation

Примеры:

Примерить ювелирные изделия: https://ar.pandora-ar.com/got/index.html
Найти волшебные самоцветы: https://edl-002-lucky-charms-ar.still.14four.com/
Макнуть стопку Oreo в молоко: https://www.8thwall.com/alivenow/oreo-playful-dunks
Помочь Пряне собрать новогодние подарки: https://www.8thwall.com/invision/gingygiftgrab

Существуют и другие менее популярные платные платформы, имитирующие функциональность WebXR API, например, Onirix, Zappar и MyWebAR.

Поддержка AR в вебе

Работа вашего приложения во многом зависит от того, какой тип AR вы хотите реализовать и какие технологии используются библиотекой.

Markerless AR в вебе основывается на WebXR API. Поддержка WebXR ограничена браузерами на основе Chromium (Google Chrome, Microsoft Edge, Opera и другими). В то же время браузеры на базе WebKit (Safari, а также Chrome и Firefox для iOS) все еще не поддерживают эту технологию. Даже включение экспериментальных флагов для WebXR в Safari не дает плодов.

Есть надежда, что появление новых устройств вроде Apple Vision Pro сможет подтолкнуть Apple и к внедрению WebXR в WebKit. Но пока Markerless AR с помощью одного лишь WebXR API в Safari реализовать не получится.

Узнать о поддержке WebXR в разных браузерах можно здесь: https://caniuse.com/webxr
А здесь можно проверить, поддерживается ли WebXR в вашем текущем браузере: https://immersive-web.github.io/webxr-samples/

Marker-based AR, напротив, будет работать во всех популярных браузерах. Этот тип AR чаще всего не использует WebXR API и не требует сложного отслеживания среды (SLAM). Вместо этого он полагается на широко поддерживаемые веб-технологии: WebGL, WebRTC (в частности, getUserMedia API) и алгоритмы обработки изображений.

Location-based AR также может быть реализован без WebXR API. Он визуализирует 3D-модели с помощью WebGL и использует веб-API типа Geolocation API и DeviceOrientationEvent API, которые хорошо поддерживаются в большинстве современных браузеров.

Заключение

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

Так, если выбирать из бесплатных решений, для Markerless AR в несложных сценариях (например, просто отобразить 3D-модель) хорошо подойдет Model Viewer — приложение будет работать на максимальном количестве устройств. Three.js, PlayCanvas и Babylon.js можно рассмотреть для этого типа AR, если понадобятся более сложные 3D-сцены и игры, однако приложения не будут работать в браузерах без WebXR.

Для трекинга маркеров и Location Based AR подойдет AR.js; для трекинга изображений и лиц — MindAR. Эти библиотеки также будут работать во многих браузерах.

Если у вас есть опыт работы с веб-технологиями для AR, расскажите об этом в комментариях. Это будет отличным дополнением к статье и поможет другим читателям (и мне тоже!) получить более полное представление о реальных кейсах их использования.

А для желающих узнать больше не только про AR в вебе, но и о веб-разработке в целом, я собрала список публикаций из нашего блога. Рекомендую к прочтению:

Дополненная реальность в Web: какие библиотеки актуальны в 2025?