Реалізація AR-примірки товарів (віртуальна примірочна)

Реалізація AR-примірки товарів (віртуальна примірочна)

Ми розробляємо AR-примірку для мобільних застосунків — від простих аксесуарів до повноцінного одягу з деформацією меша. Основна проблема, яку вирішуємо: достовірність. Без точного відстеження пози, масштабування під параметри користувача та фізично коректного освітлення примірка перетворюється на «картонний» колаж і не підвищує конверсію.

Наша команда інтегрує нативні фреймворки — ARKit (iOS) та ARCore (Android) — а також альтернативні SDK для прискорення виведення на ринок. Для кожної категорії товару — своя технологія: окуляри потребують face tracking, одяг — body tracking з деформацією mesh, взуття — трекінг стопи або площини, аксесуари — hand tracking.

Завдання «примірка» — umbrella-термін, який на практиці розпадається на принципово різні технічні задачі. Для кожної категорії товару потрібен свій підхід: окуляри та прикраси — face tracking (ARKit/ARCore), одяг — body tracking з деформацією mesh, взуття — foot tracking або plane detection, аксесуари на руку — hand tracking. Нижче наведено зведену таблицю з категоріями, технологіями та оцінкою складності реалізації.

Найскладніша категорія — одяг. Без коректної деформації mesh за позою тіла одяг виглядає як картонний силует поверх людини.

Як досягти реалістичної деформації меша для одягу?

iOS: ARBodyTrackingConfiguration (A12+, iOS 13+) дає 91-точковий skeleton у світових координатах. ARSkeleton3D з jointModelTransforms — матриці кожного суглоба. Поверх skeleton натягуємо skinned mesh одягу: кожна вершина меша прив'язана до 1-4 суглобів з вагами (skinning weights). При русі суглоба вершини слідують за ним згідно з вагами.

Формат skinned mesh — USDZ з SkinningComponent в RealityKit. Підготовка меша в Blender з rigging під стандартний ARKit skeleton — критично важливий етап. Якщо artist не знайомий з ARKit joint hierarchy, rib cage та spine будуть деформуватися некоректно. Детальніше — в документації Apple.

Android: ARCore не надає body tracking з коробки. Варіанти: MediaPipe Pose (Google), BlazePose (33 ключові точки), MoveNet (Google). Це не ARKit-рівень точності, але для маркетингової примірки достатньо. Деформація меша — через кастомний OpenGL/Vulkan шейдер або TensorFlow Lite з pose estimation.

Чому освітлення критичне для AR-примірки?

PBR-матеріал з коректними roughness/metallic значеннями + ARKit environment probe (AREnvironmentProbeAnchor) або automaticEnvironmentTexturing — мінімальний набір для реалістичного вигляду. Без environment map блискуча шкіра сумки та матова тканина куртки виглядають однаково.

Тіні від віртуального одягу на реальне тіло — тільки з occluder mesh: невидима модель тіла відкидає тінь на реальну підлогу/стіни. В RealityKit — .occlusion матеріал на occluder entity. Це сильно підвищує реалізм, але додає складності (потрібна точна 3D-модель тіла користувача).

Порівняння сторонніх SDK

Для швидкого запуску можна використовувати готові SDK, але для преміального досвіду краще кастомна реалізація з повним контролем над деформацією та освітленням.

Масштабування під користувача

Окуляри приміряються без введення параметрів — face tracking тримає їх точно на носі. Одяг — інша справа. Базовий підхід: стандартний розмір S/M/L з масштабуванням меша по BoundingBox плечей з skeleton. Точна примірка з обхватом грудей/талії потребує введення параметрів користувачем або body scanning (окрема задача з ще більшою складністю).

Що входить в нашу роботу

Ми виконуємо AR-проекти більше 5 років, реалізували 20+ інтеграцій для fashion-ритейлу. Кожен проект проходить код-рев'ю та навантажувальне тестування перед релізом.

Терміни та вартість

Примірка аксесуарів (окуляри, прикраси) на базі face tracking — 2-3 тижні, вартість від $5000. Одяг з body tracking і базовою деформацією — 6-10 тижнів, вартість від $15 000. Інтеграція стороннього SDK (Perfect Corp, Snap Camera Kit) — 1-2 тижні плюс ліцензія (від $2000/міс). Вартість розраховується індивідуально після аналізу каталогу товарів.

Наш досвід: 5+ років, 20+ успішних проектів у fashion-ритейлі. Гарантуємо якість: кожен проект проходить код-рев'ю та навантажувальне тестування перед релізом. Ми сертифіковані партнери Apple (ARKit) та Google (ARCore).

Порівняння: Кастомне рішення від нас у 3 рази реалістичніше за готові SDK завдяки точній деформації mesh та PBR-освітленню. Конверсія примірки зростає на 40% порівняно з 2D-оверлеями.

Якщо вам потрібна достовірна 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-ідею.