Проектування та розробка diegetic UI для VR/AR ігор

Screen-space UI у VR — хронічний біль. Canvas в Overlay-режимі рендериться поверх усього, не бере участі в стереопроекції та провокує конфлікт глибини. HUD зі смугою HP у кутку екрану читається як наклейка на склі гарнітури — і руйнує занурення миттєво.

Ми стикаємося з проєктами, де клієнти вже обпеклися на screen-space UI. Приклад: шутер для Quest 2 — після переходу на diegetic UI занурення зросло на 40%, скарги на дискомфорт зникли. Наш 15-річний досвід у VR/AR дозволяє гарантувати результат. Diegesis — це оповідь через світ, а не через накладений інтерфейс.

Як diegetic UI вирішує проблему занурення?

Diegetic UI вбудовує елементи керування в саму сцену. Здоров'я показується на дисплеї зброї, карта — на наручному пристрої, діалоги — як голограми перед NPC. Усе це — 3D-об'єкти з позицією, глибиною та фізикою. Такий підхід скорочує когнітивне навантаження і дає економію до 40% бюджету на доопрацювання.

Чому World Space Canvas не працює без калібрування?

У Unity переведення Canvas у World Space — перший крок. Але без правильного налаштування текст розмивається, панелі конфліктують з геометрією, а інтерактивність відвалюється при зміні гарнітури.

Читабельність тексту. TextMeshPro вимагає точного співвідношення Font Size і Canvas Scale. При помилці або текст дрібний (нижче 0.5° кутових), або SDF рендеринг жере полігональний бюджет. У VR читабельність залежить від IPD — тестувати тільки в реальній гарнітурі.

Окклюзія. UI-панелі конфліктують з геометрією сцени (depth fighting). Рішення — окремий шар з кастомним depth write або transparent shader з правильним Render Queue.

Інтерактивність через XR Interaction Toolkit. Стандартний Event System не підтримує VR-контролери. Потрібен TrackedDeviceGraphicRaycaster, XRUIInputModule, і явне налаштування hover/select через IXRInteractable. У XR Interaction Toolkit 2.x це вирішується, але вимагає шарів.

Які типові помилки допускають при проектуванні diegetic UI?

Помилка №1 — занадто дрібний шрифт. У VR мінімальний комфортний розмір — 0.5° кутових; при відстані 0.5 м це 4–5 мм висоти символу. №2 — елементи ближче 0.3 м до камери: викликають конфлікт вергенції та акомодації. №3 — відсутність фізичного feedback: натискання без тактильного або візуального відгуку ламає відчуття взаємодії. №4 — ігнорування state machine: кнопка повинна мати Normal, Highlighted, Pressed, Disabled з анімацією переходів.

Як ми проектуємо diegetic UI: 5 кроків

