Реализация просмотра 360°-панорам в мобильном приложении
360°-панорамы в отличие от статических 360°-фото — это либо видео в equirectangular-формате, либо интерактивные сцены с точками интереса (hotspots), переходами между локациями и аудиогидом. Технические требования значительно выше, чем для одиночного фото: нужна декодировка видео 4K/8K в реальном времени или управление набором высокоразрешённых тайлов с плавным переходом.
Видео-панорамы: где всё ломается
360°-видео в equirectangular-формате на iOS декодируется через AVPlayer с AVPlayerLayer, но AVPlayerLayer рендерит только в 2D. Для сферической проекции нужен AVPlayerItemVideoOutput + Metal или SceneKit.
Ключевая проблема: AVPlayerItemVideoOutput.copyPixelBuffer(forItemTime:itemTimeForDisplay:) блокирует вызывающий поток на время декодирования кадра. На iPhone 12 декодирование 4K H.265 занимает 8–15ms — это половина бюджета кадра при 60fps. Вызов на CADisplayLink-callback в main thread даёт видимые просадки.
Правильно: CADisplayLink только запускает Metal render pass, копирование CVPixelBuffer — в отдельной DispatchQueue(qos: .userInteractive), результат передаётся в Metal через CVMetalTextureCacheCreateTextureFromImage.
let displayLink = CADisplayLink(target: self, selector: #selector(renderFrame))
displayLink.preferredFrameRateRange = CAFrameRateRange(minimum: 60, maximum: 120, preferred: 120)
@objc func renderFrame() {
videoDecodeQueue.async { [weak self] in
guard let pixelBuffer = self?.videoOutput.copyPixelBuffer(
forItemTime: self!.playerItem.currentTime(),
itemTimeForDisplay: nil
) else { return }
self?.metalRenderer.render(pixelBuffer: pixelBuffer)
}
}
Тайловые панорамы (виртуальные туры)
Для высококачественных статических панорам (гостиницы, недвижимость, музеи) используют не единое изображение, а тайлы по аналогии с картами: несколько уровней детализации, разбитых на сетку. При приближении (уменьшении FOV) подгружаются тайлы более высокого разрешения.
Стандарт — Krpano tile format или Marzipano. Для мобильного рендера используем собственный Metal/OpenGL ES пайплайн или PanoramaGL (Android). Тайлы загружаются через URLSession с приоритетами: сначала видимый квадрант сферы, затем соседние 4 тайла (prefetch).
LRU-кэш для тайлов — обязательно. Без него при навигации по виртуальному туру (10+ локаций × 6 граней куба × 4 уровня детализации) память вырастает до 800 МБ за 15 минут.
Hotspots и интерактивность
Hotspot — это точка в 3D-пространстве сферы, которая при рендеринге превращается в 2D-элемент на экране (иконка, подсказка, кнопка перехода). Конвертация из сферических координат (yaw/pitch) в screen coordinates:
func sphericalToScreen(yaw: Float, pitch: Float,
cameraYaw: Float, cameraPitch: Float,
fov: Float, screenSize: CGSize) -> CGPoint? {
// Матричное преобразование: сферические → декартовы → проекция камеры → NDC → screen
let direction = SIMD3<Float>(
cos(pitch) * sin(yaw),
sin(pitch),
cos(pitch) * cos(yaw)
)
// ... view matrix × projection matrix → clip space → viewport
}
Если dot(direction, cameraForward) < 0 — hotspot за камерой, не рендерим.
Анимация hotspot-появления при попадании в FOV — fade-in через CABasicAnimation, не через SwiftUI-анимацию (SwiftUI overlay поверх Metal SCNView даёт 2–3ms layout pass на каждый кадр).
Гироскоп и компас
CMDeviceMotion через CMMotionManager даёт quaternion ориентации устройства с частотой до 100 Hz. Преобразуем в Euler-углы для камеры сцены, применяем фильтр Калмана для сглаживания джиттера. Без фильтра гироскопный дрейф на старых устройствах (~0.3° в секунду) за 5 минут уводит «север» на 15°.
Северное направление при старте — из CLLocationManager.heading, привязываем нулевой yaw к магнитному/истинному северу.
Сроки
Видео-панорама 4K с Metal-рендером (iOS): 2–3 недели. Виртуальный тур с тайлами, hotspots, переходами между локациями, iOS + Android: 6–10 недель в зависимости от количества интерактивных элементов. Стоимость рассчитывается индивидуально.