アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 特集 » FLARToolKitを使ったAR系Flashの作り方 » 第4回 FLARToolKitを使ったコンテンツいろいろ

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

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

第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。

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

サイエンスに片思い

本連載では,サイエンスという学問を軸に,そこから広がる可能性やつながり,そしてWebの世界との関係について,前田邦宏氏がさまざまな取材を元に考察し,これからの可能性について展望します。

使ってみよう! Windows Live SDK/API

Windows Liveサービスの一部にはAPIやSDKとして提供されているものがあります。本連載では各API・SDKの紹介とそれらを利用したアプリケーションを開発していきます。

Lifelog~毎日保存したログから見えてくる個性

コンピュータを使って,日常のさまざまなことの記録(ログ)をとり,それを分析して活用することで,もう一段階上の「楽な生活」をめざす日々の研究報告です。

もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

本連載では,実践サンプルとともに,jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス