Pixel3D万華鏡 - wonderfl build flash online

最近マイブームのPixel3DとParticleで遊んできましたが
そろそろ飽きてきたので他のこともやってみたいですね。

それにしても、wonderflを使うとスクリプトメインな私にとっては
Flashのサンプル＋ソースをupする手間も省けて一石二鳥！？

効率アップで更新頻度もあがって本当にwonderflさまさまです。

またwonderflに２点投稿してみました。

PV3D | ３面回転スクリーン(鏡面付き) - wonderfl build flash online

これは以前ここでも紹介したものの復習。

Pixel3D【練習】 - wonderfl build flash online

sakeさんの投稿を見て触発されて、Pixel3Dの練習
クリックするとランダム配置になります。

ページの切り替え時にアニメーションでMovieClipがぐるっとまわって次のページにいく

なんてものをPV3Dで作ろうと思ってたらこんな方法がありました。

まず各ページをMovieMaterialにしてあげて、それをPlaneのマテリアルに設定

それを次のようにすると、Plane自体の中心点をずらすことができます。

for each(hoge in myPlane.geometry.vertices){
hoge.z-=173;
}

今回設定したMovieClipの横幅が全部600で、ページが３枚なので

Planeを以下の式で求めた値だけ中心からzをずらして、１２０度ずつ回転させて配置すると

きれいに正三角形になります。

式※　(600 / 2) / √３ ＝ 173.20.…

あとはそれをDisplayObject3DにaddChildしてあげて

マウスクリックでDisplayObject3DのrotationYを120度回転させるアニメーションを付ければできあがり！

サンプル

画像サイズを640×480に設定します。
レンダリングボタンを押します。
そうすると以下のようなエラーが出ますがOK押せばレンダリングが始まります。

レンダリング画像です。

こんな感じで15分くらいレンダリングして画像を保存します。ちょっとノイズ残りますが。。
それぞれのパーツをレンダリングするので時間かかるな〜

次はレンダリング画像をテクスチャーに編集します。

CornFlex

以前こんな360度カメラがありました。おそらくgoogleのストリートビューで使用されたものなのかな。
そして、、

それがこんなコンパクトになって新登場。値段も安そうですね。
googleのストリートビューだと静止画ですが、動画になるとなんか不気味！
おそらくPV3Dで法線を内側に向けた球体をつくり、
動画をASE Formatテクスチャーとして張る的な感じなのかな〜

なぜかレイブで撮影してるのが海外っぽくて面白いです（笑
動画

360度カメラの会社
yellowBird camera

これで見切れて気になるあの娘とかちゃんと見れるようになりますね（笑

FRYRENDERのレンダリング設定です。
HDRIを使用してレンダリングしていきます。
シーンをレンダリングパネルを開きfryrenderのタブをクリックすると設定画面が現れます。
Environment ConfigurationでEnvironment mappingとBackground mapingのuseにチェックします。
背景はスタジオ風にしたいのでbackground mappingを白に設定します。
これはレンダリングに影響しない張りぼてみたいなのもです。

Environment mappingでHDRIの設定をします。これがレンダリングに影響する設定パネルです。
pathでHDRIの場所を設定し、saturationを-100に設定して色を消します。

これでレンダリングの設定は終わりです。簡単！！

Render configurationは特に設定しなくとも大丈夫です。こちらはもっと実務的な感じの設定です。

次回はレンダリングしてみます。

前回のサンプルですが、すこし無理矢理な気がしてソースを公開していませんでしたw
要望があったのでソースも載せておきます。

●ソース

簡単な説明は以下に・・・

「PV3D | VirtualMouseのcontainer.name」の続きを読む »

Papervision3Dが2.1alphaになり、アニメーションも充実してきた、
ということで、早速アニメーションをしてみました。
が！しかし、困ったバグが。。。
CS3で今まで制作していたのですが、どうも2.1ではDAEのアニメーションが読み込まれない模様。
原因は分かりませんが、同じ書き方でFlexやCS4で試すと動くのに、CS3だけ動きません。
MD2に関しては試してないのでわかりませんが、DAEに関してアニメーションをする場合は注意！

