タロタローグ ブログ

2008年08月12日追記：現在、Papervision3Dのバージョンアップの都合で、最新版のPapervision3DとFLARToolKitの組み合わせでは動かない状態になっています。詳細及び回避方法についてはこちらを参照ください。

2008年08月20日追記：FLARToolKitが新しくなり、Papervision3Dを一部変更して使うようになりました。詳細をこちらに記載しましたので、ご参照下さい。

さて、俺としてはFLARToolKitである程度サンプルを弄れて、今後複数マーカー認識とかを使っていくにはちょっとソースを読み込んでいく必要が有りそうだなと言う段階だが、その前にまとめとして、FLARToolKitを使えば、簡単にMetasequoiaモデルを出すくらいは出来ますよと言う事をお伝えしたいと思う。つまり、解説記事でも書いていこうかなと言う事だ。

まずは、FLARToolKitをダウンロード、サンプルをビルドして表示する所まで行こう。殆どの部分はFLARToolKitと言うより、FlashDevelopとかTortoiseSVNの使い方になってる気がするがまあいいだろう。最初だし。


まず、Flashで拡張現実を楽しむために必要なものはこちら。

• J2SE6.0～　(Flex SDKを動かすのに必要)
• Flex SDK　(Flash CS3など、有料のものでも代替可能)
• TortoiseSVN　(今回最大の山場、ソースのゲットに必要)
• FlashDevelop　(非常に便利な開発環境)
• FLARToolKit　(もっとも必要な本体)
• Papervision3D　(3次元モデルの表示に使用)
• Webカメラ　(拡張現実には絶対必要)

ちょっと多いように見えるが、順を追っていけば簡単なので落ち着いて説明していく。
大まかに言うと、Flexを動かすために必要なものと、FLARToolKitを動かすために必要なものの2つに分かれている。まず、Flexを動かすための準備から。

J2SEのダウンロード

まず、Javaが必要。これが無いとFlexが動かない。
JDKのバージョン1.4.2以上が必要なので、取り敢えず最新のJDK 6をダウンロードしてみる。
JDK 6は「Java SE Downloads」から入手可能。
ダウンロードしたらインストールして、DOSプロンプトから実行して動作確認しておく。

Flex SDKのダウンロード

Adobe Open Sourceのサイトからダウンロードできる。何か3種類あるが、
「Adobe Flex SDK ＝ Open Source Flex SDK ＋ Adobe Add-ons」
らしい。
後ライセンスが違うのかな？その辺りは時とともに代わってるのでわかりにくい。

Download Flex 3 - Flex SDK - Confluence via kwout

ダウンロードして展開したら、全角文字とスペースが含まれない所に置く。例えば、「C:\flex_sdk」など。
で、「C:\flex_sdk\bin」にパスを通し、DOSプロンプトで
のように動作確認をする。

TortoiseSVN、FlashDevelop

Subversionリポジトリにアクセスし、ソースをダウンロードするのに必要なのが「TortoiseSVN」、フリーでありながら非常に高機能なActionScript3.0開発には欠かせないIDEが「FlashDevelop」。どちらもダウンロードし、インストールする。
TortoiseSVNは日本語化できるので、本体と一緒に言語パックも落としておくと便利。
FlashDevelopは、3.0.0.0betaとあるものの最新版をゲットする。

Subversionからのソースゲット

さて、FLARToolKitで拡張現実の世界を楽しむために必須なのが、Subversionからのソース取得。
Subversionについての細かい説明は省くし誤解を生むかもしれないが、取り敢えずSubversionってのは、いつも最新のソースが置いてある場所だとだけ覚えておけばよい。Subversionにおいてあるソースを書く立場で考えると、バージョン管理だとか共同作業だとかの機能も大事だろうとなるが、正直使うだけの立場からすると不要な機能だ。
と言うわけで、Subversionからソースを最初に持ってくる作業、要するにダウンロード作業の事を「チェックアウト」と言う。ちなみに、ソースファイルを置いてある場所の事は「リポジトリ」と言う。まぁ、呼び名だけだ。TortoiseSVNを使えば簡単に「チェックアウト」が出来るので、心配する必要はない。

ちなみに、Subversionで管理されているソースは大体開発真っ最中なので、気付くと新しくなっている。そんな時は、「更新」してやればよい。更新は、TortoiseSVNをインストールした後なら、右クリックからメニューを選べば出来る。

FLARToolKit

さて、いよいよ本番。FLARToolKitを入手する。先ほどインストールしたTortoiseSVNを使って、ソースをリポジトリからチェックアウトする。手順は以下の通り。

1. エクスプローラーの適当な場所で右クリックすると、いつものメニューに混じって「SVNチェックアウト」なるメニューがあるので、これを選択する。
   
2. チェックアウトのためのダイアログボックスが出てくる。ソースのあるURLと、ローカルの保存場所を聞かれていることがわかる。
   
3. さて、ここでFLARToolKitのソースが置かれている場所を知る必要があるとわかるのでFLARToolKitのサイトを訪れ、探す。
4. ソースを見るURLはあるが、欲しいソースをチェックアウトするURLが中々見つからない。頑張って探しても良いが、ほぼ見つけられないだろう。
5. と言う事で、「http://www.libspark.org/svn/as3/FLARToolKit/trunk/」をダイアログ最上部「リポジトリのURL」に入力する。
6. ローカルの保存場所を決める。例えば、「C:\SVN\FLARToolKit」としてみよう。
   
7. 全部入力するとこんな感じになる。
   
