Skip to content

Commit 5fc1db4

Browse files
author
hanbollar
committed
proper updates
1 parent dca9817 commit 5fc1db4

8 files changed

+408
-5
lines changed

‎Apps/SampleData/circular_particle.png

975 Bytes
Loading

‎Apps/SampleData/snowflake_particle.png

3.19 KB
Loading

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

+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
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 recenterCamera = function() {
38+
viewer.camera.lookAt(cameraLocation, new Cesium.Cartesian3(170, -170, 170));
39+
};
40+
recenterCamera();
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 transl = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
73+
var translPosition = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
74+
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translPosition, transl, 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+
var iterationOffset = iteration;
134+
var func = function(particle) {
135+
scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
136+
scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);
137+
138+
particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);
139+
140+
scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position, Cesium.Ellipsoid.WGS84, scratchCartographic);
141+
142+
var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
143+
iterationOffset += options.iterationOffset;
144+
scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
145+
scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;
146+
147+
particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
148+
};
149+
return func;
150+
};
151+
152+
var matrix4Scratch = new Cesium.Matrix4();
153+
var scratchAngleForOffset = 0.0;
154+
var scratchOffset = new Cesium.Cartesian3();
155+
function createParticleSystems(options, systemsArray) {
156+
var length = options.numberOfSystems;
157+
for (var i = 0; i < length; ++i) {
158+
scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
159+
scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
160+
scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);
161+
162+
var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
163+
var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
164+
var force = forceFunction(options, i);
165+
166+
var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
167+
image : getImage(),
168+
startColor : color,
169+
endColor : color.withAlpha(0.0),
170+
life : 3.5,
171+
speed : 0.00005,
172+
width : 15.0,
173+
height : 15.0,
174+
rate : 30.0,
175+
emitter : new Cesium.CircleEmitter(0.1),
176+
bursts : [ ],
177+
lifeTime : 0.1,
178+
forces : [force],
179+
modelMatrix : particlesModelMatrix,
180+
emitterModelMatrix : emitterModelMatrix
181+
}));
182+
systemsArray.push(item);
183+
}
184+
}
185+
186+
var rocketSystems = [];
187+
var cometSystems = [];
188+
createParticleSystems(rocketOptions, rocketSystems);
189+
createParticleSystems(cometOptions, cometSystems);
190+
191+
// toolbar elements
192+
function showAll(systemsArray, show) {
193+
var length = systemsArray.length;
194+
for (var i = 0; i < length; ++i) {
195+
systemsArray[i].show = show;
196+
}
197+
}
198+
199+
var options = [{
200+
text : 'Comet Tail',
201+
onselect : function() {
202+
showAll(rocketSystems, false);
203+
showAll(cometSystems, true);
204+
recenterCamera();
205+
206+
}
207+
}, {
208+
text : 'Rocket Thruster',
209+
onselect : function() {
210+
showAll(cometSystems, false);
211+
showAll(rocketSystems, true);
212+
recenterCamera();
213+
}
214+
}];
215+
Sandcastle.addToolbarMenu(options);
216+
//Sandcastle_End
217+
Sandcastle.finishedLoading();
218+
}
219+
220+
if (typeof Cesium !== "undefined") {
221+
startup(Cesium);
222+
} else if (typeof require === "function") {
223+
require(["Cesium"], startup);
224+
}
225+
</script>
226+
227+
</body>
228+
</html>

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

18.2 KB
Loading

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

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
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 rain and snow.">
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">
27+
</div>
28+
<script id="cesium_sandcastle_script">
29+
function startup(Cesium) {
30+
'use strict';
31+
//Sandcastle_Begin
32+
var viewer = new Cesium.Viewer('cesiumContainer', {
33+
shouldAnimate : true,
34+
terrainProvider: Cesium.createWorldTerrain()
35+
});
36+
var scene = viewer.scene;
37+
scene.globe.depthTestAgainstTerrain = true;
38+
var recenterFunction = function() {
39+
scene.camera.setView({
40+
destination : new Cesium.Cartesian3(277096.634865404, 5647834.481964232, 2985563.7039122293),
41+
orientation : {
42+
heading : 4.731089976107251,
43+
pitch : -0.32003481981370063
44+
}
45+
});
46+
};
47+
recenterFunction();
48+
49+
// snow
50+
var snowParticleSize = scene.drawingBufferWidth / 100.0;
51+
var snowRadius = 100000.0;
52+
53+
var snowGravityScratch = new Cesium.Cartesian3();
54+
var snowUpdate = function(particle, dt) {
55+
snowGravityScratch = Cesium.Cartesian3.normalize(particle.position, snowGravityScratch);
56+
Cesium.Cartesian3.multiplyByScalar(snowGravityScratch, Cesium.Math.randomBetween(-30.0, -300.0), snowGravityScratch);
57+
particle.velocity = Cesium.Cartesian3.add(particle.velocity, snowGravityScratch, particle.velocity);
58+
59+
var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
60+
if (distance > (snowRadius)) {
61+
particle.endColor.alpha = 0.0;
62+
} else {
63+
particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
64+
}
65+
};
66+
67+
var snowSystem = new Cesium.ParticleSystem({
68+
modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
69+
minimumSpeed : -1.0,
70+
maximumSpeed : 0.0,
71+
lifeTime : 15.0,
72+
emitter : new Cesium.SphereEmitter(snowRadius),
73+
startScale : 0.5,
74+
endScale : 1.0,
75+
image : "../../SampleData/snowflake_particle.png",
76+
rate : 7000.0,
77+
startColor : Cesium.Color.WHITE.withAlpha(0.0),
78+
endColor : Cesium.Color.WHITE.withAlpha(1.0),
79+
minimumWidth : snowParticleSize,
80+
minimumHeight :snowParticleSize,
81+
maximumWidth : snowParticleSize * 2.0,
82+
maximumHeight :snowParticleSize * 2.0,
83+
forces : [snowUpdate]
84+
});
85+
scene.primitives.add(snowSystem);
86+
87+
// rain
88+
var rainParticleSize = scene.drawingBufferWidth / 80.0;
89+
var rainRadius = 100000.0;
90+
91+
var rainGravityScratch = new Cesium.Cartesian3();
92+
var rainUpdate = function(particle, dt) {
93+
rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
94+
rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch, -1050.0, rainGravityScratch);
95+
96+
particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);
97+
98+
var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
99+
if (distance > (rainRadius)) {
100+
particle.endColor.alpha = 0.0;
101+
} else {
102+
particle.endColor.alpha = rainSystem.endColor.alpha / (distance / rainRadius + 0.1);
103+
}
104+
};
105+
106+
var rainSystem = new Cesium.ParticleSystem({
107+
modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
108+
speed : -1.0,
109+
lifeTime : 15.0,
110+
emitter : new Cesium.SphereEmitter(rainRadius),
111+
startScale : 1.0,
112+
endScale : 0.0,
113+
image : "../../SampleData/circular_particle.png",
114+
rate : 9000.0,
115+
startColor :new Cesium.Color(0.27, 0.5, 0.70, 0.0),
116+
endColor : new Cesium.Color(0.27, 0.5, 0.70, 0.98),
117+
width : rainParticleSize,
118+
height : rainParticleSize * 2,
119+
forces : [rainUpdate]
120+
});
121+
scene.primitives.add(rainSystem);
122+
123+
// button
124+
Sandcastle.addToolbarButton("Recenter", recenterFunction);
125+
126+
// drop down
127+
var options = [{
128+
text : "Snow",
129+
onselect : function() {
130+
rainSystem.show = false;
131+
snowSystem.show = true;
132+
133+
scene.skyAtmosphere.hueShift = -0.8;
134+
scene.skyAtmosphere.saturationShift = -0.7;
135+
scene.skyAtmosphere.brightnessShift = -0.33;
136+
137+
scene.fog.density = 0.001;
138+
scene.fog.minimumBrightness = 0.8;
139+
}
140+
}, {
141+
text : "Rain",
142+
onselect : function() {
143+
rainSystem.show = true;
144+
snowSystem.show = false;
145+
146+
scene.skyAtmosphere.hueShift = -0.97;
147+
scene.skyAtmosphere.saturationShift = 0.25;
148+
scene.skyAtmosphere.brightnessShift = -0.4;
149+
150+
scene.fog.density = 0.00025;
151+
scene.fog.minimumBrightness = 0.01;
152+
}
153+
}];
154+
Sandcastle.addToolbarMenu(options);
155+
//Sandcastle_End
156+
Sandcastle.finishedLoading();
157+
}
158+
159+
if (typeof Cesium !== "undefined") {
160+
startup(Cesium);
161+
} else if (typeof require === "function") {
162+
require(["Cesium"], startup);
163+
}
164+
</script>
165+
166+
</body>
167+
</html>

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

27 KB
Loading

0 commit comments

Comments
 (0)