スマートフォン向けのウェブコンテンツでもWebGLを採用すれば高速な描画性能が得られます。例えば、ゲームやデータビジュアライゼーション、3D表示、広告向けスペシャルコンテンツといった分野でWebGLが役立つでしょう。2014年にリリースされたiOS 8からSafari/ChromeブラウザにWebGLが搭載され、Androidも含め今やほとんどのスマートフォンでWebGLが利用可能といっても差し支えない状況です。この記事ではスマートフォンにおけるWebGLの描画性能を検証し、その結果を紹介します。

動作検証ビデオで見る各種スマートフォンの性能差

多くのパーティクル(粒子)を大量に表示することで描画性能を検証しました。パーティクルの数が多いほど高性能であることを示します。

ビデオ撮影の検証に用いたのは画面左上から順に次の端末となっています。検証時期(記事執筆時)は2014年のため、今となっては数世代前の古い端末が多いことはご了承ください。

  • ① 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が有効の端末では滑らかな動作であることが確認できます。同じ端末でもOSのバージョンによってWebGLの利用可否が異なっており、WebGLが利用できる場合は無効の場合に比べてスコアが数倍になるとことがわかりました。

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

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

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

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

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

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

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

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

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

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

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