3D空间粒子管理

3D空间粒子管理

一月 16, 2024

1、粒子Particles

粒子通常是一些小的精灵图，用于模拟难以复制的现象，例如：火焰、烟雾、水或者抽象的视觉效果，类似魔法闪光、仙尘。

2、粒子预热

热

从Babylon.js v3.3版本开始，我们可以指定一个预热周期，以确保粒子系统在开始渲染以前，就直接达到某个渲染状态。因为粒子根据发射速率和速度等原因，有一个持续增多的过程，假如我们想省略掉中间过程，直接看到粒子达到最大容量时的状态，这个预热周期非常有用。

为了设置预热周期，我们需要设置两个属性：

system.preWarmCycles: 获取或设置一个值，是指在首次渲染之前必须执行多少个循环（或帧）（必须在启动粒子系统之前设置该值）。 默认值为0（即无预热）。

system.preWarmStepOffset: 获取或设置一个值，是指在预热模式下使用的 时间步长 乘数（默认为1倍），可以理解为一个加速度，如果我们要预热2000个循环（帧），这就可能会出现一个延时，所以我们设置为100倍，那么就会用20个循环的时间达到渲染2000个循环的效果。

我们可以这样设置预热周期：

1
2
3
4
5
6
7
system.preWarmCycles = 100;

system.preWarmStepOffset = 5;

system.start();

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

// 粒子纹理 可以设置sparticleTexture属性

1
particleSystem.particleTexture = new BABYLON.Texture("[https://minio.cnbabylon.com/babylon/p16/flare.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=babylon%2F20200427%2F%2Fs3%2Faws4\_request&X-Amz-Date=20200427T142732Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=e060b6f8ccd3e2f250d5888318c2cfbbe475de9dd644c0c988fc5b0f75684ff0](https://minio.cnbabylon.com/babylon/p16/flare.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=babylon%252F20200427%252F%252Fs3%252Faws4_request&X-Amz-Date=20200427T142732Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=e060b6f8ccd3e2f250d5888318c2cfbbe475de9dd644c0c988fc5b0f75684ff0)", scene);

// 粒子发射位置和分布 粒子发射器可以指定一个点vector3

// 默认是处于一个立方体形状的内部，其体积可以根据发射器的位置设置下、左、前角和上、右、后脚来确定。以上设置由粒子的minEmitBox和maxEmitBox属性来决定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
particleSystem.emitter = fountain; // the starting object, the emitter 

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

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

// particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from

// particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

// 粒子颜色Particle Colors

// 粒子系统可以设置三个颜色，其中两个颜色在粒子存在期间组合显示（或混合），第三个颜色在粒子消失之前呈现

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

// 可以定义颜色渐变

// 第一个参数定义渐变位置（0表示粒子刚被发射出来，而1表示粒子消失）

// 第二个参数表示粒子的颜色，上面的例子就表示粒子发射时呈现白色

// 建议至少为0和1都各自定义一个渐变

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

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

// 体积大小Size

// 子的大小也能够被设置为在给定范围内随机变化。

1
2
3
particleSystem.minSize = 0.1; // 等比例的缩放粒子 

particleSystem.maxSize = 0.5;

// 宽高两个方向进行不同的随机改变，则可以使用 ScaleX/Y 方法：

1
2
3
4
5
6
7
// particleSystem.minScaleX = 0.1;

// particleSystem.maxScaleX = 0.5;

// particleSystem.minScaleY = 0.2;

// particleSystem.maxScaleY = 0.4;

// 根据生命周期来进行大小渐变

// 第一个参数定义渐变位置（0表示粒子刚被发射出来，而1表示粒子消失）

// 第二个参数表示粒子的大小，上面的例子就表示粒子以0.5的体积发射出来，并在最终消失时达到3的体积

// 建议至少为0和1都各自定义一个渐变

1
2
3
// particleSystem.addSizeGradient(0, 0.5);

// particleSystem.addSizeGradient(1.0, 3);

// 生命周期Lifetime

// 生命周期也可以被设置为随机时间，在一个最大和最小值之间随机变动

1
2
3
particleSystem.minLifeTime = 0.3; 

particleSystem.maxLifeTime = 1.5;

// 发射频率Rates

1
particleSystem.emitRate = 1500;

// 混合模式blending

// 粒子与场景的颜色混合有多种方式，使用blendMode来进行设置

particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

// BLENDMODE_ONEONE-直接添加颜色，忽略透明度alpha的影响；

// BLENDMODE_STANDARD-添加颜色并考虑粒子的透明度alpha影响（即：场景颜色*（1-alpha）+ 粒子颜色* alpha）

// BLENDMODE_ADD-添加颜色，但只考虑粒子颜色的透明度alpha（即：场景颜色+粒子颜色* alpha）。

// BLENDMODE_MULTIPLY-将颜色相乘并加上（1-alpha）（即color * particleColor + 1-alpha）。 实例演示

// BLENDMODE_MULTIPLYADD-用BLENDMODE_MULTIPLY模式处理，然后再使用BLENDMODE_ADD模式渲染两次

// 重力Gravity

// 粒子系统可以设置重力属性，例如：设置Y方向的重力值为负，则粒子将慢慢沿着Y方向下降

1
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

// 发射方向Direction

// 可以为粒子系统指定2个发射方向，如果仅指定一个方向，粒子将沿给定的大致方向随机传播。 当给出两个方向时，粒子通常将在两个方向内行进。

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

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

// 旋转相关Rotation

// 可以定义粒子围绕Z轴旋转的角速度AngularSpeed范围，速度以弧度/秒为单位：

1
2
3
particleSystem.minAngularSpeed = 0; 

particleSystem.maxAngularSpeed = Math.PI;

// 也可以设置粒子初始的旋转角度：

1
2
3
// particleSystem.minInitialRotation = 0;

// particleSystem.maxInitialRotation = Math.PI;

// 角速度定义一个渐变因子

// 第一个参数定义渐变（0表示粒子出生，1表示粒子死亡）。第二个参数是要使用的角速度。在这种情况下，粒子出生时的角速度设置为0.5弧度/帧。建议至少为0和1定义渐变

1
2
3
// particleSystem.addAngularSpeedGradient(0, 0.5);

// particleSystem.addAngularSpeedGradient(1.0, 3);

// 速度Speed

// 可以定义发射粒子的力道范围和整体运动速度

// （0.01是默认的更新速度，更新速度越快=动画~~速度越快）

1
2
3
4
5
particleSystem.minEmitPower = 1; 

particleSystem.maxEmitPower = 3; 

particleSystem.updateSpeed = 0.005;

// 速度随时间变化

// 我们能使用渐变来定义粒子随时间变化的速度。这个速度可以理解为向粒子运动方向施加一个作用力。设置为2表示粒子的速度为基本速度的2倍。

// 第一个参数定义渐变位置（0表示粒子系统开始，1表示粒子系统停止）。第二个参数表示粒子的速度。根据上例的情况，粒子以0.5的速度被发射出来，0.5表示基本速度的一半。建议至少为0和1都各自定义一个渐变：

1
2
3
// particleSystem.addVelocityGradient(0, 0.5);

// particleSystem.addVelocityGradient(1.0, 3);

// 启动粒子系统

1
particleSystem.start();