babylon101

粒子


粒子

本教程将讨论BabylonJS中的粒子系统。粒子通常是小精灵,用于模拟难以复制的现象,如火,烟,水,或抽象的视觉效果,如魔法闪光和仙尘。这是通过从一个区域发出很多粒子的云来完成的。从版本3.2开始,有特定的发射器将该区域限制为盒子,球体或锥体的形状。您还可以编写自己的自定义函数来控制云和区域。

GPU粒子是粒子系列的最新成员,可以使用适当的浏览器来提高性能。

Particles

             粒子。

创建粒子

粒子系统

要执行这个神奇的技巧,首先需要创建一个ParticleSystem对象。

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

这将设置系统中的粒子数(容量)。粒子系统还需要纹理以便可以看到粒子和发射器,其设置粒子从起始点的位置和扩散。

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

完成后,使用将粒子系统设置为运动

particleSystem.start();

并停止它

particleSystem.stop();

要延迟粒子系统启动,particleSystem.startDelay = 3000;可以设置。此值定义延迟(以毫秒为单位)。

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

注意:停止粒子系统将阻止创建新粒子,但现有粒子将继续。如果要将系统重置为空状态,则还必须调用particleSystem.reset()

您还可以设置粒子系统运行的时间,但在此之后可能会继续使用粒子系统。

particleSystem.targetStopDuration = 5;

停止后,您可以处理粒子系统。如果要创建具有特定targetStopDuration的单击粒子系统,则非常有用。

particleSystem.disposeOnStop = true;

预变暖

从Babylon.js v3.3开始,您现在可以指定预热期,以确保在渲染之前系统处于正确状态。

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

  • system.preWarmCycles: 获取或设置一个值,指示在首次渲染之前必须执行多少个循环(或帧)(必须在启动系统之前设置此值)。默认值为0(即没有预热)
  • system.preWarmStepOffset: 获取或设置一个值,指示在预热模式下使用的时间步长乘数(默认值为1)

因此,如果您将系统设置为:

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

它将执行粒子动画循环100次,时间步长设置为实时快5倍。您想要的周期越多,系统启动的速度就越慢。因此,增加时间步长以减少运行周期可能会很有趣。但请记住,如果粒子的生命垃圾邮件小于时间步长,那么太大的时间步将引入问题。

以下是预热的一个例子: https://www.babylonjs-playground.com/#MX2Z99#8 -


粒子纹理

将纹理应用于粒子,例如
Flare

设置 particleTexture

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

您还可以将蒙版应用于纹理以过滤某些颜色,或过滤Alpha通道的一部分。

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

此示例生成以下内容
TextureMask

要在场景中使用多个纹理,请使用多个粒子系统,所有粒子系统都可以使用相同的发射器对象。

粒子发射器

发射器可以使用矢量3或网格定位,在这种情况下,网格的位置用作位置。

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

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

世界抵消

从Babylon.js 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轴

EmitBox

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

基本游乐场示例

在他看来,你现在可以创建一个粒子系统,尽管它非常缺乏灵感。只有一些粒子出现在扩散空间中,四处漂移并消失。

幸运的是,通过设置更多属性,事情可以很快变得更有趣。继续阅读。

微调粒子系统

了解如何更改颗粒的寿命,大小和颜色,它们的发射速率,行进方向(可选择受重力影响)。您还可以影响它们的旋转,速度和云形状。您可以在下面找到可以更改其中一些参数的游乐场示例

一生

颗粒在发射后消失(或死亡)所花费的时间可以变化。一旦颗粒死亡,颗粒就会被回收。它们的寿命是作为低值和高值之间的随机范围给出的

// 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的寿命。并且当系统接近时,targetStopDuration粒子将获得接近0的寿命。

建议至少为0和1定义一个渐变。

只要渐变值介于0和1之间,就可以根据需要添加任意渐变。

您还可以通过为每个渐变提供两个值来定义更复杂的构造:

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

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

要删除渐变,您可以调用particleSystem.removeLifeTimeGradient(0.5)。

尺寸

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

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

如果要将粒径更改为不是正方形,则可以使用ScaleX / Y的最小值/最大值:

// Scale of each particle (random between...)
particleSystem.minScaleX = 0.1;
particleSystem.maxScaleX = 0.5;

particleSystem.minScaleY = 0.2;
particleSystem.maxScaleY = 0.4;

从Babylon.js v3.3开始,您还可以定义大小因子渐变。

要添加大小渐变,请调用以下代码:

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 -


粒子颜色

可以为粒子系统设置三种颜色,两种颜色在粒子的生命周期中组合(或混合),三种颜色在粒子消失之前就已经完成。

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

