ヒトダマをビルボード手法で作ってみました

2009年1月22日 16:18

仕事サボってヒトダマを作って遊んでます、こんな大人をゆるしてください。
まだ、ゲーム機が今ほどスペックが高くなかった頃、3D表現に例えば「木」をいっぱい配置するとき、ポリゴン数の節約のため、1枚にの板ポリゴンに1枚の木の画像を貼って、常にカメラを向いておき、カメラが木の横に動いたとしても、ペラペラの木だってバレない様に、木自身のY軸（縦の軸）を回転させる手法が取られていた話は有名で、「ビルボード」なんて呼ばれてたらしいです。

そんなビルボードの手法、使ってみたくてと思いつつ、木を使うのもオモシロくないし、何か無いかな？って何気なくひらめいたのがヒトダマ。

炎って形がとくに決まってないから、ビルボードを使うにはもってこいだ！と思ったんですね。

さて、炎をどう作るか・・・最近乾燥してるから家の中で炎は燃やしたくないなあ〜火事は恐いし。
そうだ、ソフトを使おう、確かAppleのタイトルムービー作成ソフト「LiveType」を久しぶりに使ってみよう。
LiveTypeには炎が入っていたはず。というわけで
メディアブラウザ＞オブジェクト＞パイロ＞彗星にしてみる、なるほど、ヒトダマにも見えてきた。

アルファチャンネルを持ってるからそれごとmov形式にて書き出しました。
そのままFlash Video Encoder（最近名前が変わったよね）に持ってきてflvにエンコード。

そのまま同じ階層でいい、置いておこう。　名前は「hitodama.flv」。

さて、背景どうしよっかな？と考えたあげく、背景は暗い方がフンイキ出ますね。
そんなわけで天空のテクスチャを作ることにした、んだけど、球体にテクスチャを貼ると、そのままじゃ極座標に行くほど変に画像が歪むんです。QTVRとか作ってる人って上手ですね、そのあたり。

で、僕はそんなことまで出来ないので、自然景観ソフト「Vue」を使ってみることにしました、ありがたいことに、「空を書き出す」コマンドが用意されている。

月夜、いい感じです、またこのサムネイルがフンイキを醸し出しています。
でも残念なことに空の書き出しだけではVue5 infineteのバージョンだと、本当に空だけしか書き出せないです、何か方法ないかな？天空を自分で作る方法もあるけど、かなり熟練しないと厳しいので、また練習しとこう。

さて、jpegに書き出しする時は形式を「UV球」にしました。、するとQTVR風の画像に書き出してくれてます
書き出された画像はこの通り。

素材の準備ができたところでFlashへ。
今回はVideoStreamMaterialというPapervision3Dのクラスを使います、そうなんです、ビデオを扱うからですね。
普通、flvを扱うときって結構面倒です、少なくともVideoクラス、NetConnectionクラス、NetStreamクラスを使います、NetStreamは再生とか「今何秒？」とかを扱う役目で、再生したあとこれが制御役になるのです。

flvを読み込み、設定が終わったらVideoStreamMaterialへVideoとNetStreamを引数に渡すんですが・・・何だこりゃ？

アルファチャンネルが効いてない。

何か設定があるのか、と思い、まずはコンストラクタ、第三引数はprecise:Boolean = falseとなっていたので、trueにしても変わらず。
ヘルプを見ると気になるプロパティ「movieTransparent」が、継承元はMovieMaterial。
なにをいじってもダメでした。

GoogleCode調べてみると、なんだ、そうだったのか、こんなのがあった。
http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/materials/VideoStreamMaterial.as
VideoStreamMaterial(video:Video, stream:NetStream, precise:Boolean = false, transparent:Boolean = false)
と書いてあるので、バージョンの違いか、ひとまず修正。
中身を見てみると、うん確かに
super ( DisplayObject(video), transparent );
になってる。

カーソルキー上下で一応カメラポジションを変えてますが、もう少しいい動きを考えてみたいものです。
こんな感じで書いてみましたが、まだまだ勉強が必要ですね。

package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.ui.Keyboard;
	import flash.net.NetStream;
	import flash.media.Video;
	import flash.net.NetConnection;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.cameras.FreeCamera3D;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.VideoStreamMaterial;
	import caurina.transitions.Tweener;

