これについては、ブログからブログ、ビデオ、ビデオ、フォーラムからフォーラムに行くいくつかの異なる意見があるようです。これは、特にWebGLではなく、キャンバスタグの2Dコンテキスト用です。私はWebGLが私により良いパフォーマンスを与えることを知っていますが、私の目標はキャンバスタグが2Dコンテキストでどのように機能するかを理解することです。キャンバスゲームの開発とパフォーマンス
"バーチャル"オフスクリーンキャンバスでオブジェクトをプリレンダリングすると、おそらくブラウザが実際に描画していないことがわかるパフォーマンスに最適です。人々は、 "getImageData"を使用してそのキャンバスからデータを取得すると言います。私の理解から、 "putImageData"を使用してDOMに追加されたキャンバスに適用できるbase64コードが返されます。これは巨大なパフォーマンスヒットではないでしょうか？
この仮想キャンバスにゲームの全体を表示し、このメソッドをループ内で使用して可視にする必要がありますか？
はいできます。私はrequestAnimationFrame（）を使用し、ゲームループのdraw（）部分の中で、すべての別々のオブジェクトをオフスクリーンcanavsに描画して、可視のキャンバスにイメージを取得/配置します。これはパフォーマンスのヒットに見えるかもしれませんが、多くのオブジェクトが描画されている場合、このget/putイメージのオーバーヘッドは実際にはごくわずかです。
キャンバスは単なる画像に過ぎません。私の経験から、キャンバスや画像はパフォーマンス面で違いはありません。
オフスクリーンまたはキャンバスでも同じですが、可能な限りGPUを利用します。 context.getImageData()、context.createImageData()、およびcontext.putImageData()は、リアルタイムレンダリングのために避けるべきであるを使用して
、それはGPUを利用していない、あなたがそれを行う任意の処理では、JavaScriptによるメインメモリ内で行われます。データは型付き配列Uint8ClampedArrayに格納されますが、Uint32Arrayのような型指定された配列に変換できますが、1つのピクセルを4ではなく1つの変数で扱うことができます。型付き配列には多くのネイティブ関数もあります。標準のJavascript配列よりもはるかに迅速な配列操作を提供します。
イメージのキャンバスを含む制限要因は、使用可能なGPU RAMの量です。使用可能なRAMの容量を超えた場合、ブラウザーはGPU RAMに画像をスワップしますGPUのレンダリング能力をブロックし、メインRAMからGPU RAMへの転送は、通常のRAMアクセスと比較して遅い。これが起こると、即座にフレームレートの損失が見られます。ブラウザが実行できる膨大な種類のプラットフォームがあり、マシンの機能を知る方法がないため、リアルタイムアプリケーションを公開するときには注意が必要です。
ハイエンドデスクトップマシン用の高解像度画像でゲームを作成した場合、タブレットやローエンドのノートパソコンではパフォーマンスがあまり良くありません。この問題を軽減するには、画面の解像度に合わせてイメージをダウンサンプリングします。解像度の1/8のデバイスの背景画像を使用すると、ハードウェアに過度の負担がかかります。デバイスは画面の解像度を処理するように作られていますが、この解像度を超えると大きな不必要なパフォーマンスが発生します。オフスクリーンキャンバスを使用して、デバイスのネイティブ解像度でイメージをレンダリングし、元のイメージをダンプできます。品質の低下はありませんが、パフォーマンスが大幅に向上し、再生できないものが再生可能になります。これはすべてのグラフィックリソースに適用されます。使用しているデバイスが表示できる解像度より高い解像度でイメージを保存したり使用したりしないでください。
キャンバスで行うことができるさまざまなことがありますので、最もうまくいくのは実験することです。フレームレートを監視し、問題のさまざまなアプローチを手近に試してください。フレームレートが上がった場合は、フレームレートが低下した場合は、間違った方法を使用した方が良い方法を見つけました。
これはほとんどの人がウェブ上で言っていることとはかなり違っていました。私がそれが有益であると思う唯一の方法は、移動しないタイルマップを使用することです。文字が画面の端に達すると、次の文字に移動します。また、あなたが投稿で主張したものはどこにありますか？ –
@CalebPrenger私は照会は必要ありません。ブラウザを持っていれば誰でも、少し時間を置いてキャンバスのパフォーマンスをテストできます。イメージをロードし、キャンバスを作成してレンダリングするだけです。どのくらいのフレームレート降下をレンダリングすることができますか、それはどのように動作し、何が動作しないのかを見てください。現実には、ほとんどのキャンバスのパフォーマンスの問題はキャンバスとは無関係であり、パフォーマンスの問題までは明らかにならない悪質なJavaScriptのコーディング手法であるため、キャンバスが非難されています。 – Blindman67
私はあなたが複数のキャンバスのポイントを理解しているとは思わない。 1つはバックグラウンドで、大部分は再描画する必要はありません。それを上回るのは私のスプライトのためで、私が描き直す必要があります。私はキャラクターを以前に描いた部分だけを再描画しますが、キャンバス全体を再描画することはありません。もちろん、ループ内のキャンバスにgetImageDataとputImageDataを使用すると、あなたのゲームはダウンしてしまいます。私が理解できるものからそれを意味するものではありません。 –
あなたが言っているのは、私がRPGのようなものを作り、たくさんの異なるタイルを持っているならば、私はそれらをオフスクリーンキャンバスですべてレンダリングし、そのキャンバスからデータを得て、 ？ –
はい：キャンバスに配置されている各タイルには小さなオーバーヘッドがあります。オフスクリーンバッファを描画すると、メモリやスクリーンに描画する必要がなくなるため、メモリに保存されるのですばやです。 –
複数のキャンバスはゲーム開発にとってより有益でしょうか？ 1つはタイル用、もう1つは私の主人公用です。 –