DUBFLASH: PaperVision3D-Archive-

wonderfl | 音 particlesSoundVisualizer

Post:2010年1月12日 17:16

●要 FlashPlayer9

音 SoundVisualizer - wonderfl build flash online

久しぶりにwonderflってみました。
ずっとSoundMixer.computeSpectrum 使ってサウンドビジュアライザー作ってみたかったので満足。

wonderfl | 宇宙 ParticlesSphere

Post:2009年9月29日 12:51

●要 FlashPlayer9

宇宙 ParticlesSphere - wonderfl build flash online

org.papervision3d.objects.specialディレクトリにParticleFieldってのがあったので使ってみた。
各パーティクルをSphereの頂点座標に動かすだけだけど、BlendMode.ADDとColorTransformを使うだけで結構キレイになるもんだな～。

Papervision3D | FIleLoadEventは使うべし

Post:2009年7月29日 10:41

今更ですが、papervision3d.events～にFileLoadEventってのについてですが。
以前はprogressEvent取得するのちょっとめんどかったんで、なにかと～AssetMaterialでテクスチャ貼り付けしてたんですがやっぱ使いだすと便利です。ケースバイケースですが。
～FileMaterial系でオブジェクトを読み込む時は必須で使ってます。
使い方は簡単でリスナー登録にて各イベントを呼び出せばおｋ。

Planeオブジェクト生成時ではアルファ０で

外部ファイル読み込み完了でファードイン

Papervision3D | QuadrantRenderEngineを試す

Post:2009年6月29日 15:52

papervision3dは基本的に同座標上の処理が苦手みたいで各3DObjectが同じ座標上にくるとどちらを優先的に表示するかテンパってしまいポリゴン欠けの症状がでます。
毎回その状態を回避するためにz座標をずらしたり、セグメントの数を増やすなりの微妙な処理を続けてたんですがその状態を回避するレンダリングエンジンがあったので使ってみました。

● QuadrantRenderEngine Test

・Basic : BasicRenderEngine

・Z-sort: QuadrantRenderEngine Z-sprt （ポリゴンの前後関係計算処理）

・SPLIT : QuadrantRenderEngine SPLIT （ポリゴンの分割計算処理）

・ALL : QuadrantRenderEngine ALL （Z-sort & SPLIT 両方適用）

StatsViewにてFPS負荷を表示してみたんですがやっぱりそれなりに負荷が強くなりますね。。
Scene内に複数のDisplayObject3Dがある場合は結構な負荷になるのであまり有効ではないかも。
今回案件でこの処理が必要になったので使用してみましたがSceneを分けて使用しないと重すぎて使い物にならなかったです。。
これも前回エントリと同じく品質管理の部類ですがやはりケースバイケースで用途によりうまく使い分けるのが有効ですね。

下記参考にさせてもらいました
●note.x -[PV3D2.0] QuadrantRenderEngine-
●clockmaker Blog -PV3DのQuadTreeを試してみました-

関係ないけどやっぱpv3dはおもろいな～。

Papervision3D | マテリアル（テクスチャ）の品質管理

Post:2009年6月19日 14:48

小ネタです。これ意外と気付かない人いるんじゃないでしょうか

papervision3dを使用して仮想3D空間を作るときに地面となるものが存在させる時や、
Displaybject3Dを正面からではなく、角度をつけて遠近を表現したいことは多々あります。
その際、パースがキツくてイメージが荒れてしまうのを防ぐためにスムージングをかけてごまかしたり（？）しますが
有効なのはイメージをx倍のサイズで読み込んでDisplayObject3D生成時にwidthとheightを1/x(規定値)に戻す、です。
アパレルのフルフラとか背景全体イメージでオーサリングしたことある人は必ずこのやり方すると思いますが、papervisiotnでもこれはかなり有効です。

● 品質管理ナシ (image.jpg width:500px, height:500px)

● 品質管理アリ (image.jpg width:1000px, height:1000px)

読み込むデータのサイズにもよりますが明らかに後者処理の方がきれいなので
出来るだけやったほうがいいですね。

Papervision3D | DisplayObject3Dの頂点操作 geometry.vertices

Post:2009年4月24日 12:20

●要 FlashPlayer9 ※ステージクリックで変形

頂点座標を取得してプリミティブ変形してみました。
ポリゴンの頂点座標を取得することでアイデア次第で色々応用できます。
今回はテストとしてプリミティブの変形と擬似的に生成したSphereの各頂点座標上に小さいSphereを生成しプリミティブの変形と共にモーションをつけてみました。

