2014年にリリースされたiOS 8から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が利用できる場合はスコアが数倍になるということがわかりました。

※スコアをあげていくなかで性能限界と判断した端末はスコアの上昇を止めています。
※①の端末のスコアが途中からズレてしまったのは手違いとなります。(既に性能限界を超えているので、結果はほぼ変わらないはずです…)

世代と利用テクノロジーの違いからみる端末の検証結果

ビデオで記録した端末以外にも様々な端末を用いて検証しました。結果は次の表の通りになっています(スコアが高いほどパフォーマンスが高いことを示します)。iOS 8以上のSafariのパフォーマンスが群を抜いて良好であることがわかります。

▼ 各種スマートフォンでのスコア一覧。iOSやAndroidの各世代の性能差を確認できます。

各種スマートフォンにおけるWebGLとHTML5 Canvasのスコア検証結果

▼ iOS端末(iPhone / iPad)での各種ブラウザでのスコア一覧。ブラウザごとの性能差を確認できます。

iPhoneにおけるWebGLとHTML5 Canvasのスコア検証結果

▼ Android端末での各種ブラウザでのスコア一覧。ブラウザごとの性能差を確認できます。

AndroidにおけるWebGLとHTML5 Canvasのスコア検証結果

詳しい詳細結果は次の検証資料に掲載していますのでご覧ください。

次のページでは検証方法の説明と、結果の分析を行います。