Реалізація AR-портала (погружение у віртуальну сцену)
AR-портал — це рамка в реальному світі, крізь яку видна інша середовище: віртуальний ліс, історичний інтер'єр, інша планета. Всередину портала — 360° оточення або 3D-сцена. Зовні — реальний світ. Користувач може заглянути, обійти вкруг, зайти всередину.
Технічно це задача управління стенсилом та culling-маскою. Реалізується через Metal або SceneKit — RealityKit 1.x цю техніку не підтримує напрямку.
Принцип роботи: stencil buffer
Портал — це геометрія з записом у stencil buffer, але без запису у color buffer. Контент віртуальної сцени рендерится лише там, де stencil дорівнює 1 (всередину рамки). Реальний світ рендерится скрізь, де stencil дорівнює 0.
У SceneKit це реалізується через SCNMaterial з кастомним Metal-шейдером:
// Матеріал для рамки портала — пише у stencil, не пише колір
portalFrameMaterial.writesToDepthBuffer = false
portalFrameMaterial.colorBufferWriteMask = []
// У Metal: stencilReference = 1, stencilWriteMask = 0xFF
// Матеріал для контенту портала — рендерится тільки при stencil == 1
contentMaterial.readsFromDepthBuffer = true
// У Metal: stencilTestFunction = .equal, stencilRef = 1
У RealityKit 2 з'явився доступ до Metal render passes, але повнофункціональний stencil portal простіше робити через SceneKit або чистий Metal з ARSCNView / ARView з кастомним RenderCallbacks.
Що ускладнює реалізацію
Окклюзія зсередини. Коли користувач заходить всередину портала, потрібно інвертувати логіку: зовнішній світ скривається, віртуальне оточення займає весь екран. Детектуємо перетин: якщо ARCamera.transform всередину обсягу портала — переключаємо режим рендерингу. Простая перевірка через AABB працює для більшості сценаріїв.
Стеля та підлога портала. Рамка — це одна площина. Але віртуальна сцена має бути обмежена з боків, зверху та знизу, інакше контент "витікає" за рамку при боковому погляді. Рішення: додаткові невидимі "стіни" з відключеним color-write навколо віртуального обсягу — вони закривають stencil зовні.
Освітлення на границі. Реальна сцена освітлена ARKit environment map. Віртуальна — своїм skybox або IBL. На границі портала — жорсткий перехід. Мякшимо через SCNScene.fogStartDistance всередину віртуального обсягу та alpha-blending на краях рамки.
Продуктивність. Рендеримо дві сцени одночасно: реальний світ через AR-камеру та віртуальну сцену всередину. На старих пристроях (iPhone X, iPhone 8) FPS падає нижче 30 через подвійний draw call. Оптимізація: спрощуємо геометрію віртуальної сцени (LOD), використовуємо baked освітлення замість realtime, обмежуємо draw distance всередину портала.
Кейс
Музейний додаток: AR-портали у залі з реконструкцією Давнього Риму. Рамка — арка з мармуру, 2×3 метра у світовому просторі. Всередину — photogrammetry-скани реальних артефактів з IBL-освітленням. Три AR-маркери на підлозі залу задають позиції порталів через ARImageAnchor. При заході користувача всередину — звукове оточення переключалось з музею на атмосферу Риму через AVAudioEnvironmentNode з позиційним звуком.
Головна проблема на етапі тестування: "протічка" віртуальної сцени крізь реальні стіни. Користувач дивився на портал крізь скляну перегородку — stencil не враховував реальну геометрію. Рішення: depth occlusion через ARMatteGenerator для маскування реальних непрозорих поверхонь.
Що входить у роботу
- Metal-шейдер для stencil-based портала
- Детектування входу/виходу користувача через AABB
- Віртуальне оточення: skybox, IBL, LOD-оптимізація геометрії
- Depth occlusion для коректної окклюзії реальними об'єктами
- Позиційний звук при переході крізь портал
- Тестування на пристроях від iPhone SE до iPhone 15 Pro
Сроки
| Складність | Сроки |
|---|---|
| Базовий портал з простим 360° skybox | 2–3 тижні |
| Портал з 3D-сценою, окклюзією та звуком | 4–6 тижнів |
| Кілька порталів + детектування входу + переключення середовищ | 7–10 тижнів |
Вартість розраховується індивідуально.