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#などの別の言語についてしか知識がない場合は、とにかく共有してください。