2012/06/01

Three.jsで水滴シミュレータを作った話

この間、Three.jsをつかって簡単なプログラムを作った。(→RainDrops
盤面の水滴が動く3Dの画面が見られる。マウスで回転させて表示することもできる。

簡単に3D表示ができるThree.jsの話

Three.jsというライブラリのおかげで、あまり3Dの用語を勉強しなくても3D表示をすることができた。

なかでも、右クリックで表示しているものを回転させる部分は、とても便利な TrackballControls というのがあって、
controls = new THREE.TrackballControls(camera, renderer.domElement);
//renderer.domElementでは、回転などのマウス操作を有効にする範囲をDOMエレメントで指定している

controls.rotateSpeed = 5.0; //回転するときのスピード
controls.zoomSpeed = 5; //ズームするときのスピード
controls.panSpeed = 2; //パンするときのスピード
controls.noZoom = false; //ズームしない設定をOFF
controls.noPan = false; //パンしない設定をOFF

最低限、この最初の一行をinit()関数なりにいれておけば、3Dをグリグリ回しながら見られるようになるみたいだ。
簡単すぎてびっくりした。

少なくともちょっとした3Dのデータを見せることにも使えるし、夢がひろがる。

アルゴリズムの話

水滴シミュレータのアルゴリズムの方は、boids(ボイド)なんかを見て作った。

boidsは3つのルールで鳥の群れの飛行をシミュレートするもので、Three.jsにもサンプルがあったりする。

このRainDropsは、窓につく水滴が落ちていく様子を同様に3つのルール(boidsとはまた違うルール)でシミュレートする。

まず、水滴が落ちる「ガラス面」を二次元の碁盤のような平面に見立てる。水滴は一滴で一マスとして、水滴をその大きさで表すことにして「重み(weight)」と名づける。そして以下のルールで動かしていく。

  1. 雨が降る ランダムでマスに重みをつける。
  2. まとまる 隣接マスに水滴があるとき、マスすべての重みを足し合わせ、一つのマスにまとまる。
  3. 落ちる 一マスが一定の重さ以上のとき、一マス下へ移動する。

本当に単純なモデル化でシミュレートできるのかな、という疑問を解決するために書いた。

単純なルールで生き物のように動くことで有名なライフゲームも、最初はかなり複雑なルールでつくられていたらしい。

意外とお手軽にシミュレーションできるんだなと思った。

コメントを投稿