以下是颜色渐变的示例 https://www.babylonjs-playground.com/#MX2Z99#8 -


粒子混合

粒子与场景混合的方式有多种,并且这些方法是设置的blendMode。

particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD;

BLENDMODE_ONEONE是默认值,如果blendMode未指定,将使用。

  • BLENDMODE_ONEONE - 添加颜色而不影响结果的alpha;
  • BLENDMODE_STANDARD - 使用粒子的alpha(即颜色(1-alpha)+ particleColor alpha)添加颜色。
  • BLENDMODE_ADD - 添加颜色,但只有粒子颜色使用粒子的alpha(即color + particleColor * alpha)。
  • BLENDMODE_MULTIPLY - 颜色相乘并添加到(1 - alpha)(即color * particleColor + 1 - alpha) 在这里演示 -

  • BLENDMODE_MULTIPLYADD - 用两个渲染BLENDMODE_MULTIPLY然后渲染BLENDMODE_ADD。 在这里演示 -

价格

所述emitRate确定每秒发射的粒子的数量。数字越大,发出的粒子云就越密集。当颗粒死亡时,它们被再循环以再次排出。如果它们的寿命足够长并且它们的发射速率足够快,则可能在颗粒的发射中存在间隙。

emitRate

particleSystem.emitRate = 1000;

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

particleSystem.manualEmitCount = 300;

在这种情况下,由计数给出的颗粒数量被排出,并且没有进一步的颗粒排放。

方向

可以指定两个方向。如果仅指定一个方向,则粒子将沿给定的一般方向随机移动。当给出两个方向时,颗粒通常将在两个方向内行进。

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

方向也可能受到重力的影响。

重力

可以应用重力值。例如,如果在Y方向上为负,则颗粒将缓慢地向下拉。

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

回转

您可以为粒子的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)。

速度

您可以定义发射粒子的功率范围,以及整体运动速度(0.01是默认更新速度,更快更新=更快的动画)。

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

随着时间的推移速度

您可以使用渐变定义速度随时间的变化。速度随时间的变化是应用于粒子方向的能量(或因子)。值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);

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

以下是应用于粒子系统的速度示例:https://www.babylonjs-playground.com/#3W04PW#0 -


要删除渐变,您可以调用particleSystem.removeVelocityGradient(0.5).

限制速度随时间的变化

您可以使用渐变定义速度随时间的限制。此限制将用于检查粒子的当前速度,如果达到限制,则将对速度应用因子。您可以使用定义此因子particleSystem.limitVelocityDamping。

要添加极限速度渐变,请调用以下代码:

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

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

以下是应用于粒子系统的极限速度示例: https://www.babylonjs-playground.com/#9GBBPM#2 -


要删除渐变,您可以调用particleSystem.removeLimitVelocityGradient(0.5)。

拖动因子

您可以使用渐变定义随时间推移的拖动因子。该因子将用于通过向粒子方向施加阻力因子来模拟空气摩擦。例如,如果您的阻力系数设置为0.8,则只有20%的粒子方向将添加到粒子位置。

要添加拖动渐变,请调用以下代码:

particleSystem.addDragGradient(0, 0.5);

第一个参数定义了梯度(0表示粒子出生,1表示粒子死亡)。第二个参数是要使用的拖动因子。在这种情况下,粒子位置将是particle.position = particle.direction * (1.0 - 0.5)。

建议至少为0和1定义一个渐变:

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

只要渐变值介于0和1之间,就可以根据需要添加任意渐变。

您还可以通过为每个渐变提供两个值来定义更复杂的构造:

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

在这种情况下,当达到梯度时,将在两个值之间随机选取粒子的阻力系数。

以下是应用于粒子系统的阻力因子示例: https://www.babylonjs-playground.com/#BDW3BF#0 -


要删除渐变,您可以调用particleSystem.removeDragGradient(0.5)。

随着时间的推移发射率

您可以使用渐变定义粒子发射率。随着时间的推移,发射率将覆盖system.emitRate属性的值。

要添加发射率渐变,请调用以下代码:

particleSystem.addEmitRateGradient(0, 10);

请注意,只有系统具有确定的使用寿命意味着您必须定义system.targetStopDuration属性时,发射率梯度才有效

第一个参数定义梯度(0表示系统启动,1表示系统结束)。第二个参数是要使用的发射率。在这种情况下,系统将通过每帧发射10个粒子开始。建议至少为0和1定义一个渐变:

particleSystem.addEmitRateGradient(0, 10);
particleSystem.addEmitRateGradient(1.0, 500);

只要渐变值介于0和1之间,就可以根据需要添加任意渐变。

