②WebGLでの同時実行性能の比較

続いて、WebGLで検証してみます。WebGLはGPUを活用するため描画負荷が極めて低く、DOMよりもはるかに多くのオブジェクトを表示できます。描画負荷が少なくなるため、アニメーションライブラリの計算負荷がDOM版の検証もよりも顕著にあらわれるはずです。

WebGLでは次の結果となりました。この検証では、40,000ドットを同時に動かしたときの、実行フレームレートの値をスコアとしてます。

TweenMaxが最も性能がよく、次にTweenJSとTween.jsが続きました。Anime.jsはWebGL用途では性能的に厳しいことがわかりました。

※WebGLに対応していない技術(jQuery、Velocity.js、Web Animations API、CSS Animation)は検証から除外してます
※WebGLの制御にはPIXI.js v4を利用しています
※ FlashはWebGLの類似技術を使っているため、参考値として掲載してます

まとめ:パフォーマンスはTweenMaxが最強だが

今回は性能比較を中心として紹介しました。パフォーマンスだけでみればTweenMaxが有力な選択肢ですが、前回の記事で紹介したようにライセンスが独自であるため用途が限られるかもしれません。ゲームを作るのか、プログラミングアートを作るのか、ウェブサイトのマイクロインタラクションを作るのか、・・・用途によって適したアニメーションライブラリは異なりますので、長所短所を見極めて利用するのがいいでしょう。

ICS MEDIAでは、今までもHTML5関連の検証データとして「描画系JSライブラリの性能比較」や「スマホブラウザでのWebGL描画性能の検証」を公開していました。今後も技術検証を続けていきますので、ICS MEDIAを引き続きチェックくださいませ。

※補足:検証はiMac (Retina 5K, 27-inch, Late 2015)で、macOS Sierra 10.12.3、Chrome 56を利用して検証しています
※今回の検証はFlashのトゥイーンライブラリ「BetweenAS3」の検証コードを参照しました