[iOS] Kudan+Swift3.0でARを体験してみる

Kudanは高性能なAR/VRエンジンで以下のような特徴があるようです。いくつか挙げてみると、

• 高性能（画像認識精度、速度、表示品質、AR機能の数など、他社製品と比較して圧倒的なパフォーマンスを実現する）
• （カメラが付いている限り）ハードウェアに依存しない
• マーカー数の制限は無し
• 認識ごとの課金も無し（価格については後述）
• オフラインで認識可能
• Native（iOS/Android）、UnityのSDKを公開
• 開発言語はC++, Java, ObjectiveCに対応

とあります。詳細は公式サイトをご覧ください。

https://japan.kudan.eu/

価格について

価格についてはローカルで試してみる分には無料です。 アプリを公開する場合にのみ£1,000（アプリ毎/年）が必要で、法人・商用利用場合は別途サブライセンス契約が必要と記載がありました。

今回は画像をマーカーとして認識させ、そこに動画を再生させるアプリを作成して試してみました。

検証環境

今回は下記環境で試しています。

準備

カメラ機能が必須になるため、iOSの実機端末が必要です。また、以下を用意します。

素材の用意

• マーカー用の画像
• マーカーを認識した時に再生する動画

ワイルドカード（*）なプロビジョニングプロファイルを用意

無料版ではアプリのBundleIDが決められているので必要です。

KudanSDKのダウンロード

公式サイトよりKudanSDKをダウンロードします。

https://www.kudan.eu/download-kudan-ar-sdk/

iOSで試すのでiOS SDKを選択します。

購入ページに遷移しますが、料金はかかりません。必要事項（*がついているところ）を入力して、Downloadボタンをクリックします。

入力内容に問題がなければ下記画面に切り替わります。

先程入力したメールアドレスにダウンロードURLが記載されているメールが届きます。クリックしてSDKをダウンロードします。

実装

1.プロジェクトの作成

新しくプロジェクトを作成します。Single View Applicationを選択し、Nextボタンをクリックします。

プロジェクト名など必要事項を入力します。言語はSwiftを選択しました。入力したら、Nextボタンをクリックして適宜プロジェクトを保存します。

2.素材の追加

準備をした素材をプロジェクトに入れます。

マーカー用の画像

マーカーを認識した時に再生する動画

3.ライブラリの登録

ダウンロードしたzipファイルを解凍し、KudanAR.frameworkをプロジェクトフォルダにコピーします。

TARGETS > Build Phases > Link Binary With Librariesを選択し、+ ボタンをクリックします。

Add Other... ボタンをクリックして、KudanAR.frameworkを選択します。

次にlibc++.tbdを選択します。

Link Binary With LibrariesにKudanAR.frameworkとlibc++.tbdが追加されればOKです。

4.プロジェクトの設定

無料版のKudanSDKを利用する際にはBundle IdentifierをライセンスページにあるBundle / Package IDにする必要があります。ライセンスページのURLは下記になります。

https://wiki.kudan.eu/Development_License_Keys

また、TARGETS > Build Settings > Build Options の Enable BitcodeをNoにします。

5.ライセンスをセットする

KudanSDKはライセンスをセットする必要があります。3.プロジェクトの設定で表示したライセンスページからライセンスコードをコピペしてAppDelegateでセットします。

AppDelegate.swift

import UIKit
import KudanAR

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
	
        ARAPIKey.sharedInstance().setAPIKey("ここにライセンスコードを入れる")

        return true
    }
	
	〜 後略 〜

KudanARをインポートしてARAPIKey.sharedInstance().setAPIKey()でライセンスコードをセットすればOKです。

6.実装

KudanSDKにはARをカプセル化したARCameraViewControllerというクラスが用意されています。これを利用することにより簡単にARを扱うことができました。

まずは、KudanARをインポートします

import KudanAR

そしてARCameraViewControllerを継承します。

class ViewController: ARCameraViewController {

setupContent()をオーバーライドし、その中でマーカーやビデオの設定をします。

override func setupContent() {
    // ここでマーカーの設定やビデオを表示させる
}

画像マーカーの登録

ARImageTrackerManagerのインスタンスを取得し、initialise()で初期化します。ARImageTrackable(image:name:)で画像マーカーを作成し、.addTrackable()でARImageTrackerManagerに追加します。

let tracker = ARImageTrackerManager.getInstance()
tracker?.initialise()
let imageTrackable = ARImageTrackable(image: UIImage(named:"sample"), name: "trackerImage")
tracker?.addTrackable(imageTrackable)

VideoNodeの追加

画像マーカーを登録したらARVideoNodeを作成します。ARVideoNode(bundledFile:)で動画を登録します。

let videoNode = ARVideoNode(bundledFile: "sample.mp4")

ARImageTrackableに対して作成したARVideoNodeを追加します。

imageTrackable.world.addChild(videoNode)

動画と画像マーカーのサイズから縮尺を計算します。

let scaleFactor = Float(imageTrackable.height) / Float((videoNode?.videoTexture.height)!)
videoNode?.scale(byUniform: scaleFactor)

VideoNodeを再生します。

videoNode?.play()

サンプルコード

ViewController.swift

import UIKit
import KudanAR

class ViewController: ARCameraViewController {

    private let imageName = "trackerImage"

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

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

    override func setupContent() {
        setupTracker()
        setupVideo()
    }

    private func setupTracker() {
        let tracker = ARImageTrackerManager.getInstance()
        tracker?.initialise()
        let imageTrackable = ARImageTrackable(image: UIImage(named:"sample"), name: imageName)
        tracker?.addTrackable(imageTrackable)
    }

    private func setupVideo() {
        let tracker = ARImageTrackerManager.getInstance()
        guard let imageTrackable = tracker?.findTrackable(byName: imageName) else {
            fatalError("Could not find imageTrackable")
        }
        let videoNode = ARVideoNode(bundledFile: "sample.mp4")

        imageTrackable.world.addChild(videoNode)
        
        let scaleFactor = Float(imageTrackable.height) / Float((videoNode?.videoTexture.height)!)
        videoNode?.scale(byUniform: scaleFactor)

        videoNode?.play()

		// 動画をフェードインさせる（時間）
        videoNode?.videoTextureMaterial.fadeInTime = 1
		// リセットのしきい値
        videoNode?.videoTexture.resetThreshold = 2
		
		// 動画をタップしたアクション
        videoNode?.addTouchTarget(self, withAction: #selector(videoWasTouched))
    }

    func videoWasTouched(videoNode: ARVideoNode) {
		// 最初から再生させる
        videoNode.reset()
        videoNode.play()
    }
}

実行結果

PC上にマーカーとして登録した画像を表示させてます。認識すると動画が再生されます。

今回利用した動画素材はこちらからお借りしています

さいごに

今回のような簡単なレベルのものであれば、専門的な知識等も特に必要なく手軽に入れることができました。
また、Githubに色々なサンプルが公開されています。iOSであればEnhanced-Samples-iOSを試してみると面白いと思います。

https://github.com/kudan-eu