iPad 3rd genを購入してみた～Canvas&SVGベンチで負荷をかけてみた

iPad 3rd genでQuarStrの動作検証をしていて、ちょっと不思議に思いました。

iPad 3rd genでは高解像度にしているため見た目はくっきりしているのですが、描画部分が速くなっている印象がないのです。

iPad 3rd genのハードウェア的にはGPUが強化されました。このため、描画関係は高速化されたのではないかと願っていたのですが、そうでもないのではないかと。QuarStrはそれほど描画が重いゲームではありませんが、SVGを使っているためものすごく軽くもありません(たまに反応悪いなと思うところがあります)。

そこで、Mobile Safari向けの描画に負荷をかけるベンチを作ってみました。それが以下です。

Numberを設定して、STARTを押すと始まります。また、止めるときはSTARTボタンがSTOPボタンになっているので、そこで押してください(ついでにSTOPボタンを押すまで止まりません)。STOP後にSTARTボタン押すと最初からベンチが始まります。

このベンチは多角形を大量に描いているだけのベンチですが、CanvasとSVGの両方で同じ機能を作りこみしてみました。SVGはもっと高速化する手立てがあるのかも知れませんが、defで設定したグループをuseに張り替えている簡単なベンチです。

Canvas Benchは5大ブラウザ全て動きますが、SVG Benchは、Firefox、Chrome、Safariでしか動きません。IEはなんかおかしいですし、Operaは画面上に表示されません(うまく動いていない)。

ベンチを取る前にハードウェアのスペックは以下になります。比較としてNEXUS SC-04Dも対象にします。

このベンチを各iPadのMobile SafariとNEXUS SC-04-Dのデフォルトのブラウザで取ってみました。結果は以下になります。値はFPS(MIN FPSの値を参照)のため、数字が大きいほど優秀であることを示しています。左欄の数字は個体数になります。

SVGに関しては描画する解像度が上がっているためか、iPad 3rd genで低速化しています(ガーン...orz)。

Canvasに関しては解像度増加しても速度差はほとんどありません。iOS 5でCanvasはGPU対応されている関係でしょうか。SVGはGPU対応していないので、CPUで計算していると解像度の影響で遅くなっているのかも知れません。

いや、SVGはCanvasよりも遅くなることは知っていたのですが、ここまで差が開くとは思っていませんでした。Canvasは毎回全画面再描画しているのですが...

Asteroids benchやPeasekeeperの結果を見てもiPad 3rd genとiPad 2でほとんど差がなかったので、今回のCanvasベンチの結果も似たような傾向を示したと考えるべきですかね。

上記のベンチが公平なベンチではないため、Mobile Safariを弱点を見抜いているか分かりませんが、Canvasは変わらず、SVGは遅くなると考えてもいいのかと思いました。

ベンチソースはソース置き場のcanvasandsvgbench_v0_1_0.zipです。もし必要ならばご使用ください。このページでも十分に動きます。

また、ベンチ上ではwindow.devicePixelRatioを表示させています。これは、iPad 3rd genで見ると"2"と出ます。これはiPhone 4からもこの数字が"2"になっており、細かいピクセルであることを示しています。このため、screenのwidthとheightとdevicePixelRatioから物理的解像度を把握可能です。Webkit向けのため、IEやFirefoxではこの値は表示されません。