SuperMap iClient3D for WebGL教程（粒子效果）-烟花效果

WuYK

前段时间有人问我,WebGL烟花效果怎么做,在我们官网或者本地范例包中,确实是没有烟花爆炸的一个效果,在Cesium官网上是有这个DEMO的,于是把代码搬过来，发现效果不是特别好,于是在此基础上修改了一些参数,再结合泛光效果,制作成了符合WebGL的"烟花效果"。

先直接看效果吧

以下是实现方法

一.泛光后期处理

开启抗锯齿,泛光,泛光强度,hdr等参数,此处为了显示效果好一点我直接把球面给隐藏了,并且设置了泛光颜色为蓝色。

                var scene = viewer.scene;
				var camera = scene.camera;
				viewer.scene.fxaa = true;
				viewer.scene.bloomEffect.show = true;
				viewer.scene.bloomEffect._bloomColor = Cesium.Color.BLUE;
				viewer.scene.bloomEffect.bloomIntensity = 30;
				viewer.scene.bloomEffect.threshold = 0.01;
				scene.hdrEnabled = true;
				viewer.scene.globe.show = false;				

二.烟花粒子对象

在Cesium官方Demo上,我把参数进行了修改,修改了爆炸的范围参数,重力参数,粒子发射器的一些核心参数和粒子范围。以下是我修改后的代码。

                var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(116.381828897766, 39.981967807373));
				var emitterInitialLocation = new Cesium.Cartesian3(0.0, 0.0, 100.0);
				var particleCanvas;
				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;
				}
				var particlePixelSize = new Cesium.Cartesian2(1.5, 1.5);
				var burstSize = 400.0;
				var lifetime = 12.0;
				var numberOfFireworks = 15.0;
				var emitterModelMatrixScratch = new Cesium.Matrix4();
				function createFirework(offset, color, bursts) {
					var position = Cesium.Cartesian3.add(emitterInitialLocation, offset, new Cesium.Cartesian3());
					var emitterModelMatrix = Cesium.Matrix4.fromTranslation(position, emitterModelMatrixScratch);

					function applyGravity(particle, dt) {
						var position = particle.position;
						var gravityVector = Cesium.Cartesian3.normalize(position, new Cesium.Cartesian3());
						Cesium.Cartesian3.multiplyByScalar(gravityVector, 1 * dt, gravityVector);
						particle.velocity = Cesium.Cartesian3.add(particle.velocity, gravityVector, particle.velocity);
					}
					scene.primitives.add(new Cesium.ParticleSystem({
						image: getImage(),
						startColor: color,
						endColor: color.withAlpha(0.0),
						particleLife: 0.5,
						speed: 150.0,
						imageSize: particlePixelSize,
						emissionRate: 0,
						emitter: new Cesium.SphereEmitter(1.5),
						bursts: bursts,
						lifetime: lifetime,
						updateCallback: applyGravity,
						modelMatrix: modelMatrix,
						emitterModelMatrix: emitterModelMatrix
					}));
				}
				var xMin = -150.0;
				var xMax = 150.0;
				var yMin = -150.0;
				var yMax = 150.0;
				var zMin = -50.0;
				var zMax = 150.0;  
				var colorOptions = [{
					minimumRed: 0.75,
					green: 0.0,
					minimumBlue: 0.8,
					alpha: 1.0
				}, {
					red: 0.0,
					minimumGreen: 0.75,
					minimumBlue: 0.8,
					alpha: 1.0
				}, {
					red: 0.0,
					green: 0.0,
					minimumBlue: 0.8,
					alpha: 1.0
				}, {
					minimumRed: 0.75,
					minimumGreen: 0.75,
					blue: 0.0,
					alpha: 1.0
				}];

				for(var i = 0; i < numberOfFireworks; ++i) {
					var x = Cesium.Math.randomBetween(xMin, xMax);
					var y = Cesium.Math.randomBetween(yMin, yMax);
					var z = Cesium.Math.randomBetween(zMin, zMax);
					var offset = new Cesium.Cartesian3(x, y, z);
					var color = Cesium.Color.fromRandom(colorOptions[i % colorOptions.length]);

					var bursts = [];
					for(var j = 0; j < 3; ++j) {
						bursts.push(new Cesium.ParticleBurst({
							time: Cesium.Math.nextRandomNumber() * lifetime,
							minimum: burstSize,
							maximum: burstSize
						}));
					}
					createFirework(offset, color, bursts);
				}				

以上就是关于烟花粒子效果的全部代码了,有兴趣的小伙伴还可以自己再修改一些参数或者一些场景后期,让效果更加的出色。