で、アニメーションの基本的な書き方は、

Floorplanner Tech Blog

を参考にしてください。
で、アニメーションの制御に関しては、

KYUCON*BLOG

を参考に。
で、そもそも読み込んだDAEにアニメーションがあるのかないのか？
というのを調べるには、

dae.playing

dae.animation.channels.length

dae.animation.startTime
dae.animation.endTime

参考：
LightwaveからColladaファイルを書き出すよ
wonderfl
Blenderのアニメーション付きファイルをPapervision3Dで表示する

前回の続きです。

●サンプル

空きを見つけてちょこちょこいじってみましたが、最終的に

ちょっと力技だけどこんな感じに仕上がりました。

「PV3D | VirtualMouseで3DEvent」の続きを読む »

「PV3D | MaterialsListに別々のInteractiveScene3DEvent」の続きを読む »

//DAEオブジェクトクラス
import org.papervision3d.objects.parsers.DAE;

var daeObj:DAE;

daeObj = new DAE();
daeObj.load("○○○.DAE");
scene.addChild(daeObj);

//マテリアルを作成
var material : WireframeMaterial = new WireframeMaterial();
var cl_material_r : ColorMaterial = new ColorMaterial( 0xff0000 );//赤色でべた塗り
var cl_material_b : ColorMaterial = new ColorMaterial( 0x0000ff );//青色でべた塗り
var mc_material : MovieAssetMaterial = new MovieAssetMaterial( "mc_material",true,true );
var ba_material : BitmapAssetMaterial = new BitmapAssetMaterial( "bg1.jpg" );
var bf_material : BitmapFileMaterial = new BitmapFileMaterial( "bg.jpg" );

//裏面の表示設定

cl_material_r.doubleSided = false;
cl_material_b.doubleSided = true;
material.doubleSided = true;
mc_material.doubleSided = true;
ba_material.doubleSided = true;
bf_material.doubleSided = true;

//マテリアルリストを作成

var mList : MaterialsList = new MaterialsList( {

	front  : mc_material ,

	back   : cl_material_r ,

	right  : material ,

	left   : cl_material_b, 

	top    : bf_material ,

	bottom : ba_material 

} );

//立方体オブジェクトを作成
var myCube:Cube = new Cube(mList,200,200,200);

「PV3D | Primitives」の続きを読む »

今回から「WAKAZ.info」は→Profileの３人体制で更新していくことになりました！
金曜日の更新を担当する【t.e.t.u】です。
Flashの経験は浅いですが、今まで多種多様なプログラムを経験してきたので、それを生かしてFlash+3Dでもおもしろいことができたらなぁ〜っと思ってます。
よろしく！

「PV3D | 3Dライブラリー【t.e.t.u】」の続きを読む »

new MovieMaterial(mat);

//wはMaterialの幅、hはMaterialの高さ
new MovieMaterial(mat,true,true,true,new Rectangle(-w/2,-h/2,w,h));

var movieMat:MovieMaterial = new MovieMaterial(mat,true,true,true,new Rectangle(-w/2,-h/2,w,h));
movieMat.doubleSided = true;		//裏面も見えるようにする
movieMat.smooth = true;			//よくわからないけど、たぶんスムーズにするのか？
movieMat.interactive = true;			//ボタン機能が有効になる

var plane:Plane = new Plane(mat,w,h,segW,segH);
plane.useOwnContainer = true;

var plane:Plane = new Plane(mat,w,h,segW,segH);
var vpl:ViewportLayer = plane.createViewportLayer(vp,true);

import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();
Tweener.addTween(vpl, {_Blur_blurX:10,_Blur_blurY:10,time:1.0,transition:"easeOutExpo",delay:.0});

Tags: PV3D, Filter, useOwnContainer, ViewportLayer

さらに続けて、zupko.infoから影を作るTipsです。
これも続けて作りたい！作ろう！

zupko.infoにてPV3Dで反射のTipsが載っていました。
この反射かっこいいな〜。作りたい。作ろう！

