Jak odtwarzać wideo 360 na urządzeniu z systemem iOS

Question

Przeglądanie różnych stron internetowych i analizowanie różnych zasobów Przekonałem się, że do odtwarzania 360 filmów na iPhonie powinieneś użyć biblioteki stron 3-d (Panorama). Ale naprawdę interesuje mnie, jak można to zrobić samemu. Ponieważ standardowe elementy iOS nie obsługują takiej funkcjonalności.

Podaj porady dotyczące podejść, których należy użyć do utworzenia własnego odtwarzacza dla 360 filmów.

Answer 1

Możesz to zrobić za pomocą scenekit, bez zewnętrznych bibliotek lub zależności.

Utwórz SCNScene i zmapuj kamerę na ruchy urządzenia. Kamery są nieco przesunięte, aby odwzorować jedno oko i stworzyć stereoskopowy efekt 3D.

override func viewDidLoad() { 
    super.viewDidLoad() 
    leftSceneView?.backgroundColor = UIColor.blackColor() 
    rightSceneView?.backgroundColor = UIColor.whiteColor() 

    // Create Scene 
    scene = SCNScene() 
    leftSceneView?.scene = scene 
    rightSceneView?.scene = scene 

    // Create cameras 
    let camX = 0.0 as Float 
    let camY = 0.0 as Float 
    let camZ = 0.0 as Float 
    let zFar = 50.0 

    let leftCamera = SCNCamera() 
    let rightCamera = SCNCamera() 

    leftCamera.zFar = zFar 
    rightCamera.zFar = zFar 

    let leftCameraNode = SCNNode() 
    leftCameraNode.camera = leftCamera 
    leftCameraNode.position = SCNVector3(x: camX - 0.5, y: camY, z: camZ) 

    let rightCameraNode = SCNNode() 
    rightCameraNode.camera = rightCamera 
    rightCameraNode.position = SCNVector3(x: camX + 0.5, y: camY, z: camZ) 

    camerasNode = SCNNode() 
    camerasNode!.position = SCNVector3(x: camX, y:camY, z:camZ) 
    camerasNode!.addChildNode(leftCameraNode) 
    camerasNode!.addChildNode(rightCameraNode) 

    camerasNode!.eulerAngles = SCNVector3Make(degreesToRadians(-90.0), 0, 0) 

    cameraRollNode = SCNNode() 
    cameraRollNode!.addChildNode(camerasNode!) 

    cameraPitchNode = SCNNode() 
    cameraPitchNode!.addChildNode(cameraRollNode!) 

    cameraYawNode = SCNNode() 
    cameraYawNode!.addChildNode(cameraPitchNode!) 

    scene!.rootNode.addChildNode(cameraYawNode!) 

    leftSceneView?.pointOfView = leftCameraNode 
    rightSceneView?.pointOfView = rightCameraNode 

    // Respond to user head movement. Refreshes the position of the camera 60 times per second. 
    motionManager = CMMotionManager() 
    motionManager?.deviceMotionUpdateInterval = 1.0/60.0 
    motionManager?.startDeviceMotionUpdatesUsingReferenceFrame(CMAttitudeReferenceFrame.XArbitraryZVertical) 

    leftSceneView?.delegate = self 

    leftSceneView?.playing = true 
    rightSceneView?.playing = true   
} 

aktualizowania położenia kamery w sceneRenderer:

func renderer(aRenderer: SCNSceneRenderer, updateAtTime time: NSTimeInterval){ 

    // Render the scene 
    dispatch_async(dispatch_get_main_queue()) {() -> Void in 
     if let mm = self.motionManager, let motion = mm.deviceMotion { 
      let currentAttitude = motion.attitude 

      var orientationMultiplier = 1.0 
      if(UIApplication.sharedApplication().statusBarOrientation == UIInterfaceOrientation.LandscapeRight){ orientationMultiplier = -1.0} 

      self.cameraRollNode!.eulerAngles.x = Float(currentAttitude.roll * orientationMultiplier) 
      self.cameraPitchNode!.eulerAngles.z = Float(currentAttitude.pitch) 
      self.cameraYawNode!.eulerAngles.y = Float(currentAttitude.yaw) 

     } 
    } 
} 

Oto kod, aby dodać SCNSphere Wyświetlanie AVPlayer.

func play(){ 

    //let fileURL: NSURL? = NSURL(string: "http://www.kolor.com/360-videos-files/noa-neal-graffiti-360-music-video-full-hd.mp4") 
    let fileURL: NSURL? = NSURL.fileURLWithPath(NSBundle.mainBundle().pathForResource("vr", ofType: "mp4")!) 

    if (fileURL != nil){ 
     videoSpriteKitNode = SKVideoNode(AVPlayer: AVPlayer(URL: fileURL!)) 
     videoNode = SCNNode() 
     videoNode!.geometry = SCNSphere(radius: 30) 

     let spriteKitScene = SKScene(size: CGSize(width: 2500, height: 2500)) 
     spriteKitScene.scaleMode = .AspectFit 

     videoSpriteKitNode!.position = CGPoint(x: spriteKitScene.size.width/2.0, y: spriteKitScene.size.height/2.0) 
     videoSpriteKitNode!.size = spriteKitScene.size 

     spriteKitScene.addChild(videoSpriteKitNode!) 

     videoNode!.geometry?.firstMaterial?.diffuse.contents = spriteKitScene 
     videoNode!.geometry?.firstMaterial?.doubleSided = true 

     // Flip video upside down, so that it's shown in the right position 
     var transform = SCNMatrix4MakeRotation(Float(M_PI), 0.0, 0.0, 1.0) 
     transform = SCNMatrix4Translate(transform, 1.0, 1.0, 0.0) 

     videoNode!.pivot = SCNMatrix4MakeRotation(Float(M_PI_2), 0.0, -1.0, 0.0) 
     videoNode!.geometry?.firstMaterial?.diffuse.contentsTransform = transform 
     videoNode!.position = SCNVector3(x: 0, y: 0, z: 0) 

     scene!.rootNode.addChildNode(videoNode!) 
     videoSpriteKitNode!.play() 

     playingVideo = true 
    } 
} 

Stworzyłem projekt na Github, aby pokazać, jak, z instrukcjami, które powinny być jasne!

Działa również w rzeczywistości wirtualnej z kartonem Google.

https://github.com/Aralekk/simple360player_iOS

Answer 2

Oprócz Aralekk's repo, Znalazłem hanton's repo przydatna podczas tworzenia mój własny odtwarzacz wideo 360 °. Here to link do mojego repozytorium i here jest powiązany z blogpost.

Answer 3

Zaimplementowałem podobne rozwiązanie, używając SceneKit na iOS: ThreeSixtyPlayer.

Moim zdaniem ten kod jest nieco prostszy i bardziej skalowalny niż inne rozwiązania. Jest to jednak tylko podstawa (brak odtwarzania stereoskopowego, obsługuje tylko geometrię sferyczną, nie obsługuje jeszcze tektury itp.).