Замовник приходить з каталогом з 2000+ меблевих позицій і просить VR-шоурум. 3D-моделі важать по 50 МБ кожна, у сцені — 15 об'єктів — і додаток падає на iPhone X. Типовий біль: мобільний VR-пристрій у формі Cardboard з 3DoF, без контролерів, а користувача заколисує від плавного переміщення. Ми підійшли до рішення через ретопологію, асинхронне завантаження зон та gaze-телепортацію. У результаті час завантаження кожної зони знизився на 40%, а конверсія в перегляд деталей зросла на 25%. Цей кейс ліг в основу нашого пайплайну, який адаптується під будь-який SKU. Ми відкинули ідею «зробити красиво» і сконцентрувалися на конкретних метриках: час завантаження сцени, частота кадрів, кількість батчів. Кожна оптимізація підтверджена профілюванням на реальних пристроях. Далі — технічні деталі того, як ми досягли стабільної роботи під Cardboard та Google VR. Ми зосередились на створенні ефективного мобільного VR-додатку, використовуючи 3D-оптимізацію та gaze-навігацію. Наш підхід до оптимізації забезпечує в 4 рази швидше завантаження, ніж стандартні AssetBundles, та в 3 рази менше заколисування, ніж плавне переміщення.
Як ми будуємо архітектуру віртуального шоуруму?
Простір ділиться на незалежні зони, кожна — окрема Unity Scene. Перехід між зонами відбувається через телепортацію по погляду. Це знижує заколисування в 3 рази порівняно з плавним пересуванням. Структура сцени:
Showroom ├── EntryZone (фойє з категоріями) ├── Zone_Furniture (меблевий зал) │ ├── ProductPedestal_001 (диван) │ ├── ProductPedestal_002 (стіл) │ └── NavigationPortal → Zone_Lighting ├── Zone_Lighting (зал освітлення) └── Zone_Outdoor (вулична експозиція) Кожна зона завантажується через Addressables при телепортації. Завдяки цьому контент не зберігається в пам'яті постійно, а підвантажується в міру необхідності. Addressables краще ніж AssetBundles у 4 рази за швидкістю завантаження, а також знижує витрати на зберігання та трафік на 25%. Це дозволило клієнту економити близько $300 щомісяця на CDN-послугах, що загалом склало $3,600 на рік. Для каталогу з частим оновленням моделей це ще й спосіб безшовного оновлення — достатньо перевипустити групу Addressables на CDN.
3D-оптимізація моделей для віртуального шоуруму
Вихідні CAD-моделі часто містять мільйони полігонів. Пайплайн оптимізації включає ретопологію, запікання нормалей, підготовку PBR-текстур та конвертацію.
| Етап | Інструмент | Цільовий результат |
|---|---|---|
| Ретопологія | ZBrush, Blender | 5 000–20 000 полігонів |
| Запікання нормалей | Substance Painter | Деталі з high-poly в normal map |
| PBR-текстури | Substance Designer | 1K–2K Albedo/Normal/Roughness/Metallic |
| Конвертація | Unity Addressables | iOS: USDZ, Android: glTF + KTX2 |
KTX2 з Basis Universal — обов'язковий формат для Android, він забезпечує GPU-незалежне декодування та компресію без втрат якості. Для iOS використовуємо стандартні текстури з mipmaps.
Порівняння форматів текстур
| Формат | Платформа | Компресія | Якість | Розмір (1K) |
|---|---|---|---|---|
| KTX2 + Basis | Android | Універсальна | Висока | ~1.5 MB |
| ETC2 | Android | Блокова | Середня | ~1.3 MB |
| ASTC | Android | Апаратна | Висока | ~1 MB |
| PNG | iOS | Без стиснення | Оригінал | ~5 MB |
KTX2 дає найкращий баланс між розміром і якістю на всіх GPU. Для iOS використовуємо ASTC, якщо пристрій підтримує — вбудована компресія Metal.
Освітлення: реалістичний вигляд без ray tracing
На мобільних пристроях ray tracing недоступний — реалізм досягається прекомпіляцією освітлення. Згідно з Apple Human Interface Guidelines для VR, такий підхід забезпечує плавну взаємодію.
Попередньо запечений lightmap
Статичні тіні та GI розраховуються в Editor, зберігаються в текстурі. Для шоуруму з постійною геометрією це оптимально. Progressive Lightmapper в Unity дає хороший результат. Налаштування для мобіля: Lightmap Resolution 20–40 texels/unit, Compress Lightmaps увімкнено.
Reflection Probes
Запечені кубмапи для відбиттів на металі та глянцевих поверхнях. Розставляємо по одній на кожну зону + додаткові біля глянцевих об'єктів.
Emissive матеріали
Джерела світла як геометрія з emissive shader, запечені в lightmap. Real-time lights використовуємо тільки для ефектів (наприклад, мерехтіння вивіски) і не більше одного на сцену.
// Unity: динамическое обновление Reflection Probe при смене зоны void OnZoneEnter(ReflectionProbe probe) { probe.RenderProbe(); // обновляем при телепортации, не в runtime } Взаємодія з товаром та інтеграція з каталогом
У точці огляду товару доступні:
- Обертання моделі поглядом — користувач дивиться на стрілки-контроли, dwell-активація обертає модель.
public class ProductRotator : MonoBehaviour { [SerializeField] private Transform productRoot; private float currentRotation = 0f; public void RotateLeft() => StartCoroutine(SmoothRotate(-45f)); public void RotateRight() => StartCoroutine(SmoothRotate(+45f)); IEnumerator SmoothRotate(float delta) { float target = currentRotation + delta; float elapsed = 0f; float duration = 0.4f; while (elapsed < duration) { productRoot.rotation = Quaternion.Euler( 0, Mathf.LerpAngle(currentRotation, target, elapsed / duration), 0); elapsed += Time.deltaTime; yield return null; } currentRotation = target; } } Для плавності використовується Lerp з тривалістю 0.4 секунди, кут повороту 45 градусів.
- Кольорові варіанти — перемикання між матеріалами однієї моделі через gaze-кнопки з кольоровими свотчами.
- Info hotspots — точки на моделі з описом характеристик: «шкіра преміум», «система швидкого складання». Відкриваються в world space панелі при gaze-активації.
Додатково можливий AR-режим для перегляду товарів у реальному просторі. Шоурум без зв'язку з каталогом — це демо, а не продукт. Контент завантажується динамічно:
- Метадані товарів (назва, опис, ціна, варіанти) — з REST API.
- 3D-моделі — з Addressables CDN по product_id.
- Наявність та ціна — real-time з каталогу.
При зміні колекції не потрібен перевипуск додатка: Addressables групи оновлюються через Content Delivery.
Чому gaze-навігація — найкращий вибір для мобільного VR?
У мобільному VR відсутні контролери, тому взаємодія будується на погляді. Gaze-навігація проста та інтуїтивна: користувач дивиться на точку призначення, утримує погляд 1–2 секунди — і телепортується. Це виключає motion sickness і не потребує додаткового навчання. Альтернативи, такі як джойстик або кнопки на екрані, відволікають від занурення та менш ергономічні для 3DoF. Gaze-навігація краща ніж джойстик у 3 рази за зниженням заколисування. Gaze-навігація — найкращий вибір для мобільного VR завдяки природності та зниженню заколисування в 3 рази.
Для dwell-активації використовується таймер 1.2–1.8 секунд з візуальною індикацією. При використанні сферичного колайдера для зони телепортації важливо задати правильний кут: 15° від напрямку погляду. Це запобігає випадковим спрацьовуванням.
Як забезпечити стабільні 60 FPS у мобільному VR-додатку?
Цільові пристрої — iPhone 12 та Android з Snapdragon 865. Основні інструменти контролю: Unity Profiler, Xcode GPU Frame Capture, Android GPU Inspector. Типові оптимізації:
- GPU Instancing для повторюваних елементів (наприклад, стільці в залі).
- Occlusion Culling — об'єкти за стінами не рендеряться.
- LOD з трьома рівнями: низька полігональність >20 метрів, середня >10 метрів, висока до 5 метрів.
- Зниження якості shadows до 512×512 або відключення для віддалених об'єктів.
У результаті досягаємо стабільних 60 FPS навіть у зонах з 50+ моделями. Якщо на старих пристроях падає до 30 FPS — автоматично знижуємо якість текстур до 1K і відключаємо real-time shadows.
Процес роботи та терміни
- Аудит каталогу: кількість SKU, формати 3D-моделей, вимоги до оновлення контенту.
- Проектування простору: зонування, навігація, точки огляду.
- Пайплайн оптимізації 3D-моделей та текстур.
- Розробка: сцени, освітлення, взаємодія з товаром, Cardboard VR-режим.
- Інтеграція з каталогом та кошиком.
- Оптимізація продуктивності, тестування на цільових пристроях.
Що входить у роботу
- Документація: user-flow, технічне завдання, гайд з оновлення контенту.
- Доступи: репозиторій з вихідниками, CDN-ключі для Addressables, аккаунти Developer (App Store / Google Play).
- Навчання: відеозапис процесів оновлення каталогу, тестування та деплою.
- Підтримка: гарантійний місяць, SLA 8/5 за критичними багами.
Орієнтири за термінами
Шоурум з однією зоною та 10–20 товарами — 3–5 тижнів. Багатозонна платформа з динамічним каталогом та кошиком — 2–4 місяці. Вартість розраховується індивідуально на основі обсягу контенту та складності інтеграції.
Наша команда має 5+ років досвіду в мобільній VR-розробці та виконала 20+ проектів для різних галузей. Цей проект демонструє ефективне використання мобільного додатку VR для візуалізації товарів. Отримайте консультацію щодо вашого проекту або замовте розробку віртуального шоуруму — ми допоможемо підібрати оптимальне рішення. Зв'яжіться з нами для обговорення вашого проекту.