SVNで、PV3Dのライブラリを更新したら、どうやらライブラリが少し変わったみたいで、いままで作っていたPV3Dのファイルが表示されない。
特にエラーが出てるわけではなく、単にレンダリングされないだけだったので、動いてるソースと見比べてみると、どうもカメラの設定が足りないみたい。
自分のソース内のカメラ設定部分に

camera.target = DisplayObject3D.ZERO;

参考：鮭とプログラムとか

WOW Engineという3D物理エンジンライブラリとこの前のSound Spectrumを足すと面白いかな〜と思って作ってはみたものの、なんか違うな〜。単にボックスにSound Spectrumの値を入れただけだから物足りない。
Vertexごとに値を割り当てて、ガビガビしたのに合わせて、中の球をポンポン動かしたかったんだけども。。。
もうちょい調べよ〜。

Tutorialなど
ActionScript3用3D物理エンジンライブラリ「WOW-Engine」
参考サイト
shirotokoro：WOW-Engine
ミカン日記：WOWEngineを使ってみた
[Papervision3D]PV3D + WOW Engine

とりあえず第２弾。
テクスチャとライトを設置してみた。
あと、えらく波形がビリビリなるので、参考サイトをまねて、半球で見易くしてみた。
それで、一番の問題としては、Sound Spectrumで音が出ない、波形が動かない、という事があったんですが、
同じブラウザで裏で音のなるFlashサイトを見ていた場合、画面がフリーズしてしまいました。
なんでそうなるのかな〜と検索してるとそんな記事を書いていた方がいました。
イベントとかで使う分には行けそうですね。
リアルタイムにはできないのかな〜。

参考
Papervision3D & SoundMixer
AS3のSoundMixer.computeSpectrumの問題点と対処法
SoundMixer.computeSpectrum() stretchFactor変化デモ
AS3:タイムライン再生の音の波形スナップショットが取れない
SoundMixer.computeSpectrum() マイクの音はキャプチャされない

PV3DのプリミティブとSound Spectrumで取得したmp3の波形データを使い、
プリミティブをビリビリさせてみました。
結構楽しい。単純な形なのにmp3を変えるだけで全然違う。
もっと作り込もう。
帯と球の２種類作ってみました。
２つプリミティブが回っていますが、どっちかがLでどっちかがRのステレオ版です。
流れている曲はお友達のLili Hirakawaさんに作ってもらいました。ありがと〜。

