Babylon.jsのチュートリアルをやってみるその18

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Particle

今日もパーティクルです。
昨日は基本的なパーティクルを作って再生させてみました。 今日はパーティクルが持っているパラメータを見ていくことにします。

Life time

Unityでもおなじみのライフタイムです。
パーティクルが生成されて消えるまでの時間を定義することができます。

 // パーティクルのライフタイムを定義。min/maxで最小最大を決めらる
particleSystem.minLifeTime = 1
particleSystem.maxLifeTime = 10;

Size

パーティクルの一つ一つの粒子のサイズをどのくらいにするかて定義できます

// パーティクルのサイズも定義可能
particleSystem.minSize = 0.1;
// max/minスケールを定義している場合下のほうが優先される
particleSystem.maxSize = 3;

全体のスケールだけでなくxyを定義することもできます

// パーティクルのサイズも変更可能
particleSystem.minScaleX = 0.1;
particleSystem.maxScaleX = 3;
particleSystem.minScaleY = 0.2;
particleSystem.maxScaleY = 3;

Color

もちろんパーティクル自体の色の変更も可能です。
パーティクル生成時からブレンドされる2色と消える直前に変化する3つを定義できます。

particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

カラーグラデーションの定義も可能です。
カラーグラデーションを使うと上で指定した3つの色の定義は無視されます。

// addColorGradient(0or1,色定義)
// 0or1はこの間であれば自由にグラデーションカラーを設定できる。
//0は始まり1は終了を意味する
particleSystem.addColorGradient(0, new BABYLON.Color4(1, 1, 1, 0), new BABYLON.Color4(1, 0, 1, 0));
particleSystem.addColorGradient(1.0, new BABYLON.Color4(1, 1, 1, 1)new BABYLON.Color4(1, 0, 1, 1));

BlendMode

ブレンドは以下のデモが良くできていたのでそちらを参考にします。
・BLENDMODE_ONEONE  デフォルト設定。単純に色が追加される
・BLENDMODE_STANDARD パーティクルのアルファを使用する
・BLENDMODE_ADD  color + particleColor * alphaで生成される
・BLENDMODE_MULTIPLY  乗算した色を追加
・BLENDMODE_MULTIPLYADD マルチパスレンダラー

playground.babylonjs.com

emitRate

1秒間に放出するパーティクル量を設定することができます。

particleSystem.emitRate = 1000;

Direction

パーティクルを放出する方向を2方向設定することができます
また、パーティクル自体に重力を適用することができるので
Directionと合わせると紙吹雪を投げたような動きになる

particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
// パーティクルに重力を適用
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

Rotation

パーティクルの回転速度や角度の定義もできます

// 回転の設定
particleSystem.minAngularSpeed = 100;
particleSystem.maxAngularSpeed = Math.PI;
particleSystem.minInitialRotation = 0;
particleSystem.maxInitialRotation = Math.PI;
particleSystem.addAngularSpeedGradient(0, 1.5);

作ってみたパーティクルはこんな感じになりました。 f:id:torikizi:20190624230657g:plain

今日はここまで
次はParticleの続きをやります。