Skip to content

Commit c5016cc

Browse files
ggetzggetz
authored
Merge pull request #6375 from hanbollar/particle-system-blog-tutorial
Particle System Sandcastle Examples and Updates
2 parents 1ca3bfc + 5af2e55 commit c5016cc

9 files changed

+435
-46
lines changed

‎Apps/SampleData/circular_particle.png

975 Bytes
Loading

‎Apps/SampleData/snowflake_particle.png

3.19 KB
Loading

‎Apps/Sandcastle/gallery/Particle System Fireworks.html

+6-8
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959

6060
var minimumExplosionSize = 30.0;
6161
var maximumExplosionSize = 100.0;
62-
var particlePixelSize = 7.0;
62+
var particlePixelSize = new Cesium.Cartesian2(7.0, 7.0);
6363
var burstSize = 400.0;
6464
var lifetime = 10.0;
6565
var numberOfFireworks = 20.0;
@@ -90,15 +90,14 @@
9090
image : getImage(),
9191
startColor : color,
9292
endColor : color.withAlpha(0.0),
93-
life : life,
93+
particleLife : life,
9494
speed : 100.0,
95-
width : particlePixelSize,
96-
height : particlePixelSize,
97-
rate : 0,
95+
imageSize : particlePixelSize,
96+
emissionRate : 0,
9897
emitter : new Cesium.SphereEmitter(0.1),
9998
bursts : bursts,
100-
lifeTime : lifetime,
101-
forces : [force],
99+
lifetime : lifetime,
100+
updateCallback : force,
102101
modelMatrix : modelMatrix,
103102
emitterModelMatrix : emitterModelMatrix
104103
}));
@@ -161,7 +160,6 @@
161160
Cesium.Cartesian3.normalize(toFireworks, toFireworks);
162161
var angle = Cesium.Math.PI_OVER_TWO - Math.acos(Cesium.Cartesian3.dot(toFireworks, Cesium.Cartesian3.UNIT_Z));
163162
camera.lookUp(angle);
164-
165163
//Sandcastle_End
166164
Sandcastle.finishedLoading();
167165
}

‎Apps/Sandcastle/gallery/Particle System Tails.html

