今回はパーティクル系で3本作成+立体視用にちょっといじった。
パーティクル
three.js:study07
three.js:study06
three.js:study05
立体視
three.js:study07b
three.js:study05b
three.js:study02b

[three.js:study05]
three.js、githubのサンプルにあるexamples/webgl_particles_sprites.htmlを参考にパーティクルを立方体の枠に閉じ込めるような形で作成してみた。
テクスチャが一種類の時は、問題ないのだが3種類にした時に、重なるポイントで四角枠が現れる。
これはextrasにあるImageUtilsを使用して
THREE.ImageUtils.loadTexture( テクスチャパス );
とすると回避できた。

[three.js:study06]
引き続き秩序とランダムを意識し、C言語による最新アルゴリズム事典の384ページ出てくるリサジュー曲線というのを使用してみた。
こちらのpdfにも3次元リサージュについて書かれてある。
具体的には、a1〜3を幅、f1〜3を振動、e1〜3は位相変数として、下記のように設定した。

var x = a1 * Math.sin(f1 * i + e1);
var y = a2 * Math.sin(f2 * i + e2);
var z = a3 * Math.sin(f3 * i + e3);

位相変数での違いはそんなに分からないのだが、振動は随分と雰囲気が変わる。
study06においては、0番目のパーティクルが端に到達すると、ランダムで設定を変化させるように作成してある。

[three.js:study07]
study07ではもう少し発展させ球面リサージュを使用している。
こちらの中段に出てくる、
u=(q/p)t
v=r t
{Cos[u]Sin[v], Sin[u] Sin[v], Cos[v]}
を参考に、

u=(q/p)*i;
v=r*i;
var x = Math.cos(u)*Math.sin(v)*100;
var y = Math.sin(u)*Math.sin(v)*100;
var z = Math.cos(v)*100;

として設定、クリックでランダム再設定としてある。

[立体視 study02b,05b,07b]
facebookにてカメラ複数台はできないかとの質問を受け、調べてみると立体視できるレンダラが存在していた。
study02b,05b,07b
これは、今まで
renderer = new THREE.WebGLRenderer();
と書いていたレンダラを
renderer = new THREE.CrosseyedWebGLRenderer( { separation: 20, antialias: true } );
と書き換える。
これだけだと何故かバグるので、camera.lookAtする時のターゲットを
camera.target = new THREE.Vector3(0, 0, 0);
とcameraのパラメータとして設定する。そしてレンダー時に
camera.lookAt(camera.target);
のようにすると立体視用に左右に画面がわかれる。
こうしてみると、study05bのようなものより、study07bで特にライン数が少ないものが美しく見える。

前回のエントリでも書いたが、safariでは開発メニューからwebGLを有効にする設定が必要だ。
それと、firefoxで見た場合画面リフレッシュがなされていないようなので、とりあえずchromeへ誘導するように警告を入れた。
これについてはfirefoxかthree.jsのバージョンアップで見れるようになったとき、もしくは画面リフレッシュ時対策がうまくできた時に見えるようにするつもりだ。

参考書籍