Реализация AI-виртуальной примерки очков в мобильном приложении
Warby Parker, EyeBuyDirect, Zenni Optical — все крупные онлайн-оптики внедрили AR-примерку. Конвертация в покупку выше у пользователей, попробовавших очки виртуально. Технически это один из наиболее точных AR try-on сценариев: очки — жёсткий объект с известной геометрией, точки крепления на лице (нос, виски) фиксированы и хорошо определяются face tracking.
Face Tracking и размещение очков
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. На Android — inference через TFLite или через нативный MediaPipe Tasks API.
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.
Линзы: прозрачность и 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 мм — эта оправа подойдёт».
Интеграция с интернет-магазином
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-примерка очков с каталогом оправ для iOS: 5–8 недель. Кроссплатформа iOS + Android с полным PBR-рендером, tinted линзами и интеграцией с магазином: 10–16 недель. Стоимость рассчитывается индивидуально.