Интеграция AR-примерки товаров на 1С-Битрикс

Интеграция AR-примерки товаров на 1С-Битрикс

Однажды к нам обратился владелец интернет-магазина очков. Мобильный трафик составлял 60%, но конверсия на мобильных была в два раза ниже десктопа — покупатели просто не могли представить, как очки сидят на лице. Мы предложили внедрить AR-примерку на базе WebXR. Через месяц после запуска конверсия на мобильных выросла на 25%, а доля возвратов снизилась на 30%. Расскажу, как повторить этот результат на 1С-Битрикс: от выбора SDK до интеграции в карточку товара.

AR-примерка решает проблему визуализации — камера смартфона накладывает модель товара в реальном времени. Мы регулярно сталкиваемся с запросами на интеграцию такого функционала в Битрикс. Правильный выбор поставщика SDK и грамотная связка данных каталога с 3D-моделями — ключ к быстрому запуску. Реализуем под ключ: от анализа до внедрения. На рынке несколько SDK: WebXR, Snap Camera Kit, Banuba, Visage. Выбор зависит от типа товара и бюджета. Мы поможем подобрать оптимальный вариант под ваш каталог.

Как выбрать SDK для быстрой интеграции?

WebXR + Three.js — браузерный, не требует приложения. Работает в Chrome на Android (iOS — Safari с ограничениями). 3D-модели в формате .glb или .usdz. Подходит для мебели, очков, крупных предметов. По охвату устройств WebXR лучше Snap Camera Kit в 10 раз — не нужна установка дополнительного ПО. Snap Camera Kit / Meta Spark — SDK для создания AR-масок/эффектов. Интеграция через iframe или нативное приложение. Хорошо работает для украшений, очков, аксессуаров. Требует лицензии и загрузки моделей на серверы Snap. Banuba / Visage Technologies — SDK для примерки очков, макияжа, причёсок. Даёт точное наложение по точкам лица. Есть REST API для передачи параметров модели. Лицензия оплачивается отдельно, но точность наложения выше, чем у WebXR. Fit Analytics / True Fit — специализированные сервисы для одежды с рекомендацией размера на основе параметров пользователя. Не AR в строгом смысле, но решают ту же задачу снижения возвратов.

Архитектура интеграции с Битрикс

Суть интеграции — передать AR-виджету идентификатор и параметры товара из каталога Битрикс. Схема:

Карточка товара (catalog.element) → JavaScript передаёт product_id и SKU в AR-виджет → Виджет запрашивает 3D-модель по product_id → /api/ar/model/{product_id} (эндпоинт Битрикс) → Возвращает URL файла .glb/.usdz из b_file → WebXR/SDK отображает модель через камеру 

Как организовать хранение 3D-моделей в каталоге?

Для хранения 3D-моделей создайте свойство инфоблока:

• Код: AR_MODEL_GLB
• Тип: Файл
• Формат: .glb (для Android/WebXR)

И второе свойство для iOS:

• Код: AR_MODEL_USDZ
• Тип: Файл
• Формат: .usdz

Загрузка — стандартная через административный интерфейс или массовая через скрипт импорта (CFile::SaveFile()).

API-эндпоинт для AR-виджета

Создайте обработчик в Битрикс:

// /local/api/ar/model.php require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php'; $productId = (int)$_GET['product_id']; if (!$productId) { http_response_code(400); exit; } \Bitrix\Main\Loader::includeModule('iblock'); $element = \CIBlockElement::GetByID($productId)->GetNextElement(); $props = $element->GetProperties(['AR_MODEL_GLB', 'AR_MODEL_USDZ']); $glbFile = $props['AR_MODEL_GLB']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_GLB']['VALUE']) : null; $usdzFile = $props['AR_MODEL_USDZ']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_USDZ']['VALUE']) : null; $ua = $_SERVER['HTTP_USER_AGENT'] ?? ''; $isIos = str_contains($ua, 'iPhone') || str_contains($ua, 'iPad'); header('Content-Type: application/json'); echo json_encode([ 'model_url' => $isIos ? ($usdzFile ?? $glbFile) : ($glbFile ?? $usdzFile), 'product_id' => $productId, 'ar_supported' => (bool)$glbFile, ]); 

Как подключить WebXR в шаблоне карточки товара?

В шаблоне компонента catalog.element (или result_modifier.php) добавьте:

// Проверяем поддержку WebXR if ('xr' in navigator && $arModelUrl) { const arButton = document.createElement('a'); arButton.rel = 'ar'; arButton.href = $arModelUrl; // URL файла .usdz для iOS Quick Look // Для Android/WebXR — используем <model-viewer> const modelViewer = document.createElement('model-viewer'); modelViewer.setAttribute('src', $arModelUrlGlb); modelViewer.setAttribute('ar', ''); modelViewer.setAttribute('ar-modes', 'webxr scene-viewer quick-look'); modelViewer.setAttribute('camera-controls', ''); document.getElementById('ar-container').appendChild(modelViewer); } 

Библиотека @google/model-viewer (подключается через CDN) обеспечивает поддержку всех трёх AR-режимов: WebXR (Chrome Android), Scene Viewer (Android нативный), Quick Look (iOS Safari).

Интеграция через внешние SDK (Banuba, Snap)

Если используете сторонний SDK с лицензией:

// Передаём параметры товара в SDK window.BANUBA_SDK.init({ clientToken: 'YOUR_TOKEN', onReady: () => { window.BANUBA_SDK.tryOn({ productId: <?= $arResult['ID'] ?>, sku: '<?= $arResult['PROPERTIES']['ARTICLE']['VALUE'] ?>', category: 'eyewear', // glasses, rings, watches }); } }); 

SDK сам запрашивает модель со своих серверов по productId — для этого нужно предварительно загрузить модели в их CDN через их API или административную панель.

Как выполнить массовую загрузку 3D-моделей?

Для каталога 500+ товаров с AR-моделями нужен скрипт импорта:

$csv = parseCsv('/import/ar_models.csv'); // product_xml_id, glb_file, usdz_file foreach ($csv as $row) { $element = getElementByXmlId(CATALOG_IBLOCK_ID, $row['product_xml_id']); if (!$element) continue; $glbId = \CFile::SaveFile(['name' => $row['glb_file'], 'tmp_name' => '/models/' . $row['glb_file'], ...], 'catalog_ar'); $usdzId = \CFile::SaveFile(['name' => $row['usdz_file'], 'tmp_name' => '/models/' . $row['usdz_file'], ...], 'catalog_ar'); \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $glbId, 'AR_MODEL_GLB'); \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $usdzId, 'AR_MODEL_USDZ'); } 

Как отслеживать эффективность AR-примерки?

Подключите отслеживание: сколько пользователей запустили AR-примерку, как это влияет на конверсию.

// При запуске AR-примерки modelViewer.addEventListener('ar-status', (event) => { if (event.detail.status === 'session-started') { ym(METRIKA_ID, 'reachGoal', 'ar_try_on_started', { product_id: productId, category: productCategory, }); } }); 

Сравниваете конверсию сессий с AR-примеркой и без — это основной KPI, который обосновывает затраты на подготовку 3D-моделей. По данным Google ARCore, AR-примерка увеличивает конверсию на 20–30%. Настроим A/B-тест для вашего магазина и предоставим отчёт.

Что входит в работу

• Выбор оптимального SDK под ваш тип товаров и бюджет.
• Настройка хранения 3D-моделей в инфоблоках.
• Разработка API-эндпоинта для выдачи моделей.
• Интеграция AR-виджета в шаблон карточки товара.
• Настройка аналитики и A/B-теста.
• Обучение менеджеров загрузке моделей.
• Документация и код в вашем репозитории.

Состав работ и сроки

Основная трудоёмкость проекта — создание 3D-моделей товаров. Интеграция кода без подготовки моделей занимает 3–5 недель. Получите консультацию по вашему проекту — оценим возможность внедрения AR-примерки за один день. Свяжитесь с нами для обсуждения деталей.