の円描画 - berupon’s diary

HTMLのCanvasタグで同様の円描画をしてみた。

以下のスクリプトを書いて確認。
http://www.geocities.jp/beruponu/code/js/canvas_arc_test.html

確認に使ったPCのスペック
OS Windows7
CPU AM A8-3870
グラフィックチップ RadeonHD7800

確認に使ったブラウザのバージョン
Chrome バージョン 22.0.1229.94 m
Firefox 16.0.1
Internet Explorer バージョン 90.8112.16421 64-bit Edition

ChromeとIEは描画がとても速い。IE >> Chrome >> 超えられない壁 >>> Firefox という感じ。ChromeやIEが速いのはGPUで描画処理を行っているからだと思う。
Chromeで最初記述して確認していたところ、記述内容によってはがくっと速度が落ちることがあった。でもそれでもFirefoxよりはちょっと速かった気がする。
IEの場合エッジのアンチエイリアシングが強くて少しぼけて表示される。その分エイリアシングが少ないけれど。
Chromeの場合、Firefoxとは違ってブラウザの表示内容を拡大縮小表示してもFPSが変わらないのはうれしい。
HTC DesireのWEBブラウザで確認すると10fpsくらいでもっさり。Nexus7のChromeだとPCで確認しているのと遜色無い感じでスムーズに描画してくれる。

しかしGPUを使っていると思われるプログラムでは、GPUとCPUのメモリアクセス幅の比率以上に描画速度が違う気がする。並列的な処理で演算器を無駄なく活用出来るだろうし、無駄な重ね書きをなるべく控えて遅いメモリアクセスの頻度を下げているのかもしれない。
愚直に１つ１つデータを描画していると大量のデータをリアルタイムに処理出来ない事があるので、描画をまとめて行ったり、不要な再描画は行わない、等の工夫が必要だ。