matter.js
マター ジェーエス
matter.jsは、ブラウザ上で2Dの物理シミュレーション（重力、衝突、反発、摩擦、回転など）を実装できるJavaScript物理エンジン・ライブラリです。図形を配置して力を加えると、自然な動きとして計算・反映されます。インタラクティブな演出や簡易ゲーム、UIの遊び要素など、「触って楽しい」体験を比較的少ない実装量で作れるのが魅力です。
歴史と背景
matter.jsは、Webでの表現がリッチ化し、Canvas/WebGLと組み合わせたインタラクションが一般化してきた流れの中で広まりました。物理演算は本来ゲームエンジンで扱う領域ですが、Webでも軽量に取り入れたいという需要があり、matter.jsは「使いやすい2D物理エンジン」として採用されてきました。複雑な3Dではなく2Dに絞ることで、演出・UI用途にも取り入れやすい軽量さが評価されています。
特徴
matter.jsの特徴は、導入のハードルが低く、手早く自然な動きが実装できる点です。円や矩形などの基本的な形状の図形を配置し、重力や衝突判定を有効にするだけで、落下・跳ね返り・積み重なりといった現象を再現できます。制約（ジョイント）を使えば、ヒンジやバネのような動きも表現でき、ドラッグ操作と組み合わせた「触れるUI」を作ることができます。描画自体はCanvas等と組み合わせる前提なので、表現の自由度も高く、デザインや他の要素技術（GSAPやthree.jsなど）と併用して演出を作り込むこともできます。
一方、物理演算処理は計算の負荷が高く、オブジェクト数や判定ロジックが増えるほど負荷が上がってしまいます。実案件では、表示領域外の計算停止、更新頻度の調整、形状の単純化などの最適化が必要になります。また、物理演算を「正確なシミュレーション」として使うのではなく、Web体験の「快適さ」を優先したパラメータを調整も重要です。