こんにちは。エクセルソフトの田淵です。
弊社取り扱いの Kudan AR SDK のエントリーです。
SDK のダウンロードは こちら からお申込みください。SDK を使った開発と、個人開発者のリリースは無料でご利用いただけます。企業の方は有料になりますので、@ytabuchi までご連絡ください。
前回の iOS のエントリーではマーカーの上に動画を表示させるところまでをやりました。
今回は遂にマーカレスです。
現時点でのサンプルコードは ytabuchi の Github にアップしてあります。この後もコミット追加していくのでスナップショットです。
目次
作業の流れ
今までは Storyboard の最初の ViewController で作業していたので、ビューを分けたいと思います。
こんな感じですね。
Main.Storyboardを書き換えViewController.swiftをMarkerViewController.swiftに名前を変更して必要な参照を書き換え。- マーカーレスの処理を
ArbiViewController.swiftに新規に作成する
が作業内容です。Android 同様、ちょっと長いです。
また、今回使用する assets 画像一式は、こちら からダウンロードしてください。
Main.Storyboard を書き換え
初期画面のビューだけでしたので、ボタンでナビゲーション出来るように Storyboard を修正していきます。
右下の Object Library から、「Navigation Controller」をドラッグ＆ドロップします。そのままだと右側の UITableView に遷移してしまうので以下を行います。
- 右側の UITableView を削除します。
- 新たに「ViewController」をドラッグ＆ドロップして追加します。
- 最初の View の左側に付いている「Storyboard Entry Point」の矢印を
Navigation Controllerにドラッグ＆ドロップします。 Navigation Controllerから「control」キーを押しながら上記で追加した新たなビューにドラッグ＆ドロップして、「root view controller」として設定します。（以下で設定します）
- ルートのビューのタイトル
Navigation Itemをクリックして、タイトルを修正します。
以下のような状態になるはずです。
次にルートのビューからマーカーのビューとマーカーレスのビューに遷移するようにボタンを2つ配置して、Segue を貼ります。以下を行います。
- ルートのビューにボタンを2つ配置して、Constraints を設定しておきます。
- 新しい「View Controller」を追加します。
- ルートの2つのボタンから、control キーを押しながらそれぞれのビューにドラッグ＆ドロップして Show Segue を繋げます。
- 遷移先の各ページのタイトル部分には、「Navigation Item」をドラッグ＆ドロップして追加しないと、タイトルを追加できないみたいです。
以下のような状態になっていれば OK です。
MarkerViewController.swift に参照を変更
元々あった「ViewController.swift」を MarkerViewController.swift に名前を変更して、ファイル内のクラス名も変更し、
|
1 2 3 4 5 6 7 |
class MarkerViewController: ARCameraViewController { @IBOutlet weak var clearButton: UIButton! @IBOutlet weak var imageButton: UIButton! @IBOutlet weak var modelButton: UIButton! @IBOutlet weak var videoButton: UIButton! ... |
Storyboard の遷移先のページの identity inspector で MarkerViewController に割り当てを変更し直します。
マーカーレスの処理を ArbiViewController.swift に追加
マーカーレスの処理を追加する ViewController、ArbiViewController.swift を作成します。
Swift ファイルを作成してもクラスも import も何も書かれないので、次のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import Foundation import KudanAR class ArbiViewController: ARCameraViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
マーカーレスのビューにボタン「changeTrackingModeButton」を追加して、ArbiViewController に Outlet と Action を追加します。
ARCameraViewController の override で必要になる setupContent() メソッドを追加しておきます。現時点で以下のようになります。ARImageNode のクラス変数もありますので、ご注意ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
class ArbiViewController: ARCameraViewController { var trackingNode:ARImageNode? @IBOutlet weak var changeTrackingModeButton: UIButton! @IBAction func changeTrackingModeButton_TouchUpInside(_ sender: Any) { } override func setupContent() { } override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
setupContent メソッドから呼び出す 2つのメソッドを追加
表示する TrackingNode を追加する addTrackingNode() メソッドを追加します。次のようなコードを setupContent の下に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
func addTrackingNode() { // トラッキング(表示)するノードを用意 trackingNode = ARImageNode(image: UIImage(named: "CowTracking")) // ノードの画像を正しい向きにするために回転 trackingNode?.rotate(byDegrees: 90, axisX: 1.0, y: 0.0, z: 0.0) trackingNode?.rotate(byDegrees: 180.0, axisX: 0.0, y: 1.0, z: 0.0) trackingNode?.rotate(byDegrees: 90.0, axisX: 0.0, y: 0.0, z: 1.0) } |
普通に表示すると変な向きになってしまったのでちゃんと見えるように回転させてます。
マーカーレスのトラックを設定する setupArbiTrack() メソッドを追加します。次のようなコードを上記 addTrackingNode() メソッドの下に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
func setupArbiTrack() { // ArbiTrack を初期化 let arbiTrack = ARArbiTrackerManager.getInstance() arbiTrack?.initialise() // ジャイロマネージャーを初期化 let gyroPlaceManager = ARGyroPlaceManager.getInstance() gyroPlaceManager?.initialise() // ターゲットとして使うノードを用意 let targetImageNode = ARImageNode(image: UIImage(named: "CowTarget")) // デバイスのジャイロでノードが動くようにノードを ARGyroPlaceManager に追加 gyroPlaceManager?.world.addChild(targetImageNode); // ノードの画像を正しい向きにするために回転し、サイズを調整 targetImageNode?.rotate(byDegrees: 90.0, axisX: 1.0, y: 0.0, z: 0.0) targetImageNode?.rotate(byDegrees: 180.0, axisX: 0.0, y: 1.0, z: 0.0) targetImageNode?.rotate(byDegrees: 90.0, axisX: 0.0, y: 0.0, z: 1.0) targetImageNode?.scale(byUniform: 0.3) // ARArbiTrack の targetNode に指定 arbiTrack?.targetNode = targetImageNode // ARArbiTracker の world に trackingNode を追加 arbiTrack?.world.addChild(trackingNode) } |
Kudan AR SDK のマーカーレスモードではスマホのジャイロを使用するため、ARGyroPlaceManager のインスタンスを初期化し、後はマーカーモードと同じように targetNode と world に addChild() すれば OK です。
setupContent() に上記 2つの呼び出しを追加
次に 2つのメソッドを呼び出しましょう。
|
1 2 3 4 5 |
override func setupContent() { addTrackingNode() setupArbiTrack() } |
ボタンの TouchUpInside イベントを追加
最後に、ボタンをクリックする度に、ARArbiTrack の isTracking をチェックして start／stop を切り替える以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@IBAction func changeTrackingModeButton_TouchUpInside(_ sender: Any) { let arbiTrack = ARArbiTrackerManager.getInstance() if let arbiTracker = arbiTrack { if (arbiTracker.isTracking) { arbiTracker.stop() arbiTracker.targetNode.visible = true changeTrackingModeButton.setTitle("Start Tracking", for: UIControlState.normal) } else { arbiTracker.start() arbiTracker.targetNode.visible = false changeTrackingModeButton.setTitle("Stop Tracking", for: UIControlState.normal) } } } |
最終的な ArbiViewController クラスは次のようになっているはずです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
class ArbiViewController: ARCameraViewController { var trackingNode:ARImageNode? @IBOutlet weak var changeTrackingModeButton: UIButton! @IBAction func changeTrackingModeButton_TouchUpInside(_ sender: Any) { let arbiTrack = ARArbiTrackerManager.getInstance() if let arbiTracker = arbiTrack { if (arbiTracker.isTracking) { arbiTracker.stop() arbiTracker.targetNode.visible = true changeTrackingModeButton.setTitle("Start Tracking", for: UIControlState.normal) } else { arbiTracker.start() arbiTracker.targetNode.visible = false changeTrackingModeButton.setTitle("Stop Tracking", for: UIControlState.normal) } } } override func setupContent() { addTrackingNode() setupArbiTrack() } func addTrackingNode() { // トラッキング(表示)するノードを用意 trackingNode = ARImageNode(image: UIImage(named: "CowTracking")) // ノードの画像を正しい向きにするために回転 trackingNode?.rotate(byDegrees: 90, axisX: 1.0, y: 0.0, z: 0.0) trackingNode?.rotate(byDegrees: 180.0, axisX: 0.0, y: 1.0, z: 0.0) trackingNode?.rotate(byDegrees: 90.0, axisX: 0.0, y: 0.0, z: 1.0) } func setupArbiTrack() { // ArbiTrack を初期化 let arbiTrack = ARArbiTrackerManager.getInstance() arbiTrack?.initialise() // ジャイロマネージャーを初期化 let gyroPlaceManager = ARGyroPlaceManager.getInstance() gyroPlaceManager?.initialise() // ターゲットとして使うノードを用意 let targetImageNode = ARImageNode(image: UIImage(named: "CowTarget")) // デバイスのジャイロでノードが動くようにノードを ARGyroPlaceManager に追加 gyroPlaceManager?.world.addChild(targetImageNode); // ノードの画像を正しい向きにするために回転し、サイズを調整 targetImageNode?.rotate(byDegrees: 90.0, axisX: 1.0, y: 0.0, z: 0.0) targetImageNode?.rotate(byDegrees: 180.0, axisX: 0.0, y: 1.0, z: 0.0) targetImageNode?.rotate(byDegrees: 90.0, axisX: 0.0, y: 0.0, z: 1.0) targetImageNode?.scale(byUniform: 0.3) // ARArbiTrack の targetNode に指定 arbiTrack?.targetNode = targetImageNode // ARArbiTracker の world に trackingNode を追加 arbiTrack?.world.addChild(trackingNode) } override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
ビルドして動かしてみましょう。
こんな感じです！一度配置したら割とピタッと配置されますね。
Kudan AR SDK、iOSのマーカーレスです。 #Kudan pic.twitter.com/dCNgVUwRZ1
— 田淵 義人＠エクセルソフト (@ytabuchi) 2018年10月11日
https://platform.twitter.com/widgets.js
この後は
次はマーカーモードと同じく、マーカーレスで 3D モデルを配置することにチャレンジしてみたいと思います。
Kudan AR SDK エントリー一覧
Kudan AR SDK チュートリアル記事まとめ | エクセルソフト ブログ
をご覧ください。
以上です。