Wonderfulで始めるAlternativa3D

初級編7. Sprite3Dとは?

Ver5.5.0から実装されたSprite3D。公開当初、その名前からFlash APIのSpriteやMovieClipが使えるのでは?と思ったのですが、全然違いましたw(MovieClipについては、Ver5.6.0で実装されれいます。次項で解説)

説明するより、見てもらう方が早いと思うので、以下のサンプルをご覧ください。

2枚の画像付きの板が動いていると思いますが、これは左右反転にしているだけで、動き自体はまったく同じものです。

くるくる回転してる方がPlaneにTextureを貼り付けた物で、常に正面を向いているのがSprite3Dです。
このように、Sprite3Dは、Cameraに対し常に垂直に表示されるオブジェクト、つまり、位置情報(x,y,z)と拡大縮小(scaleX,scaleY,scaleZ)のみを持ち(回転情報は持たない)、Textureを表示できるオブジェクトでした。
3D通の方なら、ビルボード(看板)と言った方が早いかもしれません。

最大の利点は、Meshのように頂点情報Vertexや、面Face、表面Surfaseを持たずに画像を表示するので、計算量が少ない、ゆえに圧倒的軽い(早い)という事です。

残念ながら、今の所Sprite3Dに表示できるのはTexture(を使ったSpriteTextureMaterial)のみなのですが、独自に拡張する事で、ピクセルレンダーなども出来るのではないかと目論んでいます(そのうち実験編にサンプルアップします。)

Sprite3Dクラス

Sprite3Dは、alternativa.engine3d.coreパッケージの中のクラスでObject3Dのサブクラスです。
インスタンス生成時、必要な引数は、何もありません。(nameは全て自動で付くので、明示的に付けたい場合以外は、無しで問題ありません)
Sprite3D(name:String = null)

SpriteTextureMaterialクラス

SpriteTextureMaterialはalternativa.engine3d.materialsパッケージの中にあるクラスで、マテリアルの一種ですが、Sprite3Dにのみ使える特殊なマテリアルです。逆に、他のマテリアルは、Sprite3Dには使う事ができません。(SpriteTextureMaterialの基本クラスであるSpriteMaterialは使用可能ですが、何も表示はできません。)
インスタンス作成時に以下の設定ができます。
SpriteTextureMaterial(texture:Texture, alpha:Number = 1, smooth:Boolean = false, blendMode:String, originX:Number = 0.5, originY:Number = 0.5)

texture:Texture, alpha:Number, smooth:Boolean, blendMode
TextureMaterialと同じ,

originX:Number, originY:Number
画像を表示する位置を指定できます。ただし単位はUVマッピングに基づく物です。

SpriteTextureMaterialをSprite3Dのマテリアルに設定する

Sprite3Dは、Meshと違いSurfaceを持っていませんので、SpriteTextureMaterialをSprite3Dのmaterialプロパティに直接代入して使用します。

sprite3d.material=new SpriteTextureMaterial(texture,1,false,BlendMode.NORMAL,0.5,0.5)

			//読み込んだ画像をBitmapDataにコピー
			var bmd:BitmapData=new BitmapData(loader.width,loader.height,true,0xFFFFFF);
			bmd.draw(loader);

			// Sprite3Dを作成します
			var sprite3d:Sprite3D = new Sprite3D();

			//読み込んだ画像のBitmapDataでTextureを作成
			var texture:Texture=new Texture(bmd)
			
			//SpriteTextureMaterialを作成して張り付ける
			sprite3d.material=new SpriteTextureMaterial(texture,1,false,BlendMode.NORMAL,0.5,0.5)
			template.scene.root.addChild(sprite3d);

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src

使用例

球体を表現するだけなら、Sprite3Dを使う方が早くてキレイだったりします。
なお、Tanki Online(Alternativa3Dを使ったオンライン対戦型MMO戦車ゲーム)の爆発処理もSprite3Dっぽいです。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src

