Papervision3D演出サンプルNo.03:フォトプリント

写真が3D空間をタイル状に集まって一枚の画像に仕上がるサンプルを作ってみました。ポイントは写真をタイル状のビットマップデータとしてキャプチャすることと、perlinNoiseを利用した放射状ブラー(ライトバースト)です。サンプルは以下から。

• demo (require Flash Player 9)
• source (zip)

タイル状のパーティクル平面の作成

一枚の画像をタイル状に分割するのに、２重ループのなかで画像をずらしながらキャプチャしていきます。というのも、BitmapData.drawは原点からの横・縦しか指定できないので、キャプチャする画像は原点に移動させる必要があります。

// imgSpriteは画像を配置しただけのSpriteインスタンス
// folderはimgSpriteのラッパー
// 最終的にBitmapDataは配列bmpDataArrに保存

// パーティクルを分割して保存するループ
for (i = 0; i < MAX_CELL_W; i++ )
{
	for (j = 0; j < MAX_CELL_H; j++ )
	{
		imgSprite.x = - imgSprite.width / MAX_CELL_W * i;
		imgSprite.y = - imgSprite.height / MAX_CELL_H * j;

		var bmpData:BitmapData = new BitmapData(
			imgSprite.width / MAX_CELL_W,
			imgSprite.height/ MAX_CELL_H,
			false,
			0xFFFF0000
		);

		bmpData.draw(folder);
		bmpDataArr.push(bmpData);
	}
}

配列に保存したBitmapDataはBitmapMaterialで3Dテクスチャとして復元します。

// 保存されたパーティクル配列から3DのPlaneオブジェクトを作成(一部抜粋)
for (i = 0; i < MAX_CELL_W; i++ )
{
	for (j = MAX_CELL_H; j > 0 ; j-- )
	{
		// テクスチャは上記で作成したBitmapData配列を利用
		var material:BitmapMaterial =
			new BitmapMaterial(BitmapData(bmpDataArr.shift()), false);

		// Planeの作成
		var plane:Plane = new Plane(
			material,
			imgSprite.width / MAX_CELL_W,
			imgSprite.height / MAX_CELL_H,
			1, 1
		);
	}
}

ライトバーストの作成

フラクタルなランダムノイズといえばBitmapData.perlinNoise。ただグラデーションマスクをかけたかったので、タイムライン状でcacheAsBitmapを適用した上でマスクを設定しています。参考記事は以下。

• にゃあプロジェクト – ウェブログ – グラデーション・マスク
• BitmapData.perlinNoise()のサンプル – プログラミングとかそんなの

モーションはゴリゴリとハードコーディング

今回はコードが煩雑になってきたのでFlash IDEを使って、適度にコードを短くしました。といってもカメラの動きなどトゥイーン関連はすべてTweenerで一個一個指定。3Dの演出を作るのはAfter Effetsのようにタイムラインで作った方が効率いいですが、トライ＆エラーで調整。

ブログ内の関連記事

• Papervision3D演出サンプルNo.02:打ち上げ花火
  
• Papervision3D演出サンプルNo.01:羽ばたく蝶々