通过

Paintball で理解するハードウェア アクセラレーションの違い

  • 项目

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 

【元記事】Understanding Differences in Hardware Acceleration through Paintball (2011/4/27 1:09 AM)

最新ブラウザーの多くはハードウェア アクセラレーションをサポートしていますが、実装の品質についてはブラウザーによって大きく差があります。ハードウェア アクセラレーションは単なるオプション機能ではありません。ブラウザーがハードウェア アクセラレーションをどのように活用するかによって、Web アプリケーションのパフォーマンスとユーザー エクスペリエンスには直接的な影響が及びます。

ハードウェアアクセラレーションにおける品質とパフォーマンスの違いを明確にするために、ここでは IE 10 Platform Preview 1 と同時にリリースされた Test Drive の Paintball を例に見ていきます。Paintball では HTML5 Canvas を使用して、壁に投げつけたペイントボールがはじける様子をシミュレートします。このデモでは、イメージがシーン全体をいかにすばやく構成するかを示します。Web 上で公開されている HTML5 Canvas のパフォーマンス事例のほとんどは、画面上で同一のイメージがいかにすばやく描画されるかを測定するだけのものです。

Paintball はシーン全体を可能な限りすばやく描画します。デモの最後には、画面上に 2 つの数字が表示されます。1 つ目の数字はシーン全体の描画にかかった秒数を表し、2 つ目は 1 分間で発射されたペイントボールの数を表しています。このテストでは、より短時間により多くのペイントボールが発射されるほど優秀ということになります。

clip_image002IE10 Platform Preview 1 でレンダリングされた Paintball デモのスクリーンショット

Paintball の仕組み

Paintball があらゆるペイントボールの色であらゆる語句をペイントできる汎用 Web アプリケーションとなるよう、指定された RGB 値に基づいて、ペイント スプラッター (ペンキの拡散) が実行時にプログラム的に生成されるようにします。イメージを実行時にプログラム的に操作するという方法は、この新しい HTML5 Web アプリケーションにおいては標準的なシナリオです。

Paintball は最初に単色の四角形を描画します。この色がペイント スプラッターの色となります。

Rendering paint splatter effect - step 1

次に、スプライト シートを使用して、スプラッター アニメーションのフレームを保持します。

clip_image006

さらに、最終的なスプラッターの大きさを決め、destination-in コンポジション モードを使ってスプライトシートからフレームを描きます。この結果、描かれたピクセルは、キャンバスの現行のコンテンツをマスキングします。

Rendering paint splatter effect - step 2

クライアント上にグラフィックスを描くことで、Web 開発者が作成し、ダウンロードするイメージの数はより少なくて済むようになります。こうした方法は、イメージの色をプログラム的に変更する場合も有効です。

ペイントボールは、画面には表示されないキャンバス上に作成され、その後、第 1 表示キャンバスに描画されます。オフスクリーンの第 2 キャンバスを使ってその効果を構成し、アニメーションの進行中のみコンポジション操作を利用することで、すべてのブラウザーにおいてパフォーマンスが大幅に改善されます。そして、アニメーションが最終フレームに到達した時点 (ペンキが壁全体に広がった状態) で、キャッシュされていた第 2 キャンバスのビューを使って、シーン全体を描画します。

品質の違い

Paintball は、HTML5 Canvas 仕様に定められた同じ HTML5 マークアップを、すべてのブラウザーにおいて使用します。最新のブラウザーはすべてこれらの API をサポートしていますが、品質には大きな違いがあります。以下に、各ブラウザーのレンダリング結果を示します。

clip_image010

この結果から、次のような違いが明らかになりました。

  • Chrome 12 では、ペイント スプラッターは正しく描かれていません。これは Chrome が HTML 5 の仕様どおりに HTML5 Canvas コンポジション モードを実装していないためです。
  • Firefox 4 では、シーンは正しくレンダリングされています。
  • Internet Explorer 9 および Internet Explorer 10 では、シーンは正しくレンダリングされています。
  • Safari 5 では、Chrome 同様のペイント スプラッターのレンダリング ノイズが見られます。さらに、Safari では WOFF フォントがいまだサポートされていません。

こうした違いが原因となり、開発者はどのブラウザー上でも同じように表示され、同じように動作するサイトを構築しようとすると、さまざまな問題に直面します。開発者は同じマークアップを使って相互利用可能な結果を作り出すことを望んでいます。こうしたバグは重要ではない (また修正も困難ではない) ようにも思われますが、現実にはブラウザー間の品質の違いによって、サイト開発者はプラグインを使用したり、サイトの機能を下げるといった対応をする必要が出てきます。

パフォーマンスの違い

各実装のパフォーマンスの違いはさらに顕著です。今回のテストでは、昨年使用してきたものと同じ中規模のコンフィギュレーションを使用しました。各最新ブラウザー (いずれも同レベルのハードウェア アクセラレーションを装備、Windows 7 を使用) でのシーンの構成速度をテストした結果を以下に示します。