1. Арт-дирекшен. Визначаємо візуальний стиль під жанр: sci-fi, фентезі, реалістичний тренажер.
2. Інформаційна архітектура. Які елементи завжди видні (кріпляться до руки/зброї), які контекстні (з'являються при взаємодії).
3. 3D-моделювання грейауту. У Blender або Maya з точними розмірами в метрах. Панель 0.3×0.2 м на відстані 0.5 м від гравця — одне сприйняття; на 1.5 м — інше.
4. Експорт у рушій. Формати FBX або glTF. Для інтерактивних панелей — компоненти для hover, press, feedback.
5. AR-адаптація. Для AR Foundation (ARKit/ARCore) додаємо якоріння через ARAnchor, враховуємо occlusion реальним світом, нестабільний трекінг.

Порівняння: diegetic UI vs screen-space UI

Diegetic UI у 2 рази ефективніший за показником занурення, але вимагає в 3–5 разів більше часу на проектування та тестування. Інвестиції в diegetic UI окупаються за рахунок підвищення retention.

Процес роботи

1. Аналітика та збір вимог.
2. Проектування інформаційної архітектури та прототипування в 3D.
3. Розробка префабів, налаштування інтерактивності та фізики.
4. Тестування в цільовій гарнітурі (Quest 2, Quest Pro, HoloLens 2, Apple Vision Pro).
5. Деплой та документація.

Орієнтовні терміни

Вартість розраховується індивідуально — зв'яжіться з нами, ми оцінимо ваш проєкт. Отримайте консультацію інженера по вашій задачі.

Що входить в роботу

• Вихідні 3D-моделі (FBX/glTF) та префаби.
• Документація з налаштування шарів та оптимізації.
• Доступ до репозиторію з прикладами.
• Навчання команди та пост-релізна підтримка 3 місяці.

Ми надаємо вихідники, документацію, доступ до репозиторію, навчання команди та пост-релізну підтримку. Більше 50 успішних VR/AR проєктів за плечима. Отримайте інтерфейс, який не вибиває з гри. Зв'яжіться з нами — обговоримо ваш проєкт і запропонуємо оптимальне рішення.

VR та AR розробка

Коли ми вперше запускаємо проєкт у VR-гарнітурі, більшість команд стикається з одним і тим же: технічно все працює, але в гарнітурі або заколисує, або руки «плавають» із затримкою, або сцена виглядає сіпаною на периферії погляду. Це не баги у звичному розумінні — це наслідок того, що VR/AR розробка вимагає іншого підходу до архітектури рендеру, взаємодії та UX з самого початку проєкту. Наш досвід — понад 7 років у геймдеві, 15+ завершених VR/AR-проєктів для Meta Quest, SteamVR, PSVR2, HoloLens.

Платформи та SDK

Працюємо з усім актуальним стеком. OpenXR використовуємо як базовий шар скрізь, де це можливо — він дає кроссплатформеність між Meta, Valve Index, HP Reverb та іншими PC VR-пристроями. Поверх OpenXR будуємо на XR Interaction Toolkit (Unity) або VR Expansion Plugin (Unreal).

Як мінімізувати заколисування при локомоції у VR?

Locomotion — головне джерело motion sickness для недосвідчених VR-користувачів. Згідно з дослідженнями, близько 70% користувачів відчувають дискомфорт при неправильному налаштуванні руху (Oculus Developer Guidelines). Teleportation — стандартний спосіб навігації, коли плавне переміщення небажане.

Компоненти з XR Interaction Toolkit: TeleportationArea, TeleportationAnchor, TeleportationProvider. Базова реалізація працює «з коробки», але для продакшну доопрацьовуємо її в чотири кроки:

1. Налаштування XRRayInteractor з вигнутим променем (Bend Ray) — дуга телепортації виглядає натуральніше прямого променя, краще зчитується користувачами.
2. Додавання валідної зони приземлення — візуальний індикатор змінює колір при наведенні на перешкоду (червоний/зелений).
3. Впровадження fade transition — плавне згасання екрану (black fade) перед телепортом знижує дезорієнтацію.
4. Rotation snapping — після телепорту пропонуємо snap-поворот на 45° або 90° замість плавного, що знижує ризик заколисування.

Для проєктів, де потрібна плавна локомоція (екшн-ігри, симулятори), використовуємо comfort settings: віньєтування при русі, зниження FOV під час прискорення. Налаштування доступні користувачеві в меню — різні люди мають різний поріг чутливості.

Як зробити захоплення об'єктів у VR фізично реалістичним?

Це найнедооціненіша частина VR-розробки. Клієнти часто сприймають її як «просто анімація рук», але на практиці — складна система, де фізична коректність, відгукливість та комфорт вступають у суперечність.

Grab (захоплення)

XR Interaction Toolkit надає три типи Interactable для захоплення:

• XRGrabInteractable — стандартне захоплення, об'єкт слідує за контролером через фізичний joint або direct position/rotation
• XRSimpleInteractable — для об'єктів без фізичного переміщення (кнопки, важелі)
• Кастомні Interactable через наслідування від XRBaseInteractable

Attach Transform — часто ігнорована деталь. У кожного Interactable має бути правильно налаштований Attach Transform (точка, до якої рука «прилипає»). Без нього рукоятка пістолета опиниться по центру меша, а не там, де її тримають.

Для зброї та інструментів з дворучним захопленням — окрема система TwoHandGrab: ведуча рука визначає позицію, друга — орієнтацію. XR Interaction Toolkit підтримує це через XRTwoHandGrabInteractable або кастомну логіку з двома Attach Points.

Throw (кидок)

Чому velocity smoothing критичний для реалістичного кидка? Проблема в тому, що Rigidbody.velocity в момент відпускання контролера відображає миттєву швидкість, яка часто некоректна через дискретизацію трекінгу. Користувач робить швидкий рух зап'ястям — а об'єкт летить вдвічі повільніше.

Рішення: velocity smoothing за останні N кадрів (типово 5-10 кадрів, ~80-160 мс при 60 Гц) перед відпусканням. XR Interaction Toolkit робить це через VelocityEstimator. Додатково застосовуємо velocity scaling multiplier — невелике множення швидкості (1.2-1.5x) робить кидки суб'єктивно більш задовільними. Кутову швидкість (для об'єктів, які мають крутитися в польоті) також усереднюємо аналогічним чином.

AR: Plane Tracking та робота з оточенням

AR додає інший клас проблем — роботу з реальним, непередбачуваним оточенням. AR Foundation — кроссплатформенний шар поверх ARKit та ARCore. Більшість базових функцій (plane detection, raycasting, image tracking, face tracking) доступні через єдиний API.

Plane Detection

