Flash Player 11の新機能Stage3Dに対応した3Dライブラリ「Away3D ver 4.0」の作例紹介。前回紹介したパーティクル表現とフィルター表現を組み合わせて作ってみました。

• demo (Require Flash Player 11.1)
• source (FlashDevelop用ファイル一式)

旧来のFlash Playerとのパフォーマンスの違い

こちらの作例、どこかで見たことがあるかもしれませんが、これは1年前にFlash Player 10で実装したPV3D演出サンプルNo.09:Spiral Particlesのデモ(記事の後半のデモ)を移植したものです。前回のFlash Player 10のものと今回のFlash Player 11で作った両者のデモを比較してみると、フレームワークの機能の充実度もありますが、Flash PlayerがGPUに対応したことで表現できることが明らかに向上したように思います。

▼Flash Player 10で作ったデモ (Papervision3D 2.1 + Stardust 1.2)

▼Flash Player 11で作ったデモ (Away3D 4.0 + Flint 4.0.1)

実装方法の紹介

ちなみに、こちらのデモは次の２つの記事で紹介した機能を組み合わせて使っています。

• Stage3D対応のAway3D 4.0 – パーティクル表現
• Stage3D対応のAway3D 4.0 – フィルター(ポストエフェクト)

パーティクル表現だけれであればAlternativa3D 8.17.0+Flint 4.0.1の組み合わせでもできるのですが、Away3D 4.0のフィルター効果によって全体的に光が膨張するような演出に仕上げることができました。Away3Dは自由度が高くて非常に便利なフレームワークです。

まだまだAway3D 4.0には面白い機能が備わっているようなので、年末・年始に勉強してみようかと思います。

追記

せっかくなので、Alternativa3D版のパーティクルデモも作成してみました。

• Demo Alternativa3D 8.17.0 Version

Flintは複数のフレームワークに対応しているので移植は簡単でしたが、Alternativa3D版ではカラー効果が動作しないためモノクロームな見栄えになってしまいました。何かしら対処方法があるかもしれませんが、結構作り込みが必要な気がします。

参考記事

• ayato@web – ３次元空間におけるパスの軌跡

世間はクリスマスかもしれませんが、今日もFlash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver4」の紹介。今回はシンプルな3Dのパーティクル表現を試してみました。

• demo (Require Flash Player 11.1)
• source (Away3D 4.0 alpha / Flint 4.0.1)
  

パーティクル表現には、Flint Particlesというパーティクルライブラリを使っています。本ブログでは以前、パーティクル表現のためのAS3ライブラリ「Stardust」を紹介したことがありましたが、FlintはStardustのベースになったライブラリです。Flintは昔から開発が進んでおり、Stage3Dの各種フレームワーク(Away3D, Alternativa3D, Flare3D, Starling)にも対応しているなど、今も積極的にコミットされています。

ということで、Stage3D対応のAway3D 4.0 alphaとFlintとの組み合わせはどんなものかと、以前作ったPapervision3D + Stardustのデモ「[Stardust] 3Dオブジェクトの軌道にパーティクルをつける」を移植してみました。

感触としては、

• FlintがStardustとかなり似たAPIなので使いやすい(とはいえ、クラス数が多く制御としては難しいライブラリの部類に入ると思います)
• 今回のデモでは使っていませんが、パーティクル別にスケール・アルファ・色の加工ができ様々な表現が試せる
• オブジェクトのキャッシュ機構が搭載されていて、パフォーマンス軽減の工夫がされている
• パーティクルの個数を減らせば、Stage3DのCPUモードでもそれなりに動く(描画より計算にコストがかかっている印象)

という感じで、使い方さえ習得すれば結構な表現を試せそうな印象を持ちました。

次回は、Away3Dのフィルター機能とパーティクル機能を組み合わせたデモを紹介したいと思います。

引き続きFlash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver4」の紹介。今回は定番の被写界深度表現を試してみました。

• demo (Require Flash Player 11.1)
• source (with Away3D 4.0 alpha)

前回紹介したとおりAway3Dには「DepthOfFieldBlur3D」というフィルター機能が備わっています。ただ、それは癖があり使いにくいので、このデモでは自前の処理にて実装しています。被写界深度表現の作り方については本ブログで既に紹介したことがありますが(下記リンク参照)、改めてAway3Dでの実装方法を紹介します。

