Заказчик приходит с каталогом из 2000+ мебельных позиций и просит VR-шоурум. 3D-модели весят по 50 МБ каждая, в сцене — 15 объектов — и приложение падает на iPhone X. Типичная боль: мобильное VR-устройство в форме Cardboard с 3DoF, без контроллеров, а пользователя укачивает от плавного перемещения. Мы подошли к решению через ретопологию, асинхронную загрузку зон и gaze-телепортацию. В результате время загрузки каждой зоны снизилось на 40%, а конверсия в просмотр деталей выросла на 25%. Этот кейс лёг в основу нашего пайплайна, который адаптируется под любой SKU. Мы отбросили идею «сделать красиво» и сконцентрировались на конкретных метриках: время загрузки сцены, частота кадров, количество батчей. Каждая оптимизация подтверждена профилированием на реальных устройствах. Далее — технические детали того, как мы добились стабильной работы под Cardboard и Google VR.
Как мы строим архитектуру VR-шоурума?
Пространство делится на независимые зоны, каждая — отдельная Unity Scene. Переход между зонами происходит через телепортацию по взгляду. Это снижает укачивание в 3 раза по сравнению с плавным передвижением. Структура сцены:
Showroom
├── EntryZone (фойе с категориями)
├── Zone_Furniture (мебельный зал)
│ ├── ProductPedestal_001 (диван)
│ ├── ProductPedestal_002 (стол)
│ └── NavigationPortal → Zone_Lighting
├── Zone_Lighting (зал освещения)
└── Zone_Outdoor (уличная экспозиция)
Каждая зона загружается через Addressables при телепортации. Благодаря этому контент не хранится в памяти постоянно, а подгружается по мере необходимости. Addressables обеспечивает в 4 раза более быструю загрузку по сравнению с AssetBundles, а также снижает затраты на хранение и трафик на 25%. Для каталога с частым обновлением моделей это ещё и способ бесшовного обновления — достаточно перевыпустить группу 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;
}
}
- Цветовые варианты — переключение между материалами одной модели через 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-навигация — лучший выбор для мобильного 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+ проектов для различных отраслей. Получите консультацию по вашему проекту или закажите разработку виртуального шоурума — мы поможем подобрать оптимальное решение. Свяжитесь с нами для обсуждения вашего проекта.