Меня зовут Максим, я веб-разработчик. В конце 2025 года я реализовал AR-функцию на сайте производителя светильников: покупатель наводит камеру смартфона на потолок — и видит, как будет выглядеть люстра у него в комнате. Без скачивания приложений, без VR-очков — прямо в браузере. Конверсия со страниц с AR-просмотром оказалась в 2,7 раза выше, чем со стандартных карточек с фотографиями. Звучит как будущее? Технически это уже настоящее. Расскажу, как работает WebXR, какие бизнесы могут его использовать и сколько это стоит.

Что такое WebXR

WebXR — это API браузера, который даёт веб-приложениям доступ к устройствам дополненной (AR) и виртуальной (VR) реальности. Проще говоря: ваш сайт может использовать камеру телефона, чтобы «поставить» виртуальный объект в реальное пространство.

Два режима:

AR (Augmented Reality) — дополненная реальность. Камера показывает реальный мир, а поверх него — 3D-модель вашего товара. Клиент видит, как мебель будет выглядеть в его квартире, как часы сядут на запястье, как светильник впишется в интерьер.

VR (Virtual Reality) — виртуальная реальность. Полностью виртуальное пространство: шоурум, в котором можно «ходить» и рассматривать товары. Требует VR-очков (Meta Quest, PICO) или хотя бы Cardboard-совместимого шлема.

Для большинства бизнес-задач актуальна AR — она работает на обычных смартфонах без дополнительного оборудования.

Поддержка браузерами в 2026 году

Android + Chrome. Полная поддержка WebXR AR через ARCore. Работает на большинстве Android-устройств, выпущенных после 2019 года. Это основная платформа.

iOS + Safari. Apple пошла своим путём: WebXR в Safari поддерживается частично. Для AR Apple продвигает формат USDZ и технологию AR Quick Look — это не WebXR, а отдельный механизм: пользователь нажимает на ссылку, Safari открывает 3D-модель в нативном AR-просмотрщике.

Десктоп. WebXR VR работает с подключёнными VR-гарнитурами. AR на десктопе — не актуально (нет камеры с трекингом пространства).

Практический вывод: для максимального охвата нужно поддерживать оба пути — WebXR для Android и USDZ/AR Quick Look для iOS. Это удваивает работу по подготовке моделей, но покрывает 95%+ мобильных устройств.

Какие бизнесы уже используют AR на сайтах

Мебель и интерьер. Классический кейс: покупатель «ставит» диван, стол, светильник в свою комнату. Видит размер, пропорции, как вписывается в интерьер. Снижает процент возвратов — клиент покупает осознанно.

Ювелирные изделия и часы. AR-примерка: навести камеру на руку — увидеть, как сидят часы или браслет. Масштаб, цвет, детали.

Обувь и одежда. Виртуальная примерка обуви: камера отслеживает ногу и накладывает 3D-модель кроссовки. Технология зреет, но уже работает на флагманских устройствах.

Строительные материалы. Визуализация фасада дома с выбранным кирпичом или сайдингом. Или укладка плитки на пол — камера сканирует поверхность и «раскладывает» плитку.

Промышленное оборудование. Для B2B: клиент «ставит» станок в свой цех — видит, помещается ли по габаритам, как подводить коммуникации.

Образование. Анатомические модели, химические молекулы, архитектурные объекты — в AR на столе перед учеником.

Как я реализовал AR для светильников

Подготовка 3D-моделей

Для каждого светильника (32 модели в каталоге) создали две версии 3D-модели:

glTF/GLB — для WebXR на Android. Формат: оптимизированный для веба, с PBR-материалами (физически корректное освещение). Размер одной модели: 1–3 МБ.

USDZ — для AR Quick Look на iOS. Apple требует свой формат. Конвертация из glTF через инструменты (Reality Converter от Apple или онлайн-конвертеры).

Модели создавал 3D-художник в Blender на основе чертежей и фотографий. Ключевое: модель должна быть реалистичной по материалам (металл, стекло, ткань) и корректной по размерам (в реальных сантиметрах — AR использует реальный масштаб).

Интерфейс на сайте

На карточке каждого светильника — кнопка «Посмотреть у себя дома» (или иконка AR-куба). При нажатии:

На Android: запускается WebXR-сессия. Камера включается, система отслеживает горизонтальные и вертикальные поверхности. Пользователь нажимает на поверхность (потолок) — светильник «появляется» в этом месте. Можно перемещать, вращать, масштабировать.

На iOS: открывается AR Quick Look — нативный AR-просмотрщик Apple. Модель в формате USDZ загружается и отображается в дополненной реальности. Интерфейс — стандартный для iOS, привычный для пользователей.

На десктопе: AR недоступна — вместо неё показываем интерактивный 3D-просмотрщик (вращение мышью). Кнопка AR скрывается.