您还可以通过为每个渐变提供两个值来定义更复杂的构造:

particleSystem.addEmitRateGradient(0, 5, 10);
particleSystem.addEmitRateGradient(1.0, 800, 1000);

在这种情况下,当达到梯度时,将在两个值之间随机选取发射率。

以下是应用于粒子系统的发射率梯度的示例:https://www.babylonjs-playground.com/#3NM14X#0 -


要删除渐变,您可以调用particleSystem.removeEmitRateGradient(0.5)。

随时间开始大小

要添加起始大小渐变,请调用以下代码:

particleSystem.addStartSizeGradient(0, 2);

请注意,只有系统具有确定的使用寿命意味着您必须定义system.targetStopDuration属性时,启动大小梯度才有效

第一个参数定义梯度(0表示系统启动,1表示系统结束)。第二个参数是要使用的起始大小比例。在这种情况下,系统将从发射尺寸为原始尺寸2倍的颗粒开始。(例如,如果size设置为2并且起始大小设置为3,则结果输出大小将为6)建议至少为0和1定义梯度:

particleSystem.addStartSizeGradient(0, 10);
particleSystem.addStartSizeGradient(1.0, 500);

只要渐变值介于0和1之间,就可以根据需要添加任意渐变。

您还可以通过为每个渐变提供两个值来定义更复杂的构造:

particleSystem.addStartSizeGradient(0, 5, 10);
particleSystem.addStartSizeGradient(1.0, 800, 1000);

在这种情况下,当达到梯度时,将在两个值之间随机选取起始大小。

以下是应用于粒子系统的起始大小渐变的示例:https://www.babylonjs-playground.com/#3NM14X#14 -


要删除渐变,您可以调用particleSystem.removeStartSizeGradient(0.5)。

斜坡渐变

您可以使用渐变渐变来根据alpha更改粒子的颜色。

斜坡渐变非常强大,但需要一些设置。

首先,您需要声明渐变渐变:

system.addRampGradient(0.0, new BABYLON.Color3(1, 1, 1));
system.addRampGradient(0.09, new BABYLON.Color3(209/255, 204/255, 15/255));
system.addRampGradient(0.18, new BABYLON.Color3(221/255, 120/255, 14/255));
system.addRampGradient(0.28, new BABYLON.Color3(200/255, 43/255, 18/255));
system.addRampGradient(0.47, new BABYLON.Color3(115/255, 22/255, 15/255));
system.addRampGradient(0.88, new BABYLON.Color3(14/255, 14/255, 14/255));
system.addRampGradient(1.0, new BABYLON.Color3(14/255, 14/255, 14/255));

这些渐变将用于构建渐变颜色纹理。

然后你需要打开它们:

system.useRampGradients = true;

通过默认的粒子(从内置的α值textureAlpha * particleColorAlpha)来获得斜坡颜色(Alpha是在斜坡梯度列表中的索引)使用如下公式:finalColor = textureColor * particleColor * rampColor[alphaIndex]。

但是为了给你更多控制,你可以使用重映射功能来重新映射这个alpha索引:

system.addColorRemapGradient(0, 0, 0.1);
system.addColorRemapGradient(0.2, 0.1, 0.8);
system.addColorRemapGradient(0.3, 0.2, 0.85);
system.addColorRemapGradient(0.35, 0.4, 0.85);
system.addColorRemapGradient(0.4, 0.5, 0.9);
system.addColorRemapGradient(0.5, 0.95, 1.0);
system.addColorRemapGradient(1.0, 0.95, 1.0);

颜色重新映射渐变定义了随时间变化的最小值和最大值(取决于您添加的许多渐变)。然后使用以下公式将alpha索引从[min,max]重新映射到[0,1] finalAlphaIndex = clamp((alphaIndex - min) / (max - min), 0.0, 1.0)。

最终,您还可以重新映射每个像素生成的alpha值:

system.addAlphaRemapGradient(0, 0, 0.1);
system.addAlphaRemapGradient(1.0, 0.1, 0.8);

alpha重映射将使用以下公式计算最终的alpha值:finalAlpha = clamp((textureAlpha * particleColorAlpha * rampColor.a - min) / (max - min), 0.0, 1.0)。

你可以在这里找到一个演示: https://www.babylonjs-playground.com/#VS5XS7#0 -


对准

默认情况下,所有粒子都呈现为广告牌。但是您可以决定将它们与粒子方向对齐system.isBillboardBased = false。

你可以在这里找到一个 演示 -


启用广告牌后,您可以决定要使用完整的广告牌(在所有轴上)还是仅在Y轴上使用此代码:

