小さなゲームを作成しているときに、Canvas API に関する一般的なパフォーマンス関連の質問が出てきました。大きなキャンバスの小さなスペースだけをクリアして描画しています。このような場合、キャンバスのサイズが大きいとパフォーマンスが低下しますか?それとも、描画されるピクセルの量だけが問題なのでしょうか? たとえば、何かが変更されたときにキャンバス全体が再描画されますか?
1 に答える
一般的な経験則として、パフォーマンスは、描画している画像の解像度とキャンバスのサイズによって影響を受けます。しかし、ほとんどのデバイスには、描画を処理するためのハードウェアがあり、使用するディスプレイを簡単に更新して、余分なブリングのために十分な時間を割くことができます。
最大のボトルネックは、グラフィックス ハードウェアとデバイスのメイン メモリとの間のインターフェイスです。すべてのグラフィックスがデバイスの GPU メモリに収まる場合、実際のパフォーマンスの問題は発生しません。しかし、グラフィックス メモリに収まりきらないほど多くの画像を描画し始めると、デバイスがグラフィックス メモリにデータを出し入れするため、パフォーマンスが大幅に低下します。デバイスのメモリ容量を JavaScript で簡単に知る方法はありません。
つまり、重要なのは描画するピクセルの数ではなく、描画する一意のピクセル/画像の数です。その効果は非常に劇的で、GPU 容量に 1K の余分なピクセルを追加するだけで、実際には合計でより少ないピクセルを描画している場合でも、フレーム レートが半分以上になる可能性があります。
個々のイメージのサイズを小さくすると、システムがリソースを管理しやすくなります。小さなビットマップ 1 つだけのスペースを確保するために 1 つの大きなビットマップを交換するのではなく、大きなビットマップを小さなビットマップに分割して、切り替えを迅速に行います。
GPU は、ピクセル 2、4、8、16、32、64、128、... のブロックで動作し、幅と高さのいずれかが 2 の累乗になります。これらのサイズの画像を使用する方がはるかに効率的です。130*130 ピクセルの画像を持つ場合、GPU RAM に格納するために実際にはメモリに 256*256 (または GPU の種類によっては 256*196) ピクセルが必要になる場合がありますが、画像を 128*128 に縮小すると、GPU RAM を無駄にせずにきれいに収まります。 .
使用しないパターンを参照しないでください。フォントと SVG 画像も、実際のメモリ フット プリントではなく、ピクセル サイズに関連する GPU メモリのスペースを占有します。キャンバスの状態を大きなフォントを描画する準備ができたままにしないでください。最初に設定した後は、再度使用するつもりはないかもしれませんが、そのフォントが描画される準備ができている間は、貴重な RAM を使用しています。