Tech Sketch Bucket of Technical Chips by TIS Inc.

3Dスキャンした物体をmetaio SDKでiPad上にAR表示しよう

Pocket

先日の記事 では、 Artec Studio 9 + Kinect を用いて実在の物体(自転車用空気入れ)を3Dスキャンし、三次元メッシュモデルを生成しました。今回は metaio SDK を用い、この「自転車用空気入れの三次元メッシュモデル」をiPad上にAR表示してみます。


metaio SDK

metaio SDK は、AR界隈で豊富な実績を持つドイツの metaio社 が販売しているARエンジンです。商用事例も多いARブラウザ junaio のエンジンもこれです。
このSDKを用いると、 ARToolkit のようなシンプルなマーカ型ARだけでなく、画像の特徴点を利用した2DマーカレスAR、 SLAM を用いた3DマーカレスAR、GPSを基にしたロケーション型ARなど、幅広いARアプリケーションを作成することができます。詳細は metaio Developer Portalのドキュメント を参照してください。

metaio SDKのライセンス

metaio SDKは iOS ・ Android ・ Windows ・ Unity に対応しており、一つライセンスを購入するだけで各プラットフォーム上にいくつでもアプリケーションを作成し商用利用することができます。
また

  • 起動時に "metaio SDK" のロゴをスプラッシュ表示しなければならない
  • AR表示中に "powered by metaio"という透かし(Watermark)を表示しなければならない

という制限さえ受け入れれば、無償でフル機能を商用利用することもできます。

metaio SDKの具体的な使用許諾は、 License for metaio SDK を確認してください。

今回はこの無償版を利用して、 Artec Studio 9 + Kinectで作った 「自転車用空気入れの三次元メッシュモデル」を、シンプルな「マーカー型AR」としてiPad上に表示するアプリケーションを作成します。

iOSでARアプリを作成しよう

では、metaio SDKを用いたAR表示アプリを順を追って作成しましょう。一定のお作法を理解して正しく環境を設定すれば、書くべきコードそのものは驚くほど少ないのがわかると思います(なぜかTutorialでは、この複雑なお作法の解説が無いのですが・・・)。

なお今回は、以下の環境で検証を行いました。

OS Mac OS X Lion v10.7.4
Xcode 4.5.2
metaio SDK 4.1.2

完全なソースコードは ココ にあります。興味を持った方はcloneしてください。

三次元メッシュモデルをmetaio SDKで解釈できるフォーマットで出力する

4.1系以降のmetaio SDKは、以下のフォーマットの三次元メッシュモデルをサポートしています。3Dスキャニングツールより、対応しているフォーマットで三次元メッシュモデルを出力してください。

  • Wavefront形式 (.obj)
  • Quake 2形式 (.md2)
  • Autodesk FBX形式 (.fbx)
  • COLLAD形式 (.dae)

Artec Studio 9の場合、"File"メニューから "Export Scans..." を選択し、obj形式で出力すれば良いでしょう。

artec_25.png

出力されたファイルのうち、metaio SDKで必要なのは *.obj, *.mtl, *.jpg の三種類です。

Xcodeプロジェクトを作成し、依存ライブラリを設定する

Xcodeでstoryboardを利用するARCプロジェクトを作成します。metaio SDKがiOS5以上を要求するため、 "Deployment Target" は5.0以上を指定してください。また後ほど「metaio SDKアプリ固有のSignatureを登録する」ために使いますので、TARGETS の Summary から "Build Identifier" (今回は jp.co.tis.stc.metaio-3dscanner )を確認してください。

metaioSDK_01.png metaioSDK_02.png
次にmetaio SDKを含む依存ライブラリを設定します。"TARGETS" "Summary" の "Linked Frameworks and Libraries" から、次のframeworkやライブラリを追加してください。

metaioSDK_03.png

metaioSDK.framework MediaPlayer.framework
AVFoundation.framework CoreLocation.framework
CoreMedia.framework CoreVideo.framework
QuartzCore.framework AudioToolbox.framework
OpenGLES.framework CoreMotion.framework
libxml2.dylib libz.dylib

Xcode4.1以前のように、"TARGETS" "Build Phases" の "Link Binary With Libraries" から設定しても良いでしょう。

