前回の予告通り、今回は各環境/各ブラウザでのWebGLのベンチマークを取って見ました。WebGLとの比較のために、C++やC#(OpenTK)のネイティブアプリでの計測も行いました。計測条件は以下の通りです。
計測条件:
・テクスチャ付きの立方体を200 * 200 * 200 = 8,000,000個 描画
・開始から60秒経過時の”total”FPSを記録
・WebGLはこのページで計測(コード)
・C#(OpenTK)はこのコードで計測
・C++はこのコードで計測
・ハードウェアは環境によって異なる
(各テーブルの先頭に記述)
・EDGE？なにそれ？
・IE？滅びろ。
結果は以下の通りです。
| 3770K+GTX1070 | ||||
|---|---|---|---|---|
| OS | Browser | WebGL | C# | C++ |
| Ubuntu | Chrome | 29.72 | 39.51 | 38.77 |
| FireFox | 39.60 | |||
| Windows | Chrome | 45.86 | 38.26 | 31.00 |
| FireFox | 33.47 | |||
| Macbook Pro 15-inch, Mid 2015 (2.5GHz Corei7+RadeonR9 M370X 2048MB) |
||||
|---|---|---|---|---|
| OS | Browser | WebGL | C# | C++ |
| Mac | Chrome | 6.57 | 7.06 | 6.94 |
| FireFox | 6.84 | |||
| Safari | 2～3くらい | |||
| iPhoneX | ||||
|---|---|---|---|---|
| OS | Browser | WebGL | C# | C++ |
| iOS 11 | Safari | 4.67 | – | – |
WebGLに比べてネイティブアプリは1.5倍〜2倍程度速いことがわかりました。また、ブラウザ別では、Chromeに比べてFireFoxの方が1.1〜1.5倍程度速いです。SafariもFireFox程度の速度が出ていることがわかりました。
8/22修正：WebGLだけ両面描画するようになってしまっていたため、裏面を描画しないように修正して再計測しました。なんと、WindowsのChromeでWebGLがネイティブアプリを凌駕しています。これは例外としても、WebGLはネイティブアプリに比べて同等～最大で30%程度劣るパフォーマンスとなりました。まずまずの結果で十分実用になるパフォーマンスです。
ブラウザ別では、SafariがChromeやFirefoxに対して半分未満のFPSという結果となりました。ただ、iPhoneXのSafariはMacのFPSを超えており、これはMacのSafariに何か問題があるのか、iPhoneXがすごいのか、どちらかは分かりませんが、いずれにしてもスマホでもある程度のパフォーマンスがでるようです。iOSでChromeやFireFoxの測定をしていませんが、レンダリングエンジンの制約があるため、iOS上でブラウザ間のパフォーマンスにはあまり差が無い筈です。
iPhoneやMacを使ってる人は、あまりブラウザを標準のSafariから変えない傾向があると考えます。Windows使ってる人は、標準以外のブラウザを使う人が多いですね！
以上から、WebGLでアプリを開発した場合、Ubuntu/Win用にChromeもしくはFireFoxを、Mac/iPhone用にSafariをサポートすれば良さそうです。