8

HTML5 Canvasでフレームレートが低下し始める前に、実験を行って最大パーティクル数を改善しようとしています。

私はrequestAnimationFrameを使用しています。これは、画像をレンダリングするための最速の方法であると思われるため、キャンバスからdrawImageを使用しています(jsPerfでテスト済み)。

ここに動作するjsFiddleがあります:http://fiddle.jshell.net/bewYC/5/

動作させるには、更新または再実行が数回必要になる場合があります(理由はわかりませんが、最初のページの読み込みで実行したくないだけです)。

現状では、Chrome 22を実行している私のコンピューターは、約5,000個の粒子で60FPSを維持できます。それを超えるすべてのステップで、FPSは低下し始めます。drawImage()を削除してパーティクルの位置を計算すると、プロセッサはパーティクルの数が10倍をはるかに超えるまで最大になりません。

知りたいこと:drawImageを含むループを使用するよりも、大量のパーティクル(たとえば、40,000)をレンダリングするより速い方法はありますか?特にJavaScript/Canvasについて知りたいのですが、JavaやC#などの別の言語についてしか知識がない場合は、とにかく共有してください。

4

1 に答える 1

8

この問題の場合、ほとんどの場合、WebGL(またはプラットフォームに適した他の「3D」API)を使用するのが最善の方法です。移動する位置で多くの画像(むしろ「テクスチャ」)を合成することは、まさにグラフィックスハードウェアが適しているように設計されているものです。最近のブラウザは、2D-Canvasの描画操作を実行するためにGPUアクセラレーションを使用しますが、個々の画像の描画を要求するJavaScriptがまだあり、それが問題です。

WebGLをチェックすることをお勧めします—パーティクルシステムのような単純なものについては、プログラミングはまったく難しくなく、何千ものパーティクルを簡単にレンダリングできます。JavaScriptは、すべてのパーティクルの位置を含む配列を提供するだけです。

高度な手法は、パーティクルのシミュレーションもGPUに配置することです。これにより、パーティクルごとにJavaScriptを実行する必要がなくなります。私は自分のGLToyでGPUパーティクルシミュレーターを作成しました。ここでは、80,000パーティクル用に構成されており、ラップトップで60FPSを達成しています。実際、その特定の構成における制限は、滑らかな粒子の充填率です。ポイントだけを使用すると、最大300,000個のパーティクルをプッシュできます。そして、私はグラフィックプログラミングの魔法使いではありません。何をすべきかを正確に知っている誰かがそれをさらに推し進めることができると確信しています。

(GLToyを改訂するため、PSリンクは壊れやすい可能性があります。名前付きの効果が得られない場合は、リンクを修正できるようにお知らせください。)

于 2012-11-16T02:59:14.043 に答える