metaio SDKのExampleよりクラスをコピーする

metaio SDKはAR映像のリアルタイム表示のために、OpenGL ESを用います。その初期化やフレームバッファの処理などを自分で実装するのはとても大変なので、metaio SDKのExampleから EAGLViewクラスをコピーして流用します。
また同様に、metaio SDKを利用するための共通処理と、metaio SDKからのcallbackのデフォルト実装を与えるために、MetaioSDKViewControllerクラスもコピーして流用します。

metaio SDKのExampleから次の4ファイルをコピーし、"Add Files to <プロジェクト名>..."からXcodeへ登録してください。

ただしこの二つのクラスはARCを利用しない実装になっているため、"TARGETS" "Build Phases" の "Compile Sources" より、 ARCを利用しないコンパイルフラグ( -fno-objc-arc ) を設定してください。

metaioSDK_04.png metaioSDK_05.png

metaio SDKアプリ固有のSignatureを登録する

ブラウザから Licensing Portal にアクセスし、下記項目を入力してSignatureを発行します。

metaioSDK_06.png

Application Name 任意の名前
Application ID 確認した"Build Identifier"
SDK version 4.0
ライセンス metaio SDK Free

ここで発行されたSignatureを、コピーした MetaioSDKViewControlle.m の冒頭で SDK_LICENSE としてdefineしてください。

metaio SDKが用いるリソースファイルを登録する

次に、metaio SDKが用いるリソースファイルを追加します。今回はシンプルな「マーカー型AR」を実装しますので、必要なファイルは以下の二種です。

Wavefront形式の三次元メッシュモデルファイル 0_Remesh.obj, 0_Remesh.mtl, 0_Remesh_0.jpg
IDMarker用のトラッキング定義ファイル TrackingData_Marker.xml

これらのリソースファイルを格納するフォルダを作成し、上記のファイルをコピーします。(TrackingData_Marker.xmlは、metaio SDKの "Example" "Tutorial3" "Assets3" 内にあります。)

metaioSDK_07.png

Xcodeプロジェクトに "フォルダ参照のbundleリソース" としてそのフォルダを登録します。
"TARGETS" "Build Phases" "Copy Bundle Resources" から、先ほど作成したフォルダを選択し、"Create folder reference for any added folders" を選択して登録してください。

metaioSDK_08.png metaioSDK_09.png
metaioSDK_10.png

このように「フォルダ参照」として登録することで、このフォルダにリソースファイルを追加・変更・削除するだけでXcodeにリソースファイルを認識させ、フォルダ階層を維持したままでリソースファイルをアプリケーションにバンドルすることができるようになります。

UIの構築

やっと環境の準備が整いました。ではstoryboardを使ってUIを構築し、環境が正しく設定できていることを確認しましょう。

  1. Auto Layoutの解除
    1. "Use Autolayout"にチェックが付いていた場合、 無効化する(チェックを外す)
  2. 初期画面の構築
    1. 初期画面の中心にRound Rect Button を追加(以降 BicyclePumpBtn と呼びます)。
    2. BicyclePumpBtn のTitleを "bicycle pump" に変更。
  3. AR表示用画面の構築
    1. 初期画面の隣に新しい ViewController を追加(以降 MetaioViewController と呼びます)。
    2. MetaioViewControllerUIView を追加(以降 EAGLView と呼びます)。
    3. EAGLViewMetaioViewController の全画面を覆うように位置とサイズを調整。
    4. EAGLView の右上隅に Round Rect Button を追加(以降 CloseBtn と呼びます)。
  4. 初期画面とAR表示用画面をSegueで接続する
    1. BicyclePumpBtn から右クリック(もしくはCTRL+左クリック)しながら MetaioViewController までドラッグ。
    2. 表示される "Action Segue" で "modal" を選択。

ここまでで、下図のようになります。一度実機(もしくはシミュレータ)で動作させ、画面遷移ができることを確認してください。(CloseBtn はまだ動きませんけどね)。

metaioSDK_11.png

もし次のようなエラーが出てビルドに失敗した場合、C++用ライブラリを変更する必要があります。"TARGETS" "Build Settings" "Apple LLVM compiler 4.1 - Language" から "C++ Standard Library" を選択し、
  "libc++ (LLVM C++ standard library with C++ 11 support)" から "libstdc++ (GNU C++ standard library)"
