Tech Sketch Bucket of Technical Chips by TIS Inc.

マーカーをタップすると3Dアバターがしゃべって動くARアプリ 1

Pocket

スマートフォンやタブレットなど、カメラ・GPS・タッチスクリーンを装備したプログラマブルなデバイスの普及に伴い、様々な AR(Augmented Reality = 拡張現実) を用いたサービスが展開されています。
近頃は 頓知ドット のセカイカメラに代表される 位置情報を元にしたAR だけでなく、 Koozyt のGnG(GET and Go)が提供するような マーカーにカメラをかざすことによるAR(マーカー型AR) も注目を集めビジネス化が図られています。

特にAndroidは、 NyARToolkit for AndroidAndAR といった、OSSのマーカー型ARライブラリが公開されているため、マーカー型ARを試してみるにはもってこいの環境です。

そこで今回は、AndARを改造して「マーカーをタップすると3Dアバターがしゃべって動くARアプリ」を作りたいと思います。


※音声が再生されます。注意してください。


Androidデバイスの準備

なにはともあれ、Androidデバイスが必要です。Androidエミュレータはカメラが利用できないため、AndARのようなARアプリを試してみることができません。

本記事は、タブレット用のAndroidOSである「Android 3.2 Honeycomb」を搭載したASUSの Eee Pad Transformer TF101 で検証しました。

開発環境の準備

AndARは通常のJavaだけでなく、カメラプレビュー画像からマーカーを認識する部分など速度が必要な箇所はC言語でネイティブ実装されています。今回の「マーカーをタップする」というイベントをハンドリングするためには、このC言語部分にも手を入れる必要があります。そのためAndroid SDKだけでなく、Android NDKも準備してください。
(Android SDKとAndroid NDKの環境構築手順は、様々な書籍やWebサイトで解説されていますので割愛します)

本記事は、下記の開発環境で検証しました。

OS Mac OS X 10.7.4 Lion
JVM Oracle Java SE 1.6.0_33
Android SDK Android 2.3.3 APILevel 10
Android NDK Android NDK r8b
IDE Eclipse 3.7.2 Indigo SR2 + ADT 20.0.2

AndARの準備

AndARのソースコードは、GoogleCodeによって管理されています。この記事を執筆した時点での最新版は、r205です。

上記のように、svnコマンドを用いて最新版をチェックアウトしてください。

AndARで読み込むことができる3Dオブジェクトの作成

Androidで3Dオブジェクトを扱う場合、 3Dプログラミング基礎知識 シリーズでもご紹介したように、OpenGL ESを用いることになります。
OpenGL ESには表示したい3Dオブジェクトの「頂点データ」「法線データ」「テクスチャ座標の場所」を指定してあげる必要がありますが、単純な立方体程度ならまだしも、複雑な3Dオブジェクトの頂点や法線を一つ一つプログラム的に指定するのは現実的ではありません。

そこでAndARModelViewerには、Wavefront形式と呼ばれるフォーマットのファイルを読み込み、OpenGL ES用に3Dオブジェクトを構成するモデルローダーが内蔵されています。
今回の記事でも、AndARModelViewerのWavefrontローダーを流用します。

Wavefront形式とは
Wavefront社が Advanced Visualizer という3Dモデリングツール用に開発した3D ファイル形式。
実体は、頂点座標値データ、頂点法線ベクトルデータ、テクスチャ座標値データなどを特定のフォーマットで記述したテキストファイル。多くの3Dモデリングツールがサポートしているため、3Dオブジェクトのファイルフォーマットとして広く使用されている。

3Dモデリングツールの準備

3Dモデリングツールには、 ShadeLightWave3D3ds max のような商用ツールから、 BlenderMetasequoiaLE といったフリーのものまで、様々なツールがあります。Wavefront形式で3Dオブジェクトを出力できるならばどのようなツールでもかまわないのですが、今回はフリーの Blender を用いることにします。

3Dモデリング

3Dモデリングの方法については、この記事の範囲を越えますので割愛します。Blenderは人気があるツールなので、様々な書籍が出版されています。それらを参考にしてください。

ちなみに今回の検証では、 BLEND SWAP にてCC0ライセンスで公開されている CARTOON CHARACTER PACK 1 を利用しました。VMComixさんありがとう!

Wavefront形式で出力

Blenderで3Dオブジェクトを作成したら、Wavefront形式で出力します。メニューの「File > Export > Wavefront(.obj)」を選択してください。
ただしOpenGL ESには「三角形のポリゴンしか扱えない」「テクスチャは2の累乗のものしか扱えない」などいくつかの制限がありますので、全てのWavefront形式の3Dオブジェクトが読み込めるわけではありません。Blenderの場合、出力時に下記オプションを変更する必要があります。

  • Include Edges のチェックを外す
  • Include Normals にチェックをつける
  • Triangulate Faces にチェックをつける

blender.png

上記のオプションを付け出力すると、xxx.objとxxx.mtlという二つのファイルが生成されます。この二つのファイルで(もしテクスチャを利用するならば、objとmtlにテクスチャ画像ファイルも加えたファイル群で)3Dオブジェクトが構成されることになります。

音声データの準備

最後に、アバターにしゃべらせる音声データを準備します。
複数のマーカー上に居るアバターに同時にしゃべらせたいので、今回はMediaPlayerではなくSoundPoolによって音声を再生します。そのためSoundPoolで利用できるwav形式やogg形式の音声データを準備してください。
なおSoundPoolは仕様上、初期化時に音声データを全てメモリ上にロードします。そのためあまり長い音声を使うことは避けてください。

次回は

様々な準備だけで、今回は終わってしまいました。次回は「マーカーをタップする」というイベントをハンドリングするためにAndARに施した改造について、解説します。

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