Представьте: интернет-магазин очков теряет до 30% потенциальных покупателей из-за неуверенности в выборе оправы. Клиент не может примерить очки — и уходит. AR-примерка решает эту проблему: пользователь включает камеру, система детектирует лицо через MediaPipe FaceMesh и накладывает 3D-модель оправы в реальном времени. Результат — конверсия растёт на 40%, а возвраты падают на 30%. Наш опыт в AR для fashion и retail показывает: виртуальная примерка окупается за 6–12 месяцев при каталоге от 500 артикулов. Получите консультацию по внедрению — мы подберём оптимальный стек под ваш бюджет.
Технически AR в браузере требует совместной работы компьютерного зрения, 3D-рендеринга и веб-API. Мы используем проверенные технологии: WebXR для погружения в пространство, MediaPipe для трекинга лица и тела, Three.js для отрисовки 3D-моделей, model-viewer для быстрого Room 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-модели по точкам лица:
- Вычисляем центр, угол наклона и масштаб из координат висков и переносицы
- Применяем трансформации к 3D-объекту:
position,rotation,scale - Рендерим через Three.js поверх видеопотока (canvas overlay с
mix-blend-mode: multiplyили прозрачным фоном)
Почему 3D-модели — узкое место?
Требования к GLTF-моделям для AR-примерки:
| Параметр | Значение |
|---|---|
| Полигонаж | до 10 000 треугольников |
| Текстуры | 512×512 или 1024×1024, PBR-материалы (metalness/roughness) |
| Масштаб | физически корректные размеры в метрах |
| LOD | две версии: подробная для десктопа, упрощённая для мобайла |
Для каждого продукта — отдельный GLTF-файл. При каталоге 500 артикулов — 500 моделей. Это основная операционная сложность: моделирование контента, а не разработка виджета. Альтернатива — 2D layer overlay: вырезанное изображение накладывается с деформацией по точкам лица. Менее реалистично, но модели готовятся в Photoshop.
Типы AR-примерки и технологическая база
Face AR (лицо): очки, солнцезащитные линзы, маски, макияж, головные уборы. Основа — face landmark detection (468 точек MediaPipe Face Mesh). Это наиболее зрелая и стабильная технология для браузера.
Body AR: примерка одежды, обуви на всё тело. Требует pose estimation (MediaPipe Pose / BlazePose). Сложнее из-за деформации ткани и вариативности поз.
Room AR (размещение в пространстве): мебель, декор, техника в интерьере. Базируется на plane detection — поиске горизонтальных плоскостей (пол, стол) через SLAM или глубинный датчик. Для быстрого старта используем <model-viewer> от Google.
Hand AR: кольца, часы, браслеты. Использует MediaPipe Hands (21 keypoint на каждую руку).
Косметика (виртуальный макияж)
Для губной помады, румян, теней — не 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) и частично через эвристику.
if (navigator.xr) { const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test', 'local'] }); // ... } На iOS используем AR Quick Look через USDZ-файлы. Универсальный компонент — <model-viewer> от Google:
<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" — автоматически выбирает лучший доступный режим.
Кастомная разработка vs SaaS: что выгоднее?
Готовые SDK (Banuba, Perfect Corp, Zakeke) сокращают время запуска до 2-4 недель, но требуют ежемесячной подписки. Кастомное решение на MediaPipe и WebXR обходится без лицензионных платежей и даёт полный контроль, что выгоднее для каталогов от 200 товаров. Экономия на лицензиях может составить до 50% за два года. Сравнение: кастомное решение в 2-3 раза дешевле лицензионных SDK при масштабировании на 500 товаров.
Что входит в работу
- Анализ требований и выбор технологии (Face/Body/Room AR)
- Прототипирование на реальных товарах заказчика
- Интеграция с существующей CMS/каталогом
- Подготовка 3D-моделей или обучение ваших дизайнеров
- Тестирование на устройствах (iOS, Android, десктоп)
- Документация и обучение команды
- Поддержка в течение месяца после запуска
Типичные ошибки при внедрении AR
- Игнорирование LOD — модель с 50k полигонов тормозит на мобильных
- Неправильный масштаб модели в метрах — очки висят в воздухе
- Отсутствие fallback для браузеров без WebXR — пользователь видит пустой экран
- Слишком большие текстуры (2048×2048) — долгая загрузка
Метрики эффективности
| Метрика | Описание |
|---|---|
| AR engagement rate | % пользователей, запустивших AR из карточки товара |
| Конверсия AR-пользователей | vs. неAR — ключевой показатель ROI |
| Процент возвратов | в AR-категориях после внедрения |
| Время сессии | на странице товара с AR |
Типичные данные из кейсов: конверсия AR-пользователей на 20–40% выше, процент возвратов снижается на 20–30% в очках и косметике.
Сроки
- Room AR через
<model-viewer>: 1–2 недели (разработка), основное время — подготовка 3D-моделей - Face AR для очков (MediaPipe + Three.js): 6–10 недель
- Косметика / макияж (pixel-level blending): 4–8 недель
- Интеграция Banuba/YouCam SDK: 2–4 недели + стоимость лицензии
Подготовка 3D-контента — отдельная статья бюджета, часто бо́льшая, чем сама разработка. Свяжитесь с нами для оценки вашего проекта.