この情報は、ICS LABさんのブログで知りました。(FBの友人経由)
「iOS8」の新機能として「Safari」/「Chrome」ウエブブラウザに「WebGL」が搭載されましたことはご存知でしょうか?
「WebGL」は、「OpenGL」をウエブブラウザから利用する標準技術で、「WebGL」によってウエブブラウザ内のグラフィカル表現のパフォーマンスを向上させることができるそうです。
今回は、「WebGL」に対応したウエブブラウザを使うことで、どのぐらいのパフォーマンスが得られるのか、リンク先のブロガーさんが検証してくれたので、その検証結果をこのブログでも紹介しますね。
多くのパーティクル(粒子)を滑らかに表示できるかを検証したそうです。
パーティクルの数が多いほど、高性能であることを示しているそうです。(アップした動画参照)
検証に用いたのは、アップした動画内の画面左上から順に、次の端末となっているそうです。
① Xperia A (Android 4.1 / WebGLが無効)
② Xperia A (Android 4.2.2 / WebGLが有効)
③ iPhone 5 (iOS 7 / WebGLが無効)
④ iPhone 6 (iOS 8 / WebGLが有効)
⑤ iPhone 6 Plus (iOS 8 / WebGLが有効)
⑥ iPad mini (iOS 7 / WebGLが無効)
⑦ iPad mini Retina (iOS 8 / WebGLが有効)
「WebGL」が無効となっている端末は、低いスコアで動作が遅くなるものの、「WebGL」が有効の端末では、何倍ものスコアでもなめらかな動作となっていることがわかると思います。
同じ端末でも、OSのバージョンによって「WebGL」の利用可否が異なっており、「WebGL」が利用できる場合は、スコアが数倍になるということがわかったそうです。
(注意)
※スコアをあげていくなかで、性能限界と判断した端末はスコアの上昇を止めているそうです。
※①の端末のスコアが途中からズレてしまったのは手違いとなります。(既に性能限界を超えているので、結果はほぼ変わらないはずです…)
ビデオで記録した端末以外にも、様々な端末を用いて検証したそうです。
その結果は、アップした表の通りになったそうです。
(スコアが高いほど、パフォーマンスが高いことを示します。)
図をみてわかるように、「iOS8」の「 Safari」のパフォーマンスが群を抜いて良好であることが明らかにわかりますね!!!
なお、詳しい詳細結果は、次の資料をご覧ください。
検証に利用したデモは、次の仕様となっているそうです。
◉CreateJS(WebGL対応版のEaselJS)を利用
◉エンターフレーム処理にはRequestAnimationFrameを使用
◉「+」ボタンを押していき、FPSが40以上をキープできる限界のオブジェクトの数値をスコアとする
◉WebGL未対応の環境では自動的にHTML5 Canvas(CanvasRenderingContext2D)にフォールバックする
◉High DPI(高解像度、例:Retina Display)に対応させた場合と、対応させなかった場合のパフォーマンスの差も検証する
検証に用いたデモは、リンク先の動画で再生して試すことができるそうなので、そちらを参照してください。
検証の結果は、以下の通りだそうです。
◉iOS8のWebGLはSafari/Chromeともに挙動が安定しており、パフォーマンスも良好
◉SafariはChromeよりWebGLの描画パフォーマンスが3倍ほど高いスコアが得られた。HTML5 Canvasにおいても同じ傾向の結果が得られた
◉Retina Display等の高解像度(High DPI)対応をしても、フレームレートへの影響はほとんど無かった。WebGLでは積極的に高解像度対応で構築するのが良さそうだ
◉一世代前のiPhone 5sと新モデルのiPhone 6/6 Plusのスコアがほとんど変わらないのが面白い結果だった。プロセッサの性能が上がった分が、広くなった画面サイズのレンダリングに回っているのかもしれない。
◉同じ端末でもiOS7からiOS8にアップデートすると、WebGLが有効になるため高いスコアが得られる (iPad3の結果)
◉Androidは機種やブラウザによっては以前からWebGLに対応していたが、全てのAndroidブラウザでWebGLが対応しているわけではない
◉AndroidでのWebGLのパフォーマンスは機種やブラウザによって大きく異なる
リンク先のブロガーさんの考察は、以下の通りだそうです。
「iOS」のブラウザは、「WebGL」対応以前からパフォーマンスが良かったのですが、「WebGL」に対応したことで、パフォーマンスが飛び抜けて向上しました。
これだけパフォーマンスがよければ、スマホのネイティブアプリに匹敵するグラフィカル表現をスマートフォンのブラウザで展開することが可能になるのではないでしょうか?
当ブログでは、他にも様々な視点からHTML5などの技術のパフォーマンスを検証しています。
別の検証記事も合わせて把握することで、開発時に役立てることができるはずです。
関連記事もあわせて参照してくださいとのこと。
このような結果を見せられると、ウエブブラウザの進化が凄いと驚くばかりですね!!!
ウエブアプリの今後の対応が楽しみですね!
またね。