• PaperVision3D 2.0で被写界深度が実現できたよ

ビットマップキャッシュの作成

ブラーフィルター(ぼかし)はリアルタイムに実行すると処理負荷が大きくなるので、予めぼかしを適用したビットマップを作成しておきます。次のスプライトシートは例ですが、ぼかしの強弱をつけた複数枚の画像を連番で用意するということが想像できればOKです。

ActionScriptでは、次のようなfor文を使って、配列にキャッシュ画像を保持しておくと便利でしょう。

for (var i:int = 0; i < ブラーの回数; i++)
{
	var blurFilter:BlurFilter = new BlurFilter(i, i, 4);
	var bmd:BitmapData = new BitmapData(128, 128, true, 0xFF000000);
	bmd.draw(orijinal);
	bmd.applyFilter(bmd, bmd.rect, new Point(), blurFilter);
	// save
	blurs[i] = bmd;
}

ビルボードの作成

ビルボードというのは、大雑把に言うと3D表現で常に正面を向いたオブジェクトのことを指します。ビルボードにしてしまうと、3D上の角度は表現できなくなりますが、そのかわりに3D描画や計算の負荷を抑えることができるので、大量にオブジェクトを表示したい場合には有効な手法です。

Away3Dでは、「Sprite3D」クラスがその機能にあたるので、これをインスタンス化して3D空間(scene)に追加しておきます。

var ball:Sprite3D = new Sprite3D(マテリアル, 横幅, 高さ);
scene.addChild(ball);

カメラとオブジェクトの距離の計算

被写界深度を計算するうえで、カメラと個々のオブジェクトとの距離の計算が必要になります。Away3DではObject3D.positionプロパティーにてローカル座標を、Object3D.scenePositionでワールド座標を取得できます。座標はFlash標準のflash.geom.Vector3D型なので、次のメソッドを呼び出せば、3D空間内の2点間の距離を計算できます。

var distance:Number = Vector3D.distance(camera.position, p.scenePosition);

ぼかしの適用

var distance:Number = Math.abs(Vector3D.distance(camera.position, p.position) - FOCUS_POSITION);
var blurVal:int = Math.floor((distance / FOCUS_RANGE) * BLUR_DEPTH);
blurVal = Math.max(0, Math.min(BLUR_DEPTH - 1, blurVal));

そしてオブジェクトのmaterialプロパティーに新しいマテリアルを割り当てます。Away3D 4.0ではマテリアルの動的な差し替えはマテリアルオブジェクトの参照を差し替える形になります。

var p = particles[i];
var material = materials[blurVal]
p.material = material;

昨日の記事に続いてFlash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver4」の紹介。今回はフィルター機能を使ったデモを作成しました。プルダウンでエフェクトの種類を選べるので、試してみてください。

• demo (Require Flash Player 11.1)
• source (with Away3D 4.0 alpha)

Away3Dにはフィルタ機能が備わっていて、これはStage3D側で処理するポストエフェクトの部類になります。備わっているフィルター機能は次の通り。

▼RadialBlurFilter3D (放射状ぼかし)

▼MotionBlurFilter3D (モーションブラー)

※モーションブラーはfumixさんが以前Papervision3Dを使って紹介していたこともありました。
MOTION BLUR DEMO 001 (PV3D) – wonderfl build flash online
Away3D 4.0ではStage3D側でフィルター機能を使うことができるので、処理負荷もほとんど無視できるレベルになっています

▼BlurFilter3D (ぼかし)

▼BloomFilter3D (白くする効果)

▼DepthOfFieldFilter3D (被写界深度)

※DepthOfFieldFilter3Dは少し特殊なので、別のデモにて試しています。

• demo (Require Flash Player 11.1)
• source (with Away3D 4.0 alpha)

使い方

実装方法も至ってシンプルでView3Dオブジェクトのfilter3dプロパティーに、使いたいフィルターをセットするだけです。このあたりはFlashの通常のディスプレイオブジェクトへのフィルター適用方法と似ています。

var view = new View3D();
view.filters3d = [new BlurFilter3D(16, 16)]; // ←ココ
addChild(view);

