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

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

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

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

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

Оглавление

• Какие термины важно понимать ^[2]

• Обзор библиотек ^[3]

  • Фреймворки и библиотеки на основе WebXR API и на основе WebGL ^[4]

    • Three.js ^[5]

    • A-Frame ^[6]

    • AR.js ^[7]

    • Model-Viewer ^[8]

    • Babylon.js ^[9]

    • MindAR ^[10]

    • PlayCanvas ^[11]

    • JSARToolKit5 ^[12]

  • Платные альтернативы, имитирующие WebXR API ^[13]

    • 8th Wall ^[14]

• Поддержка AR в вебе ^[15]

• Заключение ^[16]

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

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

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 ^[17]

Гитхаб: https://github.com/mrdoob/three.js/ ^[18] 

Примеры:

• Markerless AR: WebXR Sneakers ^[19], Hit Test Example ^[20]

• Интеграция с AR.js (потребуется Hiro-маркер): AR.js Example ^[21]

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 ^[22]

Гитхаб: https://github.com/aframevr/aframe/ ^[23] 

Примеры:

• Model Viewer ^[24]

• Anime UI ^[25]

• Augmented Reality Roller Coaster ^[26]

AR.js

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

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

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

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

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

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

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

• https://jeromeetienne.github.io/AR.js-docs/misc/EXAMPLES.html ^[31] 

• https://stemkoski.github.io/AR-Examples/ ^[32] 

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. Если вам нужно подключить типы для работы с библиотекой, рекомендую хорошую статью ^[33], где можно почитать об этом подробнее.

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

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

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

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

Babylon.js

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 ^[38]

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

Гитхаб: https://github.com/BabylonJS/Babylon.js ^[40] 

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

• Простой пример AR: https://playground.babylonjs.com/#F41V6N#32 ^[41] 

• Изменение освещенности в зависимости от окружения: https://playground.babylonjs.com/#NAZYHG#5 ^[42] 

• Измерение расстояния между моделями: https://playground.babylonjs.com/#GG06BQ#97 ^[43] 

MindAR

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

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

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

Документация: MindAR Documentation ^[44]

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

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

• Трекинг лица: https://hiukim.github.io/mind-ar-js-doc/face-tracking-samples/tryon.html ^[46] 

• Пример с изображениями: https://hiukim.github.io/mind-ar-js-doc/samples/advanced.html ^[47] (нужно отсканировать это изображение: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.png ^[48]) 

• Трекинг нескольких маркеров: https://hiukim.github.io/mind-ar-js-doc/examples/multi-tracks ^[49] 

PlayCanvas

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

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

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

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

Гитхаб: https://github.com/playcanvas/engine ^[52] 

Примеры: 

• Тут можно потрогать посадить траву: https://playcanvas.com/project/672464/ ^[53] 

• Взаимодействие с UI-элементами: https://playcanvas.vercel.app/#/xr/xr-ui ^[54] 

• Marker-based AR с Hiro маркером: https://playcanv.as/p/eJ1ygzym/ ^[55] 

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

JSARToolKit5

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

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

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

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

• https://kalwalt.github.io/jsartoolkit5/examples/ ^[58]

Платные альтернативы, имитирующие 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 ^[59]

Примеры:

• Примерить ювелирные изделия: https://ar.pandora-ar.com/got/index.html ^[60]

• Найти волшебные самоцветы: https://edl-002-lucky-charms-ar.still.14four.com/ ^[61]

• Макнуть стопку Oreo в молоко: https://www.8thwall.com/alivenow/oreo-playful-dunks ^[62] 

• Помочь Пряне собрать новогодние подарки: https://www.8thwall.com/invision/gingygiftgrab ^[63] 

Существуют и другие менее популярные платные платформы, имитирующие функциональность 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 ^[64] 

• А здесь можно проверить, поддерживается ли WebXR в вашем текущем браузере: https://immersive-web.github.io/webxr-samples/ ^[65]

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 в вебе, но и о веб-разработке в целом, я собрала список публикаций из нашего блога. Рекомендую к прочтению:

• Как сделать анимацию разными способами: CSS, WebP, Canvas, Lottie, Spine и секвенции ^[66]

• Летающий Санта и танцующие снегири: опыт реализации и оптимизации CSS-анимации ^[67]

• Подключаем библиотеку к проекту с помощью npm/yarn link ^[68] (статья моя, так что тем более советую)

• Next.js + Playwright. Как мы начали писать автотесты и что из этого вышло ^[69]

• Искусство сетапа: автоматизируем подготовку стека под новые проекты ^[70]