5

HTML5 キャンバスを使用して単純な raycaster を作成しようとしていますが、ひどいフレームレートになっています。Firefox のプロファイラーは、実行時間の 80% が context2d.fillRect() に費やされていると報告しています。これは、床と天井の列ごと、テクスチャ付きの壁のピクセルごとに使用しています。この質問に出くわしたところ、fillRect は 1x1 ピクセルの画像よりも chrome で 40%、firefox で 4% 高速であることがわかりました。彼らはまだアルファのものをどのように計算しているかについて言及していますが、アルファが1の場合、不透明なレンダリングのためのパススルーがあると思いますか? 私が試してみるべきJavaScriptで多くの長方形とピクセルブリッティングを行うための他の方法はありますか?

4

2 に答える 2

1

レンダリングの CPU 使用率を減らすために試すことができる解決策が 2 つあります。

requestAnimationFrame を使用して、キャンバス グラフィックスの準備ができたとき、特にユーザーがブラウザでキャンバス タブを開いている場合にのみ、キャンバス グラフィックスをレンダリングできるようにしてください。詳細: https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

2 番目の解決策は、コンテンツの一部またはすべてが動的であるかどうかに応じて、キャンバスの一部を JavaScript を使用してメモリ内の他の「非表示」キャンバスに事前にレンダリングすることです (たとえば、メイン キャンバスを 4 つのサブ キャンバスに分割し、画面上に 4 つの要素を描画します)。

PS: Firefox を複数のキャンバス レンダリングと組み合わせて使用​​している Mac を使用している場合、Chrome と比較して CPU 使用率が高くなります。

お役に立てれば

于 2013-10-08T02:34:37.567 に答える
1

私が見つけた解決策は、呼び出すたびに fillRect() 呼び出しをパス内に配置することです。

canvasContext.beginPath();
canvasContext.rect(1, 1, 10, 10);
canvasContext.fill();
canvasContext.closePath();

rect() への呼び出しは、以前の rect() 呼び出しのパスに追加されるようです。誤って使用すると、メモリ リークやリソース使用量の増加につながる可能性があります。

于 2017-01-20T04:35:26.933 に答える