Розроблення мобільного VR-додатку для віртуальних турів
Віртуальний тур — це пов'язаний маршрут по простору: квартира, офіс, музей, готель. Користувач переміщується між точками перегляду (hotspots), дивиться навколо в кожній точці, взаємодіє з об'єктами. Технічно складніше, ніж просто 360-відео: потрібна навігація між сценами, інтерактивні елементи та переходи без відчуття "телепорту".
Архітектура туру: граф сцен
Тур — це граф. Кожна точка (node) — це 360-панорама або 3D-сцена. Ребра графу — це переходи (hotspots). Дані зберігаються в JSON-конфігу:
{
"tour_id": "apartment_demo",
"start_node": "living_room",
"nodes": [
{
"id": "living_room",
"type": "equirectangular",
"media_url": "scenes/living_room_8k.jpg",
"hotspots": [
{ "id": "to_kitchen", "target_node": "kitchen",
"position": { "yaw": -45, "pitch": -10 },
"label": "Кухня" },
{ "id": "info_tv", "type": "info",
"position": { "yaw": 20, "pitch": 5 },
"content": "Samsung QLED 65\"" }
]
}
]
}
Клієнт завантажує граф при запуску, передзавантажує медіа суміжних нод.
Тип медіа: фото проти 3D-сцен
Equirectangular фотографії — найпоширеніший формат віртуальних турів. Знімаються на Ricoh Theta, Insta360 або спеціалізованій DSLR rig. Якість фото — визначальний фактор реалізму. 8K JPEG = гарний результат.
3D-сцени (Unity/Godot, real-time rendering) — гнучкіші, більш інтерактивні, але потребують більше ресурсів та часу на створення контенту. Для архітектурної візуалізації — виправданий вибір.
Google Street View-style — послідовність панорам з гладкими переходами. Між точками відтворюється short-clip відео переходу, що створює ілюзію "проходження".
Рендеринг панорам: WebGL проти Native
Два основних підходи:
WebView + Three.js / A-Frame — tour viewer запускається в WebView. Швидко ітерується, контент оновлюється на сервері без релізу додатку. Обмеження: WebGL у WKWebView (iOS) та WebView (Android) має обмежений доступ до IMU — head tracking працює гірше, latency вище.
Нативний рендеринг — Metal (iOS), Vulkan/OpenGL ES (Android), або Unity для кроссплатформи. Низька latency, прямий доступ до IMU, повний VR-режим з Cardboard. Складніше в розробці та оновленні контенту.
Для повноцінного VR у Cardboard — лише нативний рендеринг. Для non-VR перегляду (без гарнітури, просто з поворотом телефону) — WebView достатньо.
Переходи між точками
Жорсткий jump між 360-сценами створює дискомфорт. Варіанти гладких переходів:
- Fade to black — найпростіший, найменш дискомфортний у VR
- Fade + scale — сцена "зменшується" при виході, "збільшується" при вході
- Video transition — коротке відео "руху" між точками (реалістично, але потребує додаткової зйомки)
// Unity: корутина переходу з fade
IEnumerator TransitionToScene(string targetNodeId) {
yield return StartCoroutine(FadeOut(duration: 0.5f));
LoadScene(targetNodeId);
yield return StartCoroutine(FadeIn(duration: 0.5f));
}
Телепортація у VR через fade — стандарт, рекомендований Google VR Design Guidelines.
Інтерактивні hotspots
Hotspot у просторі = raycast з центру взгляду + gaze dwell activation. Типи hotspot:
- Навігація — перехід у іншу точку
- Info panel — спливаюча карточка з текстом/фото/відео
- Медіа — відтворення відео прямо на поверхні (TV у інтер'єрі)
- Link — перехід у браузер для зовнішньої дії (забронювати, купити)
Hotspot рендерится у world space на Billboard (завжди повернений до камери). Масштаб залежить від відстані — constant apparent size через transform.LookAt(camera) + scale = distance * constant.
CMS та оновлення контенту
Тури повинні оновлюватися без релізу додатку. Конфіг графу та медіа-файли зберігаються на CDN, додаток завантажує при запуску. Для offline-режиму — кеширування вибраних турів з перевіркою версії конфігу.
Робочий процес
Аудит контенту: тип медіа (фото, відео, 3D), кількість сцен, вимоги до оновлення.
Проектування структури туру: граф сцен, типи hotspot, навігаційна логіка.
Вибір рендерера: WebView або нативний (з Cardboard VR або без).
Розроблення: рендеринг панорам, head tracking, hotspot interaction, переходи.
CMS або конфіг-схема для оновлення контенту без релізу.
Тестування на пристроях, оцінка якості head tracking у режимі Cardboard.
Оцінка часу
Базовий додаток для одного туру з фото-панорамами та навігаційними hotspot — 2–3 тижні. Повнофункціональна платформа з CMS, кількома типами hotspot, offline-режимом та Cardboard VR — 2–3 місяці.