package {
	import flash.display.*;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.shadematerials.GouraudMaterial;
	import org.papervision3d.objects.primitives.Sphere;
	import caurina.transitions.*;
	import caurina.transitions.properties.*;
	import net.pv3d.RootNode;

public class Document extends Sprite {
		
		private var engine:Sprite;
		private var container:Sprite;
		private var world:RootNode;
		private var dmMaterial:ColorMaterial;
		private var dmSph1:Sphere;
		private var dmSph2:Sphere;
		private var cSph:Sphere;
		private var clight:PointLight3D;
		private var cMaterial:GouraudMaterial;
		private var sphreAry:Array;
		private var verticeFlg:Boolean;
		private var segmentW:Number;
		private var segmentH:Number;
		private var p:Number;
		
	        public function Document() {
			
			stage.quality = StageQuality.MEDIUM;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.addEventListener(Event.RESIZE, SATGE_RESIZE);
			
                        container = new Sprite();
			container.mouseChildren = false;
			container.mouseEnabled = false;
			addChild(container);
			
                        sphreAry = new Array();
			verticeFlg = false;
			segmentW = 13;
			segmentH = 13;
			p = 5;
			
			CREATE_3D_SCENE();
			RESIZE_CORE();
		}
		private function CREATE_3D_SCENE() {
			engine = new Sprite();
			world = new RootNode(0, 0, true, true, "Free");
			container.addChild(world.viewport);
			
			dmMaterial = new ColorMaterial(0x808080, 1, true);
			dmSph1 = new Sphere(dmMaterial, 100, segmentW, segmentH);
			dmSph2 = new Sphere(dmMaterial, 150, segmentW, segmentH);
			
			var sphere:Sphere;
			var light:PointLight3D = new PointLight3D(true, false);
			var shadeMaterial:GouraudMaterial = new GouraudMaterial(light, 0xFFFFFF, 0x000000, 0);
			
			for (var v = 0; v <= dmSph2.geometry.vertices.length-1; v++) {
			    sphere = new Sphere(shadeMaterial, 5, 6, 6);
				sphere.x = dmSph2.geometry.vertices[v].x;
				sphere.y = dmSph2.geometry.vertices[v].y;
				sphere.z = dmSph2.geometry.vertices[v].z;
				world.rootNode.addChild(sphere);
				sphreAry[v] = sphere;
			}
			
			clight = new PointLight3D();
			cMaterial = new GouraudMaterial(clight,0x000000, 0x00CCCC, 0);
			cSph = new Sphere(cMaterial, 100, segmentW, segmentH);
			world.rootNode.addChild(cSph);
			
			stage.addEventListener(MouseEvent.MOUSE_DOWN, STAGE_DOWN);
			engine.addEventListener(Event.ENTER_FRAME, ENTER_ACTION);
		}
		private function STAGE_DOWN(e:MouseEvent) {
			!verticeFlg ? VERTICE_GO() : VERTICE_BACK();
			!verticeFlg ? stage.quality = StageQuality.LOW : stage.quality = StageQuality.MEDIUM;
		}
		private function VERTICE_GO() {
			var cntA = 0;
			var cntB = 0;
			var goSph:Sphere;
			goSph = new Sphere(dmMaterial, 450, segmentW, segmentH);
			for (var i = 0; i <= cSph.geometry.vertices.length - 1; i++) {
				var gx = goSph.geometry.vertices[i].x;
				var gy = goSph.geometry.vertices[i].y;
				var gz = goSph.geometry.vertices[i].z;
				i % p == 0 && i != 0 ? Tweener.addTween(cSph.geometry.vertices[i], { x:gx, y:gy, z:gz, delay:cntA*.01, time:1, transition:"easeOutElastic" } ):null;
				cntA++;
			}
			goSph = new Sphere(dmMaterial, 480, segmentW, segmentH);
			for (var v = 0; v <= sphreAry.length - 1; v++) {
				var dgx = goSph.geometry.vertices[v].x;
				var dgy = goSph.geometry.vertices[v].y;
				var dgz = goSph.geometry.vertices[v].z;
				Tweener.addTween(sphreAry[v], { x:dgx, y:dgy, z:dgz, delay:cntB * .01, time:1, transition:"easeOutElastic" } );
				
				cntB++;
			}
			verticeFlg = true;
		}
		private function VERTICE_BACK() {
			var cntA = 0;
			var cntB = 0;
			for (var i = 0; i <= cSph.geometry.vertices.length - 1; i++) {
				var gx = dmSph1.geometry.vertices[i].x;
				var gy = dmSph1.geometry.vertices[i].y;
				var gz = dmSph1.geometry.vertices[i].z;
				Tweener.addTween(cSph.geometry.vertices[i], { x:gx, y:gy, z:gz, delay:cntA*.02, time:2, transition:"easeOutElastic" } );
				cntA++;
			}
			for (var v = 0; v <= sphreAry.length - 1; v++) {
				var dgx = dmSph2.geometry.vertices[v].x;
				var dgy = dmSph2.geometry.vertices[v].y;
				var dgz = dmSph2.geometry.vertices[v].z;
				Tweener.addTween(sphreAry[v], { x:dgx, y:dgy, z:dgz, delay:cntB * .02, time:2, transition:"easeOutElastic" } );
				
				cntB++;
			}
			verticeFlg = false;
		}
		private function ENTER_ACTION(e:Event) {
			world.rootNode.rotationY +=5;
		}
		private function SATGE_RESIZE(e:Event) {
			RESIZE_CORE();
		}
		private function RESIZE_CORE() {
			gradMc.x = stage.stageWidth / 2;
			gradMc.y = stage.stageHeight / 2;
		}
	}
}