package {
	import mx.core.UIComponent;
	import flash.display.Sprite;
	import flash.events.Event;

	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.cameras.FreeCamera3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.render.BasicRenderEngine;

	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.*;

	public class PV3D_Basic extends Sprite {
		private var container:Sprite;
		private var vp:Viewport3D;
		private var scene:Scene3D;
		private var camera:FreeCamera3D;
		private var rootNode:DisplayObject3D;
		private var rdr:BasicRenderEngine;
		//プリミティブの定義
		private var cube:Cube;
		private var sphere:Sphere;
		private var cylinder:Cylinder;
		private var cone:Cone;
		private var plane:Plane;
		
		public function PV3D_Basic() {
		  //初期化
			init();
		}
		private function init():void{
			init3D();
			rootNode.addChild(mkCube(0,-175,0));		//立方体を作る
			rootNode.addChild(mkSphere(0,0,0));			//球を作る
			rootNode.addChild(mkCylinder(0,-100,0));	//シリンダーを作る
			rootNode.addChild(mkCone(0,100,0));			//円錐を作る
			rootNode.addChild(mkPlane(0,0,0));			//板を作る
			//繰り返し処理
			addEventListener(Event.ENTER_FRAME,expEnterFrame);
		}
		private function init3D():void {
			//スプライト作成
			container=new Sprite  ;
			addChild(container);
			//ビューポート作成
			vp=new Viewport3D(stage.stageWidth,stage.stageHeight,true,true);
			container.addChild(vp);
			//シーン作成
			scene=new Scene3D;
			//レンダラー作成
			rdr=new BasicRenderEngine;
			//カメラ作成
			camera			=new FreeCamera3D;
			camera.zoom		=3;
			camera.focus	=300;
			//ルートノード
			rootNode=scene.addChild(new DisplayObject3D("rootNode"));
			}
		//レンダリング
		public function expEnterFrame(e:Event):void {
			cube.rotationY += 10;
			rdr.renderScene(scene,camera,vp);
		}
		//立方体
		private function mkCube(xPos,yPos,zPos):DisplayObject3D {

			var wireMat:WireframeMaterial=new WireframeMaterial();
			wireMat.lineAlpha=.5;
			var colMat:ColorMaterial = new ColorMaterial( 0xff00ff ,.8);
			colMat.oneSide=false;
			colMat.lineColor=0xFFFF00;
			var cubeMat:MaterialsList = new MaterialsList({
				front	:colMat,
				back	:wireMat,
				right	:wireMat,
				left	:wireMat,
				top		:wireMat,
				bottom	:wireMat
			});
			var w:Number			=50;		//幅
			var h:Number			=50;		//高さ
			var d:Number			=50;		//奥行き
			var segmentsS:Number	=2;			//横面分割数
			var segmentsT:Number	=4;			//奥行き分割数
			var segmentsH:Number	=8;			//縦面分割数
			var insideFaces:int		=0;			//裏返す面の指定？
			var excludeFaces:int	=0;			//非表示する面の指定？
			var initObject:Object	=null;
			cube=new Cube(cubeMat,w,d,h,segmentsS,segmentsT,segmentsH,insideFaces,excludeFaces,initObject);
			cube.x=xPos;
			cube.y=yPos;
			cube.z=zPos;
			return cube;
		}
		//球体
		private function mkSphere(xPos,yPos,zPos):DisplayObject3D {
			var sphereMat:MaterialObject3D = new WireframeMaterial();
			var radius:Number		=50;		//半径
			var segmentsW:int		=8;			//横の分割数
			var segmentsH:int		=6;			//縦の分割数
			var initObject:Object	=null;
			sphere=new Sphere(sphereMat,radius,segmentsW,segmentsH,initObject);
			sphere.x=xPos;
			sphere.y=yPos;
			sphere.z=zPos;
			return sphere;
		}
		//シリンダー
		private function mkCylinder(xPos,yPos,zPos):DisplayObject3D{
			var cylinderMat:MaterialObject3D = new WireframeMaterial();
			var radius:Number		=50;		//半径
			var h:Number			=100;		//高さ
			var segmentsW:int		=8;			//横の分割数
			var segmentsH:int		=6;			//縦の分割数
			var topRadius:Number	=-1;		//上面の半径
			var topFace:Boolean		=true;		//上面の表示／非表示
			var bottomFace:Boolean	=true;		//下面の表示／非表示
			var initObject:Object	=null;
			cylinder = new Cylinder(cylinderMat,radius,h,segmentsW,segmentsH,topRadius,topFace,bottomFace,initObject);
			cylinder.x=xPos;
			cylinder.y=yPos;
			cylinder.z=zPos;
			return cylinder;
		}
		//円錐
		private function mkCone(xPos,yPos,zPos):DisplayObject3D{
			var coneMat:MaterialObject3D = new WireframeMaterial();
			var radius:Number		=100;
			var h:Number			=100;
			var segmentsW:int		=8;
			var segmentsH:int		=6;
			var initObject:Object	=null;
			cone = new Cone(coneMat,radius,h,segmentsW,segmentsH,initObject);
			cone.x=xPos;
			cone.y=yPos;
			cone.z=zPos;
			return cone;
		}
		//板
		private function mkPlane(xPos,yPos,zPos):DisplayObject3D{
			var planeMat:MaterialObject3D=new WireframeMaterial();
			var w:Number=400;
			var h:Number=400;
			var segmentsW:Number=3;
			var segmentsH:Number=2;
			var initObject:Object=null;
			plane = new Plane(planeMat,w,h,segmentsW,segmentsH,initObject);
			plane.x=xPos;
			plane.y=yPos;
			plane.z=zPos;
			return plane;
		}
	}
}

PV3Dのモデリングデータをボーンを入れたようにぐにゃぐにゃ曲げれるサンプルサイトです。
これは第２弾ですが、第１弾ではお札がぱらぱら曲がってました。

