babylon101| 13. Particles 粒子

本教程将讨论babylonjs中的粒子系统。粒子通常是小精灵，用来模拟难以重现的现象，如火、烟、水，或抽象的视觉效果，如魔法闪光和仙尘。这是通过从一个区域发射大量粒子云来实现的。在3.2版中，有一些特定的emitter将该区域约束为盒子、球体或锥体的形状。您还可以编写自己的自定义函数来控制云和区域。GPU粒子是粒子家族的最新成员，可以使用适当的浏览器来提高性能。

创建粒子

要执行这个功能，首先需要创建一个ParticleSystem对象。

var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);

这设置了系统中粒子的数量(容量)。粒子系统还需要一个纹理，以便可以看到粒子，以及一个emitter，它从一个起点设置粒子的位置和传播。

请注意，您可以使用ParticleHelper创建一个默认配置的系统，该系统具有:BABYLON.ParticleHelper.CreateDefault(emitter)。

一旦完成，你设置粒子系统的运动使用

particleSystem.start();

停止它

particleSystem.stop();

要延迟粒子系统的启动，particleSystem.startDelay = 3000;此值以毫秒为单位定义延迟。

也可以使用particleSystem.start(3000);延迟启动粒子系统。此值覆盖particleSystem.startDelay , 如果设置了startDelay字段。

注:停止粒子系统将阻止新粒子的产生，但现有粒子将继续存在。如果希望将系统重置为空状态，还必须调用particleSystem.reset()

您还可以设置粒子系统运行的时间，不过带电粒子可能会在此之后继续运行。

particleSystem.targetStopDuration = 5;

一旦停止，你可以处理粒子系统。如果你想创建一个带有特定targetStopDuration的单镜头粒子系统，这非常有用。

particleSystem.disposeOnStop = true;

Pre-warming

从Babylon.js v3.3开始，您现在可以指定一个预热期，以确保您的系统在呈现之前处于正确的状态。

为此，您需要设置两个属性:

• system.preWarmCycles : Gets or sets a value indicating how many cycles (or frames) must be executed before first rendering (this value has to be set before starting the system). Default is 0 (ie. no pre-warming)
  • 获取或设置一个值，该值指示在首次呈现之前必须执行多少循环(或帧)(必须在启动系统之前设置此值)。默认值为0(即。没有预热)
• system.preWarmStepOffset : Gets or sets a value indicating the time step multiplier to use in pre-warm mode (default is 1)
  • 获取或设置一个值，该值指示要在预热模式下使用的时间步长乘法器(默认值为1)

所以如果你这样设置你的系统:

system.preWarmCycles = 100;
system.preWarmStepOffset = 5;
system.start();

它将执行粒子动画循环100次，时间步长设置为5倍快于实时。您需要的周期越多，系统启动的速度就越慢。所以增加时间步长来减少运行周期是很有趣的。但是请记住，如果一个粒子的生命垃圾信息小于时间步长，那么太大的时间步长就会带来问题。

里有一个预热的例子: https://www.babylonjs-playground.com/#MX2Z99#8

粒子纹理

设置 particleTexture

particleSystem.particleTexture = new BABYLON.Texture("PATH TO IMAGE", scene);

您还可以对纹理应用蒙版来过滤某些颜色，或者过滤alpha通道的一部分。

particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);

要在场景中使用多个纹理，请使用多个粒子系统，所有这些粒子系统都可以使用相同的emitter对象。

粒子emitter

emitter 可以使用vector3或网格定位，在这种情况下，网格的位置用作位置。

particleSystem.emitter = new BABYLON.Vector3(-1, 2, 3);

var source = BABYLON.Mesh.CreateBox("source", 1.0, scene);
particleSystem.emitter = source;

世界偏移

从babylonjs v4.0开始，你可以设置一个世界偏移到你的粒子:

particleSystem.worldOffset = new BABYLON.Vector3(100, 20, -453);

这个命令将使用偏移量来移动粒子(当您需要将相机放在世界的中心以提高精度时，通常使用偏移量，然后移动世界)。

位置和传播

粒子从发射体的传播是在一个盒子内进行的，盒子的大小是由相对于发射体位置设置盒子的下、左、前角和上、右、后角来决定的。这是使用minEmitBox和maxEmitBox完成的

particleSystem.minEmitBox = new BABYLON.Vector3(-2, -3, 4); 
particleSystem.maxEmitBox = new BABYLON.Vector3(4, 2, 3);

该框可以折叠成轴方向的直线，例如x轴

particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); 
particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0);

微调粒子系统

查看如何更改粒子的寿命、大小和颜色、它们的发射速率、旅行方向(可选受重力影响)。你也可以影响它们的旋转、速度和云的形状。下面是一些可以修改这些参数的示例。

lifetime 生存时间

