[TypeScript][WebGL][Three.js] 多体問題シミュレーション WebGL版

2014年5月9日

※ 『[TypeScript][WebGL][Three.js] 3D で遊ぼう ～C#er も TypeScript で楽々 WebGL～ ― 準備編』の続き。

以前、HTML5 で多体問題シミュレーションというのを作った。

• 多体問題シミュレーション by HTML5
• 多体問題シミュレーション by HTML5 3D版

今回は、これを WebGL でやってみよう。

実装には、前にやったように同様これを WebGL でやってみよう。

WebGL 対応のブラウザ (Internet Explorer、Firefox、Google Chrome、の現時点での最新版等) では、画像のクリックで実際に動作させてみることができる。

• 

• 

使い方等:

• 物体は球体として表現し、見掛け上の半径は各質量の3分の1乗の比になるようにした。
  但し、衝突は考慮していない。
• 裸眼立体視版では、「交差法」により立体的に見ることができる。
• クリックでスケールの変更。
• クエリー文字列:
  • number で、物体の数の設定 (nbody.html?number=8 で 8 個。1-10個、デフォルト 5 個)
• Internet Explorer、Firefox、Google Chrome、の現時点での最新版等 WebGL をサポートするブラウザで動作

例.

• 通常版
  • nbody.html: 物体 5 個
  • nbody.html?number=10: 物体 10 個
• 裸眼立体視版
  • nbody3d.html: 物体 5 個
  • nbody3d.html?number=10: 物体 10 個

参考:

• 多体問題 (N‐body problem) に関しては、「多体問題 – Wikipedia」を参照のこと。
• 運動方程式を解くのに使用しているルンゲ＝クッタ法に関しては、「ルンゲ＝クッタ法 – Wikipedia」を参照のこと。
• 「交差法」で 3D アニメーションを見るには、「ステレオグラム – Wikipedia」の中の「立体視の見かた」が参考になる。

ソースコード:

ソースコードは TypeScript で書かれていて、three.js を使用している。

こちら: NBodyWebGL.Source.zip。

クラス図:

TypeScript を使うことで、クラス設計も楽に行うことができる。