Реалізація AI-віртуальної примірки окулярів у мобільному додатку

Віртуальна примірка окулярів — одна з найзатребуваніших AR-функцій в e-commerce. Коли користувач обирає оправу в інтернет-магазині, він не може приміряти її перед дзеркалом. Ми вирішуємо це завдання, використовуючи перевірені технології: ARKit на iOS і MediaPipe на Android. Наша команда з досвідом у 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 забезпечує детекцію в 2 рази точніше, ніж MediaPipe при наявності TrueDepth, але MediaPipe працює на будь-якому Android-пристрої. Вибір платформи залежить від вашої цільової аудиторії.

Покрокова інструкція впровадження AR-примірки

1. Аналіз каталогу оправ (формати, кількість моделей).
2. Підготовка 3D-моделей: конвертація в glTF 2.0 з PBR-матеріалами (Blender pipeline).
3. Розробка детекції обличчя та позиціонування (ARKit/MediaPipe).
4. Реалізація рендерингу лінз (прозорість, tint, фотохром).
5. Інтеграція з кошиком, аналітикою (Firebase) та WebAR fallback.
6. Тестування на 20+ пристроях та оптимізація продуктивності.
7. Документація та навчання команди.

Чому вибір між 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 моделей.

Лінзи: прозорість і 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.

Порівняння способів інтеграції

Що входить в роботу

• Розробка модуля детекції обличчя та позиціонування окулярів (ARKit/MediaPipe)
• Конвертація та оптимізація 3D-моделей оправ під PBR
• Реалізація рендерингу лінз (прозорість, tint, антивідблиск)
• Інтеграція з кошиком та аналітикою
• Тестування на 20+ пристроях
• Документація та навчання вашої команди
• Підтримка протягом 1 місяця після запуску

Терміни: AR-примірка окулярів з каталогом оправ для iOS — 5–8 тижнів. Кроссплатформа iOS + Android з повним PBR-рендером, tinted лінзами та інтеграцією з магазином — 10–16 тижнів. Вартість розраховується індивідуально.

Замовте консультацію — оцінимо ваш проект протягом 2 днів. Зв'яжіться з нами, щоб отримати демо та обговорити деталі. Ми гарантуємо прозору співпрацю та фіксовані терміни. Зверніться до наших інженерів з досвідом у AR — вони підберуть оптимальне рішення під ваш стек.

Ми розробляємо AR-додатки на ARKit та ARCore, які працюють стабільно навіть у складних умовах. Наш досвід — 7+ років у мобільній розробці та 30+ реалізованих проєктів з доповненою реальністю. Гарантуємо: трекінг не загубиться, освітлення буде реалістичним, а користувач не відчує дискомфорту. Сертифіковані розробники Apple та Google.

Чому трекінг втрачається і як це виправити?

ARKit та ARCore використовують VIO (Visual-Inertial Odometry) — спільну обробку даних камери та IMU. Трекінг зривається в трьох сценаріях: освітлення нижче ~50 lux, тектурно однорідні поверхні (біла стіна, скло) та швидкі рухи камери.

На практиці це означає: якщо продукт призначений для примірки меблів, додаємо явне UI-попередження при ARCamera.TrackingState.limited(.insufficientFeatures). Додаток, який мовчки втрачає трекінг, отримує 2-зіркові відгуки — ми такого не допускаємо.

Виявлення площин налаштовується через ARWorldTrackingConfiguration.planeDetection = [.horizontal, .vertical]. Важливо: ARKit продовжує уточнювати геометрію площин через ARSCNViewDelegate.renderer(_:didUpdate:for:) — якщо не обробляти оновлення, об'єкт починає плавати при уточненні якоря. Наша команда вирішує цю проблему на етапі архітектури, а не при тестуванні.

AR Foundation: кроссплатформа з нюансами

Unity AR Foundation — шар абстракції поверх ARKit та ARCore. Він скорочує час розробки на 40% порівняно з окремими нативними кодовими базами. Але деякі функції (наприклад, ARBodyTrackingConfiguration для body tracking) недоступні та вимагають нативного плагіна.

Для React Native та Flutter прямого AR Foundation немає. Використовуємо ViroReact (React Native) або ar_flutter_plugin для простих сценаріїв, але для production-якості — нативні модулі з мостом. Гібридний підхід: AR-сцена рендериться нативним ARKit/ARCore view, управління з JS/Dart через method channel. Входить у нашу стандартну поставку.

Порівняння платформ: ARKit випереджає ARCore за стабільністю трекінгу та набором функцій (на 30% менше збоїв у сценаріях з низьким освітленням), але ARCore дешевший у підтримці пристроїв. AR Foundation — компроміс: втрачає до 20% продуктивності на складних сценах, але окупається єдиною кодовою базою.

Try-on: примірка товарів через AR

Примірка окулярів, прикрас, косметики — окремий клас задач. Тут потрібен face tracking, а не plane detection.

ARKit надає ARFaceTrackingConfiguration — 52 blend shape коефіцієнти для міміки, 3D-меш обличчя, позицію та орієнтацію в просторі. Працює лише на пристроях з TrueDepth-камерою (iPhone з Face ID).

Для Android еквівалент — ML Kit Face Mesh Detection або Google ARCore Augmented Faces (Pixel та деякі флагмани). Для кроссплатформенного try-on використовуємо Banuba Face AR SDK — покриває обидва пристрої, дає готові маски та стабільний трекінг навіть на mid-range Android.

Якість try-on критично залежить від 3D-моделей товарів. Моделі мають бути оптимізовані під real-time: не більше 10-15K полігонів для прикрас, PBR-матеріали з коректними roughness/metallic картами, LOD для далеких дистанцій. В рамках нашого підряду ми надаємо готові гайди з оптимізації моделей.

Як досягти реалістичного освітлення в AR?

ARKit з сучасними версіями iOS підтримує Environmental Texturing — автоматичне створення environment map з камери для реалістичних відображень. Вмикається через ARWorldTrackingConfiguration.environmentTexturing = .automatic. Без цього металеві та скляні матеріали виглядають пластиково.

ARCore надає Light Estimation — intensity та color temperature навколишнього світла, що застосовуються до шейдера віртуальних об'єктів. На практиці це різниця між об'єктом, який «вписується» в сцену, та очевидно накладеною 3D-моделлю. Ми гарантуємо, що фінальне зображення не видає віртуальності.

Що входить в роботу

• Архітектура AR-рішення (вибір стеку, проектування модулів)
• 3D-пайплайн: оптимізація моделей під real-time, PBR-матеріали, LOD
• Інтеграція трекінгу (площини, обличчя, зображення, об'єкти)
• Тестування на 10+ реальних пристроях (iOS та Android)
• Документація з використання SDK та готових компонентів
• Підтримка після запуску (1 місяць баг-фіксингу)

Строки та оцінка

Проста AR-сцена з розміщенням однієї 3D-моделі на площині — 1–2 тижні. Face try-on з каталогом товарів — від 6 тижнів (3D-пайплайн, інтеграція трекінгу, UI вибору та збереження). Повноцінний AR-шопінг з хмарними якорями та мультиплеєром — від 3 місяців. Оцінимо проєкт за 1 день — пишіть, обговоримо вашу AR-ідею.