Віртуальна примірка окулярів — одна з найзатребуваніших 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 (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 днів. Зв'яжіться з нами, щоб отримати демо та обговорити деталі. Ми гарантуємо прозору співпрацю та фіксовані терміни. Зверніться до наших інженерів з досвідом у AR — вони підберуть оптимальне рішення під ваш стек.