AR-примерка позволяет клиентам виртуально «надеть» или «разместить» товар в реальном окружении через камеру смартфона или веб-браузер. По данным Shopify и Accenture, продавцы с AR видят рост конверсии на 40-94% и снижение возвратов на 25%. Студия ZORKA разрабатывает WebXR-решения, которые работают без установки приложений и интегрируются с любыми платформами электронной коммерции.
Когда AR-примерка действительно окупается
AR показывает максимальную отдачу для категорий с высокой неопределенностью: мебель (как диван впишется в комнату?), очки и аксессуары (подойдет ли форма лица?), косметика (оттенок на коже), одежда и обувь (размер, посадка). Если клиент не уверен в выборе, он либо не покупает, либо заказывает несколько вариантов и возвращает лишние.
Статистика Google и Deloitte: 61% покупателей предпочитают магазины с AR, 40% готовы заплатить больше за товар, который можно виртуально примерить. В 2026 году WebXR Device API поддерживается в Chrome, Edge, Safari 17.4+ на iOS, что позволяет запускать AR прямо в браузере без нативных приложений. ZORKA использует Three.js с WebXR и модели в формате glTF 2.0 с Draco-компрессией: средний размер 3D-модели мебели снижается с 8-12 МБ до 600-800 КБ, загрузка занимает 0.8-1.2 секунды на 4G.
Начните с MVP на одной товарной категории и замерьте метрики конверсии за 2 недели. Если рост +15% и выше - масштабируйте на весь ассортимент.
Как работает WebXR-примерка без мобильных приложений
WebXR Device API предоставляет доступ к камере, акселерометру и гироскопу устройства. Three.js отвечает за рендеринг 3D-модели товара, накладывая ее поверх видеопотока с камеры. Model-viewer от Google - готовый веб-компонент для быстрого старта, но его кастомизация ограничена. ZORKA строит кастомные Three.js-сцены с полным контролем освещения, теней, материалов PBR (Physically Based Rendering) и постобработки.
Для категории «очки» критичен face-tracking: библиотека MediaPipe Face Mesh определяет 468 ключевых точек лица в реальном времени (60 FPS на iPhone 13+), модель оправы позиционируется на переносице и висках. Для мебели требуется plane detection - WebXR Plane Detection API находит горизонтальные поверхности (пол, стол) и привязывает модель к ним. ZORKA реализовала оба варианта для ретейлеров: время разработки face-tracking модуля составляет 8-10 дней, plane detection - 5-7 дней.
Используйте WebXR Plane Detection для товаров, которые стоят на полу или столе. Для wearables (очки, украшения, шляпы) подключайте MediaPipe Face Mesh с кастомными якорями.
Как удержать 60 FPS и LCP под 1.5 секунды
AR-сцена работает в реальном времени: падение FPS ниже 45 вызывает головокружение и отказ от использования. Core Web Vitals для AR-страниц: LCP (Largest Contentful Paint) должен быть менее 1.5 секунды, FID (First Input Delay) - менее 100 мс, CLS (Cumulative Layout Shift) - близок к нулю. ZORKA применяет комплекс техник: Draco-компрессия glTF, ленивая загрузка материалов (albedo, normal, roughness грузятся по запросу), инстансирование геометрии для повторяющихся элементов, LOD (Level of Detail) для дальних объектов.
Измерения на реальном проекте для интернет-магазина мебели: начальный вес модели дивана - 11 МБ, 280 000 полигонов, LCP 4.8 сек. После Draco-сжатия и упрощения геометрии до 40 000 полигонов: 720 КБ, LCP 1.1 сек, FPS стабильно 60 на iPhone 12. Количество обращений в техподдержку с жалобами на «тормоза» снизилось с 18% до 0.3%. Клиенты, которые воспользовались AR, конвертируют в покупку на 62% чаще, чем те, кто просто смотрит фото.
Запускайте Lighthouse-аудит для AR-страниц на мобильных устройствах каждую неделю. Цель: Performance Score 85+, LCP менее 1.5 сек, FPS не ниже 55.
Откуда брать модели и как их оптимизировать
3D-модели товаров можно получить тремя путями: фотограмметрия (съемка объекта со всех сторон + автоматическая реконструкция в Agisoft Metashape или RealityCapture), ручное моделирование в Blender или Maya, заказ у специализированных студий. Фотограмметрия дает высокую точность, но требует постобработки: сырая модель весит 50-200 МБ, содержит артефакты, нуждается в ретопологии и baking текстур.
ZORKA выстроила конвейер обработки: исходная модель упрощается до 20 000-50 000 полигонов, высокодетальная геометрия запекается в normal map, цвета - в albedo map, шероховатость - в roughness map. Итоговый glTF с Draco: 400-900 КБ для мебели, 150-250 КБ для аксессуаров. Для клиентов, у которых нет 3D-моделей, студия организует фотосъемку (30-50 снимков на объект) и полный цикл обработки: стоимость одной модели - от 8 000 до 25 000 рублей в зависимости от сложности, срок - 3-5 дней.
Если у вас есть CAD-модели товаров, экспортируйте их в FBX или OBJ и передайте команде. Если моделей нет, начните с 10-15 топовых SKU и замерьте влияние AR на их продажи.
Как встроить AR в существующую карточку товара
AR-функционал должен быть виден сразу: кнопка «Примерить в AR» или «Посмотреть в своей комнате» располагается рядом с кнопкой «Купить» и имеет контрастный цвет. Клик вызывает WebXR-сессию: браузер запрашивает доступ к камере, затем загружает 3D-модель и накладывает ее на видеопоток. ZORKA интегрирует AR-модуль через REST API или SDK: платформа отдает SKU товара, API возвращает URL glTF-модели и метаданные (размеры, цвета, варианты).
Для платформ Shopify, WooCommerce, 1C-Битрикс студия разработала плагины, которые автоматически добавляют AR-кнопку на все карточки товаров с загруженными 3D-моделями. Установка плагина занимает 15-30 минут, настройка стилей и позиционирования кнопки - еще 2-3 часа. Аналитика отслеживается через Google Analytics 4 и Яндекс.Метрику: события «ar_view_start», «ar_view_duration», «ar_to_cart», «ar_to_purchase». В среднем клиенты проводят 45-90 секунд в AR-режиме, после чего 38-54% добавляют товар в корзину.
Настройте воронку в Google Analytics: AR View → Add to Cart → Purchase. Сравните конверсию пользователей с AR и без. Если разница +20% и выше, масштабируйте на весь каталог.
- Разработка под iOS и Android: 3-6 месяцев, стоимость от 2 000 000 рублей
- Клиент должен установить приложение: 80-90% пользователей отказываются на этом этапе
- Модели весят 5-15 МБ, загрузка занимает 8-20 секунд на 4G, FPS проседает до 25-35
- Работает в браузере Safari, Chrome, Edge без установки: конверсия в AR-сессию 65-78%
- Draco-сжатие и LOD: модели 400-900 КБ, загрузка 0.8-1.2 сек, стабильные 60 FPS
- Запуск MVP за 12-18 дней, стоимость от 350 000 рублей, интеграция с любыми CMS
- Анализ каталога: выбор товаров с высоким потенциалом для AR (мебель, аксессуары, косметика)
- Фотосъемка или получение CAD-моделей, обработка в Blender, экспорт в glTF с Draco-сжатием
- Тестирование моделей на устройствах: iPhone 12+, Samsung Galaxy S21+, проверка FPS и времени загрузки
- Настройка Three.js-сцены с WebXR Device API, plane detection или face tracking
- Интеграция с платформой e-commerce: REST API или плагин для Shopify, WooCommerce, Битрикс
- Настройка аналитики: события в Google Analytics 4 и Яндекс.Метрике, A/B-тест на 10% трафика
- Нагрузочное тестирование, Lighthouse-аудит, финальная оптимизация перед запуском
Часто задаваемые вопросы
WebXR поддерживается в Chrome 79+, Edge 79+, Safari 17.4+ на iOS (iPhone XR и новее). На Android требуется Android 9+ и ARCore. Студия ZORKA тестирует решения на реальных устройствах: iPhone 12-15, Samsung Galaxy S21-S24, Google Pixel 6-8. Если у вашей аудитории старые устройства, мы реализуем fallback: вместо AR показываем 360-градусный просмотр модели.
Зависит от сложности. Простые аксессуары (очки, украшения): 8 000-12 000 рублей за модель, срок 2-3 дня. Мебель средней сложности (кресло, стол): 15 000-25 000 рублей, 3-5 дней. Если у вас есть CAD-модели, стоимость обработки снижается до 3 000-6 000 рублей за единицу. Для начала рекомендуем выбрать 10-15 топовых SKU и замерить эффект на продажах за 2-4 недели.
При правильной оптимизации AR не замедляет сайт. ZORKA использует ленивую загрузку: 3D-модель подгружается только после клика на кнопку «Примерить в AR», основная страница грузится как обычно. LCP остается в пределах 1.2-1.5 сек, Core Web Vitals в зеленой зоне. Для SEO важна структурированная разметка Schema.org Product с полем «hasOfferCatalog» и атрибутом «augmentedRealityAvailable». Google индексирует AR-контент и показывает бадж «View in 3D» в поисковой выдаче.
Да, ZORKA интегрирует AR через плагины или REST API без изменения ядра платформы. Для Shopify и WooCommerce готовы плагины, установка занимает 15-30 минут. Для кастомных CMS разрабатываем отдельный API-эндпоинт, который отдает URL 3D-моделей по SKU товара. Фронтенд-модуль подключается одним скриптом, кнопка AR добавляется в шаблон карточки товара. Полная интеграция занимает 3-5 дней, не требует остановки сайта.
Планируете внедрить AR-примерку на сайте?
Команда ZORKA проведет аудит вашего каталога, подготовит техническое решение на WebXR и предложит фиксированную смету за 2 дня.