ARKit으로 공간에 사진을 놓습니다.

ARKit을 사용하여 iPhone의 카메라 롤에 들어있는 사진을 공간에 넣어보세요!



이번 샘플로 만들어 보았던 ViewController는 github 에 넣었으므로, 전체는 그쪽을 확인해 주세요.

절차

공간에 사진을 넣으려면 다음 단계가 있습니다.

1. UIImagePickerController를 사용하여 카메라 롤의 사진 얻기

2. 사진의 UIImage를 가진 SCNNode를 만든다

3. 그 노드를 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 는 좋은 느낌이 되도록 튜닝했을 뿐입니다. 웃음)

해당 노드를 sceneView에 붙이기

마지막으로 sceneView에 node를 추가합니다.

방금 만든

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

메서드를 호출하여 node를 만들고 있습니다만, 그 인수에 건네주고 있는 position에 의해 사진이 어디에 붙일 수 있을까가 정해집니다.

이번은 htps : // v.ぁsss d. jp / s 마 rtp 네 / 이 p 네 / 이오 s11

    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)
        }
    }

이상으로 카메라 롤로 선택한 사진을 카메라의 중앙 부분에 면으로 붙일 수 있었습니다!

참고

iOS11 Programming

htps : //에서 v.ぁsss d. jp / s 마 rtp 네 / 이 p 네 / 이오 s11

관련 APP

Graffity - AR 카메라 & 낙서 동영상 커뮤니티

github

htps : // 기주 b. 이 m / k 보 y-1 l ゔ ぇ gym / 아 R 카메라 아 p / b ぉ b / 91d8d8 아 100c3d099d8089c618 에아 1 아후 3c6 아 2d585ぇr. 수 ft