CanvasRendererを用いたパーティクル描画で数Bの空間ベクトルの知識が役立った話

demo

CanvasRendererとは何か?

THREE.jsが持つ描画モードの一つ。WebGLを使わずにCanvasのコンテキスト2Dのものを使用して描画している。WebGLを使う描画モードはWebGLRendererである。

ドキュメントの説明はこちら。

The Canvas renderer displays your beautifully crafted scenes not using WebGL, but draws it using the (slower) Canvas 2D Context API.

メリット

・GPUが使えないスペックの低い環境でも動作する
・マテリアルにベクターデータが使える

・参考
http://www.entacl.info/2012/08/threejs---canvasrender.php

　 //領域の横幅
    var width = window.innerWidth;
    //領域の縦幅
    var height = window.innerHeight;

     //レンダラーを生成
    renderer = new THREE.CanvasRenderer();
    //レンダラーのサイズを設定
    renderer.setSize(width,height);

パーティクルのマテリアルを作成

 var material = new THREE.ParticleCanvasMaterial({
        color:particleColor,
        program:function(context){
            context.beginPath();
            context.arc(arcX, arcY, radius, startAngle, endAngle, anticlockwise);
            context.closePath();
            context.fill();
        }
 });

ParticleCanvasMaterialにはcolor,programを渡す。programでは2D Canvasでの描画をするときのコードを書く。ここではcontext.arcを用いて、円を描画している。arc()の使い方は以下のサイトを参考にした。
http://www.html5.jp/canvas/ref/method/arc.html

パーティクルのジオメトリーを作成

次にパーティクルのジオメトリー、つまりパーティクルの空間座標を定義する。

    geometry = new THREE.Geometry();

    for(var i= 0;i < 50;i++){
         particle = new THREE.Particle(material);
         //パーティクルの座標
         particle.position.x = Math.random() * 2 - 1;
         particle.position.y = Math.random() * 2 - 1;
         particle.position.z = Math.random() * 2 - 1;
         //バラツキを1以内にする
         particle.position.normalize();
         //ベクトルを引数の値でスカラー倍する
         particle.position.multiplyScalar(Math.random() * 10 + 300);
         particle.scale.x = particle.scale.y = 5;

         scene.add(particle);

         //頂点を設定
         geometry.vertices.push(new THREE.Vertex(particle.position));
    }