粒子被释放后消失(或死亡)所需的时间可以是多种多样的。一旦一个粒子死亡，这个粒子就会被回收。它们的生存期是一个介于低值和高值之间的随机范围，如

// Life time of each particle (random between...)
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;

从Babylon.js v3.3开始，还可以将生存期分别定义为粒子系统持续时间。例如，如果您设置system.targetStopDuration = 0.5，然后你可以用这样的渐变来定义粒子的寿命:

particleSystem.addLifeTimeGradient(0, 0.5);
particleSystem.addLifeTimeGradient(1, 0);

第一个参数定义梯度(0表示粒子系统开始时的梯度，1表示粒子系统结束时的梯度)。第二个参数是粒子的寿命。这意味着在粒子系统开始时，粒子的生命周期被设为0.5。当系统接近目标时，粒子的生命周期将接近于0。建议至少为0和1定义一个梯度。只要梯度值在0到1之间，就可以添加任意多的梯度。

particleSystem.addLifeTimeGradient(0, 0.5, 0.8);
particleSystem.addLifeTimeGradient(1.0, 0, 0.1);

在这种情况下，当梯度达到时，粒子的寿命将在这两个值之间随机选取。要删除渐变，可以调用particleSystem.removeLifeTimeGradient(0.5)。

size 尺寸

粒子的大小也可以在给定的范围内随机变化。

// Size of each particle (random between...)
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;

如果你想改变颗粒大小不一致，你可以对ScaleX/Y使用min/max:

particleSystem.addSizeGradient(0, 0.5);

第一个参数定义梯度(0表示粒子诞生时的梯度，1表示粒子死亡时的梯度)。第二个参数是应用于粒子初始尺寸的因素。在这种情况下，粒子将产生初始大小的一半(由minScale和maxScale计算)。建议至少为0和1定义一个梯度:

particleSystem.addSizeGradient(0, 0.5);
particleSystem.addSizeGradient(1.0, 3);

只要梯度值在0到1之间，就可以添加任意多的梯度。

你也可以定义一个更复杂的结构，提供两个值每梯度:

particleSystem.addSizeGradient(0, 0.5, 0.8);
particleSystem.addSizeGradient(1.0, 3, 4);

在这种情况下，当梯度达到时，粒子的大小将在这两个值之间随机选取。要删除渐变，可以调用particleSystem.removeSizeGradient(0.5)。

当处理粒度时，您可能需要移动轴心(也就是转换的中心)。默认情况下，缩放将来自粒子的中心，但您可能想要从顶部或底部缩放它。若要更改主位置，只需调用:

particleSystem.translationPivot = new BABYLON.Vector2(0, -0.5); // In this case the scale will come from the bottom of the particle

这里有一个例子，大小梯度和一个枢轴集到底部 https://www.babylonjs-playground.com/#L9QWZB#0

particles color 粒子的颜色

可以为粒子系统设置三种颜色，其中两种颜色在粒子的生命周期内组合(或混合)，第三种颜色在粒子消失之前呈现.

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

从Babylon.js v3.3开始，还可以定义颜色渐变。如果定义颜色梯度，color1、color2和colorDead属性将被忽略。

要添加颜色渐变，只需调用以下代码:

particleSystem.addColorGradient(0, new BABYLON.Color4(1, 1, 1, 0));

第一个参数定义梯度(0表示粒子诞生时的梯度，1表示粒子死亡时的梯度)。建议至少为0和1定义一个梯度:

particleSystem.addColorGradient(0, new BABYLON.Color4(1, 1, 1, 0));
particleSystem.addColorGradient(1.0, new BABYLON.Color4(1, 1, 1, 1));

只要梯度值在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));

在这种情况下，当梯度达到时，粒子的颜色将在两种颜色之间随机选择。

要删除渐变，可以调用particleSystem.removeColorGradient(0.5)。

Particle blending粒子混合

粒子与场景混合的方式有很多种，这些都是用blendMode设置的。

particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD;

BLENDMODE_ONEONE是默认值，如果没有指定blendMode，将使用它。

