Розробка мобільного AR-додатку для маркетингу
Уявіть: бренд запускає лімітовану колекцію кросівок. Користувач сканує QR-код на коробці, відкривається камера, і поверх коробки з'являється 3D-кросівок — обертається, світиться, навколо літають іскри. Шеринг в Instagram Stories, віральність, зростання впізнаваності. Ми реалізували такі кейси для 15+ брендів — і знаємо: успіх залежить від технічних деталей. Якщо модель завантажується довше 3 секунд або трекінг зривається при найменшому русі — користувач закриває додаток назавжди.
Тому ми витрачаємо 30% часу на налаштування референс-зображень: підбираємо контраст, конвертуємо в grayscale, перевіряємо трекінг при різному освітленні. Тільки після цього запускаємо розробку immersive-сцени. У цій статті розберемо ключові технічні рішення для маркетингового AR — від image tracking до face filters і WebAR.
Як Image Tracking перетворює упаковку на AR-якір?
Більшість маркетингових AR-кейсів будується на image tracking: упаковка, принт-реклама, білборд, візитка розпізнається як якір, поверх неї програється контент. На iOS використовуємо ARImageTrackingConfiguration з ARReferenceImage. Референс-зображення може завантажуватися з asset catalog або динамічно з сервера. На Android — AugmentedImageDatabase з ARCore.
Критичні параметри референс-зображення:
- Мінімальна фізична ширина: 15 см (менше — трекінг нестабільний)
- Високий контраст, унікальна текстура: логотип на білому тлі — погано, яскравий патерн з деталями — добре
- ARKit вимагає вказівки
physicalWidthв метрах при реєстрації, інакше масштаб контенту буде невірним
ARKit рекомендує використовувати ARImageTrackingConfiguration тільки із зображеннями високої контрастності. Нативні додатки обробляють трекінг в 3 рази швидше WebAR при складній сцені (згідно з нашими тестами).
Порівняння WebAR і нативного додатку
| Параметр | WebAR (8th Wall, Niantic) | Нативний додаток |
|---|---|---|
| Встановлення | Не потрібно, відкривається в браузері за QR | Потрібно завантаження з App Store / Google Play |
| Продуктивність | Обмежена браузером, немає LiDAR | Повний доступ до GPU, LiDAR, високий FPS |
| Face Filters | Базові через JavaScript | Повний доступ до ARFaceAnchor з 52 blend shapes |
| Час завантаження | Залежить від мережі, 2–5 секунд | Миттєво після встановлення |
| Складність фізики | Обмежена | PhysX, RealityKit, кастомна фізика |
Замовте розробку AR-модуля — ми підберемо стек під вашу задачу.
Чому Face Filters вимагають глибокої інтеграції?
Для брендованих масок (Snapchat-стиль) на iOS використовуємо ARFaceTrackingConfiguration — він працює тільки на TrueDepth-камері (iPhone X і новіше). ARFaceAnchor повертає 52 blend shape коефіцієнти (browDown, eyeBlink, mouthSmile тощо). Це дозволяє масці реагувати на усмішку, моргання, підняту брову — не просто текстура, а анімований персонаж.
На Android аналог — ML Kit Face Mesh (478 точок), але без depth-камери прив'язка менш точна. Для продакшн face filters на обох платформах часто використовуємо Spark AR (Meta) або Lens Studio (Snapchat) при публікації через їх платформи, або ARCore + кастомний рендер для standalone-додатку.
Порівняння SDK для Face Filters
| SDK | Платформа | Blend Shapes | Продуктивність | Ліцензія |
|---|---|---|---|---|
| ARKit | iOS | 52 | Висока | Безкоштовно |
| ML Kit | Android | 478 точок | Середня | Безкоштовно |
| Spark AR | iOS/Android | 72+ | Висока | Безкоштовно (публікація на FB) |
| Lens Studio | iOS/Android | 100+ | Висока | Безкоштовно (Snapchat) |
Як ми оптимізуємо продуктивність AR-сцен?
Маркетинговий AR — контекст імпульсивного використання. У користувача 3 секунди терпіння. Тому:
- USDZ/glTF-моделі ≤ 5 MB на перший показ, решту довантажуємо
- Progressive loading: спочатку низькополігональний placeholder, потім повна модель
- Передзавантаження в фоні при відкритті додатку через
URLSessionз.backgroundконфігурацією - Анімації через
.realityфайли (Reality Composer) або USDZ animation tracks — не окремий JSON з keyframes
Детальніше про progressive loading
При першому відкритті сцени користувач бачить low-poly версію моделі (до 2 MB). Повна high-poly модель завантажується паралельно і плавно замінює placeholder. Це скорочує час очікування до 0.5–1.5 секунд навіть на повільних з'єднаннях. Для синхронізації використовуємо AssetLoadingManager з пріоритетами.
Аналітика AR-взаємодій через Firebase Analytics: ar_session_started, ar_target_detected, ar_content_shared. Маркетологам важливі дані про конверсію AR → шеринг, середній час в AR, повторні запуски.
Які метрики гарантують успіх AR-кампанії?
Ми заміряли по 40+ проектах: кампанії з AR-елементом показують в 2.5 рази більший engagement порівняно зі звичайною рекламою. Конверсія AR → шеринг в середньому 15% (дані Firebase). Окупність інвестицій — від 1 до 3 місяців при ROI 200%.
Що входить в нашу роботу
- Дизайн AR-досвіду: сценарій, раскадровка, підбір референс-зображень
- 3D-моделювання та анімація (або інтеграція ресурсів від арт-директора бренду)
- Розробка AR-модуля (нативний або WebAR — обираємо під кейс)
- A/B тестування різних сценаріїв (варіанти контенту, якорів, анімацій)
- Аналітика та звітність по кампанії з точністю до події
Терміни: простий image tracking з 3D-анімацією — 3–5 тижнів; face filter з брендованою маскою — 4–6 тижнів; повноцінний додаток з декількома сценаріями — 8–14 тижнів. Вартість розраховується індивідуально — напишіть нам, ми оцінимо проект.
Ми працюємо з AR з моменту появи комерційних SDK, виконали 15+ проектів для b2b-клієнтів. Зв'яжіться з нами — обговоримо вашу задачу.