編集可能

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

※検証結果は次のブログ記事にまとめていますので、まずはこちらを参考ください。 http://ics-web.jp/lab/archives/201 HTML5のフレームワークでどれが最もパフォーマンスがいいのか、移動・回転・拡縮・透明度・親子構造を扱う条件のベンチマークテストで試してみた。 続きを読む
26
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 00:56:15
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 00:58:20
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 00:59:53
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 01:04:00
selflash @selflash

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

2013-04-10 01:07:25
エフ氏😇 @pakorepqu

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

2013-04-10 01:09:00
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 01:09:54
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 01:10:56
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 01:12:19
selflash @selflash

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

2013-04-10 01:14:12
エフ氏😇 @pakorepqu

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

2013-04-10 01:16:09
このツイートは権利者によって削除されています。
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 01:41:07
あるてい @rtsan

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

2013-04-10 01:41:49
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 01:48:10
あるてい @rtsan

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

2013-04-10 01:55:58
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 01:59:13
あるてい @rtsan

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

2013-04-10 02:09:45
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 02:12:27
t.shinsay @tshinsay

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

2013-04-10 07:09:23
t.shinsay @tshinsay

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

2013-04-10 07:12:25
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 12:03:48
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 20:09:34
池田 泰延 / Yasunobu Ikeda @clockmaker

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

2013-04-10 20:11:48
残りを読む(31)

コメント

たるたる @heporap 2013年4月11日
面白いまとめありがとうございます。enchant.jsしか使った事が無いので他のライブラリは誤解があるかもしれませんが、ActionScriptをJavaScriptに書き換える為のライブラリか、そうでないかという違いが大きいと思います。
0
たるたる @heporap 2013年4月11日
enchant.jsはゲームエンジンなのでMapのようなゲームらしい処理を作るのは非常に楽だと思います。また、ブラウザのDOMツリー処理をcanvasでエミュレートしている為、オブジェクトをユーザーイベントで個々に扱いやすいんじゃないかと思います。
0
池田 泰延 / Yasunobu Ikeda @clockmaker 2013年4月11日
コメントありがとうございます。今回はパフォーマンスのみテストしたので、実際にどのライブラリを使用するかは目的に合わせて選べば良いと考えています。 enchant.jsはゲーム開発の機能が豊富ですし、CreateJSは図形描画・マスクやフィルター機能・Flash Proとの連携が強みだと思います。 ところでProcessingを除いてどのライブラリもFlashのDisplayListツリーのAPIに似せて作られているので、比較的移植が楽でした。機会があればぜひ比較してみてくださいませ
0