not good but great

プログラミング、アート、映画・本の感想について書きます。

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が使えないスペックの低い環境でも動作する
・マテリアルにベクターデータが使える

・参考
three.js - CanvasRenderer - entacl Lab.

  //領域の横幅
    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()の使い方は以下のサイトを参考にした。
arc() メソッド - Canvasリファレンス - HTML5.JP

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

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

    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));
    } 

パーティクルの座標の意味

-1 <= Math.random() * 2 - 1 <= 1
だからパーティクルは原点を中心とした長さ1の立方体内に存在する。これでベクトルの方向を決定する。

normalize()の説明

Normalizes this vector. Transforms this Vector into a Unit vector by dividing the vector by it's length.

これはベクトルをそのベクトルの大きさで割るメソッド。つまり単位ベクトル(大きさが1のベクトル)を作っている。

multiplyScalar()

ベクトルの方向は決まったので、次はベクトルの大きさを決定する。それはスカラー倍すればOK。

scale.x,scale.y

これはパーティクルの半径になるのかなあと思ったけどよくわからなかった。



数Bの空間ベクトルの知識が出てきたので懐かしかった笑。