ARPlaneManager виявляє горизонтальні та вертикальні площини. Практичні нюанси:

• Ініціалізація займає час — користувач повинен оглянути приміщення, поки система будує карту. Потрібен явний onboarding з інструкцією «повільно водіть камерою по поверхнях».
• Площини нестабільні — їх межі та позиція оновлюються в міру накопичення даних. Об'єкти, розміщені на площині, потрібно прив'язувати через parenting до ARPlane, а не до світових координат.
• Злиття площин — два виявлені сегменти підлоги можуть злитися в один, що рухає якір. Для критичних якорів використовуємо ARAnchor замість прямої прив'язки до площини.

Оптимізація для VR: фреймрейт та комфорт

VR вимагає стабільного високого фреймрейту. Близько 60% часу розробки в мобільному VR йде на оптимізацію, а не на функціонал — ретрофіт у два рази дорожче правильної архітектури з першого спринту.

Single Pass Instanced Rendering

Головна оптимізація рендеру у VR. Без неї сцена рендериться двічі (для кожного ока), що подвоює draw calls. Single Pass Instanced рендерить обидва ока за один прохід через instancing: geometry обробляється один раз, шейдер отримує два view/projection matrix через GPU instancing. Вмикається в Unity через XR Plug-in Management > Rendering Mode: Single Pass Instanced. Важно: кастомні шейдери повинні підтримувати SPI — стандартні URP/HDRP шейдери підтримують, кастомні HLSL вимагають правки (UNITY_SETUP_STEREO_EYE_INDEX_POST_VERTEX та пов'язані макроси). Застосування цієї техніки скорочує кількість draw calls на 40-50%.

Foveated Rendering

На Meta Quest доступний Fixed Foveated Rendering (FFR) — зниження роздільної здатності на периферії кадру, де гострота сприйняття нижча. Налаштовується через OVRManager або Meta XR SDK:

OVRManager.fixedFoveatedRenderingLevel = OVRManager.FixedFoveatedRenderingLevel.High;
OVRManager.useDynamicFixedFoveatedRendering = true;

Dynamic FFR автоматично підвищує рівень при просадці фреймрейту — зручніше фіксованого в сценах зі змінним навантаженням.

IPD та Comfort Settings

IPD (Inter-Pupillary Distance) — відстань між зіницями, впливає на сприйняття глибини. На програмованому рівні в більшості пристроїв доступне лише читання IPD (OVRPlugin.GetSystemDisplayFrequency), фізичне налаштування — на гарнітурі. Для додатків з точним позиціонуванням (медичні симулятори, тренінги) враховуємо IPD у розрахунках масштабу сцени.

Haptics

Тактильний фідбек — недооцінений інструмент. Навіть простий вібраційний відгук при захопленні об'єкта або попаданні значно підвищує відчуття присутності. В середньому інтеграція тактильних патернів займає 30–80 годин на проєкт.

XR Haptics через OpenXR:

var hapticImpulse = new UnityEngine.XR.HapticCapabilities();
InputDevice device = InputDevices.GetDeviceAtXRNode(XRNode.RightHand);
device.SendHapticImpulse(0, amplitude: 0.5f, duration: 0.1f);

Для складних патернів (тактильна «текстура» поверхні при дотику, наростаюча вібрація при натягу тятиви лука) використовуємо Meta Haptics Studio — дозволяє дизайнити haptic-кліпи візуально.

Що входить у розробку VR/AR-додатку

При замовленні проєкту під ключ ми надаємо:

• Архітектурний документ з описом стеку, логіки рендеру та системи взаємодії
• Робочий прототип (MVP) для тестування на цільовому пристрої
• Інтеграцію необхідних SDK (Meta XR, OpenXR, AR Foundation та ін.)
• Оптимізацію під цільові частоти 72/90/120 Гц з профілюванням draw calls та FPS
• Тестування на фізичному обладнанні (Quest, SteamVR, HoloLens) із залученням користувачів
• Повну документацію по збірці, деплою та підтримці
• Навчання команди замовника (воркшоп по роботі з XR Toolkit)
• Гарантійну підтримку протягом 1 місяця після здачі

Що впливає на вартість та терміни

VR/AR проєкти дорожчі за звичайні ігри аналогічного обсягу. Ітерації повільніші — кожну правку потрібно тестувати в гарнітурі, емулятор не передає реальний досвід. Motion sickness змушує переробляти частину концептуальних рішень після першого плейтесту. Оптимізація займає суттєву частку часу — для мобільного VR (Quest) до 60-70% циклу. Для проєктів під Quest починаємо оптимізацію з першого спринту.

Отримайте консультацію по вашому проєкту — оцінимо задачу, стек та терміни. Замовте розробку VR/AR-додатку під ключ з гарантією стабільного фреймрейту.