2013年7月26日金曜日

スマートフォンブラウザのWebGL対応状況調査(2013年7月版)

皆様、ごきげんよう。
GClueの下っ端社員の☆です。

スマートフォンでWebGLをやる前に

皆さんは、WebGLをご存知ですか?



 WebGLは、ブラウザ上でウェブブラウザで3Dコンピュータグラフィックスを表示させるための標準仕様のこと。OpenGL2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた3Dグラフィックスを表示可能にする。技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。

WebGLはHTMLのcanvas要素を使っている。

(Wikipediaより




つまりは、ブラウザでOpenGL ES 2.0できるよ!ってことですね。
それによって、ブラウザ上で3Dがグリグリ動くようなゲームが作れるわけですね。
それが、PCブラウザ上だけに限らず、スマートフォンのブラウザ上でもできるようになってきていますよ!
スマートフォンのブラウザ上でのWebGLの対応状況について、今回調べてみたので、その結果をご報告する。
そして、ゲームには音が必要ですよね?
HTML5には、高度な音声ライブラリとして、WebAudioというものがある。
これを使えば、ネイティブ並みの音声出力が可能となり、フィルタをかけたり、音声を合成させたりなどのことがJavaScriptで行うことができる。
これの対応状況についても見て行きたいと思う。

調査方法

まず、スマートフォンのJavascriptとHTML5のスコアを測りたいと思う。Javascriptは、GoogleのOctaneを、HTML5についてはThe HTML5 testを使用する。
WebGLについては、うちの会社のロゴをフェードインで表示されるという簡単なものを作成した。
以下のような感じで表示される。
 今回は、WebGLが有効かどうかを確認するだけの目的のため、このような簡単なデモアプリにした。WebGLが対応していない端末では、WebGLを利用するためのContextが取得できないため、何も表示されていない。

次に、WebAudioについての調査ですが、表示される画像をタッチするとWebAudioで読み込んだ音が鳴る。そのソースコードの一部は以下のようになっている。
画像をタッチしたときのリスナーで、上記の「playSound」メソッドを呼び出すようにしした。
 これらの動作確認は、Cloud9上で作成し、MacBookPro上のChromeで動作確認することを確認した。

 chromeの場合、chrome://flagsでWebGLとWebAudioを有効にしているものとする。

測定結果

 測定結果は以下のようになる。比較としてMacBookPro上のブラウザのスコアも測定してみた。
端末名ブラウザOSバージョンOctaneスコアHTML5 testWeGL対応WebAudio対応備考
MacBookProSafariMac OS X 10.8.44603393wavしか再生できない
MacBookProChromeMac OS X 10.8.49450463mp3が再生できない
MacBookProFirefoxMac OS X 10.8.45230410×
iPhone4Safari5.1.1297344××
iPhone4Chrome5.1.1105344××
iPadMiniSafari6857386××
iPadMiniChrome6206386××
Nexus7Chrome4.2.21950430
Nexus7Firefox4.2.21605422
Nexus7Chrome4.31709410×chrome://flagsで、WebAudioの設定項目がなくなってしまった。
Nexus7Firefox4.31677422×
XperiaZ標準ブラウザ4.1.21126345×
XperiaZChrome4.1.21787430
XperiaZFirefox4.1.21286422×
HTC One標準ブラウザ4.1.22247430
HTC OneChrome4.1.22350410
HTC OneFirefox4.1.21641422表示されたが、画像が上下逆さまだった。
GalaxyNexus標準ブラウザ4.0.41140297××
GalaxyNexusChrome4.0.41983430××
GalaxyNexusFirefox4.0.41667422×
DIGNO S標準ブラウザ4.0.41408318××
DIGNO SChrome4.0.41198390×WebAudioを実行するとブラウザが落ちる。
DIGNO SFirefox4.0.41217422×
XperiaGX標準ブラウザ4.0.41605341×
XperiaGXChrome4.0.41821430×WebAudioを実行するとブラウザが落ちる。
XperiaGXFirefox4.0.41458422×
Nexus4Chrome4.2.21941410
Nexus4Firefox4.2.21366422×
VEGA PTL21標準ブラウザ4.0.41461318××
VEGA PTL21Chrome4.0.41969410×WebAudioを実行するとブラウザが落ちる
VEGA PTL21Firefox4.0.41602422×
GalaxyS3
progre
標準ブラウザ4.0.41096416××
GalaxyS3
progre
Chrome4.0.41176430×
GalaxyS3
progre
Firefox4.0.41218422×
ArrowsZ標準ブラウザ4.0.31256287××
ArrowsZChrome4.0.32110430×WebAudioを実行するとブラウザが落ちる
ArrowsZFirefox4.0.31627422×
AQUOS PHONE ZETA標準ブラウザ4.0.41077297××
AQUOS PHONE ZETAChrome4.0.41850430×WebAudioを実行するとブラウザが落ちる
AQUOS PHONE ZETAFirefox4.0.41255422×
Razer標準ブラウザ4.0.4978297××
RazerChrome4.0.41922430×WebAudioを実行するとブラウザが落ちる
RazerFirefox4.0.41197422×
URABANO
PROGRESSO
標準ブラウザ4.0.31255312×
URABANO
PROGRESSO
Chrome4.0.31491430×
URABANO
PROGRESSO
Firefox4.0.3823422×
HTC EVO 4G標準ブラウザ4.0.31087287××
HTC EVO 4GChrome4.0.31332430×
HTC EVO 4GFirefox4.0.3904422×
XOOM標準ブラウザ4.0.4921297××
XOOMChrome4.0.41622425×
XOOMFirefox4.0.41377422×
GalaxyS4標準ブラウザ4.2.21751468×
GalaxyS4Chrome4.2.21928430
GalaxyS4Firefox4.2.21815422×
Tizen
Ref.Device-PQ
標準ブラウザ2.2.01505492 




まとめ

WebGLの対応状況

  • Androidは、XperiaZやGalaxyS4、HTC Oneでは標準ブラウザでWebGLが動作する。
  • Androidは4.0以上であれば、ほとんどの端末でChromeを通じてWebGLが動作する。
  • Tizenは問題なく動く。
  • iOSはまだ対応していない。

WebAudioの対応状況

  • Androidは、XperiaZやGalaxyS4、Nexus7などのChrome上でのみ対応している。
  • Androidの4.0以上の端末では、Chrome上でWebAudioを使用しようとするとブラウザが落ちてしまうものが多い。
  • Tizenは問題なく動く。
  • iOSはまだ対応していない。

JavaScriptのスコア

  • JavaScriptのスコアについては、端末のスペックにより変わっている。
  • JavaScriptのスコアが良いからといって、WebGLに対応しているということはない。
    • XOOMやRazerなど。
  • iOSはGalaxyNexusの4.0.4よりはスコアが上だが、他の4.0系端末よりはスコアが下である。
  • Tizenにおいては、WebGLも動きJavaScriptのスコアも高い。
  • Nexus7は、4.3になったときにChromeのスコアが低くなってしまった、それはWebAudioの設定ができなくなっていることと関係するのであろうか。

HTML5のスコア

  • 総合的には、TIZEN端末がWebGLとWebAudioをサポートし、それぞれのスコアも高得点をたたき出している。
  • その他では、XperiaZやGalaxyS4、HTC OneというトップクラスのAndroid端末が続く。
  • 今後、Chromeの方でWebAudioやWebGLのサポートが行われれば、Android4.0以上のスマートフォン上でも3Dがグリグリ動作するゲームアプリを作成することが出来るのではないだろうか。
  • FirefoxOS端末が手に入らなかったため、その端末との比較も行ってみたい。
  • WebAudioに対応している端末が、WebGLよりも少なかったため、早く対応してほしいと思った。
  • WebGLとWebAudioをサポートしている端末上のアプリは、ブラウザ上でネイティブ並みに動きを見せていた。
  • これからの時代、WebGLとWebAudioによってハイスペックなカジュアルアプリをあらゆるプラットフォーム上で実現できるようになるのではないだろうか。

0 件のコメント:

コメントを投稿