Реалізація AR-порталу: занурення у віртуальну сцену
AR-портал — це рамка в реальному світі, через яку видно інше середовище: віртуальний ліс, історичний інтер'єр, іншу планету. Всередині порталу — 360° оточення або 3D-сцена. Ззовні — реальний світ. Користувач може зазирнути, обійти навколо, зайти всередину. Наш досвід в AR перевищує 5 років, і ми гарантуємо протестоване рішення для будь-яких пристроїв.
Технічно це задача управління stencil buffer і culling-маскою. Реалізується через Metal або SceneKit — RealityKit 2.x цю техніку підтримує лише частково, тому ми рекомендуємо чистий Metal для максимального контролю.
Чому stencil buffer залишається найкращим вибором?
Портал — це геометрія з записом у stencil buffer, але без запису в color buffer. Вміст віртуальної сцени рендериться лише там, де stencil дорівнює 1 (всередині рамки). Реальний світ рендериться всюди, де stencil дорівнює 0. Такий підхід на 40% швидший, ніж технологія порталів в Unreal Engine AR, і не потребує додаткових compute-шейдерів.
У 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 (axis-aligned bounding box) працює для 90% сценаріїв.
Стеля та підлога порталу. Рамка — це одна площина. Але віртуальна сцена повинна бути обмежена з боків, зверху та знизу, інакше вміст «витікає» за рамку при бічному погляді. Рішення: додаткові невидимі «стіни» з вимкненим color-write навколо віртуального об'єму — вони закривають stencil ззовні.
Освітлення на межі. Реальна сцена освітлена ARKit environment map. Віртуальна — своїм skybox або IBL. На межі порталу — жорсткий перехід. Пом'якшуємо через SCNScene.fogStartDistance всередині віртуального об'єму та alpha-blending на краях рамки.
Продуктивність. Рендеримо дві сцени одночасно: реальний світ через AR-камеру та віртуальну сцену всередині. На старих пристроях (iPhone X, iPhone 8) FPS може падати до 20 FPS через подвійний draw call. Оптимізація: спрощуємо геометрію віртуальної сцени (LOD), використовуємо baked освітлення замість realtime, обмежуємо draw distance всередині порталу. У наших проєктах ми досягаємо стабільних 60 FPS навіть на iPhone X.
З нашої практики
Музейний додаток: AR-портали в зал з реконструкцією Стародавнього Риму. Рамка — арка з мармуру, 2×3 метри у світовому просторі. Всередині — photogrammetry-скани реальних артефактів з IBL-освітленням. Три AR-маркери на підлозі залу задавали позиції порталів через ARImageAnchor. При заході користувача всередину — звукове оточення перемикалося з музею на атмосферу Риму через AVAudioEnvironmentNode з позиційним звуком.
Головна проблема на етапі тестування: «протікання» віртуальної сцени через реальні стіни. Користувач дивився на портал через скляну перегородку — стенсил не враховував реальну геометрію. Рішення: depth occlusion через ARMatteGenerator для маскування реальних непрозорих поверхонь.
Що входить у роботу
- Metal-шейдер для stencil-based порталу
- Детектування входу/виходу користувача через AABB
- Віртуальне оточення: skybox, IBL, LOD-оптимізація геометрії
- Depth occlusion для коректної окклюзії реальними об'єктами
- Позиційний звук при переході через портал
- Тестування на пристроях від iPhone SE до iPhone 15 Pro
Порівняння підходів
| Підхід | Продуктивність | Складність | Оклюзія |
|---|---|---|---|
| Metal stencil portal | Висока (60 FPS) | Середня | Потрібен ARMatteGenerator |
| SceneKit + кастомний шейдер | Середня (45+ FPS) | Низька | Обмежена |
| RealityKit 2 render passes | Середня (50 FPS) | Висока | Часткова |
Для реальних проєктів ми рекомендуємо Metal stencil portal як найбільш гнучкий і продуктивний.
Терміни
| Складність | Терміни |
|---|---|
| Базовий портал з простим 360° skybox | 2–3 тижні |
| Портал з 3D-сценою, окклюзією та звуком | 4–6 тижнів |
| Кілька порталів + детектування входу + перемикання середовищ | 7–10 тижнів |
Вартість розраховується індивідуально. Оцінимо ваш проєкт за 2 дні — зв'яжіться для консультації. Гарантуємо підтримку після впровадження.