Реалізація віртуального шоуруму в мобільному VR-додатку

Реалізація віртуального шоурума в мобільному VR-додатку

Віртуальний шоурум — це не просто галерея 3D-моделей товарів. Це просторовий досвід: користувач входить у віртуальний простір, ходить між експонатами, розглядає товар під будь-яким кутом та взаємодіє з ним. Для мобільного VR це є суттєвим викликом: забезпечення якісної графіки при поважанні обмежень мобільного залізу та навігація парадигмами взаємодії в обмежених середовищах.

Архітектура простору шоурума

Шоурум у VR — це набір "зон", між якими користувачі навігують через взаємодію на основі погляду. Фізичне пересування в мобільному VR викликає "motion sickness" — телепортація є безпечнішим підходом.

Структура сцени:

Showroom
├── EntryZone (фойе з категоріями)
├── Zone_Furniture (меблева залл)
│   ├── ProductPedestal_001 (диван)
│   ├── ProductPedestal_002 (стіл)
│   └── NavigationPortal → Zone_Lighting
├── Zone_Lighting (зал освітлення)
└── Zone_Outdoor (зовнішня експозиція)

Кожна зона — це окрема Unity Scene, завантажується через Addressables під час телепортації. Це дозволяє розташовувати деталізований контент без завантаження всього шоурума при запуску.

3D-контент: балансування якості та продуктивності

Основний технічний виклик — рендеринг реалістичних товарів на мобільному залізі. Оригінальні CAD-моделі меблів та обладнання містять мільйони полігонів. Конвеєр оптимізації:

KTX2 з компресією Basis Universal є обов'язковим для мобільного Android. Різноманітне залізо потребує GPU-агностичної текстурної компресії.

Освітлення: реалістичний рендеринг без трасування променів

Мобільні платформи позбавлені трасування променів у реальному часі. Реалізм досягається через:

Попередньо запечені lightmaps — статичні тені та глобальне освітлення обчислюються в Editor та зберігаються в текстурах. Для шоурума з фіксованою геометрією це оптимально. Progressive Lightmapper в Unity забезпечує хорошу якість. Параметри для мобільних пристроїв: Lightmap Resolution 20–40 texels/unit, Compress Lightmaps увімкнено.

Reflection Probes — попередньо запечені cubemaps для відбивань на металі та глянцевих поверхнях. Розмістіть один зонді на кожну зону та додаткові поблизу відбивальних об'єктів.

Emissive матеріали — джерела світла як геометрія з emissive shaders, запечені в lightmaps. Без real-time lights на мобільних пристроях.

// Unity: динамічне оновлення Reflection Probe при переході зони
void OnZoneEnter(ReflectionProbe probe) {
    probe.RenderProbe(); // оновлення при телепортації, не під час runtime
}

Взаємодія з товаром

У точці огляду товару користувачі мають доступ до:

Обертання моделі через погляд — користувачі дивляться на стрілки-контролі, активація затримки обертає модель:

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;
    }
}

Кольорові варіанти — перемикання між матеріалами однієї моделі через кнопки з активацією погляду та кольоровими зразками.

Info hotspots — точки на моделі з описом характеристик: "преміум-шкіра", "система швидкої збірки". Активуються через погляд, відкриваючись у world-space панелях.

Каталог і синхронізація з бекендом

Шоурум без інтеграції каталогу — це демонстрація, а не продукт. Контент завантажується динамічно:

• Метадані товарів (назва, опис, ціна, варіанти) — з REST API
• 3D-моделі — з Addressables CDN за product_id
• Наявність і ціна — у реальному часі з каталогу

При зміні колекцій випуск додатку не потрібен: групи Addressables оновлюються через Content Delivery.

Кнопка "Додати до кошика"

Остання взаємодія: з VR користувачі додають товари до реального кошика покупок. Панель інформації про товар містить CTA кнопку з активацією погляду. Після додавання — підтвердження у 3D-просторі (particle effect + звук), без виходу з VR.

Deeplink від VR до кошика браузера/додатку опціональний для завершення покупки поза VR-режимом.

Продуктивність: профіль мобільного залізу

Мета: стабільні 60 FPS на пристроях 2020+ років (iPhone 12, Snapdragon 865). Інструменти контролю:

• Unity Profiler: CPU Time, GPU Time, Draw Calls, Batches
• Xcode GPU Frame Capture: аналіз iOS Metal
• Android GPU Inspector: аналіз Vulkan/OpenGL ES

Типові оптимізації: GPU Instancing для повторюваних елементів (ряди стільців), occlusion culling для кімнат поза полем зору, трирівнева система LOD.

Робочий процес

Аудит каталогу: кількість SKU, формати 3D-моделей, вимоги до оновлення контенту.

Проектування простору: зонування, навігація, точки огляду.

Конвеєр оптимізації 3D-моделей та текстур.

Розробка: сцени, освітлення, взаємодія з товаром, режим Cardboard VR.

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

Оптимізація продуктивності та тестування на цільових пристроях.

Оцінки часовихв рамків

Однозонний шоурум з 10–20 товарами та базовою взаємодією: 3–5 тижнів. Багатозонна платформа з динамічним каталогом, варіантами товарів, кошиком та CMS: 2–4 місяці.