Papervision3D | ViewportLayerとuseOwnContainer

Post:2009年4月17日 17:01

前回エントリでuseOwnContainer でalpha操作が出来るようになると書きましたが
どうやら ./org/papervision3d/view/layer/～のLayerディレクトリクラスでも色々な操作が可能みたいです。
とりあえずわかる範囲で網羅してみたんですが、基本ViewportLayerで操作した時とuseOwnContainer をtrueにした時ではalpha操作、フィルター、トランスフォームとかどちらでもだいたい同じことが出来るっぽいっすね。
ただColorTransformでのカラーの操作をuseOwnContainer でやろうとすると以下のエラーが出て出来ませんでした。

ReferenceError: Error #1056: org.papervision3d.core.math.Matrix3D のプロパティ colorTransform を作成できません。

まあcolorTransform プロパティがないから出来ないのは当然。。
じゃあViewportLayerはどうなの？と思ってやってみたらバッチリ出来るし。
そしたらそのままViewportLayerでカラー操作してuseOwnContainer = trueでフィルターとアルファ操作しようとしてみたらViewportLayerのみ反応してフィルターとアルファは反応なし。。。
どーやらどっちかしか使えないっぽいですね。

まあうまく使い分ける感じで。
基本useOwnContainer の方が使い勝手がいいけどエフェクティブに攻めたい場合はなにかとViewportLayer愛用しそうかな。
BitmapEffectLayerとかもうまく使えば表現幅がひろがりそうw

とりあえず下記ViewportLayerの使用方法です。

papervision3D | alphaを操作する

Post:2009年4月14日 12:17

displayObject3Dのalphaを操作、、
でっきりalphaプロパティが見つからなかったので直接操作はasをカスタマイズしないと出来ないもんだと思い込んでました。。いやーまだまだです。
今までalphaを操作するには ↓

1:asカスタマイズ
2:viewportを格納したSpriteもしくはMovieClipのalphaを操作

の2通りしかないと思ってました。

んでたまたまこのブログ見てたら操作方法発見しました

useOwnContainerをtrueで操作できるようになってたんですね
てっきりfilterも出来ないかと思ってたよ泣
せっかくカスタマイズしたのに意味ないし。。。しかもググッてみたら結構エントリでてました。

まあそんな細かい発見が楽しい今日この頃ですw

ちなみにuseOwnContainerをtrueにするとOBJECT_CLICKとOBJECT_DOUBLE_CLICKが実装出来なくなるみたいです。

AS3.0 | カウントダウン＋papervision3D

Post:2009年4月 3日 12:44

●要 FlashPlayer9 papervision3D_2.0

なんとなくカウントダウンの汎用クラスを作ってみたのでついでにpapervision3Dに落とし込んでみました。
カウントダウンのロジックは基本的に設定時刻と現在時刻をミリ秒で差分を抽出して、その差分のミリ秒を表示したい単位に変換すれば出来ます。仕組みがわかっちゃえば簡単です。
下記カウントダウン作成時の基本ロジックです。よければ参考にどうぞ

ただやっぱりただのカウントダウン（default verのswf）は面白みに欠けるのでなにかぼーっと眺めていても飽きさせない仕様にしたいところです。
今回は思いつきでpapervision3dで未来数値表示的なカウントダウン（papervision3D verのswf）を作成してみたけどいざ考え出すと表現的に色々出来そう。
vectorvisionで数字を散らしてみたり、box2dで物理表現してみても楽しそうだし、tweensyのfxでエフェクティブなのもいいかも。

Papervision3d | カメラをパンしてみた

Post:2009年2月 9日 12:54

●要 FlashPlayer9 Papervision3D_2.0

自動で対象オブジェクトを追尾してくてる関数があったので使ってみた。

Camera3D.orbit();

pitch : Rotation around X=axis (looking up or down)
yaw : Rotation around Y-axis (looking left or right)
useDegrees : Whether to use degrees for pitch and yaw (defaults to 'true')
target : An optional target to orbit around

使い方は簡単でENTER_FRAMEにて呼び出すだけ。
ただ第１引数と第２引数の数値代入次第では面白い動きが期待できそう。
今回はとりあえず定数で。。
とりあえずゲームとかでのカメラパンとかでは結構役に立ちそう。
webコンテンツ内では視点（camera）が移動する動作の方が気持ちよさそうだからあんま使わないかもな～。