+225
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport"
7+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
8+
<meta name="description" content="Particle systems for rocket and comet tails.">
9+
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases, Tutorials">
10+
<title>Cesium Demo</title>
11+
<script type="text/javascript" src="../Sandcastle-header.js"></script>
12+
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
13+
<script type="text/javascript">
14+
require.config({
15+
baseUrl : '../../../Source',
16+
waitSeconds : 60
17+
});
18+
</script>
19+
</head>
20+
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
21+
<style>
22+
@import url(../templates/bucket.css);
23+
</style>
24+
<div id="cesiumContainer" class="fullSize"></div>
25+
<div id="loadingOverlay"><h1>Loading...</h1></div>
26+
<div id="toolbar"></div>
27+
<script id="cesium_sandcastle_script">
28+
function startup(Cesium) {
29+
'use strict';
30+
//Sandcastle_Begin
31+
var viewer = new Cesium.Viewer('cesiumContainer', {
32+
shouldAnimate : true
33+
});
34+
var planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);
35+
var particlesOffset = new Cesium.Cartesian3(-8.950115473940969, 34.852766731753945, -30.235411095432937);
36+
var cameraLocation = Cesium.Cartesian3.add(planePosition, particlesOffset, new Cesium.Cartesian3());
37+
var resetCamera = function() {
38+
viewer.camera.lookAt(cameraLocation, new Cesium.Cartesian3(-450, -300, 200));
39+
};
40+
resetCamera();
41+
42+
// Draw particle image to a canvas
43+
var particleCanvas;
44+
function getImage() {
45+
if (!Cesium.defined(particleCanvas)) {
46+
particleCanvas = document.createElement('canvas');
47+
particleCanvas.width = 20;
48+
particleCanvas.height = 20;
49+
var context2D = particleCanvas.getContext('2d');
50+
context2D.beginPath();
51+
context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
52+
context2D.closePath();
53+
context2D.fillStyle = 'rgb(255, 255, 255)';
54+
context2D.fill();
55+
}
56+
return particleCanvas;
57+
}
58+
59+
// Add plane to scene
60+
var hpr = new Cesium.HeadingPitchRoll(0.0, Cesium.Math.PI_OVER_TWO, 0.0);
61+
var orientation = Cesium.Transforms.headingPitchRollQuaternion(planePosition, hpr);
62+
var entity = viewer.entities.add({
63+
model : {
64+
uri : '../../SampleData/models/CesiumAir/Cesium_Air.gltf',
65+
scale : 3.5
66+
},
67+
position : planePosition,
68+
orientation : orientation
69+
});
70+
71+
// creating particles model matrix
72+
var translationOffset = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
73+
var translationOfPlane = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
74+
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translationOfPlane, translationOffset, new Cesium.Matrix4());
75+
76+
// creating the particle systems
77+
var rocketOptions = {
78+
numberOfSystems : 50.0,
79+
iterationOffset : 0.1,
80+
cartographicStep : 0.000001,
81+
baseRadius : 0.0005,
82+
83+
colorOptions : [{
84+
minimumRed : 1.0,
85+
green : 0.5,
86+
minimumBlue : 0.05,
87+
alpha : 1.0
88+
}, {
89+
red : 0.9,
90+
minimumGreen : 0.6,
91+
minimumBlue : 0.01,
92+
alpha : 1.0
93+
}, {
94+
red : 0.8,
95+
green : 0.05,
96+
minimumBlue : 0.09,
97+
alpha : 1.0
98+
}, {
99+
minimumRed : 1,
100+
minimumGreen : 0.05,
101+
blue : 0.09,
102+
alpha : 1.0
103+
}]
104+
};
105+
106+
var cometOptions = {
107+
numberOfSystems : 100.0,
108+
iterationOffset : 0.003,
109+
cartographicStep : 0.0000001,
110+
baseRadius : 0.0005,
111+
112+
colorOptions : [{
113+
red : 0.6,
114+
green : 0.6,
115+
blue : 0.6,
116+
alpha : 1.0
117+
}, {
118+
red : 0.6,
119+
green : 0.6,
120+
blue : 0.9,
121+
alpha : 0.9
122+
}, {
123+
red : 0.5,
124+
green : 0.5,
125+
blue : 0.7,
126+
alpha : 0.5
127+
}]
128+
};
129+
130+
var scratchCartesian3 = new Cesium.Cartesian3();
131+
var scratchCartographic = new Cesium.Cartographic();
132+
var forceFunction = function(options, iteration) {
133+
return function(particle) {
134+
scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
135+
scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);
136+
137+
particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);
138+
139+
scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position, Cesium.Ellipsoid.WGS84, scratchCartographic);
140+
141+
var angle = Cesium.Math.PI * 2.0 * iteration / options.numberOfSystems;
142+
iteration += options.iterationOffset;
143+
scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
144+
scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;
145+
146+
particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
147+
};
148+
};
149+
150+
var matrix4Scratch = new Cesium.Matrix4();
151+
var scratchAngleForOffset = 0.0;
152+
var scratchOffset = new Cesium.Cartesian3();
153+
var imageSize = new Cesium.Cartesian2(15.0, 15.0);
154+
function createParticleSystems(options, systemsArray) {
155+
var length = options.numberOfSystems;
156+
for (var i = 0; i < length; ++i) {
157+
scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
158+
scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
159+
scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);
160+
161+
var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
162+
var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
163+
var force = forceFunction(options, i);
164+
165+
var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
166+
image : getImage(),
167+
startColor : color,
168+
endColor : color.withAlpha(0.0),
169+
particleLife : 3.5,
170+
speed : 0.00005,
171+
imageSize : imageSize,
172+
emissionRate : 30.0,
173+
emitter : new Cesium.CircleEmitter(0.1),
174+
lifetime : 0.1,
175+
updateCallback : force,
176+
modelMatrix : particlesModelMatrix,
177+
emitterModelMatrix : emitterModelMatrix
178+
}));
179+
systemsArray.push(item);
180+
}
181+
}
182+
183+
var rocketSystems = [];
184+
var cometSystems = [];
185+
createParticleSystems(rocketOptions, rocketSystems);
186+
createParticleSystems(cometOptions, cometSystems);
187+
188+
// toolbar elements
189+
function showAll(systemsArray, show) {
190+
var length = systemsArray.length;
191+
for (var i = 0; i < length; ++i) {
192+
systemsArray[i].show = show;
193+
}
194+
}
195+
196+
var options = [{
197+
text : 'Comet Tail',
198+
onselect : function() {
199+
showAll(rocketSystems, false);
200+
showAll(cometSystems, true);
201+
resetCamera();
202+
203+
}
204+
}, {
205+
text : 'Rocket Thruster',
206+
onselect : function() {
207+
showAll(cometSystems, false);
208+
showAll(rocketSystems, true);
209+
resetCamera();
210+
}
211+
}];
212+
Sandcastle.addToolbarMenu(options);
213+
//Sandcastle_End
214+
Sandcastle.finishedLoading();
215+
}
216+
217+
if (typeof Cesium !== "undefined") {
218+
startup(Cesium);
219+
} else if (typeof require === "function") {
220+
require(["Cesium"], startup);
221+
}
222+
</script>
223+
224+
</body>
225+
</html>

‎Apps/Sandcastle/gallery/Particle System Tails.jpg

18.2 KB
Loading

0 commit comments

Comments
 (0)