Cesium|Cesium 粒子系统学习 Cesium粒子系统学习

Cesium中粒子系统被用来模拟飞机爆炸、雨雪天气等场景。
根据官网对其定义，粒子系统是由小图像组成的集合，当他们在一起形成一个更复杂的对象时，就会形成火、烟等景象。对于该系统详细的说明可以参照官网介绍：
https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/
下面还有国内公司的翻译版：
http://cesium.marsgis.cn/go.html?id=12
【Cesium|Cesium 粒子系统学习】看完上述教程还是一头雾水，那就做个简单的粒子来分析下吧。粒子系统其实实由一个发射器不断发射出粒子对象实现的。如果是一个单个的粒子，可以将粒子发射器想象成一把枪，子弹就是该发射器发射出的粒子。不同之处在于，粒子发射器发射出粒子之后可以控制粒子的轨迹、颜色等属性。
先来看一个最简单的生成粒子系统的代码例子：

var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image : getImage(),//粒子图像 startColor : color,//开始颜色 endColor : color.withAlpha(0.5),//结束时的颜色 particleLife : 100,//每个粒子的生存时间，即子弹被打出来后能飞多久 speed : 50,//粒子飞行速度 imageSize : imageSize,//粒子大小 emissionRate : 1.0,//每秒发射粒子的个数 emitter : new Cesium.CircleEmitter(1),//粒子发射器的形式，确定了在什么样的区间里随机产生粒子，该行表示粒子将在一个半径为1米的圆形区域不断产生 lifetime : 100,//粒子发射器的生命周期，即发射粒子的时间，该值可理解为一把枪的弹夹可以用多长时间，loop默认属性为true理解为到时间后换上另一个弹夹继续发射。 updateCallback : force,//粒子位置更新回调函数 modelMatrix : particlesModelMatrix,//决定粒子在空间坐标系的位置矩阵，可以理解为用枪的人的空间位置 emitterModelMatrix : emitterModelMatrix//决定粒子相对于模型位置的位置矩阵，可以理解为人把发射枪拿在哪里，用左手还是右手还是用脚，即发射器相对本体的位置矩阵。 }));

上述代码构成了一个粒子系统，该系统中只有一个发射器。
image : getImage(),//粒子图像是每个粒子的样式，我们可以理解成从枪里发射出来子弹的类型，子弹的样子可以是图片，也可以用canves函数来绘制，如果使用图片的话，可以直接写作image : '../../SampleData/fire.png',
在火箭发射粒子效果里，给出了一个简单的圆形图像的绘制函数：

function getImage() { if (!Cesium.defined(particleCanvas)) { particleCanvas = document.createElement('canvas'); particleCanvas.width = 20; particleCanvas.height = 20; var context2D = particleCanvas.getContext('2d'); context2D.beginPath(); context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true); context2D.closePath(); context2D.fillStyle = 'rgb(255, 255, 255)'; context2D.fill(); } return particleCanvas; }

上述函数属于html中canves内容，这里不在赘述。
imageSize : imageSize,//粒子大小是一个由二维向量定义的尺寸函数,可以由代码new Cesium.Cartesian2(1, 1)进行设置。
应该重点介绍的是`updateCallback : force,//粒子位置更新回调函数属性。该属性是一个函数形式，在函数文档里给出的代码例子如下：

function force(particle, dt) {//particle是当前粒子对象，可以由很多属性，dt是时间步长。之前有一个属性是particleLife表示每个粒子被发射出来后的生存时间。dt就是将这段时间均分的步长。下面我们对粒子的位置进行改变。 var position = particle.position; var positionA = Cesium.Cartesian3.normalize(position, new Cesium.Cartesian3()); //将粒子的位置向量正则化为单位值。 Cesium.Cartesian3.multiplyByScalar(positionA , 5, positionA ); //将单位向量按比例进行缩放 particle.position= Cesium.Cartesian3.add(particle.position, positionA , particle.position); //在粒子发射方向加上成比例缩放的向量，更新粒子位置 }

上述函数只是对粒子位置按粒子的生命周期进行了修改，还可以对其速度、颜色等属性按时间进行修改。
下述就是用粒子系统做的信号动态传输效果图，黄色用了一个粒子发射器。红色的圈圈用了一组发射器，沿着圆圈的方向不断发射粒子。当然该效果可以直接用entity来实现，但是粒子系统的自由度高，可以做出各种不同的波形效果。
粒子系统做动态线 回忆总像个漏风的房子，风来的时候，都是不请自来的