FLARToolKitを使ったAR系Flashの作り方

第4回 FLARToolKitを使ったコンテンツいろいろ

この記事を読むのに必要な時間:およそ 2.5 分

第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) は,このテクニックを簡単に説明するために作った,マーカーが浮遊するというサンプルです。

図2 マーカーが浮遊するというサンプル


Floating Marker from Saqoosha on Vimeo.

これは,毎フレーム,マーカーのスクリーン上の座標からテクスチャの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座標を計算しています。

図3 ポリゴンの各頂点のスクリーン座標とUV値の関係

図3 ポリゴンの各頂点のスクリーン座標とUV値の関係

gihyo4.asのサンプルではテクスチャの歪みを軽減するためにPlaneの分割数を多めにしていますが,座標計算の概念としてはこの図と同じです。

計算しおわったら5でテクスチャを更新します。BitmapMaterialは内部で計算をキャッシュしているのでこれを呼ばないとテクスチャがアップデートされません。

これを対象となるオブジェクトをへこんだ曲面にすればワームホールになるわけです。このあたりをさくっと理解してつくれてしまうのは,さすがPapervision3Dの中の人という感じがしますね。

著者プロフィール

さくーしゃ

大阪のKatamari Inc.っていうWeb屋でFlashやってます。Saqoosha.netでブログ書いてます。新しもの好きで飽きっぽいGeek。

コメント

  • キーイベントでメタセコファイルを移動

    初めまして
    最近、FLARにはまり、このサイトを教本として勉強中です。

    現在、Focusの車が動くARのサンプルを参考にメタセコデーターを動かしてみたく思い、トライしています。他のサイトのサンプル等を見て思考錯誤していますが、表示はできてもうまく動きません・・

    よきアドバイスが頂けたらと思いコメントしてみました。
    追加・変更点は以下としています。

    Gihyo2_2.as 
    import org.libspark.pv3d.Metasequoia; 追加
    private var car:Metasequoia; 追加

    protected override function onInit():void {
    super.onInit(); 以下に下記を追加

    car = new Metasequoia();
    car.load("ms06-s.mqo", 0.8);

    後ろの方で
    var car :DisplayObject3D = this.rootNode.getChildByName("ms06-s", true);

    Focuse → ms06-s としています。

    お忙しい中、恐縮ですがお助け頂けたら幸いです。

    Commented : #1  みんみん (2010/10/07, 12:46)

コメントの記入