こんにちは。エクセルソフトの田淵です。
弊社取り扱いの Kudan AR SDK のエントリーです。
SDK のダウンロードは こちら からお申込みください。SDK を使った開発と、個人開発者のリリースは無料でご利用いただけます。企業の方は有料になりますので、@ytabuchi までご連絡ください。
Kudan AR SDK を使い、iOS でマーカー上に画像を表示してみます。
現時点でのサンプルは ytabuchi の GitHub に置いてあります。開発を継続していくので現時点でのスナップショットです。
事前準備
まずは 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) }
デプロイ
お疲れ様でした。これで動作するはずですので、実機にデプロイしてみましょう!
こんな感じで Permision の確認があった後に Marker 上に Cow.jpg が表示されていれば成功です!
この後は
次は動画や 3D オブジェクトを表示してみましょう。iOS/Android を交互にやっていこうと思うので、次は Android で 3D オブジェクトの表示にチャレンジです。
Kudan AR SDK エントリー一覧
Kudan AR SDK チュートリアル記事まとめ | エクセルソフト ブログ
をご覧ください。
以上です。