Разработка AR-примерки товара для интернет-магазина

Разработка AR-примерки товара для интернет-магазина

AR-примерка (Augmented Reality try-on) позволяет пользователю виртуально «надеть» или «разместить» товар в своей реальности через камеру устройства. Это снижает процент возвратов и повышает конверсию в категориях, где внешний вид критичен: очки, косметика, мебель, обувь. Технически AR в браузере — задача нетривиальная: здесь пересекаются компьютерное зрение, 3D-рендеринг и ограничения WebAPI.

Типы AR-примерки и технологическая база

Face AR (лицо): очки, солнцезащитные линзы, маски, макияж, головные уборы. Основа — face landmark detection (468 точек MediaPipe Face Mesh). Наиболее зрелая технология для браузера.

Body AR: примерка одежды, обуви на всё тело. Требует pose estimation (MediaPipe Pose / BlazePose). Сложнее из-за деформации ткани, вариативности поз.

Room AR (размещение в пространстве): мебель, декор, техника в интерьере. Базируется на plane detection — поиске горизонтальных плоскостей (пол, стол) через SLAM или глубинный датчик.

Hand AR: кольца, часы, браслеты. MediaPipe Hands (21 keypoint на каждую руку).

Face AR — техническая реализация

Наиболее частый кейс — примерка очков. Стек:

Камера → getUserMedia()
  → MediaPipe FaceMesh → 468 landmark points
  → Three.js / Babylon.js → 3D-модель очков (GLTF)
  → Выравнивание модели по точкам лиц (нос, виски, уши)
  → Рендер поверх видеопотока
  → Отображение в <canvas>

MediaPipe FaceMesh работает в браузере через WASM + WebGL. Производительность: ~30 FPS на современном смартфоне, ~60 FPS на десктопе с GPU.

import { FaceMesh } from '@mediapipe/face_mesh';
import { Camera } from '@mediapipe/camera_utils';

