HTML5 canvasのブラウザ別描画処理速度の比較をパーティクルで。

2010年2月 9日 04:32

最近特に、Apple iPadが発表されるニュースより、AppleがFlashをどんどん淘汰していくような動きの方がよっぽど気になります。
Appleはどうやら HTML5を推進しているとのこと。 確かにAppleのサイトはだいぶ前からリッチコンテンツな部分にもJavaScriptを導入していましたね。
最初は「どっちも良い所あるから仕様をしっかりと見据えて使い分けるべき」と捉えていました。
でもどうやらHTML5のcanvasという要素が、Flashみたいな表現も可能ということで、色々調べてみたら、どうもスゴい所までいってるらしい。
で、色々と試していたんですが、やはりブラウザで動くわけなので、当然描画速度ってブラウザによって違うんじゃないかな?って思います。

どれに優劣を付ける訳じゃないけど、パフォーマンスがどんなものか知っておきたかった。 ついでにFlashでも作ってみた。

canvasで1000個のパーティクル

canvasの方はprocessing.jsを使って書きました、基本Javaベースで書くんですね、型の記述とかちょっと手惑いました。
1000個のパーティクルを、それぞれ移動距離をランダムに設定してランダムな向きに移動、 一気に1000個を動かすというものです。
ブラウザは今Mac環境で作ってますが、Firefox3.6, Safari4.0.4, Chrome4.0.249.49betaでそれぞれ確認しました。
結果、Safariが一番速い、ように見えました、Chromeでも同じ位だけど。
頑張れ、Firefox。ってかんじでした。
ところが、パーティクルを5000個に増やすともう、コマ送りのような重さ、とても動いてるという表現は無理でした。

で、Flashですが、全然問題ないです、やはりこのあたり、ブラウザと比較しちゃいけないんだろうけど、このあたりは断然Flashに軍配あり、といった感じでしょう。
一気に1000個から10万個に増やしても全くと言って良いほど処理落ちを感じさせないので、1000個でなんとかの状態のHTML5+canvasの描画APIは今後の課題になってくるんじゃないかな?と思います、Flashにとって代わる、というのであれば、ですが。

※【修正記事】 こういう場合はprocessing.jsを使わずに、フレームワークを使わないで書く方が結構高速に処理しました。補足記事はこちらです、惑わせてしまってすいません!

canvas用(processing.js使用)
Flash用(ActionScript 3.0使用)

Diarysリスト

siteInformation

info@akibahideki.com

カテゴリ
Author
秋葉秀樹

秋葉秀樹(アキバヒデキ)

DTP上がりのデザイナー
ノンプログラマー!
フリーランスのデザイナー。
IllustratorやPhotoshopを初代バージョンから使っているという事がウリ。
クリエイター育成機関などでお世話になり、先生として講義をしていたりします。