Chrome 12

Firefox 4

IE 10

Safari 5

秒数 (数値は低いほど優秀)

516.14

100.17

11.35

68.11

分あたりのペイントボール数 (数値は高いほど優秀)

10.11

52.11

459.95

76.64

Graph showing time Paintball demo takes to complete in Chrome 12, Firefox 4, IE 10 and Safari 5 Graph showing time Paintball's fired per minute in Chrome 12, Firefox 4, IE 10 and Safari 5

ハードウェア上で起こっていること

ここでは詳細なパフォーマンス トレースに注目します。各ブラウザーで 1 つのペイントボールを発射し、それが壁に当たってはじける様子をアニメーション化する際に CPU と GPU がどのように使用されているかを確認します。以下に示す結果は、Windows Performance Toolkit を使って生成しました。

Chrome 12 では、1 個のペイントボールの発射に 3.7 秒かかっています。このグラフからは、ペイントボールがボールとして画面に現れた時点では GPU と CPU の使用率はさほど高くなく、画面の更新が数多く行われていることが読み取れます。Chrome ではほぼリアルタイムにアニメーションを持続することが可能です。スプラッター効果 (前述) のレンダリングが始まると、GPU と CPU の使用率が数秒間高まります。この間、画面の更新は行われず、デモはフリーズしたようになります。最終的にはブラウザーが再び反応し、シーンのレンダリングが終了します。

Performance chart of a single paintball being shot in Chrome 12. Shows CPU time, GPU time, and Visual Updates.

Firefox 4 は、このシーンをわずか 0.550 秒で処理します。CPU と GPU の使用率はアニメーション中はほぼ安定していますが、スプラッター効果のレンダリング中は CPU の活動が高まります。画面更新も定期的に行われ、シーンのレンダリング中は 19 のフレームがレンダリングされます。

Performance chart of a single paintball being shot in Firefox 4. Shows CPU time, GPU time, and Visual Updates.

IE 10 では、シーンのレンダリングがスムーズに行われます。所要時間は最短 (0.475 秒) で、フレーム数も最多です。以下のグラフからは、CPU と GPU の使用率が Firefox よりも低く、画面更新がさらに頻繁に、またほぼ一定間隔で行われることが読み取れます。

Performance chart of a single paintball being shot in IE 10. Shows CPU time, GPU time, and Visual Updates.

Safari 5 のパフォーマンスについては、CPU と GPU の測定結果だけからでは見誤ってしまう可能性があります。GPU 使用率が低く、画面更新も一定間隔で頻繁に行われていますが、実際の画面上では何の変化も起こっていません。これは Safari が GPU に対して同じイメージを繰り返し描画するように指示しているためです。Safari は画面にいくつかのイメージを描いた後、アニメーションを行うことなく、最終フレームへとジャンプしてしまいます。この間 Safari はハングして、無反応のような状態に見えます。

Performance chart of a single paintball being shot in Safari 5. Shows CPU time, GPU time, and Visual Updates.

上記の一連のグラフは、1 個のペイントボールのスプラッターのみを示しています。これは、Paintball デモにおけるレンダリングのための全作業の一部に過ぎません。ほとんどのブラウザーは 1 個のペイントボールならば問題なく扱うことができますが、ボールの数が増えると処理が追いつかなくなってしまうブラウザーも少なくありません。たとえば、Firefox は 1 つのスプラッターであればほぼ問題なくレンダリングできますが (速度も IE10 並み)、デモをフルに行った場合の高い負荷に直面すると、Firefox のパフォーマンスは Internet Explorer 10 の約 20% に低下してしまいます。

最後に、各ブラウザーの CPU 時間、GPU 時間、および表示の更新回数の比較結果を示します。

Comparison of CPU time consumed for a single paintball being fired in Chrome 12, Firefox 4, IE 10 and Safari 5. Comparison of GPU time consumed for a single paintball being fired in Chrome 12, Firefox 4, IE 10 and Safari 5. Comparison of Visual Updates during a single paintball being fired in Chrome 12, Firefox 4, IE 10 and Safari 5.

まとめ

完全なハードウェア アクセラレーションと HTML5 の完全に相互運用可能な実装を備えたブラウザーは、Web 開発者とエンドユーザーの双方により優れたエクスペリエンスをもたらします。

この Paintball デモに対する詳細な考察が、各ブラウザーにおける品質と性能の違い、特に HTML5 Canvas とコンポジション モードとの関連における理解に役立つことを願っています。リッチなグラフィックス Web エクスペリエンスの開発を思う存分に楽しんでください!

—Seth McLaughlin、プログラム マネージャー、Internet Explorer パフォーマンス チーム