Розробка AR-примірки косметики: віртуальний макіяж під ключ

TRUETECH займається розробкою, підтримкою та обслуговуванням мобільних додатків iOS, Android, PWA. Маємо великий досвід та експертизу для публікації мобільних додатків до популярних маркетів Google Play, App Store, Amazon, AppGallery та інші.

Розробка та підтримка будь-яких видів мобільних додатків:

Інформаційні та розважальні мобільні програми
Новинки, ігри, довідники, онлайн-каталоги, погодні, фітнес та здоров'я, туристичні, освітні, соціальні мережі та месенджери, квіз, блоги та подкасти, форуми, агрегатори
Мобільні програми електронної комерції
Інтернет-магазини, B2B-додатки, маркетплейси, онлайн-обмінники, кешбек-сервіси, біржі, дропшиппінг-платформи, програми лояльності, доставка їжі та товарів, платіжні системи
Мобільні програми для управління бізнес-процесами
CRM-системи, ERP-системи, управління проектами, інструменти для команди продажів, облік фінансів, управління виробництвом, логістика та доставка, управління персоналом, системи моніторингу даних
Мобільні програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, платформи надання електронних послуг, платформи кешбеку, відеохостинги, тематичні портали, платформи онлайн-бронювання та запису, платформи онлайн-торгівлі

Це лише деякі з типів мобільних додатків, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 1734 послуг
Розробка AR-примірки косметики: віртуальний макіяж під ключ
Складний
~1-2 тижні
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_mobile-applications_feedme_467_0.webp
    Розробка мобільного додатка для компанії FEEDME
    858
  • image_mobile-applications_xoomer_471_0.webp
    Розробка мобільного додатку для компанії XOOMER
    744
  • image_mobile-applications_rhl_428_0.webp
    Розробка мобільного додатку для компанії RHL
    1160
  • image_mobile-applications_zippy_411_0.webp
    Розробка мобільного додатку для компанії ZIPPY
    1034
  • image_mobile-applications_affhome_429_0.webp
    Розробка мобільного додатку для компанії Affhome
    968
  • image_mobile-applications_flavors_409_0.webp
    Розробка мобільного додатку для компанії FLAVORS
    562

Розробка AR-примірки косметики: віртуальний макіяж під ключ

Віртуальний макіяж — технічно найвимогливіший сценарій face AR. Помада має точно повторювати контур губ, тіні — лягати на складки повік, а тональний крем — змішуватися з реальним тоном шкіри. Користувач миттєво помічає, якщо межа «пливе» при повороті голови на 20°. Саме тому більшість виробників косметики не пишуть цей стек самостійно — вони звертаються до нас для інтеграції спеціалізованого SDK. Ми зробили вже 15+ проєктів з AR-примірки для косметичних брендів за 5+ років роботи на ринку AR-розробки.

Чому ARKit/ARCore недостатньо для косметики

ARKit ARFaceAnchor дає 1220-точкову сітку обличчя (geometry.vertices) та blendshapes (blendShapes) для виразів. Цього достатньо для масок і AR-фільтрів. Для помади — вже ні: контур губ в ARKit face mesh — це ~80 точок, що при рендерингу дає кутову геометрію, особливо помітну на тонких губах.

Спеціалізовані SDK працюють з 400-900 точками тільки для губ, окремо трекають верхню та нижню повіку, перенісся, область щік. Це дає реалістичність, якої не досягти стандартними засобами.

Як обрати SDK: порівняння популярних рішень

SDK Точки face mesh Косметичні ефекти Ліцензія Час інтеграції
Perfect Corp YouCam 478 точок 120+ (помада, тіні, консилер, туш тощо) Enterprise (від $10 000/рік) 2-3 тижні
Banuba Face AR 468 точок Кастомізовані ефекти Від $149/міс, Enterprise (від $5 000/рік) 2-3 тижні
MediaPipe Face Mesh 468 точок Тільки mesh, все інше кастом Open source (безкоштовно) від 3 місяців
ModiFace (L'Oréal) ~500 точок 100+ Тільки партнерство

Perfect Corp YouCam SDK — індустріальний стандарт. Власна ML-модель face mesh, 120+ ефектів з коробки. Нативний SDK для iOS (Swift/ObjC) та Android (Kotlin/Java). Ми сертифіковані як інтегратор Perfect Corp, що дає доступ до преміум-ефектів. Perfect Corp в 3 рази швидше за MediaPipe за реалістичністю рендерингу завдяки оптимізованому blendshape-трекінгу.

Banuba Face AR SDK — гнучка альтернатива з можливістю кастомізації ефектів через Banuba Effect Player. Дозволяє самостійно створювати ефекти в редакторі. Підтримує iOS, Android, Web. Enterprise-ліцензія дає повний доступ.

Кастомна реалізація через MediaPipe Face Mesh: 468 точок, працює на iOS та Android через MediaPipe Tasks. Безкоштовно, open source. Потребує розробки власного рендерера для накладання косметики — це 3-5 місяців роботи та значно поступається спеціалізованим SDK за реалістичністю. Але підходить для бюджетних проєктів (економія до $50 000 порівняно з Perfect Corp).

Як ми робимо реалістичний рендеринг?

Помада Mesh губ → UV-розгортка → текстура з кольором помади, blended через multiply/screen blend mode з оригінальним зображенням камери. Прозорість регулює «насиченість» тону. Краї — feather через gaussian blur по масці. Завдяки 400+ точкам на губах контур залишається плавним навіть при повороті голови на 60°.
Тіні для повік Gradient texture по повіці з урахуванням кривизни поверхні. Головна складність — при опусканні погляду повіка закривається, і тінь повинна деформуватися разом з нею. Без коректної деформації тінь «відшаровується» від шкіри. Наш алгоритм використовує 30 blendshapes тільки для області очей.
Тональний крем / консилер Не просто overlay — потрібен skin tone matching. Алгоритм аналізує пікселі шкіри поза зоною нанесення, визначає undertone (warm/cool/neutral) та коригує колір продукту під реальний тон. Без цього тональний крем виглядає маскою. Наша оптимізація дозволяє виконувати matching за 2-3 ms на сучасних пристроях.

Live Camera vs Photo Mode

Для live preview через камеру — 30 fps minimum, інакше затримка робить примірку некомфортною. Perfect Corp SDK тримає 30 fps на iPhone X+, 25 fps на Android з Snapdragon 845+. На слабших Android-пристроях продуктивність деградує — плануйте fallback на photo mode.

Photo mode: користувач обирає фото з галереї, отримує статичний рендер макіяжу. Технічно простіше (немає вимог до realtime), результат точніший завдяки більшому часу на обробку.

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

Ми надаємо повний цикл послуг:

  • Аналіз вимог та вибір оптимального SDK під ваш бюджет і строки
  • Інтеграція SDK в нативний додаток (iOS/Android) або кроссплатформний проєкт (Flutter/React Native)
  • Розробка UI вибору продуктів із каталогу, налаштування ефектів, збереження та шерінг результату
  • Тестування на 10+ пристроях (включаючи low-end Android)
  • Документація з експлуатації та підтримки
  • Допомога в проходженні модерації App Store та Google Play (враховуємо вимоги до AR-додатків, див. App Store Review Guidelines)
  • Навчання вашої команди (від 1 до 5 осіб)

Гарантуємо відповідність вимогам платформ та якість інтеграції завдяки сертифікації Perfect Corp і великому досвіду.

Строки орієнтовно

Етап Тривалість
Підготовка, вибір SDK, прототип 1-2 тижні
Інтеграція базових ефектів (помада, тіні, рум'яна) 2-3 тижні
Каталог продуктів, UI, збереження/шерінг 1-2 тижні
Тестування, багфікс, реліз 1-2 тижні
Разом (з Perfect Corp або Banuba SDK) 5-8 тижнів

Кастомна реалізація на MediaPipe — від 12 тижнів. Вартість розраховується індивідуально, типовий проєкт від $15 000 до $60 000.

Які помилки ми часто зустрічаємо?

  • Ігнорування деформації тіней при зміні виразу обличчя — ефект відшаровується
  • Відсутність skin tone matching для тонального крему — маска замість макіяжу
  • Вибір занадто складного SDK для простого проєкту: наприклад, MediaPipe для одного кольору помади — оверхед
  • Економія на тестуванні: ефект чудово працює на флагманах, але падає на mid-range
  • Публікація в стор без урахування вимог Section 5.1.1 App Tracking Transparency — ризик блокування

Зв'яжіться з нами для консультації: ми допоможемо обрати SDK, спланувати розробку та уникнути типових проблем. Оцінимо ваш проєкт за 2-3 дні.

Наш досвід: 7+ років на ринку мобільної розробки, 50+ AR-проєктів, сертифікація Perfect Corp та Banuba. Ми гарантуємо якість та дотримання строків. Замовте AR-примірку під ключ — отримайте готове рішення за 5-8 тижнів.

Ми розробляємо 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. Входить у нашу стандартну поставку.

Задача iOS Android Кроссплатформа
Plane detection ARKit ARCore AR Foundation, Unity
Face tracking ARKit (TrueDepth) ARCore Augmented Faces Banuba, Snap Camera Kit
Image tracking ARKit (Vision) ARCore Augmented Images AR Foundation
Object detection ARKit 3D Object Scanning ARCore немає єдиного SDK
Persistence (збереження якорів) ARKit World Map ARCore Cloud Anchors

Порівняння платформ: 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-ідею.