このフィルタ機能は実はカスタマイズすることができて、9ballsyndromeさんが既にその作り方を日本語を紹介しています。その場合は、AGALを直接書くことになるので難易度が高いかもしれませんが。

• Away3D 4.0 カスタムフィルタの作り方(後編)
• Away3D 4.0 カスタムフィルタの作り方(前編)

Away3Dはこういうフィルター機能が備わっているなど、機能の華やかさでは他のライブラリに比べてリードしているように思います。

次回は定番の被写界深度表現について紹介します。

Flash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver 4」を試してみました。これはAway3Dに標準搭載されている影の表現を使ったデモです。

• demo (Require Flash Player 11.1)
• source (with Away3D 4.0 alpha)

ダイナミックシャドー（動的な影）については、3年前に「Papervision3D演出サンプルNo.05:Shadow Cubes」という記事でPapervision3Dを用いて試したことがありました。その時はリアルタイムな影の計算は処理負荷のコストが高く、実装方法もアクロバティックなテクニックが必要だったため、案件で使いづらいという印象を持ちました。

デモを見ればお分かりのとおり、今年になってFlash PlayerがフルにGPUに対応したことで、処理負荷の点は解決しました。では実装方法の難易度についてですが、Away3D 4.0 alphaには素晴らしいことにダイナミックシャドーが標準搭載されていて、コードもシンプルです。実際のコードを紹介すると次のとおり。

var light = new DirectionalLight();
scene.addChild(light);

var material = new ColorMaterial(0xFFFFFF);
material.shadowMethod = new SoftShadowMapMethod(light); // ←ココ(1)
material.lights = [light]; // ←ココ(2)

var plane = new Plane(material);
plane.castsShadows = true; // ←ココ(3)
scene.addChild(plane);

ポイントとしては(1)で影の質感を設定、(2)で影響を受ける照明を設定（複数の指定が可能）、(3)で3Dオブジェに対して影の影響を受けるかどうかを設定ということになります。

このブログではStage3D対応の3DライブラリとしてAlternativa3D ver8を主に紹介してきましたが、ここに来てAway3Dが実はかなり優れていることに気づきました。主にいいと思ったのは次の点においてです。

• Flash界隈で人気の3DライブラリPapervision3Dと似たAPI (Away3DはPapervision3Dの派生ライブラリ)
• プリミティブオブジェクトやマテリアルの種類が豊富
• フィルターやフォグ、ダイナミックシャドー、3Dテキストなど機能が豊富
• 物理演算やパーティクルなどサードパーティのライブラリも強力
• Alternativa3Dに比べてシンプルにコードを記述できる
• オープンソースである

この他にもオレンジさんの勉強会の資料Flashup 第12回発表資料 「最新のFlash3Dを使ってコンテンツを作ってみようAway3D入門講座」にAway3Dの機能が詳しく掲載されています。

処理パフォーマンスはAlternativa3DやFlare3Dのほうが若干優れている印象ですが、GPU支援を受けるのであれば処理パフォーマンスは気にならないかなとも思いました。

Away3Dについては作り貯めたデモが幾つかあるので、数回に分けてブログで紹介したいと思います。

Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」を使ってデモを作ってみました。AwayPhysics は名前のとおり Away3D 4.0 alpha (Stage3D版) 対応の物理演算エンジンで、今までの3D物理演算ライブラリよりも高速に動作します。

[立方体バージョン 100個]

• Demo
• Source

[球体バージョン 100個]

• Demo
• Source

以前「ActionScript 3.0 での 3D 物理演算ライブラリjiglibflash」という記事で JigLib を紹介したことがありましたが、次の記事によると jiglib よりも AwayPhysics のほうが高速とのこと。JigLib と AwayPhysics との比較デモが紹介されています。

• Away3D 4.0 jiglib vs Bullet « DevJamMemo

冒頭のデモは、note.xさんの次の記事と比較すると JigLib (Flash Player 10 向け)との動作速度の違いが掴めるかも。

• note.x | [Away3D] JigLibFlash for Away3D

