Реалізація VR-режиму в мобільному додатку (стереоскопічний рендеринг)

Реалізація VR-режиму в мобільних додатках (Стереоскопічний рендеринг)

Додавання VR-режиму до існуючого мобільного додатку — це не просто розділення екрана пополам. Стереоскопічний рендеринг вимагає правильного налаштування проекцій для кожного ока, корекції спотворення під конкретну оптику гарнітури та head tracking без накопичення drift.

Геометрія стереорендеринга

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

Матриця проекції для кожного ока — це 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;

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

Lens Distortion Correction

Лінзи 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, звільняючи від необхідності реалізовувати шейдер вручну.

Single Pass Stereo Rendering

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

У 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

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

Chromatic Aberration та інші корекції

Через скляні лінзи краї зображення мають хроматичну аберацію — червоний та синій каналі зміщені. Додатковий крок корекції сдвигає RGB канали залежно від відстані від центру. Cardboard SDK включає це у свій render pipeline автоматично.

Переключення режиму: звичайний екран / 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 зміщують активну зону.

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

Аудит існуючого додатку: тип контенту, поточний render pipeline, цільові пристрої.

Інтеграція Cardboard SDK або кастомної пари stereo rendering.

Налаштування lens distortion, chromatic aberration correction.

Оптимізація: Single Pass Instanced, foveated rendering, LOD.

Адаптація UI для VR-режиму: gaze interaction, reticle, Cardboard button.

Тестування latency та motion sickness на реальних пристроях.

Оцінка часу

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