Технический стек

Определение устройства. JavaScript проверяет: поддерживает ли браузер WebXR (`navigator.xr`), есть ли поддержка AR-сессии (`isSessionSupported('immersive-ar')`). Для iOS — проверяем, является ли устройство Apple (User-Agent), и предлагаем USDZ-ссылку.

WebXR-сцена. Three.js + WebXR API. Создаю XR-сессию, подключаю hit-testing (определение поверхностей в реальном мире), размещаю 3D-модель в точке пересечения.

Компонент model-viewer. Для простых случаев — веб-компонент `<model-viewer>` от Google. Одна строка HTML: `<model-viewer src="lamp.glb" ar ios-src="lamp.usdz" ar-modes="webxr scene-viewer quick-look">`. Поддерживает и WebXR, и AR Quick Look, и 3D-просмотр на десктопе. Для большинства задач — оптимальное решение.

Оптимизация производительности

AR требует ресурсов: камера + рендеринг 3D + трекинг пространства. На бюджетных устройствах — может тормозить.

Что делаю:

  • Модели оптимизированы до минимума полигонов (5 000–20 000 — достаточно для большинства товаров)
  • Текстуры сжаты (KTX2)
  • Draco-компрессия для геометрии
  • Предзагрузка: модель начинает загружаться при наведении на карточку товара (до нажатия на кнопку AR)

Виртуальный VR-шоурум

Второй формат — полноценный виртуальный шоурум. Не AR в реальном пространстве, а VR-пространство, в которое «входит» посетитель.

Когда это оправдано

  • Недвижимость: виртуальный тур по квартире, которая ещё не построена (на основе BIM-модели)
  • Автомобили: виртуальный салон, где можно «сесть» в машину, осмотреть интерьер
  • Музеи и выставки: виртуальные экспозиции
  • Мебель: виртуальная комната с вашей мебелью — клиент «ходит» по ней

Техническая реализация

A-Frame. Фреймворк для создания VR-сцен на HTML. Простой синтаксис, хорошая поддержка WebXR. Подходит для несложных шоурумов.

Three.js + WebXR. Для кастомных решений с высокими требованиями к визуалу и интерактивности.

Готовые платформы. Matterport (для виртуальных туров по реальным объектам), Mozilla Hubs (для социальных VR-пространств).

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

Метрики и бизнес-результат

Светильники: цифры

  • 32 модели с AR-просмотром
  • 18% посетителей карточки товара нажимают кнопку «Посмотреть в AR»
  • Среднее время в AR-сессии: 1 минута 40 секунд
  • Конверсия в заявку с AR-карточки: 8,3% (vs 3,1% без AR)
  • Процент возвратов по товарам, купленным через AR: на 34% ниже среднего

Почему AR повышает конверсию

Снижение неопределённости. Клиент видит товар в своём реальном пространстве — понимает размер, пропорции, как сочетается с интерьером. Это снимает страх «а вдруг не подойдёт».

Вовлечение. AR — это интерактивный опыт. Клиент не пассивно смотрит фото, а активно взаимодействует с товаром. Время на странице растёт, эмоциональная связь с продуктом — тоже.

Wow-эффект. В 2026 году AR на сайте — всё ещё необычно для большинства российских потребителей. Это выделяет вас среди конкурентов и создаёт позитивный опыт бренда.

Ограничения и честный взгляд

Не все устройства поддерживают. ARCore на Android работает на ~85% устройств в продаже. Но бюджетные устройства 2–3-летней давности могут не поддерживать. Важно: если AR недоступна — сайт должен предлагать альтернативу (3D-просмотр, фото), а не показывать ошибку.

Качество зависит от освещения. AR-трекинг работает хуже в темных помещениях. Подсказка на экране: «Для лучшего результата включите свет в комнате».

Стоимость 3D-моделей. Для каталога из 100+ товаров — создание моделей может стоить миллионы рублей. Начинайте с топ-10 самых продаваемых товаров — и расширяйте по мере окупаемости.

iOS-ограничения. AR Quick Look на iOS менее гибкий, чем WebXR: нельзя кастомизировать интерфейс, ограничены интерактивные сценарии. Но базовая AR-примерка работает хорошо.

Стоимость

AR для одного товара (3D-модель + интеграция model-viewer на сайт). Бюджет: 30–70 тысяч рублей за товар (модель + интеграция).

AR-каталог (10–30 товаров). Срок: 1–2 месяца. Бюджет: 300–800 тысяч рублей.

Кастомный AR-конфигуратор (выбор цветов, материалов, размещение в пространстве). Срок: 2–4 месяца. Бюджет: 800 тысяч — 2 миллиона рублей.

VR-шоурум. Срок: 2–5 месяцев. Бюджет: 1–3 миллиона рублей.

Если хотите добавить AR на ваш сайт — обращайтесь.