Web AR и WebXR

Burger King запустил рекламную кампанию: пользователь наводил камеру на рекламу конкурентов, и в браузере - без установки приложения - они «загорались» в AR. Это стало возможным через WebXR и image tracking. Разработчики потратили меньше времени на AR, чем на юридические согласования.

• **Gucci AR Try-On** - примерка кроссовок в браузере через 8thwall на iOS и Android
• **Shopify AR** - 3D-просмотр товаров поверх реального стола через WebXR
• **Google Search AR** - «посмотреть в AR» прямо из результатов поиска
• **WebXR Samples** - официальные примеры Google: hit-test, light-estimation, DOM overlay

WebXR Device API: AR в стандарте W3C

Нативные ARKit/ARCore-приложения требуют установки из магазина. Но что если пользователь сканирует QR-код на рекламном плакате и сразу видит 3D-модель продукта поверх реального мира - без установки? Именно этот сценарий решает **WebXR Device API** - стандарт W3C, встроенный в браузер.

WebXR предоставляет унифицированный интерфейс для VR и AR. Для AR ключевые объекты: **XRSession** (сессия взаимодействия с устройством), **XRReferenceSpace** (система координат - `local`, `local-floor`, `unbounded`) и **XRFrame** (снимок состояния на текущий кадр).

**Hit test** - ключевая функция AR: пользователь тапает на экран, браузер делает raycast в реальный мир и возвращает позицию пересечения луча с поверхностью. Без hit test невозможно разместить объект на полу или столе.

Three.js + WebXR: 3D-объекты в реальном мире

Работать напрямую с WebGL и WebXR - многословно. Three.js - самая популярная WebGL-библиотека - имеет встроенную поддержку WebXR. Достаточно установить `renderer.xr.enabled = true`, и Three.js берёт на себя управление рендер-циклом, матрицами камеры и слоями.

Three.js автоматически обновляет матрицы **camera** из XRFrame - не нужно вручную читать позицию головы/устройства. При AR `camera` в Three.js уже содержит правильную проекционную матрицу камеры устройства и её позицию в мире.

8thwall: AR там, где WebXR ещё не работает

Проблема: в 2024 году WebXR `immersive-ar` поддерживается в Chrome на Android, но **Safari на iOS не поддерживает immersive-ar** вообще (только WebVR via QuickLook или ограниченный inline). Это отсекает половину мобильных пользователей. **8thwall** - платная платформа (Niantic), которая реализует AR полностью на JavaScript поверх camera stream.

8thwall встраивает собственный SLAM-движок в браузер: через getUserMedia получает видеопоток, анализирует feature points с помощью WASM-кода, строит карту мира - всё в JS. Это значительно медленнее нативного ARKit, но работает в Safari на iOS 14+.

8thwall используется в крупных маркетинговых кампаниях: Gucci AR-примерка кроссовок, NFL AR-маски, Pepsi AR-акции. Когда охват важнее производительности, JS-SLAM в браузере - разумный выбор.

Ограничения браузерного AR

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

**Sandbox-ограничения** браузера: WebXR-сессия не может получить данные о поверхностях комнаты (room geometry), ARCore Depth API, или Face Anchor с blend shapes - только то, что браузерный API явно expose. Это сделано намеренно для приватности.

Persistent anchors - ключевое отсутствующее звено Web AR. Если пользователь закрыл вкладку и снова открыл страницу, все размещённые объекты исчезли. Экспериментальный WebXR Anchors API появился в Chrome 85, но не получил широкой поддержки. Для persistent AR нужны нативные приложения или 8thwall с серверным хранением позиций.

Web AR и WebXR

• WebXR Device API - стандарт W3C для AR/VR в браузере: XRSession, XRReferenceSpace, hit-test для размещения объектов
• Three.js упрощает работу с WebXR через `renderer.xr.enabled = true` и ARButton
• 8thwall реализует AR полностью на JS/WASM для охвата Safari на iOS, где immersive-ar не поддерживается
• Браузерный AR не имеет persistent anchors, LiDAR и точного face tracking - это намеренные sandbox-ограничения

Связанные темы

Web AR - пересечение AR-разработки и веб-платформы.

• ARKit и ARCore — Нативный уровень, который WebXR оборачивает в браузерный API
• WebGL и 3D в браузере — Рендеринг AR-сцен через Three.js/WebGL

Вопросы для размышления

• Как ограничение на persistent anchors влияет на типы приложений, которые реалистично реализовать через WebXR?
• В каких бизнес-сценариях использование 8thwall вместо нативного AR оправдано, несмотря на дополнительную стоимость лицензии?
• Почему браузерная sandbox-модель ограничивает доступ к данным глубины, и как это соотносится с общими принципами privacy by design?

Связанные уроки

• cg-01