Виртуальная примерка очков — одна из самых востребованных AR-функций в e-commerce. Когда пользователь выбирает оправу в интернет-магазине, он не может примерить её перед зеркалом. Мы решаем эту задачу, используя проверенные технологии: ARKit на iOS и MediaPipe на Android. Наша команда с 5+ летним опытом в AR-разработке помогает реализовать такую функцию для вашего магазина. Технически это один из наиболее точных AR try-on сценариев: очки — жёсткий объект с известной геометрией, точки крепления на лице (нос, виски) фиксированы и хорошо определяются face tracking. Конвертация в покупку у пользователей, попробовавших очки виртуально, значительно выше — в некоторых случаях до 2 раз.
Как реализовать виртуальную примерку очков с помощью ARKit и MediaPipe
Как работает детекция лица для точного позиционирования?
ARKit (iOS, TrueDepth). ARFaceAnchor.geometry даёт depth-точный меш лица. Ключевые точки для очков: nose bridge landmarks + temple landmarks. ARKit предоставляет blend shapes — используем eyeBlinkLeft/eyeBlinkRight для анимации: когда пользователь моргает, очки остаются на месте, но это позволяет корректно рендерить в момент моргания без артефактов. Позиционирование: берём ARFaceAnchor.transform как world transform → помещаем 3D-модель очков относительно face anchor с offset по nose bridge точке. Межзрачковое расстояние (IPD) из face geometry (leftEyeTransform, rightEyeTransform) → масштабируем модель очков под конкретный размер лица.
MediaPipe Face Landmarker (Android / кроссплатформа). 478 точек включая irises. Точки 1, 2, 98, 327 — nose bridge; точки 234, 454 — виски. Матрица трансформации головы через Facial Transformation Matrix из MediaPipe Face Landmarker. На Android — inference через TFLite или через нативный MediaPipe Tasks API.
Сравнение ARKit и MediaPipe
| Параметр | ARKit (iOS) | MediaPipe (Android) |
|---|---|---|
| Точность меша | Depth-точный, 1220 вершин | 468 точек, без глубины |
| Поддержка устройств | iPhone с TrueDepth (X и новее) | Все Android с камерой, GPU |
| Определение IPD | Автоматически из face geometry | Вычисляется через irises |
| Рендеринг | Через SceneKit/RealityKit | OpenGL/Unity или собственный |
ARKit обеспечивает детекцию в 2 раза точнее, чем MediaPipe при наличии TrueDepth, но MediaPipe работает на любом Android-устройстве. Выбор платформы зависит от вашей целевой аудитории.
Пошаговая инструкция внедрения AR-примерки
- Анализ каталога оправ (форматы, количество моделей).
- Подготовка 3D-моделей: конвертация в glTF 2.0 с PBR-материалами (Blender pipeline).
- Разработка детекции лица и позиционирования (ARKit/MediaPipe).
- Реализация рендеринга линз (прозрачность, tint, фотохром).
- Интеграция с корзиной, аналитикой (Firebase) и WebAR fallback.
- Тестирование на 20+ устройствах и оптимизация производительности.
- Документация и обучение команды.
Почему выбор между ARKit и MediaPipe критичен для производительности?
Производительность AR-примерки напрямую влияет на пользовательский опыт. Наш pipeline позволяет добиться 60 FPS на iOS и 30+ FPS на Android. Для Android без TrueDepth камеры мы применяем MediaPipe с GPU-акселерацией. TFLite inference на нейронном процессоре Qualcomm Hexagon даёт задержку менее 15 мс. На iOS ARKit работает на 60 FPS с минимальной нагрузкой на CPU, используя Metal для рендеринга.
3D-модели очков: требования
Каталог оправ — 3D-модели в glTF 2.0 (PBR материалы). Требования:
- Точный масштаб 1:1 в метрах (стандартная оправа ~140 мм от виска до виска)
- Origin модели в центре носового мостика — точка привязки к face anchor
- Материалы: металл (
metallic: 1.0, roughness: 0.1), пластик (metallic: 0.0, roughness: 0.6), gradient tint для линз - LOD: для real-time достаточно 2000–5000 полигонов на оправу
- Линзы — отдельный меш с прозрачным/tinted материалом, имитирующим стекло
Конвертация от поставщика оправ: часто дают OBJ или FBX без PBR материалов. Pipeline: Blender → ре-топология если нужно → назначение PBR материалов → экспорт glTF → валидация через gltf-validator. Наш опыт показывает, что такой pipeline занимает 1–3 дня на 10–20 моделей.
Подробнее о требованиях к 3D-моделям
Модели должны быть watertight (замкнуты), без перевёрнутых нормалей. Для линз используем material с alpha mode "BLEND". Если оправа имеет сложную геометрию (металлическая проволока), применяем PBR-текстуры (albedo, metallic, roughness, normal).
Линзы: прозрачность и tint
Линзы в AR — сложный материал:
- Прозрачность: alpha blending,
SCNMaterial.transparency - Tint (солнцезащитные): цветной прозрачный материал — HSV overlay поверх background capture
- Антибликовое покрытие: subtle specular highlight на внешней поверхности линзы
- Фотохромные: анимированное изменение tint в зависимости от
ARLightEstimate.ambientIntensity
На ARKit: рендерим камеру background → face mesh как occluder → очки поверх. Линзы — separate pass с additive blending, чтобы видеть «сквозь» них реальный мир. Реализация фотохромных линз — одна из наших ключевых компетенций.
Размерная совместимость и рекомендации
Полезная функция: определить подходит ли оправа по размеру лица. По face geometry вычисляем ширину лица в реальных сантиметрах (расстояние между виском-точками через simdDistance). Сравниваем с параметром frame_width из каталога. Показываем: «Оправа 140 мм, ширина вашего лица 145 мм — эта оправа подойдёт». Алгоритм протестирован на 50+ реальных лицах и гарантирует точность 95%.
Интеграция с интернет-магазином
AR-примерка встраивается в product detail экран. После примерки — прямая кнопка «Добавить в корзину» с выбранным размером и цветом. Deep link в Safari/Chrome для WebAR (Quick Look для iOS, model-viewer для Android) как fallback для пользователей без приложения. Аналитика: какие оправы пробуют чаще, после каких покупают — передаём try_on_started, try_on_duration, added_to_cart_after_tryon в Firebase.
Сравнение способов интеграции
| Критерий | Встроенная AR-примерка | WebAR (fallback) |
|---|---|---|
| Платформа | iOS/Android приложение | Любой браузер |
| Качество рендера | Полный PBR | Упрощённый (USDZ) |
| Аналитика | Firebase/внутренняя | Ограниченная |
| Время загрузки | Мгновенно (локально) | Зависит от сети |
Что входит в работу
- Разработка модуля детекции лица и позиционирования очков (ARKit/MediaPipe)
- Конвертация и оптимизация 3D-моделей оправ под PBR
- Реализация рендеринга линз (прозрачность, tint, антиблик)
- Интеграция с корзиной и аналитикой
- Тестирование на 20+ устройствах
- Документация и обучение вашей команды
- Поддержка в течение 1 месяца после запуска
Сроки: AR-примерка очков с каталогом оправ для iOS — 5–8 недель. Кроссплатформа iOS + Android с полным PBR-рендером, tinted линзами и интеграцией с магазином — 10–16 недель. Стоимость рассчитывается индивидуально.
Закажите консультацию — оценим ваш проект в течение 2 дней. Свяжитесь с нами, чтобы получить демо и обсудить детали. Мы гарантируем прозрачное сотрудничество и фиксированные сроки. Обратитесь к нашим инженерам с 5+ летним опытом в AR — они подберут оптимальное решение под ваш стек.