VR-режим у мобільному додатку: стереоскопічний рендеринг

TRUETECH займається розробкою, підтримкою та обслуговуванням мобільних додатків iOS, Android, PWA. Маємо великий досвід та експертизу для публікації мобільних додатків до популярних маркетів Google Play, App Store, Amazon, AppGallery та інші.

Розробка та підтримка будь-яких видів мобільних додатків:

Інформаційні та розважальні мобільні програми
Новинки, ігри, довідники, онлайн-каталоги, погодні, фітнес та здоров'я, туристичні, освітні, соціальні мережі та месенджери, квіз, блоги та подкасти, форуми, агрегатори
Мобільні програми електронної комерції
Інтернет-магазини, B2B-додатки, маркетплейси, онлайн-обмінники, кешбек-сервіси, біржі, дропшиппінг-платформи, програми лояльності, доставка їжі та товарів, платіжні системи
Мобільні програми для управління бізнес-процесами
CRM-системи, ERP-системи, управління проектами, інструменти для команди продажів, облік фінансів, управління виробництвом, логістика та доставка, управління персоналом, системи моніторингу даних
Мобільні програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, платформи надання електронних послуг, платформи кешбеку, відеохостинги, тематичні портали, платформи онлайн-бронювання та запису, платформи онлайн-торгівлі

Це лише деякі з типів мобільних додатків, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 1734 послуг
VR-режим у мобільному додатку: стереоскопічний рендеринг
Складний
від 1 тижня до 3 місяців
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_mobile-applications_feedme_467_0.webp
    Розробка мобільного додатка для компанії FEEDME
    858
  • image_mobile-applications_xoomer_471_0.webp
    Розробка мобільного додатку для компанії XOOMER
    744
  • image_mobile-applications_rhl_428_0.webp
    Розробка мобільного додатку для компанії RHL
    1160
  • image_mobile-applications_zippy_411_0.webp
    Розробка мобільного додатку для компанії ZIPPY
    1034
  • image_mobile-applications_affhome_429_0.webp
    Розробка мобільного додатку для компанії Affhome
    968
  • image_mobile-applications_flavors_409_0.webp
    Розробка мобільного додатку для компанії FLAVORS
    562

Ми реалізуємо VR-режим у мобільному додатку з нуля або інтегруємо його в існуючий проект. Наша команда має 10+ років досвіду в розробці під iOS та Android, включаючи 30+ успішних VR-проектів. Стереоскопічний рендеринг — це не просто розділення екрана навпіл: потрібне коректне налаштування проекцій для кожного ока, дисторція під оптику гарнітури та стабільний head tracking без накопичення drift. Ми використовуємо перевірені рішення — Google Cardboard SDK та Single Pass Instanced rendering — щоб досягти стабільних 60+ FPS на більшості пристроїв. Усі етапи роботи, від аудиту до здачі, прозорі для клієнта: ви отримуєте детальну документацію, вихідний код та підтримку після запуску.

Як ми реалізуємо VR-режим під ключ?

Процес починається з аудиту вашого додатку: тип контенту, поточний рендерпайплайн, цільові пристрої. Потім обираємо оптимальний підхід — інтеграція Cardboard SDK або кастомна реалізація з нативним Metal/OpenGL. Ми гарантуємо, що підсумкове рішення стабільно працюватиме на пристроях останніх поколінь. Усі етапи, від проектування до тестування, займають від 1 до 6 тижнів залежно від складності.

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

  1. Аудит додатку: аналіз поточного рендерпайплайну, цільових пристроїв, типу контенту.
  2. Вибір стеку: інтеграція Cardboard SDK або кастомна реалізація на Metal/OpenGL.
  3. Розробка стерео-рендерингу: налаштування asymmetric frustum, lens distortion, chromatic aberration.
  4. Оптимізація: Single Pass Instanced, foveated rendering, LOD, тестування на 20+ пристроях.
  5. Адаптація UI: gaze interaction, reticle, підтримка safe areas.
  6. Тестування та деплой: перевірка на сумісність, виправлення багів, передача документації.

