Реализация виртуального шоурума в мобильном VR-приложении

Реализация виртуального шоурума в мобильном VR-приложении

Виртуальный шоурум — это не просто галерея 3D-моделей товаров. Это пространственный опыт: пользователь входит в виртуальное помещение, ходит между экспонатами, рассматривает товар под любым углом, взаимодействует с ним. Для мобильного VR задача нетривиальная: хорошая графика конфликтует с ограничениями мобильного железа, а 3DoF без контроллеров ограничивает способы взаимодействия.

Архитектура пространства шоурума

Шоурум в VR — это набор «зон», между которыми пользователь телепортируется через gaze-навигацию. Реальное передвижение в мобильном 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-независимой текстурной компрессии.

Освещение: реалистичный вид без ray tracing

На мобиле нет реального ray tracing. Реализм достигается через:

Предзапечённый 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;
    }
}

Цветовые варианты — переключение между материалами одной модели через gaze-кнопки с цветовыми свотчами.

Info hotspots — точки на модели с описанием характеристик: «кожа премиум», «система быстрой сборки». Открываются в world space панели при gaze-активации.

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

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

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

При изменении коллекции не нужен перевыпуск приложения: Addressables группы обновляются через Content Delivery.

Кнопка «Добавить в корзину»

Финальное взаимодействие — из VR пользователь добавляет товар в реальную корзину. Info панель товара содержит CTA-кнопку с gaze-активацией. После добавления — подтверждение в 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 месяца.