system.billboardMode = BABYLON.ParticleSystem.BILLBOARDMODE_Y;

您还可以使用拉伸广告牌,它将像一个完整的广告牌模式,但具有一个额外的旋转,以使粒子与他们的方向对齐。

演示可以比单词更好地解释这个广告牌模式: https://www.babylonjs-playground.com/#B9HKG0#0 -


您还可以找到拉伸广告牌粒子的演示: https://www.babylonjs-playground.com/#5A4TP5 -


可调节的游乐场示例

形状发射器

从Babylonjs 3.2开始,你可以将粒子发射的区域塑造成a

  • 半球
  • 圆筒
  • 锥体

通过添加特定的发射器功能。

点发射器

要创建点发射器,您可以运行以下代码:

var pointEmitter = particleSystem.createPointEmitter(new BABYLON.Vector3(-7, 8, 3), new BABYLON.Vector3(7, 8, -3));

该createPointEmitter方法按以下顺序采用四个参数

  • direction1: Vector3,
  • direction2: Vector3

返回的pointEmitter对象可用于更改这些属性的值。

pointEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
pointEmitter.direction2 = new BABYLON.Vector3(5, 2, 1);

盒子发射器

例如,要创建一个盒子发射器

var boxEmitter = particleSystem.createBoxEmitter(new BABYLON.Vector3(-7, 8, 3), new BABYLON.Vector3(7, 8, -3), new BABYLON.Vector3(-1, 0, 0), new BABYLON.Vector3(1, 0, 0));

该createBoxEmitter方法按以下顺序采用四个参数

  • direction1: Vector3,
  • direction2: Vector3,
  • minEmitBox: Vector3,
  • maxEmitBox: Vector3

返回的boxEmitter对象可用于更改这些属性的值。

boxEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
boxEmitter.direction2 = new BABYLON.Vector3(5, 2, 1);  
boxEmitter.minEmitBox = new BABYLON.Vector3(-2, -3, -4);  
boxEmitter.maxEmitBox = new BABYLON.Vector3(2, 3, 4);

球体发射器

您可以创建具有给定半径的球形发射器,例如1.2,使用

var sphereEmitter = particleSystem.createSphereEmitter(1.2);

返回的sphereEmitter对象可用于更改半径的值。

粒子沿表面法线方向发射,即从球体中心穿过表面点的线。

随着sphereEmitter.radiusRange您可以定义一个沿半径颗粒应该发出。值0表示仅在曲面上,而值1表示沿半径。

如果您希望选择发射方向,则可以创建定向球体发射器

var sphereEmitter = particleSystem.createDirectedSphereEmitter(1.2, new BABYLON.Vector3(1, 1, 1), new BABYLON.Vector3(2, 8, 2));

该createDirectedSphereEmitter方法按以下顺序采用三个参数

  • radius: 数字,,
  • direction1: Vector3,
  • direction2: Vector3,

返回的sphereEmitter对象可用于更改这些属性的值。

sphereEmitter.radius = 3.4;
sphereEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
sphereEmitter.direction2 = new BABYLON.Vector3(5, 2, -1);

第一个参数是半径,第二个是direction1,第三个是direction2。(方向将在direction1和direction2之间随机生成)

半球发射器

您可以创建具有给定半径的半球发射器,例如1.2,使用

var hemisphericEmitter = particleSystem.createHemisphericEmitter(1.2);

返回的hemisphericEmitter对象可用于更改半径的值。

颗粒沿表面法线方向发射,即从半球中心穿过表面点的线。

随着hemisphericEmitter.radiusRange您可以定义一个沿半径颗粒应该发出。值0表示仅在曲面上,而值1表示沿半径。

气缸发射器

您可以使用以下内容创建具有给定半径,高度,radiusRange,directionRandomizer的柱面发射器:

var cylinderEmitter = particleSystem.createCylinderEmitter(1,1,0,0);

返回的cylinderEmitter对象可用于更改半径,高度等的值。

颗粒沿表面法线方向发射,即从圆柱体向外发射

随着cylinderEmitter.radiusRange您可以定义一个沿半径颗粒应该发出。值0表示仅在曲面上,而值1表示沿半径。随着cylinderEmitter.directionRandomizer可以改变粒子方向随机化的程度。

该createDirectedCylinderEmitter方法按以下顺序采用三个参数

  • radius: Number,
  • height: Number,
  • radiusRange: Number,
  • direction1: Vector3,
  • direction2: Vector3,

返回的cylinderEmitter对象可用于更改这些属性的值。

cylinderEmitter.radius = 3.4;
cylinderEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
cylinderEmitter.direction2 = new BABYLON.Vector3(5, 2, -1);