BLENDMODE_ONEONE—添加颜色而不影响结果;
BLENDMODE_STANDARD -使用粒子的alpha(即。颜色(1 -)+粒子颜色。
BLENDMODE_ADD -添加颜色，但只有粒子颜色使用粒子的alpha(即。颜色+粒子颜色*)。
blendmode_正片叠底-颜色相乘并添加到(1 - alpha)(即。颜色*粒子颜色+ 1 -)。
BLENDMODE_MULTIPLYADD—使用BLENDMODE_MULTIPLY和BLENDMODE_ADD进行两次渲染。

Rates 粒子速率

发射速率决定每秒发射粒子的数量。粒子云的数量越大，其密度越大。当粒子死亡时，它们会被回收再释放出来。如果它们的寿命足够长，它们的发射速度足够快，就有可能在粒子的发射中产生一个缺口。

particleSystem.emitRate = 1000;

particleSystem.manualEmitCount = 300;

您可以通过设置手动排放计数来停止粒子的连续发射

在这种情况下，计数给出的粒子数被释放，没有粒子的进一步释放。

Direction 粒子的方向

可以指定两个方向。如果你只指定一个方向粒子就会沿着给定的方向随机运动。当两个方向都给定时，粒子通常会在两个方向内运动。

particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

方向也会受到重力的影响。

Gravity 粒子的重力

可以应用重力值。例如，如果在Y方向上是负的粒子就会慢慢向下掉。

/Set the gravity of all particles (not necessarily down)
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

Rotation 粒子的旋转

你可以为粒子定义一个关于z轴的角速度范围，粒子的角速度单位为弧度/秒:

particleSystem.minAngularSpeed = 0;
particleSystem.maxAngularSpeed = Math.PI;

也可以用:定义初始旋转角度:

particleSystem.minInitialRotation = 0;
particleSystem.maxInitialRotation = Math.PI;

从Babylon.js v3.3开始，还可以定义角速度因子梯度。

添加角速度梯度，只需调用以下代码:

particleSystem.addAngularSpeedGradient(0, 0.5);

第一个参数定义梯度(0表示粒子诞生时的梯度，1表示粒子死亡时的梯度)。第二个参数是要使用的角速度。在这种情况下，粒子将以每帧0.5弧度的角速度诞生。建议至少为0和1定义一个梯度:

particleSystem.addAngularSpeedGradient(0, 0.5);
particleSystem.addAngularSpeedGradient(1.0, 3);

只要梯度值在0到1之间，就可以添加任意多的梯度。

你也可以定义一个更复杂的结构，提供两个值每梯度:

particleSystem.addAngularSpeedGradient(0, 0.5, 0.8);
particleSystem.addAngularSpeedGradient(1.0, 3, 4);

在这种情况下，当达到梯度时，粒子的角速度将在这两个值之间随机选取。
要删除渐变，可以调用particleSystem.removeAngularSpeedGradient(0.5)。

Speed 粒子的速度

您可以为发射粒子的功率定义一个范围，以及总体运动速度(0.01为默认更新速度，更快的更新=更快的动画)。

 particleSystem.minEmitPower = 1;
  particleSystem.maxEmitPower = 3;
  particleSystem.updateSpeed = 0.005;

Velocity over time  随时间变化的速度

你可以用梯度来定义速度随时间的变化。速度随时间的变化是作用于粒子方向的能量(或因子)。值2将方向大小乘以2，因此将粒子速度乘以2。

要添加速度梯度，只需调用以下代码:

particleSystem.addVelocityGradient(0, 0.5);

第一个参数定义梯度(0表示粒子诞生时的梯度，1表示粒子死亡时的梯度)。第二个参数是要使用的速度。在这种情况下，粒子将以0.5的速度诞生。建议至少为0和1定义一个梯度:

particleSystem.addVelocityGradient(0, 0.5);
particleSystem.addVelocityGradient(1.0, 3);

只要梯度值在0到1之间，就可以添加任意多的梯度。

你也可以定义一个更复杂的结构，提供两个值每梯度:

particleSystem.addVelocityGradient(0, 0.5, 0.8);
particleSystem.addVelocityGradient(1.0, 3, 4);

在这种情况下，当梯度达到时，粒子的速度将在这两个值之间随机选取。

要删除渐变，可以调用particleSystem.removeVelocityGradient(0.5)。

Limit velocity over time极限速度随时间的变化

可以用梯度定义速度随时间的极限。这个极限将用于检查粒子的当前速度，如果达到了这个极限，就会对速度施加一个因子。你可以用particlesystem.limitvelocity阻尼来定义这个因子。

要添加极限速度梯度，只需调用以下代码:

particleSystem.addLimitVelocityGradient(0, 0.5);

第一个参数定义梯度(0表示粒子诞生时的梯度，1表示粒子死亡时的梯度)。第二个参数是要使用的极限速度。在这种情况下，出生后直接检查粒子速度，如果大于0.5，则应用阻尼参数(所以速度为码速*阻尼)。

建议至少为0和1定义一个梯度:

particleSystem.addLimitVelocityGradient(0, 0.5);
particleSystem.addLimitVelocityGradient(1.0, 3);

只要梯度值在0到1之间，就可以添加任意多的梯度。

你也可以定义一个更复杂的结构，提供两个值每梯度:

particleSystem.addLimitVelocityGradient(0, 0.5, 0.8);
particleSystem.addLimitVelocityGradient(1.0, 3, 4);

在这种情况下，当达到梯度时，粒子的极限速度将在这两个值之间随机选取。

要删除渐变，可以调用particlesystem.removelimitocitygradient(0.5)。