【ARKit】画像マーカーを使った3Dモデルの表示

Blog Single

みなさん、こんにちは。
風邪をひいてしました、渋谷です。

今回は自分で画像マーカーを登録し、そのマーカーをカメラで検出したらマーカー上に球体を表示させてみようと思います。プロジェクトの作成準備などは、前回の記事を参考にしてください。

完成イメージ

※今回は便宜上、PCのモニタに映った画像をカメラで読み込んでいます

環境

Swift version 4.2.1
Xcode 10.1

画像マーカーの登録

マーカーとして使いたい画像をXcodeのプロジェクトに追加します。今回は、以下の画像を使用します。

■Assets.xcassets`を選択する

■画面左下の + をクリックし、New AR Resource Groupを選択する

■マーカーとして使用する画像を、AR Resource Group内にドラッグ&ドロップする

以上でマーカーとする画像の登録は完了ですが、使用する画像によって下画像のような警告が出ることがあります。

これは、マーカーのサイズが設定されていないことが原因なので、下画像のようにしっかりとマーカーサイズを設定しましょう。

画像サイズを設定したにも関わらず、まだ下画像のような警告が出ていました。

これは、この画像の特徴点が少ないためにマーカーに適さないと言われています。しかし今回は問題ないので無視することにします!

実装

import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController, ARSCNViewDelegate {

    @IBOutlet var sceneView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set the view's delegate
        sceneView.delegate = self

        // ライトの追加
        sceneView.autoenablesDefaultLighting = true;

        // Set the scene to the view
        sceneView.scene = SCNScene()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        // Create a session configuration
        let configuration = ARImageTrackingConfiguration()

        // 画像認識の参照用画像をアセットから取得
        configuration.trackingImages = ARReferenceImage.referenceImages(inGroupNamed: "AR Resources", bundle: nil)!

        // Run the view's session
        sceneView.session.run(configuration)
    }

    // マーカーが検出されたとき呼ばれる
    func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
        // 球のノードを作成
        let sphereNode = SCNNode()
        // ノードにGeometryを設定
        sphereNode.geometry = SCNSphere(radius: 0.1)
        sphereNode.position.y += 0.025
        // 画像マーカーの子要素にする
        node.addChildNode(sphereNode)
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)

        // Pause the view's session
        sceneView.session.pause()
    }
}

以上!
実機にビルドしてマーカーとして登録した画像をカメラで写してみましょう。白い球体が出現するはずです。

解説

■ARImageTrackingConfiguration()

今ままでの記事では、平面を検出したかったのでconfigurationARWorldTrackingConfigurationを指定していましたが、今回はARImageTrackingConfiguratioを指定しています。ARImageTrackingConfiguratioは画像マーカー検知専用のconfigurationなので、平面検知はすることができません。
trackingImagesで、マーカーとする画像を指定します。

まとめ

今回はいい感じの実物マーカーが準備できなかったので、モニタ上に映った画像をマーカーとしました。
この記事ではマーカーを1つしか登録していませんが、もちろん複数登録することも可能です。
また、やはりマーカーとして登録した画像の特徴点が少ないせいか、精度があまりよくなかったので色々なマーカーを使って遊んでみようと思います。

Posted by ShibuyaYuuki
今はPHPで開発を行なっているエンジニア。 就職してから体重が15キロ増えました!!

Other Posts: