Kudan AR SDK で AR iOS アプリを作ってみよう〜マーカー上に画像を表示

こんにちは。エクセルソフトの田淵です。

弊社取り扱いの Kudan AR SDK のエントリーです。

SDK のダウンロードはこちらからお申込みください。SDK を使った開発と、個人開発者のリリースは無料でご利用いただけます。企業の方は有料になりますので、@ytabuchi までご連絡ください。

Kudan AR SDK を使い、iOS でマーカー上に画像を表示してみます。

現時点でのサンプルは ytabuchi の GitHub に置いてあります。開発を継続していくので現時点でのスナップショットです。

事前準備
プロジェクト作成
App Delegate の編集
1. ARAPIkey の追加
Marker を読み込む
ImageNode をセットする
表示画像のサイズを調整
デプロイ
この後は
Kudan AR SDK エントリー一覧

事前準備

まずは Kudan AR Framework をダウンロードします。

ダウンロードページで Developer License Key をメモしておいてください。

使用するマーカーやオブジェクトが含まれる assets.zip はこちらからダウンロードしておいてください。

プロジェクト作成

Xcode を起動して、iOS＞Single View App を選択し、Product Name に「kudanar」、Organization Identifierに「com.xlsoft」を入力し、Bundle Identifier が com.xlsoft.kudanar になるようにします。

Kudan AR SDK のインポート

ダウンロードした zip 内の KudanAR.framework を、プロジェクトのルートにドラッグ＆ドロップします。オプションはそのままでプロジェクトにコピーします。

libc++ standard library のインポート

General タブの一番下にある Frameworks, Libraries and Embedded Content セクションの「＋」アイコンをクリックします。

検索欄に「libc++」と入力して、libc++.tbd をインポートします。

以下のように KudanAR.framework と libc++.tbd が表示されていることを確認してください。表示されていない場合は、再度インポートの工程を行ってください。

Kudan AR が LLVM 用の中間コードを保持する仕組み、Bitcode に対応していないため、Build Options で Bitcode を Disable にする必要があります。

プロジェクトの設定で Build Settings で All を選択し、「Bitcode」で検索して見つけるか、Build Options＞Enable Bitcode を探し、「No」に設定してください。

Info.plist の設定

また、カメラを使用しますので、Info.plist にカメラ使用の許可を追加する必要があります。

Info.plist を開き、プロパティリストに Privacy - Camera Usage Description を追加し、適当な文言を追加しておきましょう。今回は「This app will use camera.」と追加しておきました。

Assets に利用する画像を追加

Assets.xcassets を開き、ダウンロードした画像を赤枠にドラッグ＆ドロップして追加します。下の「＋」アイコンからでも構いません。今回は Lego.jpg
と Cow.png のファイル名に変更してから追加しました。

これで準備が整いました。プロジェクトの設定は以上です。

App Delegate の編集

では実際にコードを書いていきましょう。

ARAPIkey の追加

まずは最初にメモっておいた API Key を追加します。

AppDelegate.swift を開き、import KudanAR を追加します。

didFinishLaunchingWithOptions 内に setAPIKey メソッドでキーを追加します。以下のようになります。

import UIKit
import KudanAR

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        // Add APIKey
        ARAPIKey.sharedInstance().setAPIKey("")
        
        return true
    }

    ...略...

}

次に View Controller を設定します。ViewController.swift を開き、同様に import KudanAR を追加し、UIViewController の継承を ARCameraViewController に変更します。次に setupContent の override を追加します。以下のようになります。

import UIKit
import KudanAR

class ViewController: ARCameraViewController {

    override func setupContent() {
        // Setup code goes here
    }
    
    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.
    }

}

Marker を読み込む

やっとマーカーを読み込むことができます。今回マーカーは ARImageTrackable オブジェクトを作成し、画像を読み込ませています。setupContent 内に以下のコードを追加します。（ファイル名を lego.jpg にしています。）

// ARImageTrackable オブジェクトのインスタンス化と初期化
let imageTrackable = ARImageTrackable.init(image: UIImage(named: "lego.jpg"), name: "lego")

// image tracker manager のインスタンスを取得して初期化
let imageTrackerManager = ARImageTrackerManager.getInstance()
imageTrackerManager?.initialise()

// ARImageTrackable を　image tracker manager に追加
imageTrackerManager?.addTrackable(imageTrackable)

ImageNode をセットする

マーカーの上にオブジェクトを表示する方法はいくつかありますが、今回は画像を表示する ARImageNode を使用します。setupContent 内の先ほどのコードの後に以下のコードを追加します。

// ImageNode を表示させたい画像で初期化
// PNG の場合は拡張子は不要です。
let imageNode = ARImageNode(image: UIImage(named: "cow"))
        
// ARImageTrackable に imageNode を追加
imageTrackable?.world.addChild(imageNode)

表示画像のサイズを調整

マーカー画像のサイズにオブジェクトのサイズを合わせるように scale を設定します。そのまま以下のコードを追加します。

// マーカー画像のサイズに合わせるように、それぞれの幅から拡大率を計算
let scaleRatio = Float(imageTrackable!.width)/Float(imageNode!.texture.width)
        
// 拡大率を ImageNode に適用
imageNode?.scale(byUniform: scaleRatio)

最終的な setupContent は以下のようになります。

override func setupContent() {
    // ARImageTrackable オブジェクトのインスタンス化と初期化
    let imageTrackable = ARImageTrackable.init(image: UIImage(named: "lego.jpg"), name: "lego")

    // image tracker manager のインスタンスを取得して初期化
    let imageTrackerManager = ARImageTrackerManager.getInstance()
    imageTrackerManager?.initialise()

    // ARImageTrackable を　image tracker manager に追加
    imageTrackerManager?.addTrackable(imageTrackable)
    
    // ImageNode を表示させたい画像で初期化
    // PNG の場合は拡張子は不要です。
    let imageNode = ARImageNode(image: UIImage(named: "cow"))
            
    // ARImageTrackable に imageNode を追加
    imageTrackable?.world.addChild(imageNode)
    
    // マーカー画像のサイズに合わせるように、それぞれの幅から拡大率を計算
    let scaleRatio = Float(imageTrackable!.width)/Float(imageNode!.texture.width)
            
    // 拡大率を ImageNode に適用
    imageNode?.scale(byUniform: scaleRatio)
}