FLARToolKitを使ったAR系Flashの作り方
第4回 FLARToolKitを使ったコンテンツいろいろ
2009年4月8日
Flash, ActionScript, AR, FLARToolKit, Papervision3D
マーカー, マルチマーカー, サンプル, テクスチャ, Plane, オブジェクト
第3回まででFLARToolKitの基本的なところはおさえたと思います。そこで最終回の今回は,実際にどのような使われ方をしているのか,ソースコードを公開してくれているものをベースにちょっと紹介&探検してみましょう。
前回までを読んでもらっている方なら感覚的にわかってもらえてると思うのですが,FLARの技術的な部分はそんなに奥が深いものでもなく,やっぱりアイデア勝負なところが大きいです。これから紹介するサイト・サンプルなどを参考に,どのようなことができるか考えてみてください。
今回使うデータは,以下になります。
FLAR ワームホール
1つ目は,Papervision3D開発メンバーの1人,Seb Lee-Delisle氏のワームホール。これはいままでサンプルで作ったようなオブジェクトが表示される系とは趣が異なり,ワームホールという名のとおりマーカーのある部分の空間がゆがみます。
筆者が制作した「HAPPY NEW YEAR '09」の穴の表現で使用した,カメラ入力の画像をオブジェクトのテクスチャにそのまま使うというテクニックをさらに発展させたものになっています。
図1 Papervision3D augmented reality wormhole
Papervision3D augmented reality wormhole from Plug-in Media on Vimeo.
以下のgihyo4.as (gihyo4.fla) は,このテクニックを簡単に説明するために作った,マーカーが浮遊するというサンプルです。
これは,毎フレーム,マーカーのスクリーン上の座標からテクスチャのUV座標を計算して,Planeの各頂点に設定しなおすことであたかもマーカーが浮遊してるかのように見える,という仕組みです。
浮遊するPlaneのテクスチャのUV座標値は,マーカーと同じ位置に配置したダミーのPlane(画面上には表示されない)から次のように計算します。
リスト1 gihyo4.as(134~146行目)
var n:int = this._plane.geometry.faces.length;
for (var i:int = 0; i < n; i++) { // 1
var t:Triangle3D = this._plane.geometry.faces[i]; // 2
var d:Triangle3D = this._dummy.geometry.faces[i]; // 3
t.uv0.u = (d.v0.vertex3DInstance.x + 160 - 3) / 320; // 4
t.uv0.v = (-d.v0.vertex3DInstance.y + 120) / 240;
t.uv1.u = (d.v1.vertex3DInstance.x + 160 - 3) / 320;
t.uv1.v = (-d.v1.vertex3DInstance.y + 120) / 240;
t.uv2.u = (d.v2.vertex3DInstance.x + 160 - 3) / 320;
t.uv2.v = (-d.v2.vertex3DInstance.y + 120) / 240;
}
BitmapMaterial(this._plane.material).resetMapping(); // 5
1のループで,_plane(Planeクラスのインスタンス)に含まれるすべてのポリゴン (Triangle3Dインスタンス)を処理します。
2と3では,そのそれぞれから対応するポリゴンを一時変数に取り出しています(そのため,_planeと_dummyは全く同じポリゴン数で作られています)。
4からの6行が,実際にポリゴンを構成する各頂点のUV座標を計算しているところになります。Triangle3Dにはv0,v1,v2の3頂点分のデータ(Vertex3Dクラス)があり,そのそれぞれのvertex3DInstanceプロパティにスクリーン座標が格納されています。そのスクリーン座標から実際のUV座標を計算しています。
gihyo4.asのサンプルではテクスチャの歪みを軽減するためにPlaneの分割数を多めにしていますが,座標計算の概念としてはこの図と同じです。
計算しおわったら5でテクスチャを更新します。BitmapMaterialは内部で計算をキャッシュしているのでこれを呼ばないとテクスチャがアップデートされません。
これを対象となるオブジェクトをへこんだ曲面にすればワームホールになるわけです。このあたりをさくっと理解してつくれてしまうのは,さすがPapervision3Dの中の人という感じがしますね。
FLARToolKitを使ったAR系Flashの作り方
- 第4回 FLARToolKitを使ったコンテンツいろいろ
- 第3回 マーカーの位置や回転,向きなどを取り出す
- 第2回 3Dソフトで作ったオブジェクトを使ってみる
- 第1回 FLARToolKitことはじめ


