CubicVRをPapervision3D 2.0で作るPart.01(Cylinder編)

グーグルマップストリートビューの記事が連日続き、本サイトはVRブログになっていましたが、本日は本業のPV3Dの話題。ストリートビューの360° パノラマ画像をFlashで実装してみようという試みです。というわけで早速デモの紹介です。

• Demo(require Flash Player 9)
• Source(usage of Papervision3D Public Alpha 2.0 revision 689)
• 写真はこちらから使用→Kouter in Baaigem on Flickr

そもそも360° パノラマの仕組みは？

まずはどうやってグルグル一面をまわせる画像を作れるのか調べてみましたら、一般的には次の二つの方法があるみたいです。

1. 世界地図のとメルカトル図法のようなもので、Equirectangular Imageという画像を使う方法
2. 視野を形成する６面キューブのCubic Imageという画像を使う手法

ポイントは2番目のCubic Imageで、QuickTime VRで使われています。Flashではどちらで実装したほうがよろしいのでしょうか？

Papervision3Dのexsamplesに入ってた

ともあれ調べていると、実はSVNで落とせるPV3Dのexsamplesフォルダに入ってました。次のリンクからswfを再生できますので、一度見てみてください。実はシンプルな仕組みです。

Revision 689: /trunk/as3/trunk/examples/Panorama

なんと6面のPlaneを設置して、中央でカメラ視点をグルグル回しているだけなんですね。これは仕組みでいうとCubic Imageを使ったCubic VRという手法です。平面しか使っていないのに、円形に見えるなんて驚きです。

さっそくチャレンジ！しかし・・・

ちょこっとソースを弄れば自分でも実装できると思ったのですが、肝心なCubic画像(パノラマ処理された6枚の画像)がありません。Cubic Imageが都合よく落ちているわけではなく、結局3時間ほど探して見つからなかったので、試すのは次回以降にしてみます。

妥協策でシリンダーを使ってみる

天井と地面がない状態であれば、プリミティブのシリンダーを使えばできるみたいなので試してみました。これが上記のデモです。気をつけたところは次のようなところ。

• マテリアルは両面に設定する つまりdoubleSided = true。
• マテリアルにsmoothをかけるとディザが軽減する。しかし処理速度とのトレード。
• マテリアルにはpreciseは使わえない(逆に歪む)
• セグメント(分割数)は少ないと不自然。ただし切り過ぎると処理激重。
• カメラタイプはCameraType.FREE(視点が定まってない種類)を使う

画像検索はライセンスに注意して

FlickrでCCライセンスで検索しました。検索結果はこちらから。

パノラマを利用した面白い例

Flickrに投稿されているパノラマ写真を360度にして閲覧できる「WRAPR」

FlickrのAPIを利用してパノラマ写真をVRにして視聴するツールです。こういった利用方法は面白いですね。

CubicVRの関連記事

• CubicVRをPapervision3D 2.0で作るPart.03(Sphere編)
• CubicVRをPapervision3D 2.0で作るPart.02(Cube編)
• CubicVRをPapervision3D 2.0で作るPart.01(Cylinder編)
• Googleストリートビューの実現方法を調べてみる
• ストリートビューのVR技術で作られた5つの感動的パノラマサイト
• グーグルストリートビューの仕組みがわかるビデオ
• 東京地下世界のストリートビュー gooが副都心線でやっていた