Що входить у результат?

Компонент Опис
Аудит і план робіт Оцінка поточного додатку, вибір стеку (Cardboard SDK / кастом), складання roadmap
Інтеграція стерео-рендерингу Налаштування asymmetric frustum, lens distortion, chromatic aberration
Оптимізація продуктивності Single Pass Instanced, foveated rendering, LOD, тестування на 20+ пристроях
Адаптація UI для VR Gaze interaction, reticle, Cardboard button, підтримка safe areas
Документація та навчання Інструкція зі збірки, передача вихідників, консультація команди
Гарантія працездатності 30 днів підтримки після здачі, виправлення багів

Порівняння продуктивності: Single Pass Instanced vs Multi-Pass

Метод Draw calls Середній FPS
Multi-Pass 2x 45
Single Pass Instanced 1x 75

Single Pass Instanced рендеринг забезпечує в 1.7 рази вищу частоту кадрів порівняно з Multi-Pass на пристроях з підтримкою GL_EXT_multiview або Metal multi-view.

Як налаштувати стереоскопічний рендеринг: геометрія та дисторція

Два ока розділені interpupillary distance (IPD) — в середньому 63–65 mm. Кожне око бачить сцену під дещо різним кутом — це створює глибину. Для коректного стереоефекту потрібно рендерити сцену двічі: камери зміщені на ±IPD/2 по X від центральної точки, але направлені до спільної точки сходження (vergence).

Матриця проекції для кожного ока — це asymmetric frustum, а не просто зміщена symmetric frustum. Різниця принципова: symmetric frustum створює «паралельні очі», asymmetric — реалістичне фізіологічне зведення:

// Unity: asymmetric frustum для лівого ока
Matrix4x4 LeftEyeProjection(float ipd, float near, float far, float fov, float aspect) {
    float top = near * Mathf.Tan(fov * 0.5f * Mathf.Deg2Rad);
    float right = top * aspect;
    float shift = ipd * 0.5f * near / convergenceDistance;

    // left/right границі зсунуті під конкретне око
    return Matrix4x4.Frustum(-right + shift, right + shift, -top, top, near, far);
}

Чому Single Pass Instanced рендеринг важливий для продуктивності?

Рендеринг кожного ока окремим проходом подвоює кількість draw calls. На мобільних пристроях це критично. Single Pass Instanced Rendering (SPIR) рендерить обидві eyes за один прохід з інстанціюванням. Тести показують зниження draw calls на 40% та приріст FPS до 90 на флагманах.

У Unity: Project Settings → XR Management → увімкнути Single Pass Instanced. Працює тільки при підтримці GL_EXT_multiview (Android OpenGL ES 3.0+) або Metal з multi-view render targets (iOS 12+).

// Перевірка підтримки в runtime
bool supportsSPIR = SystemInfo.supportsMultiviewRendering;
// Якщо нема — fallback на Multi-Pass

На флагманах останніх років Single Pass Instanced працює на більшості моделей. Бюджетні Android-пристрої з Mali GPU часто не підтримують — ми передбачаємо fallback.

Корекція дисторції та хроматичної аберації

Лінзи VR-гарнітури збільшують поле зору, але вносять barrel distortion — прямі лінії вигинаються до центру. Щоб компенсувати це, рендеримо зі зворотнім pincushion distortion — результат через спотворену лінзу виглядає рівно.

Коефіцієнти дисторції (k1, k2, k3) специфічні для кожної гарнітури та закодовані в QR-коді Cardboard-корпусу. Як зазначено в документації Google Cardboard SDK, вони зчитуються автоматично. При кастомній реалізації:

// Fragment shader: barrel distortion
varying vec2 vTexCoord;
uniform float k1;
uniform float k2;
uniform sampler2D renderTexture;

void main() {
    vec2 coord = vTexCoord * 2.0 - 1.0; // [-1, 1]
    float r2 = dot(coord, coord);
    float distortion = 1.0 + k1 * r2 + k2 * r2 * r2;
    vec2 distorted = coord * distortion;
    vec2 uv = (distorted + 1.0) * 0.5;

    // Clamp + check bounds
    if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    } else {
        gl_FragColor = texture2D(renderTexture, uv);
    }
}

На практиці використовуємо Cardboard SDK — він бере на себе lens distortion та chromatic aberration, позбавляючи необхідності реалізовувати шейдер вручну. Економія часу розробки — до 2 тижнів.

Типові помилки при реалізації VR

  • Ігнорування safe areas на iPhone з нотчем — активна зона зміщується.
  • Відсутність fallback на Multi-Pass для пристроїв без підтримки SPIR.
  • Неправильний розрахунок convergenceDistance — призводить до дискомфорту та motion sickness.
  • Використання symmetric frustum замість asymmetric — «плоский» стереоефект.

Режим перемикання: звичайний екран / VR

Додаток повинен нормально працювати без гарнітури. Перемикання:

// iOS
func toggleVRMode(enabled: Bool) {
    if enabled {
        startCardboardSession()
        UIApplication.shared.isIdleTimerDisabled = true // екран не гасити
        UIDevice.current.setValue(UIInterfaceOrientation.landscapeRight.rawValue,
                                  forKey: "orientation")
    } else {
        stopCardboardSession()
        UIApplication.shared.isIdleTimerDisabled = false
        // відновити portrait
    }
}

У ландшафтному режимі для Cardboard: екран горизонтально, Split-Screen по вертикалі. Нотч iPhone потрібно враховувати — safeAreaInsets зміщують активну зону.

Орієнтири за термінами

Сценарій Терміни
Інтеграція Cardboard SDK в існуюче Unity-додаток 1–2 тижні
Кастомна реалізація з нативним Metal/OpenGL, шейдерами дисторції та повною оптимізацією 3–6 тижнів

Вартість розраховується індивідуально після оцінки вашого проекту. Ми гарантуємо прозоре ціноутворення без прихованих платежів.

Отримайте консультацію щодо вашого проекту — ми оцінимо можливість інтеграції VR за 1 день. Зв'яжіться з нами, щоб обговорити деталі, і ми підготуємо комерційну пропозицію з планом робіт.

Ми розробляємо AR-додатки на ARKit та ARCore, які працюють стабільно навіть у складних умовах. Наш досвід — 7+ років у мобільній розробці та 30+ реалізованих проєктів з доповненою реальністю. Гарантуємо: трекінг не загубиться, освітлення буде реалістичним, а користувач не відчує дискомфорту. Сертифіковані розробники Apple та Google.

Чому трекінг втрачається і як це виправити?

ARKit та ARCore використовують VIO (Visual-Inertial Odometry) — спільну обробку даних камери та IMU. Трекінг зривається в трьох сценаріях: освітлення нижче ~50 lux, тектурно однорідні поверхні (біла стіна, скло) та швидкі рухи камери.

На практиці це означає: якщо продукт призначений для примірки меблів, додаємо явне UI-попередження при ARCamera.TrackingState.limited(.insufficientFeatures). Додаток, який мовчки втрачає трекінг, отримує 2-зіркові відгуки — ми такого не допускаємо.

Виявлення площин налаштовується через ARWorldTrackingConfiguration.planeDetection = [.horizontal, .vertical]. Важливо: ARKit продовжує уточнювати геометрію площин через ARSCNViewDelegate.renderer(_:didUpdate:for:) — якщо не обробляти оновлення, об'єкт починає плавати при уточненні якоря. Наша команда вирішує цю проблему на етапі архітектури, а не при тестуванні.

AR Foundation: кроссплатформа з нюансами

