【ARKit】画像マーカーを使った3Dモデルの表示
みなさん、こんにちは。
風邪をひいてしました、渋谷です。
今回は自分で画像マーカーを登録し、そのマーカーをカメラで検出したらマーカー上に球体を表示させてみようと思います。プロジェクトの作成準備などは、前回の記事を参考にしてください。
完成イメージ
※今回は便宜上、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()
今ままでの記事では、平面を検出したかったのでconfigurationにARWorldTrackingConfigurationを指定していましたが、今回はARImageTrackingConfiguratioを指定しています。ARImageTrackingConfiguratioは画像マーカー検知専用のconfigurationなので、平面検知はすることができません。
trackingImagesで、マーカーとする画像を指定します。
まとめ
今回はいい感じの実物マーカーが準備できなかったので、モニタ上に映った画像をマーカーとしました。
この記事ではマーカーを1つしか登録していませんが、もちろん複数登録することも可能です。
また、やはりマーカーとして登録した画像の特徴点が少ないせいか、精度があまりよくなかったので色々なマーカーを使って遊んでみようと思います。
