0

processing.jsにいくつかの図形を描くために使用しcanvasます。

キャンバス上で絶えず動いている 100 ～ 200 個を超える円を描くと、FPS が大幅に低下します。描画を削除すると、FPS は 60 に戻るため、他のタスクは FPS に影響しません。

fill(mR,mG,mB);
ellipse(mX,mY,mRadius,mRadius);

たとえば、複雑な形状の場合、それらをメモリ内の別のキャンバスに描画してキャッシュし、そのキャンバスをメインのキャンバスに描画するだけです。

この描画パフォーマンスを改善する方法はありますか?

役立つリンク:
http://www.html5rocks.com/en/tutorials/canvas/performance/
http://ramkulkarni.com/blog/improving-animation-performance-in-html5-canvas-part-ii/

しかし、私のコンテキストではこれらのいずれも使用できず、Processing.js と統合することもできませんでした。

編集: 実際には、fps が低下し始める前に ~1000 形状を処理できるようです。i5 プロセッサと GTX660 GPU で GPU レンダリングを有効にした Google Chrome でテスト済み。

http://jsfiddle.net/Lfmfz/2/

すでにかなり良いと思いますが、追加の FPS を絞る方法はありますか?

4

1 に答える 1

0
  1. これらの形状をレンダリングするために for ループまたは類似のものを使用していることを確認してください。そうしないと、当然遅くなります。
  2. fill every ellipse を呼び出さずに済む場合は、ランタイムが改善されます。可能であれば、すべての赤い図形をまとめたり、すべての青い図形をまとめたりしてみてください。
  3. 不要な計算を取り除きます。たとえば、ellipse()s をrandom()計算または一緒に配置した場合 (最後のものではnew Random(1)非常に遅い)、ローカル変数を作成するか、単独で使用します(私が見る限り、これの方が速いようです)。nextGaussian()Math.random()
  4. アンチエイリアスされた imageData を使用できますが、すべてのデバイスでサポートされているわけではありません。私はそれを使用しますが、HTML でのランタイムについてはよくわかりません。また、すべての for ループがかなり複雑になる可能性があります。

TL;DR
あまりにも多くの計算を使用しないでください。冗長なことを行わないでください。特に、楕円を何度も何度も何度も何度も何度も何度も何度も何度も何度も呼び出してはいけません.....反復せずに。

于 2016-01-10T20:07:16.957 に答える