Unity AR Foundation — шар абстракції поверх ARKit та ARCore. Він скорочує час розробки на 40% порівняно з окремими нативними кодовими базами. Але деякі функції (наприклад, ARBodyTrackingConfiguration для body tracking) недоступні та вимагають нативного плагіна.

Для React Native та Flutter прямого AR Foundation немає. Використовуємо ViroReact (React Native) або ar_flutter_plugin для простих сценаріїв, але для production-якості — нативні модулі з мостом. Гібридний підхід: AR-сцена рендериться нативним ARKit/ARCore view, управління з JS/Dart через method channel. Входить у нашу стандартну поставку.

Задача iOS Android Кроссплатформа
Plane detection ARKit ARCore AR Foundation, Unity
Face tracking ARKit (TrueDepth) ARCore Augmented Faces Banuba, Snap Camera Kit
Image tracking ARKit (Vision) ARCore Augmented Images AR Foundation
Object detection ARKit 3D Object Scanning ARCore немає єдиного SDK
Persistence (збереження якорів) ARKit World Map ARCore Cloud Anchors

Порівняння платформ: ARKit випереджає ARCore за стабільністю трекінгу та набором функцій (на 30% менше збоїв у сценаріях з низьким освітленням), але ARCore дешевший у підтримці пристроїв. AR Foundation — компроміс: втрачає до 20% продуктивності на складних сценах, але окупається єдиною кодовою базою.

Try-on: примірка товарів через AR

Примірка окулярів, прикрас, косметики — окремий клас задач. Тут потрібен face tracking, а не plane detection.

ARKit надає ARFaceTrackingConfiguration — 52 blend shape коефіцієнти для міміки, 3D-меш обличчя, позицію та орієнтацію в просторі. Працює лише на пристроях з TrueDepth-камерою (iPhone з Face ID).

Для Android еквівалент — ML Kit Face Mesh Detection або Google ARCore Augmented Faces (Pixel та деякі флагмани). Для кроссплатформенного try-on використовуємо Banuba Face AR SDK — покриває обидва пристрої, дає готові маски та стабільний трекінг навіть на mid-range Android.

Якість try-on критично залежить від 3D-моделей товарів. Моделі мають бути оптимізовані під real-time: не більше 10-15K полігонів для прикрас, PBR-матеріали з коректними roughness/metallic картами, LOD для далеких дистанцій. В рамках нашого підряду ми надаємо готові гайди з оптимізації моделей.

Як досягти реалістичного освітлення в AR?

ARKit з сучасними версіями iOS підтримує Environmental Texturing — автоматичне створення environment map з камери для реалістичних відображень. Вмикається через ARWorldTrackingConfiguration.environmentTexturing = .automatic. Без цього металеві та скляні матеріали виглядають пластиково.

ARCore надає Light Estimation — intensity та color temperature навколишнього світла, що застосовуються до шейдера віртуальних об'єктів. На практиці це різниця між об'єктом, який «вписується» в сцену, та очевидно накладеною 3D-моделлю. Ми гарантуємо, що фінальне зображення не видає віртуальності.

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

  • Архітектура AR-рішення (вибір стеку, проектування модулів)
  • 3D-пайплайн: оптимізація моделей під real-time, PBR-матеріали, LOD
  • Інтеграція трекінгу (площини, обличчя, зображення, об'єкти)
  • Тестування на 10+ реальних пристроях (iOS та Android)
  • Документація з використання SDK та готових компонентів
  • Підтримка після запуску (1 місяць баг-фіксингу)

Строки та оцінка

Проста AR-сцена з розміщенням однієї 3D-моделі на площині — 1–2 тижні. Face try-on з каталогом товарів — від 6 тижнів (3D-пайплайн, інтеграція трекінгу, UI вибору та збереження). Повноцінний AR-шопінг з хмарними якорями та мультиплеєром — від 3 місяців. Оцінимо проєкт за 1 день — пишіть, обговоримо вашу AR-ідею.