HTML5フレームワークにおける表示オブジェクトのパフォーマンス検証

池田 泰延 @clockmaker

HTML5のフレームワークのパフォーマンスが気になったので、ちょっとしたベンチマークテストを作ってみました。まずは定番のCreateJSから。 http://t.co/voaQScx7d1 #html5jp

池田 泰延 @clockmaker

続いて DeNA さんの Arctic.js 。CreateJSと同じぐらいパフォーマンスがでてます http://t.co/tLcXd0Cfrk #html5jp

池田 泰延 @clockmaker

国内で注目を集めている enchant.js については CreateJS の半分くらいのパフォーマンス。ややがっかりなレベル。 http://t.co/AA6utBchlU #html5jp

池田 泰延 @clockmaker

念のためFlash (Starling) でも同じパフォーマンステストを試したらCreateJSの2倍以上のオブジェクトを表示しても余裕の60fps. http://t.co/OTOHvig49V #html5jp

selflash @selflash

@clockmaker 200個まで増やしましたが Arctic.jsが52FPS、CreateJSが41FPSくらいでした。 Win7+Chorome ver26.0.1410.43 m ですー。

Ararara @pakorepqu

@clockmaker 興味深い結果ですね！只今AIRからHTML5などへの移植を検討しておりましたのでとても参考になりました。 個人的に、enchant.jsは3Dもお手軽に扱えることが大きな利点だと思います。

池田 泰延 @clockmaker

さきほどのテストは何の最適化もしていない状態で、親子構造を使った場合、どのくらい多くのオブジェクトを表示できるか試してみたものです。それぞれのフレームワークに最適化オプションがあると思うので単純比較はできませんが。。ちかいうちにブログに検証結果をまとめたいと思います。

池田 泰延 @clockmaker

@selflash 情報ありがとうございます！ Arctic.js は構造がシンプルなので、CreateJSより計算負荷が少なくパフォーマンスが良かったのかもしれません。

池田 泰延 @clockmaker

@pakorepqu 確かにenchant.jsは物理演算や3Dが使いやすいように設計されているので、実際にどのフレームワークを使うかは目的に併せて選べばよいと思っていますー

selflash @selflash

@clockmaker フレームワークとして誰でも使いやすく汎用的にしようとすればする程、パフォーマンスとを天秤にかけないといけないのでフレームワーク作りって悩ましいですよね、、 ずっとCreateJSとenchant.jsを天秤にかけていたので凄く参考になりました！

ひろゆき＠にゃあプロジェクト @ProjectNya

@selflash @clockmaker ブラウザによって負荷に違いが？

Ararara @pakorepqu

@clockmaker いつもご返答ありがとうございます。どうやら私は池田さんのポストを見ると勉強意欲が掻き立てられるようです。 CreateJSはほとんど試したことがなかったので、また記事を参考にさせて頂きますね！

池田 泰延 @clockmaker

@sidestepism ご返信ありがとうございます。機能が充実している分、親子構造の計算で遅くなっている可能性がありますよね。私のほうでもいろいろ試してみます。

あるてい @rtsan

@clockmaker 現状のmasterブランチにおけるframe制御周りのbugfixが反映されていなくて34までしかでないようです。developのソースをビルドして実行してみたところ56fpsくらいになりました。

池田 泰延 @clockmaker

@rtsan おぉ、そういう事情があったのですね！ブログにまとめる時はその点も留意するようにします。

あるてい @rtsan

@clockmaker masterの方にもbugfixを反映しましたので現在のバージョンでは問題ないと思われます

池田 泰延 @clockmaker

@rtsan さっそくありがとうございます！！差し替えて再度試してみたいと思います！

あるてい @rtsan

@clockmaker お手数おかけして申し訳ありません... パフォーマンステストについてですが、スケーリングも含むケースだとどう変わってくるのかちょっと気になります

池田 泰延 @clockmaker

@rtsan 了解です！スケーリングもあわせて試してみます。夜分遅くにありがとうございました！

t.shinsay @tshinsay

@clockmaker おはようございます！Starling比較してらっしゃったので、Pixi.jsのWebGLモードも比較してみると楽しいかもです！！

t.shinsay @tshinsay

@clockmaker CAATというフルスタックのライブラリもWebGL対応してますので、よろしければ！

池田 泰延 @clockmaker

@tshinsay 情報ありがとうございます！ WebGL系のテストもおこなってみたいと思います！

池田 泰延 @clockmaker

昨晩投稿した enchant.js のパフォーマンステストですが、最新のmasterブランチを使ったものに変更しました。 http://t.co/AA6utBchlU #html5jp

池田 泰延 @clockmaker

また比較用に Pixi.js のパフォーマンステストも作ったのでシェアします。他JSフレームワークとの比較のためにWebGLではなくCanvasRendererを使っています。 http://t.co/2BZ5aKtErN #html5jp