AI-віртуальна примірка зачіски в мобільному застосунку

Поширена помилка при реалізації віртуальної примірки зачіски — ігнорування фізики волосся. Проста 2D-наклейка не враховує об'єм, динаміку пасом при повороті голови та освітлення. Користувач бачить підробку, конверсія падає. Наше рішення — комбінація 3D hair mesh з симуляцією фізики на GPU для real-time та нейромережевого синтезу для фотореалістичних статичних зображень.

AI-віртуальна примірка зачіски: ключові технології

Проблема в тому, що волосся має складну об'ємну структуру. При повороті голови пасма перекриваються, змінюється відбиття світла. Навіть найкращі 2D-алгоритми стилізації не здатні симулювати динаміку. Тому всі комерційні рішення (ZappRX, YouCam Makeup) використовують або 3D-моделювання, або генеративні нейромережі. Ми застосовуємо обидва підходи залежно від завдання: real-time для відео/AR та фотореалістичний синтез для статичних зображень. Крім форми, можлива і віртуальна примірка кольору волосся на основі HSV-трансформації.

Сегментація волосся — базовий етап. Використовуємо MediaPipe Hair Segmentation або DeepLabV3+ (файнтюн на hair dataset, mIoU від 85%). На iOS — конвертація в CoreML, inference через VNCoreMLRequest. Для real-time потрібна модель з inference < 20 мс на A15.

Коли AI-віртуальна примірка зачіски виправдана?

Якщо ваш застосунок орієнтований на beauty-сегмент, а користувачі очікують інтерактивного підбору стрижки або кольору — без AI-примірки не обійтися. Особливо затребувана функція в застосунках для салонів краси, інтернет-магазинах перук та віртуальних стилістах. Інвестиції виправдані, коли конверсія в покупку безпосередньо залежить від візуалізації результату на реальному фото користувача.

Як вибрати між 3D-мешем та нейромережевим синтезом?

3D Hair Mesh + Face Tracking — AI віртуальна примірка

Працює в реальному часі. Face tracking (ARKit ARFaceAnchor або MediaPipe) визначає положення голови. 3D-модель зачіски з skeleton прив'язується до head transform. Основні складнощі:

• Hair physics — статичний меш виглядає неприродно. Рішення — vertex shader simulation через Metal: кожне пасмо — сплайн з контрольними точками, симуляція spring dynamics на GPU.
• Hair-to-face occlusion — чубчик повинен перекривати лоб. Використовуємо ARFaceGeometry як occluder з SCNMaterial.colorBufferWriteMask = [].
• Підбір розміру — масштабуємо модель за міжзіничною відстанню.

Neural Image Synthesis (нейромережевий підхід)

Підходить для статичних фото — якість вища, але latency 1–5 секунд. Модель image-to-image: вхідне фото + вибрана зачіска → синтезоване зображення. Використовуємо Core ML (iOS) або TFLite (Android) з конвертованою моделлю. Для on-device — SAM + Stable Diffusion Inpainting, для серверного — HairCLIP на GPU (A100/H100).

3D-меш працює швидше нейромережевого підходу в 10 разів для real-time, але поступається в якості фінального зображення.

Як реалізувати real-time примірку?

Етапи реалізації:

1. Сегментація волосся — відділяємо волосся від фону та обличчя. Використовуємо MediaPipe Hair Segmentation або DeepLabV3+ (файнтюн на hair dataset, mIoU від 85%). Для real-time потрібна модель з inference < 20 мс на A15.
2. Збірка каталогу зачісок — 3D-моделі (mesh-підхід) або reference images (neural). Фільтри: довжина, колір, тип. Зміна кольору — HSV-трансформація vertex color / albedo texture.
3. Інтеграція з face tracking — прив'язка 3D-меша до ARFaceAnchor або MediaPipe FaceMesh.
4. Тестування — перевірка на пристроях різних поколінь, оптимізація продуктивності.

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

• Детальне технічне завдання після аудиту вашого застосунку
• Прототип з базовою функцією примірки (демо за 2–4 тижні)
• Повний код модуля (iOS/Android/кроссплатформа)
• Інтеграція з вашим бекендом (REST, GraphQL, Firebase)
• Документація з використання та кастомізації
• Підтримка на етапі релізу та публікації в сторах

Замовте демо-версію, щоб протестувати на ваших пристроях.

Чому наш підхід ефективний?

Більше 5 років досвіду в мобільній розробці. 30+ завершених проєктів у beauty-tech сегменті. Сертифіковані інженери iOS та Android. Гарантуємо дотримання App Store Review Guidelines та політик конфіденційності. Наші рішення вже використовуються в застосунках з мільйонами завантажень. Економія на рекламі за рахунок підвищення конверсії може сягати до 40%.

Терміни

• Real-time 3D hair mesh + face tracking: 8–12 тижнів
• Neural synthesis (серверний inference): 6–10 тижнів
• Комбіноване кроссплатформне рішення: 4–7 місяців

Точна вартість розраховується індивідуально залежно від складності каталогу зачісок, необхідності on-device сегментації та вимог до продуктивності. Отримайте консультацію — обговоримо технічні деталі та підберемо оптимальне рішення.

Основні технології: ARKit для face tracking, MediaPipe для сегментації.

Ми розробляємо 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-ідею.