Saqoosha

  1. About
  2. Archives
  3. Search
  4. Say
Language:

three.js でアメーバのシミュレーション作ってみた その3

そして 3D になりました2D のほうがおもしろいような気がしないでもない。WebGL にも Multi Render Targets ほしい。ソースこちら。

three.js でアメーバのシミュレーション作ってみた その2

こないだのん、ちょっとバグってました。ので、あたらしいやつこちら。ついでにパラメータいじれるようにしたり。だいぶもにゅもにゅ気持ち悪く動くので楽しくなりましたね。ソースおいときます

three.js でアメーバのシミュレーション作ってみた

2013041101-ameba

こういうの久しぶりすなー。@fladdict がやってた JS アメーバを WebGL (three.js) で↑書いてみた。最初 Raphaël で実装したらライン描画重すぎて死んだ。D3.js だったら、この手のいわゆる N-body simulation に対する最適化 (Quadtree ベースの  Barnes–Hut approximation) も入ってるので、もちょいましかもーと思ったけど、GPU でごりっとやってしまいたくなって three.js で。(World Wide Maze で three.js にかなり慣れたのもある。あ、World Wide Maze のテクノロジーを紹介した記事準備中、しばしまたれよ。)

手法としてはちょい前の、OpenCL とか Cuda とかがなかったころの、GPGPU 的なやつ。texture に位置と速度を保存して、fragment shader でそれを読み取って次の位置と速度を計算して、別の texture に出力。パーティクル描画は vertex shader でその texture から位置を読み取る。てな感じ。パーティクル間の力の計算は何も考えずに総当り。Radeon HD 5750 で 4096 ノードで 60fps よゆうでした。ライン描画してないのもあるけど。(WebGL に geometry shader がなくって、いい実装がおもいつかない、、)

追記:リクエストにお答えして、MacBook Pro とか、DeviceOrientation に対応してるマシン & ブラウザで、筺体を傾けるとそっちに流れる、という仕組みをつけた。;-P