いらすとやから始めるARKit

みなさんARKit触っていますか？

• 3Dモデルがないと触ってもつまらなさそう
• そもそも3D難しそう

などの理由で触っていない方も多いと思いますが、
今回は少ないコードでいらすとやの画像1枚から始めるARKitを解説しようと思います。

プロジェクト作成

まずはARKit用のプロジェクトを作成するところから。
Augmented Reality Appを選択してプロジェクトを作成します。

プロジェクトを作成したら何も変更せず、実機インストールしてみましょう。
Qiitaの記事などでよくみる例の飛行機がでてきますね。
これでプロジェクトの作成ができたので次はいらすとやの画像をARオブジェクトとして表示しましょう。

ARオブジェクトの作成

私はイチゴが好きなのでこの画像をARオブジェクトとして表示させます。
皆さんはイチゴじゃなくてりんごやバナナ、メロンでもいいです。
カバやゴリラでも問題ありません。

ARオブジェクトにする画像を決めたらAssets.xcassetsの中に入れます。

次に平面オブジェクトをコードで作成します。
ARKitの世界では1 = 1メートルなので下記のコードでは、
横20cm x 縦20cmの平面オブジェクトが生成されます。

func addPlane() {
    guard let image = UIImage(named: "strawberry") else { return }
    let node = SCNNode()
    let plane = SCNPlane(width: 0.2, height: 0.2)
    plane.firstMaterial?.diffuse.contents = image
    node.geometry = plane
    node.position = SCNVector3(0, 0, -0.5)
    self.sceneView.scene.rootNode.addChildNode(node)
}

• オブジェクトのサイズ指定（横20cm x 縦20cm）
  
  let plane = SCNPlane(width: 0.2, height: 0.2)

• 画像を平面オブジェクトのテクスチャとして指定
  plane.firstMaterial?.diffuse.contents = image

• AR空間のどこに配置するか指定（x: 0cm, y: 0cm, z-50cm）
  node.position = SCNVector3(0, 0, -0.5)
  細かい説明は省きますが-0.5でカメラ位置から50cm奥に配置されます。
  ※0.5だと50cm手前に配置される
  詳しく知りたい方は@k-boyさんのARKitのための3D数学が非常にわかりやすいので是非読んでみるのをお勧めします。

• 作成した平面オブジェクトを描画
  self.sceneView.scene.rootNode.addChildNode(node)

これでオブジェクトの作成は終わりなのでこの関数をViewDidLoad()で呼び出すと画像がARとして表示されます。

おわりに

今回はARKitや3Dに関しての知識がなくても簡単にARKitを使えるというテーマで書いたのでだいぶ内容が簡素な感じになりました。