Розробка AR-навчального контенту в мобільному застосунку

Розробка AR-навчального контенту в мобільному додатку

Анатомія, молекулярні моделі, історичні реконструкції, схеми обладнання — освітній AR працює, коли об'єкт можна розглянути зі всіх сторін, розібрати на частини, запустити анімацію та отримати інтерактивну підпис. Пасивний просмотр 3D-моделі без взаємодії — це не навчання, це гарний скринсейвер.

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

Архітектура навчального AR-додатку

Типова структура: курси → уроки → AR-активність. Кожна AR-активність — окремий сценарій з власним набором 3D-ресурсів, скриптом анімації та точками взаємодії (hotspots).

Hotspot — це анотація у 3D-просторі. Маркер на вуглецевому атомі відкриває карточку "Вугляничний атом: 6 протонів, 6 нейтронів". Реалізація через BillboardComponent у RealityKit — маркер завжди повернений до камери:

var billboard = BillboardComponent()
hotspotEntity.components[BillboardComponent.self] = billboard

Позиція hotspot — у локальних координатах 3D-моделі. При анімації (розборка моделі) hotspot рухається разом з частиною, до якої прив'язаний. Для цього hotspot робимо дочірньою entity відносно відповідної частини моделі.

Інтерактивна розборка 3D-моделі

Найпопулярніша механіка у освітньому AR — "вибух" моделі: частини розходяться в сторони, обнажуючи внутрішню структуру. Двигун, серце, атом.

Реалізація через AnimationPlaybackController та FromToByAnimation у RealityKit:

let explodeAnimation = FromToByAnimation<Transform>(
    from: Transform(translation: [0, 0, 0]),
    to: Transform(translation: [0.1, 0, 0]),
    duration: 0.8,
    timing: .easeInOut,
    isAdditive: false,
    bindTarget: .transform
)
let resource = try? AnimationResource.generate(with: explodeAnimation)
pistonEntity.playAnimation(resource, transitionDuration: 0.2)

Для складних моделей з 50+ частинами — паковуємо анімації у USDZ через USD Python API на етапі підготовки контенту, а не генеруємо у runtime.

Головна технічна проблема: розмір контенту

Освітні 3D-моделі детальні. Анатомічна модель тіла — 200–500 МБ в вихіднику. Після оптимізації для мобільного AR — 20–50 МБ. Завантажувати при старті уроку — користувач чекає 30 секунд, закриває додаток.

Рішення: progressive loading + on-demand download. Базовий додаток містить LOD-1 версії всіх моделей (2–5 МБ кожна). При вході в AR-активність — фонова загрузка LOD-0 (детальної версії). Поки йде завантаження — працюємо з упрощеною. URLSession.downloadTask + локальний кеш через FileManager:

let cachesURL = FileManager.default.urls(for: .cachesDirectory, in: .userDomainMask).first!
let modelURL = cachesURL.appendingPathComponent("\(modelId)_lod0.usdz")
// Перевіряємо кеш → якщо немає → скачуємо → сповіщаємо AR-сцену

Контент-сервер відає моделі через CDN, розбиті по урокам — не весь курс разом.

Зворотна зв'язок та оцінка знань в AR

Освітній додаток без перевірки знань — це просто 3D-атлас. Інтерактивні завдання в AR:

• Drag-and-drop: перетащи орган на правильне місце тіла
• Послідовність: збери двигун у правильному порядку частин
• Пошук: знайди та tap на потрібну структуру молекули

Drag-and-drop в AR — нетривіально. EntityTranslationGestureRecognizer у RealityKit дає перетягування по поверхні. Але потрібна snap-зона: коли користувач відпускає орган біля правильної позиції — він "защелкується". Реалізується через CollisionComponent з trigger shape у зоні призначення та onCollisionBegan event.

Кейс

Додаток для вивчення молекулярної хімії, шкільний сегмент 8–10 клас. 50 молекул, кожна з розборкою на атоми та анімацією утворення хімічних зв'язків. Ключова вимога: робота у класній кімнаті — погане освітлення, нетекстуровані парти (ARKit погано визначає площини). Вирішили через image marker (розпечатаний аркуш A4 з маркером на кожній парті) — ARImageTrackingConfiguration стабільніше, ніж plane detection у складних умовах. Маркери видавали вчителям разом з розпечаткою QR-коду для скачування.

Сроки

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