THREE.GPUParticleSystemを使ってみる

パーティクルを作成する際に、new THREE.ParticleSystemクラスを使おうとすると、下記の警告がでました。

THREE.ParticleSystem has been renamed to THREE.Points.

パーティクルを作成する場合はTHREE.Pointsクラスを使う必要があるみたいです。しかし、最近気がついたのですがTHREE.GPUParticleSystemクラスがあるようです。

GPUParticleSystemのプロパティ

GPUParticleSystemには引数として以下を渡せます。

key	説明	初期値
maxParticles	パーティクルの数	1000000
containerCount	パーティクルの格納用のコンテナ数(どう使うのかがよくわからなかった）	1
particleNoiseTex	パーティクルのノイズ用のテクスチャ	textures/perlin-512.png
particleSpriteTex	パーティクルのテクスチャ	textures/perlin-512.png
position	位置	THREE.Vector3(0,0,0)
velocity	速度	THREE.Vector3(0,0,0)
color	色	0xffffff
positionRandomness	パーティクルの位置の散らばり幅	0
velocityRandomness	パーティクルの速度の散らばり幅	0
colorRandomness	パーティクルの色の散らばり幅	0
turbulence	パーティクルの乱れ幅	1
lifetime	パーティクルの表示時間	5
size	パーティクルのサイズ	10
sizeRandomness	パーティクルのサイズの散らばり幅	10
smoothPosition	パーティクルの移動スピードの制御	false(等速移動)

particleNoiseTex

particleNoiseTexあり（textures/perlin-512.png）

particleNoiseTexなし

particleSpriteTex

textures/perlin-512.png

使い方

GPUParticleSystemクラスの部分だけ書きます。使い方は以下のようになるようです。

//GPUParticleSystemクラスを作成
let particleSystem = new THREE.GPUParticleSystem({
    //パーティクル数をコンストラクタに渡す
    maxParticles: 300000
});
scene.add(particleSystem);

//オプションを設定
let options = {
    position: new THREE.Vector3(),
    positionRandomness: 2,
    velocity: new THREE.Vector3(),
    velocityRandomness: 2,
    color: 0xA9F4FF,
    colorRandomness: 0.2,
    turbulence: 0.5,
    lifetime: 2,
    size: 5,
    sizeRandomness: 1,
    containerCount: 1,
    smoothPosition: true

};

let clock = new THREE.Clock();

//パーティクルの周りに飛ぶキラキラの数？
let spawnRate = 15000;
//横方向のスピード
let horizontalSpeed = 0.1;
//縦方向のスピード
let verticalSpeed = 0.1;
//加算値
let tick = 0;


render();


//描画
function render() {

    // rendering
    renderer.render(scene, camera);

    let delta = clock.getDelta();

    tick += delta;

    if (tick < 0) {
        tick = 0;
    }

    //前フレームからの間隔が0以上の場合のみ実行
    if (delta > 0) {
        options.position.x = Math.sin(tick * horizontalSpeed) * 20;
        options.position.y = Math.sin(tick * verticalSpeed) * 10;
        options.position.z = Math.sin(tick * horizontalSpeed + verticalSpeed) * 5;
        for (var x = 0; x < spawnRate * delta; x++) {
            //キラキラを描画
            particleSystem.spawnParticle(options);
        }
    }

    particleSystem.update(tick);

    // animation
    requestAnimationFrame(render);
}

上記のコードとは少し違いますが、GPUParticleSystemのサンプルです。 lifetimeを少し長めに取ってみました。パフォーマンスが悪くなりましたが。。。サンプル

まとめ

内部てきにはnew THREE.Pointsクラスをつかっているみたいです。使う機会があるのかがわかりませでした。THREE.Pointsクラスを使ったほうがいいような気もしました。

のぐそんブログ

暗いおじさんがシコシコ書くブログです。