第一个参数是半径,第二个是direction1,第三个是direction2。(方向将在direction1和direction2之间随机生成)

锥形发射器

例如,要创建一个锥形发射器

var coneEmitter = particleSystem.createConeEmitter(2, Math.PI / 3);

该createConeEmitter方法按以下顺序采用两个参数

  • radius: Number;
  • angle: 以弧度为单位测量的数字,锥体的顶角

创建圆锥的轴沿Y轴,顶点在底部。

随着coneEmitter.radiusRange您可以定义一个沿半径颗粒应该发出。值0表示仅在曲面上,而值1表示沿半径。

这同样适用于coneEmitter.heightRange:您可以定义粒子应沿高度的位置。值0表示仅在顶部表面上,而值1表示在整个高度上。

以下是仅从扁平锥体外部发射的粒子系统的示例: https://www.babylonjs-playground.com/#B9HKG0#1 -


返回的coneEmitter对象可用于更改这些属性的值。

coneEmitter.radius = 3.4;
coneEmitter.angle = Math.PI / 2;

有了coneEmitter.emitFromSpawnPointOnly = true你可以强制发射器只能发出从重生点(圆锥体开始)颗粒。

噪音纹理

从Babylon.js v3.3开始,您现在可以使用噪声纹理来“扰动”粒子的位置。噪声纹理在技术上用于将更改应用于粒子的方向:

var noiseTexture = new BABYLON.NoiseProceduralTexture("perlin", 256, scene);
noiseTexture.animationSpeedFactor = 5;
noiseTexture.persistence = 2;
noiseTexture.brightness = 0.5;
noiseTexture.octaves = 2;

particleSystem.noiseTexture = noiseTexture;
particleSystem.noiseStrength = new BABYLON.Vector3(100, 100, 100);

除了设置noiseTexture,您还可以控制在每个轴上施加的强度particleSystem.noiseStrength。

演示可以在这里找到:https://www.babylonjs-playground.com/#R1JWLA#3 -


GPU粒子

从Babylon.js v3.2开始,您可以利用新的WebGL2特性(变换反馈缓冲区)来大幅提升粒子的性能。常规粒子使用CPU进行动画,而用于渲染新WebGL2 API的GPU允许Babylon.js将GPU用于动画和渲染。使用GPU粒子,一切都卸载到GPU。

不幸的是,此功能仅在WebGL2可用时可用。您可以使用它BABYLON.GPUParticleSystem.IsSupported来检测是否可以使用GPU粒子。支持它们时,GPU粒子几乎可以像常规粒子一样使用:

var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000 }, scene);

由于不再涉及CPU,您可以对活动粒子(在此示例中为1000000)感到疯狂。此外,particleSystem.activeParticleCount如果要限制GPU使用量,可以使用它来定义活动粒子计数。

注意:GPU粒子不支持子发射器。

随机纹理

遗憾的是,在GPU上运行时没有好方法可以获得随机数。为了填补这个空白,Babylon.js将创建一个填充了数千个随机值的纹理。粒子更新着色器将读取这些值以为粒子设置动画。默认情况下,使用最大支持的纹理大小(16K)。您可能希望通过初始化系统来减小此纹理的大小,如下所示:

var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000, randomTextureSize: 4096 }, scene);

倒退

由于GPUParticleSystem和ParticleSystem几乎共享所有API,因此在不支持WebGL2时很容易从一个API切换到另一个。请记住,CPU无法为GPU提供尽可能多的粒子动画。因此,在不使用GPUParticleSystem时,您可能必须降低系统容量。

停止GPU粒子系统

当调用system.stop()一个上GPUParticleSystem对象,你将迫使系统停止产生新的粒子。但即使不可见,粒子仍然会被渲染。

要完全停止a GPUParticleSystem,你必须打电话dispose()给它。

不支持的功能

GPU粒子由于其内在特性而不支持以下功能:

  • ManualEmitCount
  • 自定义效果
  • 动画单
  • disposeOnStop
  • 每个渐变的双值(仅支持一个值)
  • 不支持发射率梯度
  • 不支持起始大小渐变

操场

下一步

ParticleSystems是功能强大且功能多样的工具,可以帮助您为场景带来真实感和动感。不要犹豫使用它们,因为它们不是资源密集型的。

留在我们身边,因为我们将学习一个新的,非常有趣的事情: 配置您的环境。

进一步阅读

基本 - L1

粒子概述
粒子助手
网格概述

如何创建动画粒子
如何使用子发射器

固体颗粒系统

中级 - L2

如何自定义粒子系统
如何创建动画粒子