particle-system.md

粒子动画

Oasis 3D 的 GPU 粒子系统 GPUParticleSystem 内部将会根据配置参数，自动生成几何体和材质，不需要手动创建和添加。所以，使用粒子系统，我们唯一需要关注的是配置参数。

let particleComp = obj.addComponent(GPUParticleSystem);

// 初始化
particleComp.initialize({
  maxCount: 1000,
  spawnCount: 100,
  once: true,
  options: {
    velocity: [0.2, 0.2, 0.2],
    acceleration: [0, -0.02, 0],
    color: 0x125570,
    lifetime: 5,
    size:20,
  }
});

// 发射粒子
particleComp.start();

// 停止发射
particleComp.stop();

// 发射过程中调整发射参数
particleComp.setOptions({
  velocity: [0, 0, 0],
  lifetime: 10,
});

参数

粒子参数需要在初始化（GPUParticleSystem.initialize）时配置，不同粒子参数生成的粒子效果有千百种，在使用时，需要分析想要实现的特效的物理特性，例如：初始位置、初速度、加速度和这些参数的随机范围等。。初始化参数很多，但是都有默认值，在查看之前，你最好对每个参数的含义都有简单的认识：

• maxCount ：最大粒子数，决定所占内存的大小，需要合理分配。
• once ：是否只发射一次，默认 false （循环发射）。
• blendFunc : 支持传入 webgl 混合因子，下图左为透明度混合，下图右为柔和相加混合，默认透明度混合 [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA] 。

    

• particleTex ： 粒子形状贴图。
• maskTexture ：粒子遮罩贴图，遮罩用于在粒子上叠加特定透明度的发光效果，使用遮罩前后对比：

    

• useOriginColor ：是否使用图片原色，为 true  时使用图片原色，为 false  时，图片原色混合用户配置的颜色，可以在原图的基础上混合出任意的颜色：

    

• rotateToVelocity ：是否跟随粒子运动速度的方向，默认 false，为 true  时，将粒子贴图的单位向量旋转至粒子运动速度的方向，例如烟花：

    

为 false 时，无旋转，适用于方向一致的场景，例如孔明灯：

    

• isScaleByLifetime ：是否随生命周期缩小至消失。为 true 时粒子会越来越小，为 false 时粒子大小保持不变，只有透明度会降低，可用于制作淡出消失的效果：

     |

• fadeIn ：是否添加淡入效果，可用于制作烟雾效果：

     |

• getOptions : 获取更新参数的回调函数，常用于按照曲线公式更新粒子初始位置，效果为粒子按照曲线的轨迹运动，用法示例如下：

  const getPosition = (tick) => {
    let r = Math.acos(Math.sin(tick));
    let x = r * Math.cos(tick);
    let y = r * Math.sin(tick);
    return [x, y, 0];
  }
  
  const options = {
    velocityRandomness: [0.2, 0.2, 0.2],
    acceleration: [0, -0.02, 0],
    color: 0x125570,
    colorRandomness: 0.5,
    lifetime: 5,
    size:30,
  };
  
  particleComp.init({
    maxCount: 10000,
    spawnCount: 20,
    once: false,
    useOriginColor:false,
    getOptions: function(time) { // time 为累计运行时间，单位秒
      var position = getPosition(time);
      if(position) {
        options.position = position;
      }
      return options;
    }
  });

• options ： 粒子属性控制参数集，包含粒子发射位置、速度、加速度、旋转角度、颜色、大小、初始旋转角度、自转角速率、生命周期长度和相应随机因子的配置。随机因子用于控制参数生成的随机范围。

  • 大小随机因子，取值在 01 之间，例如：大小为 50，随机因子为 0，则生成的粒子大小均为 50，随机因子为 0.5，则生成的粒子大小范围在 2575 之间随机，随机因子为 1，则生成粒子大小范围在 0~100 之间随机：

    size = size + (Math.random() - 0.5）* 2 * sizeRandomness * size

  • 颜色随机因子，取值在01之间，颜色的 R、G、B通道的色值会分别在随机因子范围内取一个随机值，然后截取在 01 范围内：

    color[i] = color[i] + (Math.random() - 0.5) * colorRandomness

  • 初始旋转角度随机因子，取值在 01 之间，例如：rotate 为 0，随机因子为 0，则生成的粒子角度均为 0，随机因子为 1，则生成的角度在 -PIPI 之间随机：

    startAngle = startAngle + (Math.random() - 0.5) * Math.PI * startAngleRandomness * 2