【Matter.js】大量の2D物理演算で処理時間を計測

web上で物理演算して見たくなりました。目標は10000要素ですが、今回は2D物理演算のライブラリの”Matter.js”を使って大量の円を衝突させて、実用に値するかどうか処理時間を計測してみました。

ちなみにMatter.jsを使えばこんなことが簡単にできます。

大量の要素を物理演算させたい

今回はwebで2D物理演算したいということで、”html+javascript”を使ってコードを作成することにしました。

javascriptで2Dの衝突物理演算をする方法は、自分で1からコードを作る方法とそれ専用のライブラリを使用する方法があります。

自分で1から作るのも面白そうですが、少し労力を伴うので、今回はライブラリを使うことにします。

2D物理演算ライブラリを調べるとBox2Dという有名なライブラリがあるようですが、今回はMatter.jsというライブラリを使います。理由は調べると使っている人も多く、使用例や使い方がいろんなサイトに書かれていること比較的軽いというのを見たからです。

Matter.jsはこちらのサイトの”Code>Download Zip”でダウンロードできます。あとはその中のmatter.jsをhtmlで参照すれば使えました。

html+css+javascriptのコード作成にはVSCodeLiveServerが便利でした!

こちらのサイトこちらのサイトを見ればVSCodeの実装とLiveServerの導入まで簡単にできました!



さっそく物理演算

できるだけ単純な物理演算ということで、床と壁に囲まれた領域に大量の円を発生させて自由落下させるといった計算を行いたいと思います。

コードは以下のとおりです。こちらのサイトを参考にしました。

処理速度検証

要素を変化させて計算が1000回実行されるたときの1回あたりの平均処理時間を算出しました。結果がこちら、指数関数的に時間が増加しているので、縦軸横軸ともに対数軸にしています。

PCのスペックにもよるかもしれませんが、500個くらいまではスムーズに動作しました。ゲームを作成することを想定しても60FPSは出てほしいので”800個”くらいが限界でしょうか。ちなみに私のPCはCPUがIntel Corei7-6900Kでメモリ16GBです。

以下に100個、1000個、10000個の様子を載せておきます。皆さんのPCがカクついているわけではありません。

あしぺん
あしぺん

勝手にカラフルになったよ~

要素100個
要素1000個
要素10000個

これを見ても10000個ではカックカクなことがわかります。特に衝突し始めてからはより遅延が発生しています。これでは10000個での物理演算は夢のまた夢ですね。

まとめ

今回はMatter.jsを使って大量の物理演算を行ってみました。この状況では10000個は夢のまた夢っぽいので1からコードを作成して負荷をへらす等を検討する必要があるかもしれません。

とはいえ、一般的な物理演算ライブラリではそのような計算を早くする処理はもちろん入っていると思われるので、1から作ったとしてどこまで期待できるかはわかりません。あとは、CPUでなくGPUを使う方法などもできなかなーと模索しています。

参考サイト

コメント

タイトルとURLをコピーしました