Реалізація розпізнавання маркерів (Image Tracking) в AR-застосунку

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

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

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

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

Послуги, які ми пропонуємо
Показано 1 з 1Усі 1734 послуг
Реалізація розпізнавання маркерів (Image Tracking) в AR-застосунку
Середній
~2-3 дні
Часті запитання

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

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

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

  • 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

Реалізація розпізнавання маркерів (Image Tracking) в AR-застосунку

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

Проблеми, які вирішуємо

  • Трекінг «трясеться» на бликучих поверхнях (глянцева упаковка, голограми).
  • Втрата трекінгу при частковому перекритті маркера або зміні освітлення.
  • Неправильне масштабування AR-об'єктів через некоректні розміри маркерів.
  • Неможливість масштабувати систему на великі каталоги (100+ маркерів).
  • Низька якість детекції через однотонні або низькоконтрастні зображення.

Як ми це робимо: технічні деталі

ARKit Image Tracking

ARImageTrackingConfiguration — конфігурація для трекінгу без world tracking. Швидше ініціалізується, менше навантаження на CPU, але немає plane detection та world anchors.

ARWorldTrackingConfiguration з detectionImages — трекінг маркерів у контексті повного world tracking. Потрібен, коли AR-контент має існувати в світовому просторі між кадрами або коли потрібен plane detection одночасно з image tracking.

Підготовка reference image: ARReferenceImage з фізичними розмірами (physicalSize). Розмір обов'язковий — від нього ARKit обчислює дистанцію та scale. Неправильний розмір → об'єкт у неправильному масштабі.

guard let image = UIImage(named: "marker"),
      let cgImage = image.cgImage else { return }

let referenceImage = ARReferenceImage(cgImage, orientation: .up, physicalSize: CGSize(width: 0.15, height: 0.10))
referenceImage.name = "product_label"
config.detectionImages = [referenceImage]
config.maximumNumberOfTrackedImages = 4

maximumNumberOfTrackedImages — критичний параметр. ARKit A12+ трекає до 100 зображень одночасно (виявлення), але активний трекінг позиції — до 4 на старих чипах, до 8 на A14+. Різниця: detected — знаємо, що маркер є; tracked — знаємо точну позицію в реальному часі.

Якість маркера і чому «будь-яке зображення» не працює

ARKit оцінює quality score кожного reference image. Зображення з низьким quality score трекаються нестабільно або не детектуються взагалі. Перевірка: додати зображення в Xcode AR Resources group → в інспекторі покаже попередження при низькому quality.

Погані маркери:

  • Однотонні або з великими однотонними областями (логотип на білому фоні)
  • Симетричні паттерни (ARKit плутається в орієнтації)
  • Низькоконтрастні, бляклі зображення
  • Текст без інших візуальних елементів

Хороші маркери:

  • Висококонтрастні, різнорідні паттерни (обкладинки журналів, детальні ілюстрації)
  • Асиметричні — ARKit однозначно визначає орієнтацію
  • Фізичний розмір від 10 см — дрібні маркери трекаються з дистанції менше 30 см

Apple рекомендує використовувати зображення з різноманітними деталями та уникати однорідних областей.

Трекінг на бликучих поверхнях

Упаковка з глянцевим покриттям, голографічні наклейки, фольговані елементи — всі вони дають блики, які змінюють appearance маркера в залежності від кута освітлення. ARKit втрачає трекінг, тому що features points «плавають».

Рішення на рівні фізичного продукту: матове ламінування замість глянцю на зоні маркера. На рівні коду: hysteresis для втрати трекінгу — не одразу ховати AR-контент при trackingState == .limited, а із затримкою 0.5-1 секунда. Більшість коротких втрат відновлюються самі.

ARCore Image Tracking: порівняння з ARKit

Параметр ARKit ARCore
Максимум трекованих зображень 4 (A12) / 8 (A14+) до 20 на сучасних пристроях
Якість маркера Quality score, попередження в Xcode Перевірка через arimg (обов'язково)
Cloud-трекінг немає є (Cloud Anchors)
Завантаження бази bundle попередня компіляція або runtime

AugmentedImageDatabase — аналог ARKit detection images. Базу даних компілюємо заздалегідь через arcoreimg утиліту (командний рядок) або AugmentedImageDatabase(session:imageBytes:) в runtime. Попередньо скомпільована база завантажується швидше.

ARCore додатково надає AugmentedImage.getTrackingMethod(): FULL_TRACKING (повний трекінг) vs LAST_KNOWN_POSE (остання відома позиція). LAST_KNOWN_POSE дозволяє зберігати AR-контент на позиції навіть при тимчасовій втраті маркера з кадру.

Як масштабувати Image Tracking на сотні маркерів?

Для застосунків з великим каталогом (100+ маркерів — наприклад, всі SKU продуктової лінійки) не можна пакувати всі reference images в bundle. Архітектура:

  • Сервер зберігає reference images + AR-контент
  • При виявленні нового маркера (за зовнішнім ID в QR або через cloud recognition) — завантажуємо контент для конкретного маркера
  • Cloud Image Target (Vuforia Cloud, Wikitude Cloud): клієнт відправляє кадр на сервер, сервер повертає ID маркера та transform. Працює для каталогів 100k+ зображень

Що входить в розробку Image Tracking під ключ?

  1. Аналіз ваших маркерів — оцінка якості, рекомендації щодо покращення
  2. Підготовка reference images (конвертація, обрізка, налаштування розміру)
  3. Інтеграція ARKit або ARCore (вибір конфігурації, обробка станів)
  4. Тестування на 5+ реальних пристроях (різні камери, освітлення)
  5. Оптимізація продуктивності (CPU/GPU, батарея)
  6. Документація та передача вихідних кодів
  7. Підтримка після запуску (2 тижні)

Замовте розробку — отримайте консультацію та оцінку термінів.

Процес роботи: покроково

  • Ви надсилаєте опис завдання та приклади маркерів
  • Ми аналізуємо та готуємо комерційну пропозицію
  • Після узгодження — етапи: аналітика → проектування → реалізація → тестування → деплой
  • Ви отримуєте готове рішення з гарантією стабільного трекінгу

Орієнтири за термінами

Базовий image tracking з 1–10 маркерами, статичний 3D-контент — від 3 до 5 днів. Анімований контент, відео-overlay, управління каталогом через CMS — 2–3 тижні. Cloud-рішення для 100k+ маркерів — окрема оцінка. Вартість розраховується індивідуально.

Типові помилки при розробці Image Tracking - Неправильний physicalSize — об'єкт не масштабується - Низька якість reference image — трекінг втрачається - Ігнорування maximumNumberOfTrackedImages — падіння FPS - Відсутність hysteresis — контент мерехтить

Наш досвід: понад 50 AR-проектів, сертифіковані інженери Apple та Google. Пишіть — оцінимо ваш проект безкоштовно.

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