[源码解析] Cesium粒子系统-02

439 阅读2分钟

发射器

Cesium实现的发射器主要有四类SphereEmitterBoxEmitterCircleEmitterConeEmitter四种。ParticleEmitter类是其定义的发射器接口,其主要声明了void emit(particle)方法。

SphereEmitter类

球形发射器主要利用球坐标系生成坐标值,这里的radius可以指定范围,

image.png

SphereEmitter.prototype.emit = function (particle) {
  const theta = CesiumMath.randomBetween(0.0, CesiumMath.TWO_PI);
  const phi = CesiumMath.randomBetween(0.0, CesiumMath.PI);
  const rad = CesiumMath.randomBetween(0.0, this._radius);

  const x = rad * Math.cos(theta) * Math.sin(phi); //球坐标->笛卡尔坐标
  const y = rad * Math.sin(theta) * Math.sin(phi);
  const z = rad * Math.cos(phi);

  particle.position = Cartesian3.fromElements(x, y, z, particle.position);
  particle.velocity = Cartesian3.normalize( //单位向量
    particle.position,
    particle.velocity
  );
};

BoxEmitter类

BoxEmitter是长方体发射器,由dimensions {Cartesian3}长、宽、高来控制大小。长方体中心为其局部坐标原点。

BoxEmitter.prototype.emit = function (particle) {
  const dim = this._dimensions;
  const halfDim = Cartesian3.multiplyByScalar(dim, 0.5, scratchHalfDim);

  const x = CesiumMath.randomBetween(-halfDim.x, halfDim.x); 
  const y = CesiumMath.randomBetween(-halfDim.y, halfDim.y);
  const z = CesiumMath.randomBetween(-halfDim.z, halfDim.z);

  particle.position = Cartesian3.fromElements(x, y, z, particle.position);
  particle.velocity = Cartesian3.normalize(
    particle.position,
    particle.velocity
  );
};

CircleEmitter类

CircleEmitter是圆形发射器,由radius控制圆形大小,其速度方向为固定方向沿着Z轴的方向。粒子位置是由极坐标系下产生的坐标值转换而成。

CircleEmitter.prototype.emit = function (particle) {
  const theta = CesiumMath.randomBetween(0.0, CesiumMath.TWO_PI);
  const rad = CesiumMath.randomBetween(0.0, this._radius);

  const x = rad * Math.cos(theta);
  const y = rad * Math.sin(theta);
  const z = 0.0;

  particle.position = Cartesian3.fromElements(x, y, z, particle.position);
  particle.velocity = Cartesian3.clone(Cartesian3.UNIT_Z, particle.velocity);
};

ConeEmitter类

ConeEmitter是圆锥发射器,由angle即圆锥角的一半弧度控制,angle和圆锥底部的半径直接相关tan(angle) = radius。该发射器粒子的起点永远是圆锥的顶点即(0,0,0)其方向为圆锥底部圆形内的任意点和起点构成的向量。圆锥的高固定为1。

ConeEmitter.prototype.emit = function (particle) {
  const radius = Math.tan(this._angle);

  // Compute a random point on the cone's base
  const theta = CesiumMath.randomBetween(0.0, CesiumMath.TWO_PI);
  const rad = CesiumMath.randomBetween(0.0, radius);

  const x = rad * Math.cos(theta);
  const y = rad * Math.sin(theta);
  const z = 1.0;

  particle.velocity = Cartesian3.fromElements(x, y, z, particle.velocity);
  Cartesian3.normalize(particle.velocity, particle.velocity);
  particle.position = Cartesian3.clone(Cartesian3.ZERO, particle.position);
};

总结

如果要自定义Emitter只要实现emit方法就好。前面的这些粒子和粒子发射器的概念和实现,虽然简单,但是是理解更复杂的粒子系统的基础。Cesium的粒子系统设计的是比较简单的,像Cocos creator的粒子系统设计的就更为复杂,可以分为发射器、渲染器、影响器、粒子类、粒子系统类这几部分,更不用说UE这种大型的引擎。同时随着粒子的效果越加复杂,我们还要考虑将粒子的相关运算放置到GPU中,这还涉及到Compute Shader、GPU instance相关的知识,我们后续再解析。