ARKitで空間上に写真を置く

13289 ワード
SceneKit iOS Swift ARKit iOS テキストリンク

ARKitを使ってiPhoneのカメラロールに入っている写真を空間上に置いてみます！

今回サンプルで作ってみたViewControllerはgithubに置きましたので、全体はそちらをご確認ください。

手順

空間上に写真を置くためには以下のステップがあります。

  • 1. UIImagePickerControllerを使ってカメラロールの写真を取得する
  • 2. 写真のUIImageを持ったSCNNodeを作る
  • 3. そのnodeをsceneViewに貼る

それぞれ順番に解説していきます。

UIImagePickerControllerを使ってカメラロールの写真を取得する

まずは、UIImagePickerControllerを作ってpresentします。

    private func showUIImagePicker() {
        if UIImagePickerController.isSourceTypeAvailable(.photoLibrary) {
            let pickerView = UIImagePickerController()
            pickerView.sourceType = .photoLibrary
            pickerView.delegate = self
            pickerView.modalPresentationStyle = .overFullScreen
            self.present(pickerView, animated: true, completion: nil)
        }
    }

pickerViewでのアクションを受け取るためにViewConteollerはdelegateに準拠させます。

pickerView.delegate = self

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
            setImageToScene(image: image)
        }
        picker.dismiss(animated: true, completion: nil)
    }

    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        picker.dismiss(animated: true, completion: nil)
    }
}

これで、カメラロールのUIImageを取得できましたので、あらかじめ作っておいた

func setImageToScene(image: UIImage)

メソッドでSceneViewに貼っていきます。

写真のUIImageを持ったSCNNodeを作る

とその前に、SCNNodeを作るメソッドを用意しときましょう。

    private func createPhotoNode(_ image: UIImage, position: SCNVector3) -> SCNNode {
        let node = SCNNode()
        let scale: CGFloat = 0.3
        let geometry = SCNPlane(width: image.size.width * scale / image.size.height,
                                height: scale)
        geometry.firstMaterial?.diffuse.contents = image
        node.geometry = geometry
        node.position = position
        return node
    }

ARKit登場以前からあるSceneKitには様々なSCNNodeが用意されていますが、今回はSCNPlaneを作って写真として空間に貼っていくことにしました。

ポイントは、

geometry.firstMaterial?.diffuse.contents = image

で、これやらないとただの白い面ができるだけになるので、要注意！

(ぶっちゃけですが、ここであるscaleはいい感じになるようにチューニングしただけです。笑）

そのnodeをsceneViewに貼る

最後に、sceneViewにnodeを追加していきます。

先ほど作った

func createPhotoNode(_ image: UIImage, position: SCNVector3) -> SCNNode

メソッドを呼んでnodeを作っていますが、その引数に渡しているpositionによって写真がどこに貼られるかが決まります。

今回は、https://dev.classmethod.jp/smartphone/iphone/ios11-arkit-pointofview/ を参考にさせてもらって、カメラの中央、カメラから50cm先に置かれるようにしています。

    private func setImageToScene(image: UIImage) {
        if let camera = sceneView.pointOfView {
            // カメラから見て50cm先の座標
            let position = SCNVector3(x: 0, y: 0, z: -0.5) 
            // 世界座標系に変換
            let convertedPosition = camera.convertPosition(position, to: nil)
            let node = createPhotoNode(image, position: convertedPosition)
            self.sceneView.scene.rootNode.addChildNode(node)
        }
    }

以上で、カメラロールで選択した写真をカメラの中央部分に面として貼ることができました！

参考

関連APP

github