Flash Player 11のStage3Dでパノラマ表現(Alternativa3D版)

3D表現で定番のパノラマVRをFlash Player 11のStage3Dを使って作ってみました。マウスでドラッグ＆ドロップすると、360度の視界を見渡すことができます。

Spherical VR Version

• demo (require Flash Player 11)
• src

Cubic VR Version

• demo (require Flash Player 11)
• src

これらのデモはStage3Dを利用しているため描画はGPUで処理されており、Flash Player 9/10の時代に作っていたCPU版と比べると負荷が低く動きがなめらかになっています。なお制作する際に利用したフレームワークはAlternativa3Dと自作のAlternativaTemplateです。

※写真は二宮さんから提供を受けたものです (自著Papervision3D解説本のサンプルに写真を含めています)

パノラマVRの実装方法

パノラマVRの技術ついては本ブログで何度も紹介してきたので、特に改めて解説はするまでもないでしょう。下記の記事はPapervision3Dでの解説ですが、Alternativa3Dでも全く同じ考え方で利用できるので参考にしてみてください。

• Googleストリートビューの実現方法を調べてみる
• CubicVRをPapervision3D 2.0で作るPart.01(Cylinder編)
• CubicVRをPapervision3D 2.0で作るPart.02(Cube編)
• CubicVRをPapervision3D 2.0で作るPart.03(Sphere編)
• Flashで360度パノラマ動画MotionVRを再生

▼球面パノラマ (中央のグレーの点が視点、赤い球体にパノラマ写真をテクスチャとして貼り付けます)

▼SkyBox(中央の黒の点が視点、立方体の表面にパノラマ写真をテクスチャとして貼り付けます)

パノラマ表現に対応したテンプレートクラス

3Dフレームワーク「Alternativa3D」のスタートアップクラスAlternativaTemplateですが、パノラマ表現も作りやすいように改良しています。コンストラクタの部分でパノラマカメラを指定することで簡単に作ることができます。デモのソースコードを見れば、少ない行数でパノラマVRが実装されているのがお分かりになると思います。

public class Main extends AlternativaTemplate
{
	[Embed(source = "assets/eq.jpg")]
	private static var ImageCls:Class;

	public function Main():void{
		// コンストラクタでパノラマカメラを指定
		super({
			cameraType:CameraType.PANORAMA
		});
	}

	override protected function atInit():void
	{
		scene.addChild(
			new GeoSphere(100, 32, true,
				new TextureMaterial(new BitmapTextureResource(new ImageCls().bitmapData))));
	}
}

※Alternativa3DのテンプレートクラスはSpark projectにコミットしています。Alternativa3Dとあわせてご利用ください。

• ソースファイル
• ライブラリ(SWC版)
• ドキュメント