Интеграция 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-примерки за один день. Свяжитесь с нами для обсуждения деталей.