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

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

前回は Android で Kudan AR SDK を使った AR アプリを作りました。Android で 3D Model を表示するために blender を触ってみて「なるほど分からん」となったりしていますが、今回は iOS でマーカー上に画像を表示してみます。

現時点でのサンプルは ytabuchi の GitHub に置いてあります。例によってスナップショットです。

事前準備

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

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

プロジェクト作成

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

Kudan AR SDK のインポート

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

libc++ standard library のインポート

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

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

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

プロジェクトの設定で Build SettingsAll を選択し、「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("<Put API Key here>")

        return true
    }

    ...略...

}

次に View Controller を設定します。ViewController.swift を開き 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)

デプロイ

お疲れ様でした。これで動作するはずですので、実機にデプロイしてみましょう!

こんな感じで Permision の確認があった後に Marker 上に Cow.jpg が表示されていれば成功です!

この後は

次は動画や 3D オブジェクトを表示してみましょう。iOS/Android を交互にやっていこうと思うので、次は Android で 3D オブジェクトの表示にチャレンジです。

Kudan の製品概要やダウンロードは こちら からどうぞ。開発用の SDK で遊ぶ分には無料です。

Google Play にアップしたいな!って時も、個人開発者、年商1億円以内の会社であれば無料でご利用いただけます。(起動時に Kudan のスプラッシュスクリーンは表示されます。(Unity と同じ感じです))

Kudan AR SDK エントリー一覧

iOS
Android

以上です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする