0

グラフィックスをオフスクリーン キャンバスに事前にレンダリングする方が高速な場合が多いことは理解しています。これは、円のような単純な形状の場合ですか? ゲームのようなフレームレートで 100 個の円をレンダリングすると、大きな違いが生じるでしょうか? 50円？25?

4

2 に答える 2

4

これを 2 つのわずかに異なる問題に分割するために、あなたが求めていることには 2 つの側面があります。

1) 図形を画面外に描画し、それを画面上にすばやく配置する

2) 図形を 1 回描画し、それを 100 の異なる場所にコピーする方が、図形を 100 回描画するよりも高速です。

最初のものに対する答えは「場合による」です。
これは「バッファリング」として知られる手法であり、実際には速度に関するものではありません。

画像をバッファリングする目的は、画像からジャーキネスを取り除くことです。
画面上にすべてを描画した場合、すべてのオブジェクトをループして描画すると、リアルタイムで更新されます。
NES の時代には、それは普通のことでした。なぜなら、メモリに十分な余裕がなかったり、それについて何かをする力がなかったり、プログラマーが作業しなければならない命令が限られていたりして、よくわかっていなかったためです。

しかし、最近のゲームはそうではありません。
通常、1 つのフレームのすべての描画更新を呼び出してから、そのフレーム全体を完成した画像として取得し、その全体を画面に貼り付けます。
GPU (および GL/DirectX) は、デフォルトで、「ダブル バッファリング」と呼ばれるプロセスでこれを処理します。
更新に使用される「進行中」のバッファと、モニターによって読み取られている最後のフレームからの最終画像を保持するバッファのための余地があるため、これはダブルバッファです。
フレーム処理の最後に、バッファが「スワップ」されます。新しく完全なフレームがモニターに送信され、古いフレームは他の描画呼び出しからの新しい画像データで上書きされます。

HTML5 では、実際にはフレーム バッファにアクセスできないため、自分で行います。オフスクリーン キャンバスへのすべての描画呼び出しを行います。すべての更新が完了したら (画像が安定したら)、その画像全体をコピーして画面上のキャンバスに貼り付けます。

ここには、「ブリッティング」と呼ばれる大規模な速度最適化があります。これは、基本的に変更された部分のみをコピーし、古いイメージを再利用します。
それ以外にも多くのことがあり、最近では、追加するすべての特殊効果のために多くの警告がありますが、それはあります.

質問の 2 番目の部分は、「インスタンス化」と呼ばれる概念に関係しています。
インスタンス化はブリッティングに似ていますが、ブリッティングは変更されたものだけを再描画することですが、インスタンス化はまったく同じものを異なる場所に何度も描画することです。

Photoshop で森を描いているとします。
次の 2 つのオプションがあります。

  1. すべての木をゼロから描きます。
  2. 一本の木を描いて、コピーして、画像全体に貼り付けます。

2 番目の欠点は、イメージの各「インスタンス」がまったく同じに見えることです。
「テンプレート」画像の色が変わったり損傷したりすると、画像のすべてのインスタンスも同様になります。また、8000 本の木の森に 87 種類の木のバリエーションがある場合、それらすべてのインスタンスを作成するのは依然として非常に高速ですが、1 本の木の場合よりも 87 倍多くの画像を保存する必要があるため、より多くのメモリが必要になります。すべての描画呼び出しで参照します。

利点は、それでもはるかに高速であることです。

X 円と 1 円のインスタンス化に関する特定の質問に答えるには:
はい、それでもずっと高速になります。

ただし、「たくさん」が何を意味するかは、さまざまなことに基づいて変化します。なぜなら、今は PC 上のブラウザーについて話しているからです。

PCの強さは？
ビデオカードの性能は？
キャンバスはソフトウェア ピクセル (CSS ピクセルではありません) でどのくらいの大きさですか? 円の大きさは？アルファブレンディングはありますか？
これは WebGL またはソフトウェアで書かれていますか?
ソフトウェアがハードウェア モードでキャンバスを合成している場合は?

典型的な PC の場合、Chrome で 60 fps を達成し、20 個の円を描画できるはずです (それらに対して何をしているかにもよりますが... ...画面上に描画するだけで、すべてのフレームが単純になります)。この場合、インスタンスは依然として「はるかに」高速ですが、Canvas のパフォーマンスの上限を既に超えているため、問題にはなりません。

ただし、電話/タブレット、またはバッテリー駆動のラップトップ/ネットブックで同じことが当てはまるかどうかはわかりません.

于 2014-03-02T05:58:46.213 に答える