AwayPhysics は業界標準の Bullet エンジンを Alchemy (アルケミー)で固めており、API は JibLib に似たものになっているため今まで 3D で物理演算をやっていた方にとっては比較的とっつきやすいライブラリです。まだ開発途中なのでAPIに変更があるかもしれませんが、動作速度の点で使い物にならなかった JigLib よりは活路が見いだせそうな気がします。

ちなみにexamplesのデモですが、カーゲームにも利用できるようです。今後のライブラリの発展が楽しみです。

• VehicleTerrainTest

毎月コンスタントに大阪で開催されている Flash の勉強会大阪てらこに参加してきました。今回は HIGE5 というタイトルで、総計 25 人ぐらいの方が参加され約 5 時間にわたり各自まとめてきた Flash の面白いことについて発表し合いました。

私は、Flash の各種 3D エンジンの比較レポートと、この日のために準備した(といっても 1 日ぐらいで作った)新種の 3D ライブラリ「Cross3D」を発表しました。Cross3Dとは、ActionScript 3.0 の各種 3D エンジンを同じソースコードで動作させるブリッジライブラリです。発表資料は Acrobat.com にアップしていますので、よろしければご覧ください。

なお、資料中にて紹介しているデモは次の URL でご覧頂けます。

7*7*7=343個の直方体を表示したときのFPS比較

• Papervision3D 2.1
• Away3D 3.4
• Alternativa3D 5.6
• Away3D Lite

Cross3D で動作エンジンを切り替えた比較

• Papervision3D Engine 使用
• Away3D Engine 使用
• Alternativa3D Engine 使用

※上の3つのデモは設定を切り替えただけで、同一のソースコードで動作しています。エンジンの違いとして、実行時 FPS は PV3D が一番早いですが、Alternativa3D はオブジェクトが重なったときのポリゴン欠けに一番強いことが分かります。

Cross3D は現時点では「とりあえず動く」レベルのライブラリですが Spark Project にコミットしておきました。もし興味があれば SVN を使ってダウンロードしてみてくださいませ。ただ私自身開発に割く時間をなかなか確保できないのでガッツリ作り込めるのは春から夏にかけてになると思います。というわけで、共同開発者を絶賛募集中でもあります。

• Cross3D – Spark project

てら子のレポートは次のブログに詳しくまとめられていますので、詳しく知りたい方は以下のURLもどうぞ。

• 大阪てら子 29 「HIGE5」に行ってきました | StudyLog | ra66it
• Shift×Style×Blog » 大阪てら子 29 「HIGE5」の参加レポート
• #teraco – Twitter Search

#余談ですが、大阪てらこで nitoyon 先生にお会いでき、ホッテントリのテクニックを教授してもらいました。やったぁ！

Volkswagen

フォルクスワーゲンのプロモーションサイト。新鋭の3Dエンジンを使っていることもあり、質感の高さに驚かされます。3DエンジンはAlternativa3D。

iQ – Vertual Test Drive

iQのテストドライブができるサイト。3DエンジンはAway3DかPV3D(PV3DのブログではPV3Dだと紹介されてるし、Away3DのブログではAway3Dと紹介されているのでどちらか不明)。

Honda | エコグランプリ | Formula E

ホンダのエコな走りがテーマのカーゲーム。スピードゲームではなく燃費がよくなるように走らすのがポイントのゲーム。3Dエンジンは不明。

※追記9/17(木) 3DエンジンはFlash 10の機能を利用した独自エンジンとのことです。(ウェブデザイニング10月号より)

play > smart

smartという車のプロモーションサイト。車体のデザインをして走らせることができます。3Dエンジンは不明。国内向けのサイトはコンセプトもわかりやすいですね。

carlosulloa.com

3Dで車を動かし出した出始めの頃の作品。3DエンジンはPapervision3D。

脳の中の風船 | レースゲーム制作記

レースゲームの制作日記。ステップごとに紹介されているので、どうやってFlashの3Dカーゲームを開発するか順を追って流れがつかめます。3DエンジンはPapervision3D。

note.x | Away3D – Studies #05

note.xのrectさんのデモ。物理演算ライブラリJigLibを使用していて、衝突時の細かい演出が興味深いです(ドリフトしたり、ひっくり返ったり、コーンを飛ばしたり)。3DエンジンはAway3D。

F MEGA TEST (追記)

