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