PV3Dのコンテストがあるそうです。
サイトを送ればいいのかな？

Papervision3Dを使って、トラックを矢印キーでぐるんぐるん走らせることができる「spec5zigen」のサイトです。
IK（インバースキネマティクス）を使って、荷台がボディに着いて来るようになっています。
バックでめり込んだりしちゃいますが、そこはこれから直すという事で。

地球をドラッグすることで、ごろごろころがるPV3Dのマウスストーカーみたいな感じの「Dragging in 3D」です。
ライティングが綺麗です。

import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.objects.parsers.DAE;

private function hoge(){
	var dae:DAE = new DAE();
	dae.load("hoge/hoge.dae");
	//リスナー追加
	dae.addEventListener(FileLoadEvent.LOAD_COMPLETE,onDAE_Loaded);
}
private function onDAE_Loaded(event:FileLoadEvent){
	trace(event.type);	//読み込めたらloadCompleteと出る
}

KENZOが創ったバーチャル・ガーデンであなただけのポピーが育てられます。
種のまき方はあなたが撮ったポピーの写真をウェブサイトにアップロードするだけという感じ。
フィールドビューでいろんな人がとった写真をPV3D空間でみれます。

前回のMorph3Dから更にいろんなモーフィングができてます。モーフィングの描画方法も変更可能。

コミカルな動きとPV3Dをうまく組み合わせてとても気持ちのいいサイトになっているTBWAのサイト

msnbcのニュースをビジュアル的に見せてくれるサイト「Spectra」です。

操作性から動きまで気持ち良さ満開です。

→サイトはこちら

総合格闘技「UFC 84」のサイト。
マウスに合わせてカメラが動いている感じの効果を使っています。
たぶん、PV3Dでなくてもできそうですが、奥行き感がなかなか綺麗にできてて良いです。

「Audi RS 6 | Performance from every part」の続きを読む »

3D studio maxで書き出したデータをPV3Dにてトレースアニメーションするサンプルのようです。
colorから色も選べます。

ようやくPV3DにてDAEファイルの読み込みが出来たので、このままテクスチャも貼っちゃいたくなっていろいろ調べたときの備忘録。

STEP.1【DAEファイルの書き出し】
・MAXを使い、DAEを書き出す。その際Materialの名前やテクスチャの名前を英語で付けておく。
・テクスチャ等を既にMAX上で設定している場合、リンクが絶対パスになるので、テキストエディタかなにかでDAEファイルを開き、「C:\〜」から始まるテクスチャファイルを指定している場所を探し、自分の環境に合わせて、相対パスで書き直す。

STEP.2【Flash CS3からDAEファイルを読み込む】
・DAEの読み込み方がさっぱりわからなかったので、mrdoobさんのサイトにあったsourceを拝借。daeと書いてる部分を書き直したら一応読み込んだ。

STEP.3【テクスチャの無いマテリアルに色を付ける】
テクスチャが無い部分に関しては、ワイヤーフレーム表示になってしまうので、Flash内で生成することに。
まず、MAXで付けたMaterialの名前を探すため、一度ムービープレビューをしてみる。
「出力パネル」で「not found」と出ているMaterial名っぽいものが出るので、MaterialListに登録する。
Papervision3Dやってみる(4) 【マテリアル】を参考に書き書き。

//ベタ色設定
var Ymaterial : ColorMaterial = new ColorMaterial( 0xffff00 ,.8);//黄色でべた塗り,アルファ値（0〜1）
Ymaterial.oneSide = false;    //裏のポリゴンに色をつけるかどうか

STEP.4【複数のテクスチャを重ねる】
ベタ色を付けると凹凸がなくなってしまうので、とりあえず下地を残して上に別のテクスチャ貼ることに。
CompositeMaterialというのが複数テクスチャを貼れるみたいです。
note.xさんとmoriBlogさんのサイトを参考に書き書き。

なんとか重ねて表示までできました。

【その他参考にしたサイト】
・ラジオシティ風レンダーベイキング
・レンダーベイキングってなんだ？
・Collada形式の３Ｄモデルを読み込む

Blogged with Flock