Разработка приложения для просмотра 360°-панорам на iOS и Android

Мы реализуем мобильные приложения для просмотра 360°-панорам, которые выходят далеко за рамки простого статического фото. Это либо видео в equirectangular-формате с декодированием 4K/8K в реальном времени, либо интерактивные виртуальные туры с точками интереса (hotspots), переходами между локациями и аудиогидом. Технические требования высоки: нужна декодировка видео или управление набором тайлов с плавным переходом. Специализируемся на таких решениях для iOS и Android, используя Swift, Kotlin, Metal и OpenGL ES. Опыт — более 10 лет в мобильной разработке, десятки реализованных проектов с 360°-контентом.

Как обеспечить плавный рендеринг 360°-видео на iOS?

360°-видео в equirectangular-формате на iOS декодируется через AVPlayer с AVPlayerLayer, но AVPlayerLayer рендерит только в 2D. Для сферической проекции нужен AVPlayerItemVideoOutput + Metal или SceneKit. Согласно документации Apple, 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)
    }
}

Такой подход гарантирует плавный рендеринг даже на старых устройствах. Для Android аналогичное решение строится на TextureView + MediaCodec с поверхностным вызовом OpenGL.

Почему тайловая панорама лучше для виртуальных туров?

Для высококачественных статических панорам (гостиницы, недвижимость, музеи) используют не единое изображение, а тайлы по аналогии с картами: несколько уровней детализации, разбитых на сетку. При приближении (уменьшении FOV) подгружаются тайлы более высокого разрешения.

Стандарт — Krpano tile format или Marzipano. Для мобильного рендера используем собственный Metal/OpenGL ES пайплайн или PanoramaGL (Android). Тайлы загружаются через URLSession с приоритетами: сначала видимый квадрант сферы, затем соседние 4 тайла (prefetch).

LRU-кэш для тайлов — обязательно. Без него при навигации по виртуальному туру (10+ локаций × 6 граней куба × 4 уровня детализации) память вырастает до 800 МБ за 15 минут. Наш опыт показывает, что оптимизация кэша снижает потребление до 120 МБ.

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 на каждый кадр). Используем собственный рендер-пайплайн, минимизирующий overhead.

Гироскоп и компас

CMDeviceMotion через CMMotionManager даёт quaternion ориентации устройства с частотой до 100 Hz. Преобразуем в Euler-углы для камеры сцены, применяем фильтр Калмана для сглаживания джиттера. Без фильтра гироскопный дрейф на старых устройствах (~0.3° в секунду) за 5 минут уводит «север» на 15°.

Северное направление при старте — из CLLocationManager.heading, привязываем нулевой yaw к магнитному/истинному северу. Гарантируем точность отслеживания на всех iPhone и iPad с гироскопом.

Что входит в работу

В рамках проекта мы предоставляем:

• детальную техническую документацию и архитектурную схему рендер-пайплайна;
• доступ к репозиторию с кодом и инструментом для сборки;
• инструкции по интеграции с бэкендом и публикации в сторах;
• 3 месяца технической поддержки после сдачи.

Процесс работы

1. Аналитика и сбор требований: обсуждаем цели, типы контента, целевые устройства.
2. Проектирование архитектуры рендер-пайплайна (Metal/OpenGL ES).
3. Разработка модуля загрузки и кэширования тайлов.
4. Интеграция гироскопа, компаса и сенсорного управления.
5. Реализация hotspots с анимациями и переходами.
6. Оптимизация производительности под целевые устройства.
7. Тестирование на реальных устройствах и симуляторах.
8. Подготовка документации и инструкций.
9. Сопровождение при публикации в App Store и Google Play.
10. Техническая поддержка в течение 3 месяцев после сдачи.

Сроки разработки

Стоимость рассчитывается индивидуально после анализа требований. Оценим проект в течение 2 рабочих дней. Свяжитесь с нами для оценки вашего проекта — мы проанализируем требования и предложим оптимальное решение. Получите консультацию, чтобы обсудить детали.