8. OKボタンを押すと、ソースがだだーっとダウンロードされてくるログが見られるダイアログが表示される。
9. ログダイアログのOKボタンを押せるようになったら終了。さっき指定したフォルダを見ると、左下に緑のチェックマークがあることがわかる。
   

以上でFLARToolKitは入手完了し、拡張現実の世界を手に入れた事になる。

Papervision3D

さて、次はFlash上で3Dモデルを表示したり操作したりする、「Papervision3D」とを手に入れる。これもFLARToolKit同様Suversionからのソース取得。Papervision3Dのサイトからソースが置いてあるURL「http://papervision3d.googlecode.com/svn/trunk/」を見つけ出し、「C:\SVN\papervision3d」にチェックアウトしよう。これで、必要なものは全て揃った！

ちなみに、Papervision3Dはアルファ版のGreateWhiteというのを使うので、その部分だけをチェックアウトしてもよい。

FlashDevelopで、FLARToolKitのサンプルをビルドしてみる

準備が全て整ったので、早速FLARToolKitのサンプルを触ってみる。まずはサンプルそのままビルド＆動作を確認して、次に繋げていく事にする。
とりあえずFlashDevelopの設定から。
ActionScriptによるWebの3Dグラフィックス再入門：CodeZine
辺りを参考にして、FlashDevelopで開発が出来るように設定する。見るのは1ページ目だけでよい。2ページ目以降はよりレベルの高い内容なので、後で見ればいいのです。

そしていよいよ、FlashDevelopで開発を行う単位である「プロジェクト」を作る。こんな感じ。

1. FlashDevelopを起動し、「Project」-「New Project」で、新規プロジェクト作成ダイアログを出してやる。
2. Installed Templatesの一覧から、「ActionScript 3」-「Default Project」を選択する。
3. 「Name:」欄に作りたいプロジェクトの名前を入れる。
4. 「Location:」欄にプロジェクトのフォルダを起きたい場所のパスを入れる。
5. 「Create directory for project」にチェックを入れる。
6. 全て入力するとこんな感じ。OKボタンを押そう。
   

これが終わると、右側の「Project」タブに、作成されたプロジェクトのフォルダ構成が出てくる。次にやるべき事は「クラスパスの設定」だ。
クラスパスは、以下の3つに対して設定する。

• FLARToolKitの、「src」フォルダ
• FLARToolKitの、「sample」フォルダ
• Papervision3Dの2.0アルファ版「GreateWhite」

と言う事でFlashDevelop上で作業していこう。

1. 「Project」-「Properties」をクリックし、プロジェクト設定を開く。
2. 「Classpaths」タブを開き、「Add Classpath...」ボタンをクリックする。
3. フォルダの参照ダイアログが出てくるので、「C:\SVN\FLARToolKit\src」を指定して「OK」ボタンを押す。続いて、「C:\SVN\FLARToolKit\sample」「C:\SVN\papervision3d\branches\GreatWhite\src」も同様の方法で指定。
   

これでクラスパスを設定し終わった。右側の「Project」タブに、FLARToolKitとpapervision3dの、ブロックみたいなアイコンのツリーが出てくる。

次はビルド対象の指定。今回はサンプルをビルドしてswfファイルを作る。FLARToolKit\sampleのツリーをクリックし、展開すると、.asファイル3つとswfファイル1つが出てくる。そのうちの、「FLARToolKitTest2.as」を右クリックし、メニューの「Always Compile」を選択する。
すると、ファイルのアイコンの左下の赤い丸が緑の矢印に変わる。これで、このファイルがビルド時のメインターゲットになったわけだ。
準備完了！いつでも来い！

と言うわけで、ビルドボタンを押す。歯車みたいなボタンか、再生ボタンのどっちかだが、再生ボタンだとビルド完了後、そのままswfファイルが表示されるので便利だ。再生ボタンを押そう。


なーんて、簡単に出るかっつーの！

と言う事で、上手くいったとしても真っ黒な画面が出たくらいではないだろうか？本来出て欲しい、カメラ画像が出てこない・・・。何故か？

必要なデータを準備。

さて、実際問題として、真っ黒画面が出た場合ビルドは成功している。FlashDevelop下部のoutput画面に、こんな風に出ているはずだ。

実は、マーカーの設定ファイルとカメラのパラメータを読み込もうとして失敗し、結果的に途中で止まっているのだ。なので、適切な位置にそれらのパラメータを置いてやればよい。

だが、そもそもswfファイルは何処にあるのか？それは、binフォルダの下だ。binのツリーを開くと、「flarsample.swf」と言うのが出来てるはずだ。
で、読み込むファイルだが、サンプルを見てみると、
と書いてある。これを下のほうで、
こんな風に使っている。まだ深く知る必要は無いが、この2つのファイルを、swfファイルからの相対パスで読み取れるようにしてやる。
こんな感じ。

1. FLARToolKit\sample以下にある「Data」フォルダをコピーする。
2. 「Data」フォルダをbinの下にペーストする。

以上。これでもう一度再生ボタンを押す。これで、FlashDevelop上にカメラの映像が出てくるはずだ。やったぞ！！

あ、マーカーが無い！

となったと思うので、FLARToolKitを作成されたさくーしゃさんのブログ、「Saqoosha.net :: ARToolKit を Flash に移植したよ。」からマーカーのデータを入手し、印刷しておこう。



さて、次回は、サンプルを改造してピンクの四角、通称ポリチクビ以外のものを表示する所までいきたいと思う。