このデモはPV3Dのカーゲームレースで、国内だと一番早かったという情報を頂きました。開発者のブログはこちら。3DエンジンはPapervision3D。

他にも事例や、使用している3Dエンジンがわかりましたらぜひ教えてくださいませ。

Flashの3DライブラリであるAway3Dの話題。前回の習作に引き続き、今回もPapervision3Dで作成したデモを移植してみました。

• demo ( require Flash Player 10)
• source (Document Class)

ついでに、このデモについてはAlternativa3Dでも作っていたので、そちらもアップしてみました。(Alternativa3Dだけ使いこなせてなくてしょぼいデモで申し訳ないです)

• demo ( require Flash Player 10)
• source (Document Class)

3Dライブラリの比較

このデモを作っていて思い始めたのは、Away3DやAlternativa3DよりもPapervision3Dのほうが高速なのでは、ということです。

同じデモでもPV3Dは球面を525個、Away3Dは200個、Alternativa3Dは50個です。同じ数を配置すると後者二つのライブラリではFPSが1桁台まで下がってしまいます。

ただ、Alternativa3Dについてはディフォルトでポリゴン交差問題の回避ロジック(PV3DやAway3DのQuadrantRenderEngine)が働いているので対等のデモとは言えない点だけ補足しておきます。

Twitterでのコメント

この結果について不思議に思ってTwitterでつぶやいてみたところ貴重な意見を頂くことができました。

• Twitter / rect: @clockmaker 同じコードのパフォーマンス比 …
• Twitter / UENO Kenichi: @clockmaker it maybe true. …
• Twitter / Junji Suzuki: @clockmaker うちの環境で比較したらAwa …
• Twitter / Jin Saburi: @bma_japan ＠clockmaker ただ、 …
• Twitter / Junji Suzuki: @saburicom @clockmaker GPU …

(勝手にまとめてしまったので、削除希望がありましたらコメントかtwitterでレスくださいませ)

結論としては同じコードの比較だとPV3DのほうがAway3Dよりも早いケースがあるが、3Dのロジックは複雑でライブラリに得手不得手があるので一概に言えない、と言ったところでしょうか。

確かに上の比較ではAlternativa3Dは散々ですが、こちらのデモは圧倒的だったり、Away3Dは完成度の高いプロモーションサイトでも採用されたりしています(こちらとかこちらとか)。

ちなみにPV3Dの中の人である@UnitZeroOneの目に触れることができたようで、JAS(JActionScripters)ではありませんが、なんちゃって英語ブログをやっててよかったです。

Flashの3Dライブラリ「Away3D」を勉強してみようと思い、Papervision3Dで作成したデモ「細切れフォトグラフ」をAway3Dに移植してみました。

• demo (require Flash Player 10)
• source (Flash Develop Project)

デモ自体は移植なんで面白くとも何でもないのですが、同じものを作っているならパフォーマンスを比較したくなるのが人の常。比較するのはAway3DとPapervision3Dとネイティブ3D。3Dオブジェクトの数を上のデモの4倍となる1200に設定して試してみたいと思います。

各種ライブラリのパフォーマンス比較デモ

Away3D 3.3.3はFlash 10対応されており、ちらっとソースコード覗いた限りではVectorなどが使われたソースコードとなっています。対するPV3Dは2.0 Greate White のリビジョン883。これはまだFlash 9対応のライブラリです。果たして結果は…

• Away3D
• Papervision3D
• Flash 10 ネイティブ3D

結果

左側にでているStatsと呼ばれる部分のFPSの数値が高いほど滑らかに再生できているという指標になります。補足として、上のキャプチャは「瞬間値」という点と、Flash 10 Native 3Dに関してはカメラもZソートすら用意していないので全く対等の比較ではないという点にご注意ください。

Away3Dの結果がよろしくなかったのは納得がいかないのですが、もしかしたら3Dをより精度高くレンダリングするためのアルゴリズムがあり、それがパフォーマンスを消費するため逆にFPSが落ちている可能性もあります。もしこの点について検証頂ける方がいらしたらソースコードは公開してますので確認頂けると幸いです(ソースコードは上のリンクからダウンロードできます)。

3Dライブラリの比較は今後の当ブログの課題として、検証していきたいと思います。