public class FireBall extends Sprite {
		private var planet:Sphere;
		private var view:Viewport3D;
		private var scene:Scene3D;
		private var camera:FreeCamera3D;
		private var renderer:BasicRenderEngine;
		private var fireVideo:Video=new Video(200,200);
		private var stream:NetStream;
		private var videoTime:Number;
		private var mouse_x:Number=0;
		private var mouse_y:Number=0;
		private var fireArray:Array=[];
		private var maxFire:int=10;

public function FireBall ():void {
			// ステージの設定
			stage.frameRate=30;
			stage.align=StageAlign.TOP_LEFT;
			stage.scaleMode=StageScaleMode.EXACT_FIT;
			//天球の設定
			var planetMaterial:BitmapFileMaterial=new BitmapFileMaterial("Atmosphere.jpg");
			planetMaterial.opposite=true;
			planet=new Sphere(planetMaterial,5000,50,50);
			//各3D用オブジェクト設定
			view=new Viewport3D();
			scene=new Scene3D();
			camera=new FreeCamera3D();
			renderer=new BasicRenderEngine();
			addChild (view);
			scene.addChild (camera);
			scene.addChild (planet);
			//イベントハンドラ
			addEventListener (Event.ENTER_FRAME,enterFrames);
			stage.addEventListener (MouseEvent.MOUSE_MOVE,onMouseMoveHandler);
			stage.addEventListener (KeyboardEvent.KEY_DOWN,onDownHandler);
			//ビデオの設定
			var connection:NetConnection=new NetConnection();
			connection.connect (null);
			stream=new NetStream(connection);
			fireVideo.attachNetStream (stream);
			stream.play ("hitodama.flv");
			//ビデオの繰り返しのために必要な設定
			var metaObj:Object=new Object();
			stream.client = metaObj;
			metaObj.onMetaData = function(param:Object){
			videoTime=param.duration;
			};
			//ヒトダマのマテリアル
			var fireMaterial:VideoStreamMaterial=new VideoStreamMaterial(fireVideo,stream,false,true);
			fireMaterial.opposite=true;
			//ループで10個つくり、配列にいれます。
			for (var i:int=0; i<maxFire; i++) {
				var hitodamaPlane:Plane=new Plane(fireMaterial,200,200,1,1);
				scene.addChild (hitodamaPlane);
				hitodamaPlane.x=rand(2000)-1000;
				hitodamaPlane.y=rand(500)-250;
				hitodamaPlane.z=rand(2000)-1000;
				fireArray.push (hitodamaPlane);
			}
			//カメラ接近
			camera.x=camera.y=0,camera.z=-4000;
			Tweener.addTween (camera,{z:0,time:3,transition:"easeOutQuart"});
			var tf:TextField=new TextField();
			tf.text="↑/↓:ZOOM";
			addChild (tf);
			tf.textColor=0xCCCCCC;
		}
		private function enterFrames (event:Event):void {
			//もしビデオが終わったら、繰り返し再生
			if (stream.time>=videoTime) {
				stream.play ("hitodama.flv");
			}
			//マウスの位置によりカメラの角度変更
			cameraRotation ();
			//「ビルボード手法」
			for (var i:int=0; i<maxFire; i++) {
				fireArray[i].lookAt (camera);
			}
			//レンダリング
			renderer.renderScene (scene,camera,view);
		}
		private function onMouseMoveHandler (event:MouseEvent):void {
			mouse_x=stage.mouseX-stage.stageWidth/2;
			mouse_y=stage.mouseY-stage.stageHeight/2;
		}
		private function onDownHandler (event:KeyboardEvent):void {
			switch (event.keyCode) {
				case Keyboard.UP :
					cameraMove (true);
					break;
				case Keyboard.DOWN :
					cameraMove (false);
					break;
			}
		}
		private function cameraMove (flag:Boolean):void {
			var target:Number;
			if (flag) {
				target=0;
			} else {
				target=-2000;
			}
			Tweener.addTween (camera,{x:target,z:target,rotationX:0,rotationY:0,rotationZ:0,time:1,transition:"easeInOutBack"});
		}
		private function cameraRotation ():void {
			camera.rotationY+=(mouse_x-camera.rotationY)/100;
			camera.rotationX+=(mouse_y-camera.rotationX)/100;
		}
		private function rand (num:int):int {
			return Math.random() * num;
		}

}

前の詳細を見るヒトダマをビルボード手法で作ってみました次の詳細を見る

Flash AS3 学習リスト

デザイナー、秋葉秀樹のブログ

ヒトダマをビルボード手法で作ってみました

秋葉秀樹(アキバヒデキ)