【ARKit】今日からはじめる AR プログラミング Part.2「タップした場所に画像を浮かべる」

#この記事について
前回の記事（ 今日からはじめる AR プログラミング Part.1）では、
ARKit を使ったシンプルなアプリケーションを開発して、どのように空間トラッキングをしているかを体験した。
今回は、もう少しだけ ARKit の機能を使ってみる。

#どんな人のための記事？

• Xcode の基本的な使い方を理解している。
• Swift プログラミングの基本を理解している。
• AR (Augmented Reality) に興味がある。

#要件

• Xcode9 以降が動作する Mac
• A9 プロセッサを搭載している iOS デバイス（iOS11~）

#開発するアプリケーションの概要

• AR 空間に、3D コンテンツの画像を配置する。
• タッチジェスチャー
• SceneKit

#ARKit と SceneKit
AR は「拡張された現実」のこと。
今回の記事では、現実空間を仮想の 3D コンテンツで拡張してみる。
iOS プログラミングで、3D コンテンツを扱う時に便利なフレームワークが SceneKit。
SceneKit の仮想空間では「x,y,z」の3軸、つまり「水平、垂直、奥行き」の座標系で位置情報を扱う。

#手順
##1. Xcode プロジェクトを作成
####プロジェクトの設定
####Info.plist

##2. ユーザーインターフェース
####iPhoneX 向けのデザイン
オートレイアウト
####タップを検知する
UITapGestureRecognizer を配置する
####IBOutlet 接続
arScnView

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var arScnView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()        
    }
        
}

####IBAction 接続
handleTap メソッド

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var arScnView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()        
    }
        
    @IBAction func handleTap(_ sender: UITapGestureRecognizer) {
    }

}

##3. ソースコード
####フレームワークをインポートする
今回は ARKit に加えて、3D オブジェクトを生成・配置するために SceneKit フレームワークを使用する。

ViewController.swift

import ARKit
import SceneKit

class ViewController: UIViewController {

    @IBOutlet weak var arScnView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
        
    @IBAction func handleTap(_ sender: UITapGestureRecognizer) {
    }

}

####セッションとコンフィギュレーション
前回とほぼ同じ内容。ただし、今回はデバッグ情報は表示しない。

ViewController.swift

import ARKit
import SceneKit

class ViewController: UIViewController {

    @IBOutlet weak var arScnView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let scene = SCNScene()
        arScnView.scene = scene
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        let configuration = ARWorldTrackingConfiguration()
        arScnView.session.run(configuration)
    }

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        
        arScnView.session.pause()
    }
    
    @IBAction func handleTap(_ sender: UITapGestureRecognizer) {
    }

}

####完成したソースコード

ViewController.swift

import ARKit
import SceneKit

class ViewController: UIViewController {

    @IBOutlet weak var arScnView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let scene = SCNScene()
        arScnView.scene = scene
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        let configuration = ARWorldTrackingConfiguration()
        arScnView.session.run(configuration)
    }

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        
        arScnView.session.pause()
    }
    
    @IBAction func handleTap(_ sender: UITapGestureRecognizer) {
        guard let currentFrame = arScnView.session.currentFrame else { return  }
        
        let viewWidth  = arScnView.bounds.width
        let viewHeight = arScnView.bounds.height
        let imagePlane = SCNPlane(width: viewWidth/6000, height: viewHeight/6000)
        imagePlane.firstMaterial?.diffuse.contents = arScnView.snapshot()
        imagePlane.firstMaterial?.lightingModel = .constant
        
        let planeNode = SCNNode(geometry: imagePlane)
        arScnView.scene.rootNode.addChildNode(planeNode)
        
        var translation = matrix_identity_float4x4
        translation.columns.3.z = -0.1
        planeNode.simdTransform = matrix_multiply(currentFrame.camera.transform, translation)
    }

}

##4. ビルド
アプリが起動したら、画面をタップしてみる。
タップした瞬間にデバイス画面に映っていた画像が AR 空間に配置されれば、アプリケーションは正しく動作している。