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

typescriptlogo.png

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

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

今回は、これを 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 をサポートするブラウザで動作

例.

参考:

ソースコード:

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

こちら: NBodyWebGL.Source.zip

クラス図:

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

多体問題シミュレーション WebGL版のクラス図
多体問題シミュレーション WebGL版のクラス図