CubicVRをPapervision3D 2.0で作るPart.03(Sphere編)

Googleストリートビュー的なパノラマVRをPapervision3Dで実現する企画第三弾、いよいよ今回で最終回です。前回は立方体にパノラマ画像を貼り付けましたが、今回は球面にパノラマ画像を貼り付けてみたいと思います。まずはデモの紹介から。

• demo (require Flash Player 9)
• source (require Papervision3D 2.0 beta)
• resource by In the back of the Peninsula Tokyo on Flickr

今回試した方法は一般的にはSpherical PanoramaといってCubic Panoramaとは違う方法となるので、記事のタイトルは間違っているわけですが、そこはシリーズものということでご容赦を。

球面パノラマ(Spherical Panorama)の仕組み

球面に画像を貼り付け、球面の中心にカメラを配置することでバーチャルリアリティーな視覚効果が得られます。

球面に貼り付けるEquirectangular（Spherical）画像

球面に貼り付ける画像はEquirectangular（Spherical）イメージを用います。これは「正距円筒図法」とも言って、地球のメルカトル図法のような画像です。詳しくはこちらで説明されてますので、ご参照ください。

Spherical Panoramaのメリット

一枚の画像でVR表現ができるので素材準備やWeb公開の手間が少ないところがメリットです。360度パノラマの画像はFlcikrを探せばゴロゴロ公開されていたりするので、試してみたい人におススメの手法ですね。

Spherical Panoramaのデメリット

球面に画像を貼り付けるため、どうしても直線画像が歪んで表示されます(右側画像参照・クリックで拡大)。Cubic Panoramaの場合は立法体の表面に画像を貼り付けるため、建物など直線的なVRをするときはCubic VRを採用するほうがいいかもしれません。

GoogleストリートビューはSpherical Panorama

今月頭に日本版が公開されたグーグルのストリートビューは球面パノラマを採用されています。せっかくなのでGoogleのリソースを使ってパノラマを試してみようと思います。Firefoxの拡張機能であるFirebugを使えば読み込んでいる画像の一覧がでるので、そこからEquirectangularイメージをDLします。

グーグルストリートビューの画像を勝手に使ったパノラマサンプル

• demo (require Flash Player 9)
• 場所はここ

ちょっと画像は汚くておかしな部分はありますが、一応VRっぽくできました。ちなみに本物は高解像度版の画像をトリッキーに使っているので、もっと表示が早くてきれいです。。 そもそもパノラマ表現はデータ転送量も多いので、ストレスなく表示させるかでFlasherのスクリプト技術が活きてきそうです。

＃追記 1
コメントで表裏逆転していることをご指摘いただきましたのでもとの画像を水平反転し修正しました。球面パノラマだと内側を使うためマテリアルが表裏逆転するわけです。今回のデモではPV3DでBitmapFileMaterialを使って読み込んでいますが、画像は別途Loaderで読み込み、水平反転してBitmapDataをBitmapMaterialに貼り付けるほうが汎用性があるかもしれません。

パノラマの関連記事

• CubicVRをPapervision3D 2.0で作るPart.03(Sphere編)
• CubicVRをPapervision3D 2.0で作るPart.02(Cube編)
• CubicVRをPapervision3D 2.0で作るPart.01(Cylinder編)
• Googleストリートビューの実現方法を調べてみる