const faceMesh = new FaceMesh({
  locateFile: file => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`
});

faceMesh.setOptions({
  maxNumFaces: 1,
  refineLandmarks: true,
  minDetectionConfidence: 0.7,
  minTrackingConfidence: 0.7,
});

faceMesh.onResults(results => {
  if (!results.multiFaceLandmarks.length) return;
  const landmarks = results.multiFaceLandmarks[0];

  // Ключевые точки для очков:
  const noseBridge = landmarks[6];      // переносица
  const leftTemple = landmarks[234];    // левый висок
  const rightTemple = landmarks[454];   // правый висок
  const leftEar = landmarks[93];        // левое ухо
  const rightEar = landmarks[323];      // правое ухо

  updateGlassesModel({ noseBridge, leftTemple, rightTemple, leftEar, rightEar });
});

Выравнивание 3D-модели по точкам лица:

1. Вычисляем центр, угол наклона и масштаб из координат висков и переносицы
2. Применяем трансформации к 3D-объекту: position, rotation, scale
3. Рендерим через Three.js поверх видеопотока (canvas overlay с mix-blend-mode: multiply или прозрачным фоном)

3D-модели для AR

Требования к GLTF-моделям для AR-примерки:

• Polycount: до 10 000 треугольников — иначе рендеринг в реальном времени тормозит
• Текстуры: 512×512 или 1024×1024, PBR-материалы (metalness/roughness)
• Размеры в метрах: физически корректные, чтобы масштабирование по точкам лица давало реалистичный результат
• LOD: две версии — подробная для десктопа, упрощённая для мобайла

Для каждого продукта (каждой пары очков) — отдельный GLTF-файл. При каталоге 500 артикулов — 500 моделей. Это основная операционная сложность: моделирование контента, а не разработка виджета.

Альтернатива полному 3D: 2D layer overlay — вырезанное изображение накладывается поверх видео с деформацией по точкам лица. Менее реалистично, но модели готовятся в Photoshop, а не в 3D-редакторе.

Косметика (виртуальный макияж)

Для губной помады, румян, теней — другой подход: не 3D-модель, а окрашивание областей лица по маске.

// Получаем маску губ из landmark points
const lipPoints = [61, 185, 40, 39, 37, 0, 267, 269, 270, 409, 291, ...];
const lipPath = lipPoints.map(i => landmarks[i]);

// Рисуем на canvas поверх видео
ctx.beginPath();
lipPath.forEach((point, i) => {
  const x = point.x * canvas.width;
  const y = point.y * canvas.height;
  i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
});
ctx.closePath();
ctx.globalAlpha = 0.6;
ctx.fillStyle = selectedColor; // цвет выбранной помады
ctx.fill();

Реалистичность повышается через blending modes и учёт освещения (ambient light estimation из MediaPipe).

Room AR — мебель и интерьер

Для размещения мебели в интерьере нужен plane detection — поиск горизонтальных плоскостей. В браузере это возможно через WebXR API (Chrome на Android с ARCore) и частично через эвристику (анализ текстуры поверхности через CV).

if (navigator.xr) {
  const session = await navigator.xr.requestSession('immersive-ar', {
    requiredFeatures: ['hit-test', 'local']
  });
  // ...
}

Поддержка WebXR immersive-ar: Chrome на Android (ARCore), Safari на iOS (ARKit через <model-viewer>). На десктопе — не работает. Это ограничение платформы, не разработки.

Альтернатива для iOS: AR Quick Look — нативный просмотрщик. Достаточно предоставить USDZ-файл (формат Apple для AR):

<a href="product.usdz" rel="ar">
  <img src="ar-badge.png" alt="Просмотреть в AR">
</a>

iOS Safari автоматически откроет USDZ в нативном AR-режиме через ARKit. Это самый простой способ дать пользователям iOS AR-опыт без WebXR.

<model-viewer> — универсальный компонент

Google's <model-viewer> — Web Component, который объединяет 3D-просмотр и AR:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>

<model-viewer
  src="chair.glb"
  ios-src="chair.usdz"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate
  alt="Офисное кресло"
  style="width: 400px; height: 400px;"
>
  <button slot="ar-button">Посмотреть в вашем пространстве</button>
</model-viewer>

ar-modes="webxr scene-viewer quick-look" — автоматически выбирает лучший доступный режим: WebXR на Android, Quick Look на iOS, Scene Viewer как fallback.

Готовые SaaS-решения

Разработка AR с нуля — дорого и долго. Для старта рассмотрите:

• Banuba — SDK для face AR, есть Web SDK
• Perfect Corp (YouCam) — виртуальный макияж, примерка очков, готовый виджет
• Vertebrae / Zakeke — room AR для мебели и декора
• Shopify AR — встроенная поддержка GLTF/USDZ через <model-viewer>

SaaS снижает время запуска с 3–4 месяцев до 2–4 недель, но требует постоянной подписки и зависимость от вендора.

Метрики эффективности

• AR engagement rate: % пользователей, запустивших AR из карточки товара
• Конверсия AR-пользователей vs. неAR — ключевой показатель ROI
• Процент возвратов в AR-категориях после внедрения
• Время сессии на странице товара с AR

Типичные данные из кейсов: конверсия AR-пользователей на 20–40% выше, процент возвратов снижается на 20–30% в очках и косметике.

Сроки

• Room AR через <model-viewer> (GLTF + USDZ, AR Quick Look на iOS, WebXR на Android): 1–2 недели (разработка), основное время — подготовка 3D-моделей
• Face AR для очков (MediaPipe + Three.js, кастомная реализация): 6–10 недель
• Косметика / макияж (pixel-level blending): 4–8 недель
• Интеграция Banuba/YouCam SDK: 2–4 недели + стоимость лицензии SDK

Подготовка 3D-контента (моделирование + конвертация) — отдельная статья бюджета, часто бо́льшая, чем сама разработка.