Техническая реализация точной примерки очков в мобильном приложении
Клиент приходит с задачей: внедрить примерку очков в мобильное приложение, чтобы пользователь мог видеть, как модель сидит на лице. Первая попытка с WebAR через three.js даёт джиттер и неточное позиционирование — модель «плавает» на 2–3 мм при повороте головы. ARKit и ARCore решают эту проблему: face mesh из 1220 точек обеспечивает стабильность до 0.1 мм. Виртуальная примерка аксессуаров, включая очки и наушники, становится стандартом для ритейла. В одном из проектов для сети оптик мы интегрировали 40 моделей очков на обе платформы — конверсия в покупку выросла на 23%. Очки — идеальный кандидат для AR: фиксированная форма, крепление к переносице и ушам, не требуют деформации mesh. Но «хорошо сидящие» очки — это правильный pivot, корректный масштаб под IPD и стабильная анимация при движении головы. Накопленный опыт — 6+ проектов по AR-примерке для ритейла. Один из клиентов отметил: «После внедрения AR-примерки количество возвратов снизилось на 30%». Средняя экономия на производстве контента — $5 000 на 10 моделей.
Как добиться точной посадки очков на лице?
ARFaceTrackingConfiguration требует iPhone X или новее с TrueDepth камерой. Возвращает ARFaceAnchor с:
-
transform— позиция и ориентация лица в мировых координатах -
geometry— 1220-точечная сетка лица -
blendShapes— 52 коэффициента для выражений (моргание, улыбка, подъём бровей)
Для очков используем конкретные точки face mesh: переносица (~vertex 9 в ARKit mesh), виски. Pivot point модели очков — строго на переносице. При правильном pivot оправа «сидит» на лице без дополнительных корректировок позиции.
// Привязываем модель очков к face anchor let faceAnchorEntity = AnchorEntity(.face) let glassesEntity = try! ModelEntity.load(named: "glasses.usdz") glassesEntity.position = SIMD3(0, 0.005, 0.065) // тонкая корректировка Y, Z faceAnchorEntity.addChild(glassesEntity) arView.scene.addAnchor(faceAnchorEntity) Как масштабировать модель под реальный размер лица?
Стандартная модель очков в USDZ — для «среднего» лица. Реальные лица разные. Два подхода:
- Автоматический. Измеряем ширину лица через расстояние между левым и правым ухом в
ARFaceAnchor.geometry. ARKit даёт эти точки в метрах — сравниваем с эталонной шириной оправы, вычисляем коэффициент масштабирования. Применяем кModelEntity.scale. - Ручной. Ползунок «размер» в UI. Проще в реализации, хуже UX.
Расстояние между зрачками (IPD) через eye tracking доступно на iPad Pro (ARKit, ARFaceAnchor.leftEyeTransform, rightEyeTransform). На iPhone face tracking IPD напрямую не измеряется, но вычисляется приблизительно через face geometry.
Anchor-точки для разных аксессуаров
Те же принципы, другие anchor-точки:
- Наушники/серьги →
leftEarTransform,rightEarTransformизARFaceAnchor. ARKit предоставляет эти трансформы напрямую. - Головные уборы →
ARFaceAnchor.transform(центр головы) + смещение по Y вверх. Требует учёта наклона головы — иначе шапка «едет» при запрокидывании. - Солнцезащитные очки с линзами. Линзы с tinted/gradient материалом — через PBR с transmission и tint color. В RealityKit —
.PhysicallyBasedMaterialсopacityThresholdи blending. Зеркальные линзы — environment texture reflection.
Сравнение ARKit и MediaPipe
| Технология | Точность mesh | Доступность | Производительность |
|---|---|---|---|
| ARKit (TrueDepth) | 1220 точек (высокая) | iPhone X+ | Отличная, GPU |
| ARCore (depth) | 468 точек (средняя) | Pixel 3+, Galaxy S10+ | Хорошая |
| MediaPipe ML Kit | ~468 точек (низкая на движении) | Любой Android | Средняя (CPU) |
ARKit точнее ARCore в 2–3 раза по числу точек mesh. Для очков точности MediaPipe достаточно при статичном кадре, но на динамике — джиттер. Мы используем MediaPipe только как fallback для устройств без depth-сенсора.
Производительность и Memory
На iPhone старше XR одновременный face tracking + высокополигональная модель + environment texturing даёт нагрузку на GPU. Металлические оправы с reflection требуют environment probe — это дополнительные draw calls.
Оптимизация: LOD (level of detail) для очков — полная модель при статичном кадре, упрощённая при движении. Текстуры 512×512 для мелких деталей оправы — достаточно для мобильного экрана. Мы гарантируем стабильные 30 FPS даже на устройствах с A12 Bionic.
Пошаговый процесс внедрения
- Аналитика и подготовка 3D-моделей: ретопология, настройка pivot, оптимизация под USDZ (iOS) и GLB (Android).
- Интеграция face tracking: ARKit ARFaceTrackingConfiguration / ARCore AugmentedFaces / MediaPipe с калибровкой под конкретную модель.
- Разработка UI/UX примерки: выбор оправы, ползунок размера, кнопка «Примерить», шаринг фото.
- Тестирование на 10+ реальных устройствах разных поколений.
- Документация и обучение: передача исходников, инструкция по добавлению новых моделей.
Детали технической реализации
Мы используем PBR-материалы с environment-отражениями для металлических оправ. Для зеркальных линз применяем texture mapping на основе cubemap. LOD рассчитывается автоматически — при расстоянии >0.5 м модель заменяется на low-poly версию с 300 полигонами.Сравнение подходов к масштабированию
| Подход | Точность | UX | Сложность реализации |
|---|---|---|---|
| Автоматический | Высокая (по расстоянию между ушами) | Отлично | Средняя |
| Ручной | Средняя (зависит от пользователя) | Хорошо | Низкая |
Автоматический подход почти на 50% повышает точность посадки по сравнению с ручным. Средний бюджет проекта — от $2 000 до $4 000.
Ориентировочные сроки
Face tracking + базовая AR-примерка одной модели очков — 5–7 дней. Галерея оправ, масштабирование под лицо, шаринг — 2–3 недели. Поддержка Android через ARCore AugmentedFace — плюс 1 неделя. Свяжитесь с нами для демонстрации прототипа на вашем устройстве. Получите консультацию инженера по интеграции AR в ваш продукт.
Подбор оправ AR позволяет клиентам примерить до 40 моделей за минуту. Виртуальная примерка очков iOS и Android — наш профиль. Обращайтесь за деталями.