Alternativa3Dが苦手なパーティクル処理をSprite3Dでがんばってみる

残念ながら、今の所Alternativa3Dはパーティクル処理が苦手です(Ver5.6.0現在)。
入門編2.マテリアルでも少し触れましたが、Alternativa3Dは空間の奥行きをBSPツリー法という方式で管理しております。これは、常にカメラからの可視領域において、全ての頂点を再帰的に凸分割し、陰面を非表示するという処理を行っており、Zソート法のようなポリゴン欠けも無く、カメラの可視領域に対するクリッピングも美しく、ビットマップのゆがみもほとんど無し。さらに描画速度もそれなりに速いという大変優れた物なのです・・・が、それも、全ての頂点数が大体1000以内まで(苦笑)

まー大抵どの3Dライブラリでもそうなのですが、頂点数が増えると確実に重くなります。
Alternativa3Dの場合特にそれが顕著で、頂点数1000~で20~40fps、それが2000になると6~15fps、3000を超えると、2~10fpsという始末です(マシンスペックにもよります)
Planeプリミティブ等で、40*40なんて分割数にしたらそれだけで、カクカクになってしまうのです。

というわけで、膨大な点を処理するパーティクル処理なんぞはとっても苦手であります。
Wonderflなどで、パーティクル処理の高速化などのノウハウ等が投稿されていたり、とてもすばらしいパーティクルエンジンstardustが公開されていても、オープンソースでは無いAlternativa3Dでは、ユーザーサイドからは何も出来ないのです

そんな、とっても悲しい状況なのですが、それでも何とかパーティクルっぽい事とかやりたいと考えたのが、このSprite3Dを利用したパーティクル処理です。まーそれでも1000の壁は越えられないんですけどね(泣)

それでも、以下2つのサンプルはSprite3Dの可能性を少し見せてくれている気がします。
そのうち実験編で、もう少し突っ込んで解説する予定です。

なお予測ではありますが、Ver7.0ではSpriteMaterialの派生クラスとしてMovieClipが扱えるようになるみたいです。また、Sprite3Dは、Zソート法にしBSPツリーから外す事で高速化できるようにするみたいです。
Sprite3DにMeshを入れ子し(これは実は今でも出来る)Sprite3DのみをZソート法で管理するなんてデモも
Alternativa3D platformのBlogでは公開されていましたので、非常にリリースが楽しみです。

Alternativa3D Sprite3Dを使っての、Particle処理 明日の為の第一歩 - wonderfl build flash online

 

↑↓同時に再生すると、速度が遅くなります。リロード、またはWonderfl上でご確認する事をお勧めします。

forked from: Alternativa3D Sprite3Dを使っての、Particle処理 明日の為の第2歩 - wonderfl build flash online

 

 

 

Menu

入門編

初級編

8. MovieClipMaterial

中級(インタラクティブ編)

1. インタラクティブなオブジェクト

2. 反応するモデルと反応しないモデル

3. サーフェースごとのマウスイベント

4. フェースごとのマウスイベント

中級(コントローラー編)

1. コントローラーとは?

2. コントローラーをカスタマイズ

3. 重力・衝突判定

4. LookAt

中級(カメラ&View編)

1. カメラZOOMとFOV

2. 複数のカメラとView

3. Viewのクリッピング

中級(メッシュ作成編)

1. 頂点を作成する

2. 面を作成する

3. 表面を作成する

4. UVを設定する

5. メッシュを作る

実践・応用編

1. 読み込んだ画像で絵本を作る

3. GoogleNexusOne

4. 3Dスロット

5. ルービックキューブ

実験編

1. 3dsの読み込みと操作

2. イラレで作ったpathを押し出す

3. 押し出しによるText3D

4. 自作のマテリアルクラスを作る

5. フラットシェーディングマテリアル

6. 衝突判定を利用した跳ね返り

7. Sprite3Dによるパーティクル表現

8. Sprite3Dでピクセルレンダー

9. Objectのグロー、ブラー