Flash Stage3D(Starling)とWorkerを利用した流体パーティクルの表現

Flash Player 11.4で追加されたWorkerと、Stage3D（Starling）を利用して、たくさんの矢印が飛び交う流体パーティクルデモをリメイクしてみました。デモは次のURLから試せます。

• Demo (require Flash Player 11.4)
• Source (ZIP / Flash Builer 4.7 Archive)

以前、本ブログで次の記事で同様のでデモを作ったことがありましたが、その時はFlashのBitmapDataを活用する設計で作成していました。今回のデモでWorkerを使ったメリットと、Stage3Dを使ったメリットを紹介したいと思います。

• [Flashの高速化を試す]BitmapDataを配列に格納することで2〜3倍の高速化
• 矢印いっぱいのFlash高速化祭

ActionScript Workerの利用のメリット

ActionScript WorkerとはFlash Player 11.4から搭載されたマルチスレッドのような機能です（Javaのスレッドとは異なる機能）。バックグランドでもう一個独立したActionScriptの処理を走らせることができるので、次のようなメリットがあります。

• 1フレームを超えるような重たい処理を実行してもバックグランドで実行される
• メイン側で重たい処理を実行するとプチフリーズした状態になるが、上記の理由でWorkerで処理することでプチフリーズのような状態は解消できる
• 3Dモデルのパースや、画像処理など負荷の高い処理を扱うときにプチフリーズのような状態が起きやすいが、それが解消できる

今回のデモではフォースマップの作成をWorker（バックグランド）の処理とさせました。フォースマップの作成はパーリンノイズを使っているのですが、パーリンノイズは負荷の高い処理なのでWorkerを使わなければその時に流体パーティクルが一瞬止まったような現象が発生します。次のデモで確認すると、2秒ごとにプチフリーズが発生していると思います。

• Workerを使用していないデモ

Workerを利用することによってプチフリーズのような状態が解消できます。

Stage3Dの利用のメリット

今回はStage3D(GPU)で作成しているため、コンテンツの領域が広くても負荷が少なく60fpsで再生されています。ブラウザの幅を一杯に広げても滑らかに再生できるはずです。

Wonderflに投稿したのですが、最大40000個のパーティクルを表示しても60FPSを再生できています。

• Arrows using Starling – wonderfl build flash online

ちなみにFlash Player のデバッグ版だとリリースビルドされたSWFですら、Stage3Dはびっくりするほどパフォーマンスが下がります。ですので、このコンテンツを確認するときはリリース版のFlash Playerでご確認ください。デバッグ版のFlash Playerを使っているのはFlash開発者だけだと思いますが。

HTML5との比較

HTML5 Canvas (フレームワークにCreateJSを使用)とFlash(Starlingフレームワークを使用)とでパフォーマンスを比較してみました。

• HTML5版デモを再生 – 4000個
  ※IE 10やChrome 24やFirefox 18では初期化にすごく時間がかかります
• Flash版デモを再生 – 15000個
  ※Flash Player 11.4が必要)

HTML5版はSafari 6やChrome 24、IE 10だとなんとか表示できますが、Firefox 18だとガタガタです。ブラウザ毎にパフォーマンスに大きな違いがあるのが特徴かと思います。

Flashだと15000個ぐらいの表示でどのブラウザでも60fpsをキープできています。こういうパーティクルの表現はFlash・ActionScriptに一日の長があるようです。
※描画サイズなど違う条件でテストしているので（HTML5は固定サイズ、Flashは可変サイズ）正確な検証というわけではないので、目安程度に見て頂ければと思います。

もし結果に不満があるようでしたら、ぜひご指摘頂ければと思います。HTML5を最適化すればどのぐらい高速化できるのか、その結果のデモがあれば私も見てみたいです。