に変更してください。

metaioSDK_cpp_01.png metaioSDK_cpp_02.png

UIとクラスの対応付け

画面が動作することが確認できたら、次はUIとObjective-Cクラスを対応付けます。Xcodeによって初期画面用のクラス(ViewControllerクラス)は自動生成され対応付けられていますが、 MetaioViewController 用のクラスは自分で作らなければなりません。右クリックメニューから "New File..." を選択し、 MetaioSDKViewControllerクラス のサブクラスとしてMetaioViewControllerクラスを生成してください(storyboardを利用してUIを構築しているため、XIBは不要です)。

MetaioViewController.h と MetaioViewController.m が生成されたら、MetaioViewController.m のファイル名を MetaioViewController.mm に変更し、Objective-C++対応にします。

Xcodeでは拡張子を .mm にすることで、Objective-CコードからC++を呼び出すことができるようになります。
Xcodeは謎インタフェースが多いですね。。。

その後storyboardから MetaioViewController とMetaioViewControllerクラスを対応付けしてください。

metaioSDK_12.png metaioSDK_13.png

次に、EAGLView に metaio SDKのExampleからコピーしてきた EAGLViewクラス を対応付けます。EAGLView の "Custom Class"を EAGLViewクラス に変更し、"Referencing Outlets" として MetaioViewController の "glView" を追加します。

metaioSDK_16.png metaioSDK_17.png
metaioSDK_18.png metaioSDK_19.png

最後に、CloseBtn を押した際のコールバックメソッドを対応付けます。
storyboardと MetaioViewController.h を同時に表示し、CloseBtn を右クリック(もしくはCTRL+左クリック)します。
表示されたコンテキストメニューの "Sent Events" の "Touch Up Inside" を "MetaioViewController.h" にドラッグし、onClickCloseBtnメソッドを生成します。

metaioSDK_14.png metaioSDK_15.png

コードを実装

ここからMetaioViewControllerクラスの中身を実装します。書くべきコード量自体はかなり少ないのがわかるでしょう。

CloseBtnの実装

MetaioController.mm に生成されている "onClickCloseBtn" メソッド の中身を実装します。
"modal" として遷移した MetaioViewController をdismissして消去するだけです。

ここで実機で動作させてみましょう。チェックポイントは以下4点です。動作しなかった場合、UIとクラスの対応付けやSignatureの設定を見なおしてください。

  • BicyclePumpBtn を押すと MetaioViewController へ遷移しましたか?
  • その際、 "metaio SDK" のロゴはスプラッシュ表示されましたか?
  • スプラッシュが消えた後、カメラ映像はリアルタイムに表示されていますか?
  • CloseBtn を押すと、初期画面に戻りましたか?

metaio SDKを用いたマーカ型ARの実装

最後に、metaio SDKを用いたマーカ型ARの機能を実装します。ただ単にマーカー上にARオブジェクトを表示するだけであれば、MetaioViewControllerの初期化時に m_metaioSDK (iOSからmetaio SDKを利用するためのInterfaceとなるクラス) にトラッキング定義ファイルを設定し、三次元メッシュモデルからARオブジェクトを生成させるだけで動作します。

できたっ

これで「metaio SDKを用いたマーカ型ARアプリ」は完成です。
metaio SDK の "printouts" フォルダに格納されている "IDMarker.pdf" の一枚目(小さく「ID 1, 60mm」と書かれているマーカー)を印刷し、作成したアプリで撮影してください。以下のように、マーカー上に 実寸 で「自転車用空気入れ」が表示されているはずです。

ar_pump.png

上手くAR表示されましたか?

最後に

先日の記事 は「実在の物体を3Dスキャンして "三次元メッシュモデル" という電子データ化する方法」を、今回は「"三次元メッシュモデル" という電子データを実在の空間に重ね合わせて表示する方法」を解説しました。

このような技術を上手く活用すれば、これまでになかったユーザ体験を演出できると思います。何か良いアイデアが思い浮かんだ方は、ぜひ活用してみてください。

エンジニア採用中!私たちと一緒に働いてみませんか?