Canvasのベンチマークテストを作って速度を比較してみた

はじめに

Canvasのパフォーマンスを測定するベンチマークプログラムはそこら中に転がっていますが、ほんの一部分の測定だったり、逆に中身が複雑過ぎたりと僕が希望するようなものが見当たらなかったので、自分で作って各ブラウザで測定してみました。

測定したブラウザのバージョンは以下です。

Chrome	Firefox	Safari	Opera
9.0.570.1 dev	3.6.12	5.0.2	10.63

ベンチマーク

作成したベンチマークプログラムは単位時間で描画関数を何回繰り返して実行できるかという単純なものです。実行中に描画される絵のいくつかを載せておきます。


hline	bezier	fill_arc	fill_stars	image_scale	radial_gradient

以下に全測定項目の概要を記します。

hline ひたすら水平方向の直線を描きます。
vline 垂直方向の直線
line 任意方向の直線
rect 矩形描画
fill_rect　矩形の塗りつぶし
lines 任意方向の直線
arc 円弧
fill_arc　円弧の塗りつぶし
bezier　ベジエ曲線
fill_bezier　ベジエ曲線の塗りつぶし
quad　quadraticCurveTo１回の描画
curves　複数の連続quad描画
fill_curves　curvesの塗りつぶし
stroke_star　多数の星型の回転を含む描画
fill_star　上記星型の塗り潰し
transform　translate-rotate-scale変換
image　イメージ描画
imge_scale　イメージの拡大・縮小
image_rotate　イメージの回転
linear_gradient　線形グラデーション
radial_gradient　円形グラデーション
text　文字列描画
clip　星型のクリップ（イメージと直線）

以上の基本ベンチマークに加え、SpiralStarsと名付けたサンプルデモの実行速度(fps)を計測しました。

左記のようなアニメーションが表示されます。アルゴリズムは非常に単純ですが、見ていてちょっと面白いです。

結果

ベンチマークとSpiralStarsの結果は以下のようになりました。各項目の測定結果は項目によって大きな違いがでないように、適当な重み付けをしています。総合的なTotal Scoreはそれらの結果を調和平均したものです。

Chromeが断トツに高速です。昔、SkiaとCairoの速度比較をしたことがありますが、Skiaの方がかなり高速でした。恐らく、今回の結果もV8の高速性もさることながら、Skiaによるところが大きいのではないかと思います。

測定結果	Chrome	Firefox	Safari	Opera
Total Score (Harmean)	2.02	0.737	1.03	1.00
SpiralStars (fps)	35.2	9.4	9.8	12.7

実行プログラム

例によってソースを以下のところに置いておきました。ここでは言及しませんでしたが、半透明のα値のある描画モードの測定もできるようになっています。よろしかったら実行してみてください。

http://dl.dropbox.com/u/1865210/mindcat/canvas_perf.html

終わりに

ChromeのSkiaは速いということは以前から知っていましたが、SpiralStarsを作ってこれ程まで違いがあるとは予想外でした。Chrome Experimentsはいつもウォッチしているのですが、Firefoxでもそれほど違いなく動作するものが多いように感じられます。

SpiralStarsはChromeで実行すると目まぐるしい速度で描画されますが、ティアリングが発生しているのがわかります。ダブルバッファを使えばこのようなティアリングは軽減されると思いますが、Canvas APIにはダブルバッファを使うための簡単なAPIがありません。Canvasを２枚使って切り替えたりするなどの工夫が必要になります。しかし、たとえそのような実装をしたとしても、ディスプレイのVSyncに同期して描画するということができない限り、ティアリングを完全になくすことはできません。これについては、別の機会で触れたいと思います。

いずれにしても、Canvasは近いうちにハードウェアアクセラレータにより描画されることになるでしょう。そのときは、今回測定したベンチマークの結果は大きく異なることになると予想されます。