Розробка AR-каталогу товарів із 3D-моделями

Розробка AR-каталогу товарів з 3D-моделями

AR-каталог — це коли користувач вибирає диван на сайті та може поставити його у свою гостину через телефон, не змінюючи сторінку. Або вибирає кроссовки та примеряє на ноги. Різниця між "посмотрів у каталозі" та "бачив у себе дома" — конверсія.

Технічно це три пов'язані задачі: управління бібліотекою 3D-моделей, AR-сцена з розміщенням та взаємодією, інтеграція з існуючим каталогом/CMS.

Завантаження та управління 3D-ресурсами

AR-каталог з сотнями позицій не може зберігати всі моделі в бандлі додатку. Потрібен on-demand download з CDN. Стандартний підхід:

1. Каталог товарів з CMS містить model_url — посилання на USDZ (iOS) або GLB (Android)
2. При відкритті карточки товару — перевіряємо локальний кеш (FileManager)
3. Якщо немає — скачуємо у фоні через URLSession.downloadTask, прогрес-бар
4. Після завантаження — ініціалізуємо AR-сцену

func loadModel(url: URL, completion: @escaping (ModelEntity?) -> Void) {
    let cacheURL = cacheDirectory.appendingPathComponent(url.lastPathComponent)
    if FileManager.default.fileExists(atPath: cacheURL.path) {
        completion(try? ModelEntity.loadModel(contentsOf: cacheURL))
        return
    }
    URLSession.shared.downloadTask(with: url) { tempURL, _, _ in
        guard let tempURL else { completion(nil); return }
        try? FileManager.default.moveItem(at: tempURL, to: cacheURL)
        DispatchQueue.main.async {
            completion(try? ModelEntity.loadModel(contentsOf: cacheURL))
        }
    }.resume()
}

Розмір моделі має значення. Меблі: 5–15 МБ USDZ — норма. 50+ МБ — користувач чекає та йде. Оптимізація: TextureConverter для стиснення текстур у ASTC, Draco-стиснення геометрії (через usdz_converter або Blender pipeline).

AR-розміщення: від площини до взаємодії

Базовий plane detection → raycast → placement добре описані у документації ARKit. У AR-каталозі додаються:

Масштабування з збереженням реального розміру. USDZ-моделі повинні мати коректний масштаб: диван 2 метра довжиною повинен бути 2 метра в AR. Якщо розмір у метаданих CMS є — застосовуємо через ModelEntity.scale. Якщо немає — задаємо через конфігурацію моделі. Користувач не повинен масштабувати сам — це руйнує ощущення "реального" розміру.

Вращение одним пальцем. EntityRotationGestureRecognizer у RealityKit — найпростіший шлях. Але вращение тільки по осі Y (вертикальній): меблі не нахиляються, а повертаються вкруг себе. Фіксуємо вісь через constraints:

entity.components[PhysicsMotionComponent.self] = PhysicsMotionComponent()
// Rotation constraint — тільки Y

Смена варіанту/кольору без перезавантаження моделі. Диван доступний у 5 кольорах. Завантажувати 5 моделей — дорого. Правильно: одна геометрія, різні матеріали. У USDZ матеріали можна змінювати через ModelComponent.materials:

var materials = entity.model?.materials ?? []
materials[0] = SimpleMaterial(color: .init(selectedColor), isMetallic: false)
entity.model?.materials = materials

Для PBR-матеріалів з текстурами — PhysicallyBasedMaterial з завантажуваними текстурами.

Інтеграція з каталогом

Типовий сценарій: Shopify, WooCommerce або кастомна CMS на бекенді. Додаємо custom поле ar_model_url до товару. На мобільному клієнті — кнопка "Смотреть в AR" з'являється тільки якщо поле заповнено.

Для управління 3D-контентом без програмістів — проста CMS або admin panel з завантаженням USDZ/GLB файлів та автоматичною оптимізацією на сервері (конвертація, стиснення, завантаження на CDN). Це убирає залежність від розробника при додаванні нових товарів.

Кейс із практики

Інтернет-магазин меблів, 2000+ позицій. Пріоритет: 100 топовых SKU покрити AR-моделями. Етапність: спочатку iOS (ARKit + USDZ), через 2 місяці — Android (SceneViewer + GLB). Конвертація з FBX-моделей поставщика у USDZ/GLB — автоматизований пайплайн через Blender Python scripts + reality-converter CLI. Час обробки однієї моделі — 3–7 хвилин.

Головна нетехнічна проблема: 3D-моделі від поставщиків були у довільних одиницях (1 unit = 1 дюйм у одного, 1 сантиметр у другого). Написали скрипт нормалізації масштабу з валідацією реальних розмірів з специфікації товару.

Сроки

Вартість розраховується індивідуально з урахуванням обсягу каталогу та необхідності конвертації моделей.