Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Particle System Sandcastle examples #1

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Apps/SampleData/circular_particle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Apps/SampleData/snowflake_particle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 6 additions & 8 deletions Apps/Sandcastle/gallery/Particle System Fireworks.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@

var minimumExplosionSize = 30.0;
var maximumExplosionSize = 100.0;
var particlePixelSize = 7.0;
var particlePixelSize = new Cesium.Cartesian2(7.0, 7.0);
var burstSize = 400.0;
var lifetime = 10.0;
var numberOfFireworks = 20.0;
Expand Down Expand Up @@ -90,15 +90,14 @@
image : getImage(),
startColor : color,
endColor : color.withAlpha(0.0),
life : life,
particleLife : life,
speed : 100.0,
width : particlePixelSize,
height : particlePixelSize,
rate : 0,
imageSize : particlePixelSize,
emissionRate : 0,
emitter : new Cesium.SphereEmitter(0.1),
bursts : bursts,
lifeTime : lifetime,
forces : [force],
lifetime : lifetime,
updateCallback : force,
modelMatrix : modelMatrix,
emitterModelMatrix : emitterModelMatrix
}));
Expand Down Expand Up @@ -161,7 +160,6 @@
Cesium.Cartesian3.normalize(toFireworks, toFireworks);
var angle = Cesium.Math.PI_OVER_TWO - Math.acos(Cesium.Cartesian3.dot(toFireworks, Cesium.Cartesian3.UNIT_Z));
camera.lookUp(angle);

//Sandcastle_End
Sandcastle.finishedLoading();
}
Expand Down
228 changes: 228 additions & 0 deletions Apps/Sandcastle/gallery/Particle System Tails.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Particle systems for rocket and comet tails.">
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases, Tutorials">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source',
waitSeconds : 60
});
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer', {
shouldAnimate : true
});
var planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);
var particlesOffset = new Cesium.Cartesian3(-8.950115473940969, 34.852766731753945, -30.235411095432937);
var cameraLocation = Cesium.Cartesian3.add(planePosition, particlesOffset, new Cesium.Cartesian3());
var recenterCamera = function() {
viewer.camera.lookAt(cameraLocation, new Cesium.Cartesian3(170, -170, 170));
};
recenterCamera();

// Draw particle image to a canvas
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;
}

// Add plane to scene
var hpr = new Cesium.HeadingPitchRoll(0.0, Cesium.Math.PI_OVER_TWO, 0.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(planePosition, hpr);
var entity = viewer.entities.add({
model : {
uri : '../../SampleData/models/CesiumAir/Cesium_Air.gltf',
scale : 3.5
},
position : planePosition,
orientation : orientation
});

// creating particles model matrix
var transl = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
var translPosition = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translPosition, transl, new Cesium.Matrix4());

// creating the particle systems
var rocketOptions = {
numberOfSystems : 50.0,
iterationOffset : 0.1,
cartographicStep : 0.000001,
baseRadius : 0.0005,

colorOptions : [{
minimumRed : 1.0,
green : 0.5,
minimumBlue : 0.05,
alpha : 1.0
}, {
red : 0.9,
minimumGreen : 0.6,
minimumBlue : 0.01,
alpha : 1.0
}, {
red : 0.8,
green : 0.05,
minimumBlue : 0.09,
alpha : 1.0
}, {
minimumRed : 1,
minimumGreen : 0.05,
blue : 0.09,
alpha : 1.0
}]
};

var cometOptions = {
numberOfSystems : 100.0,
iterationOffset : 0.003,
cartographicStep : 0.0000001,
baseRadius : 0.0005,

colorOptions : [{
red : 0.6,
green : 0.6,
blue : 0.6,
alpha : 1.0
}, {
red : 0.6,
green : 0.6,
blue : 0.9,
alpha : 0.9
}, {
red : 0.5,
green : 0.5,
blue : 0.7,
alpha : 0.5
}]
};

var scratchCartesian3 = new Cesium.Cartesian3();
var scratchCartographic = new Cesium.Cartographic();
var forceFunction = function(options, iteration) {
var iterationOffset = iteration;
var func = function(particle) {
scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);

particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);

scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position, Cesium.Ellipsoid.WGS84, scratchCartographic);

var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
iterationOffset += options.iterationOffset;
scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;

particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
};
return func;
};

var matrix4Scratch = new Cesium.Matrix4();
var scratchAngleForOffset = 0.0;
var scratchOffset = new Cesium.Cartesian3();
var imageSize = new Cesium.Cartesian2(15.0, 15.0);
function createParticleSystems(options, systemsArray) {
var length = options.numberOfSystems;
for (var i = 0; i < length; ++i) {
scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);

var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
var force = forceFunction(options, i);

var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
image : getImage(),
startColor : color,
endColor : color.withAlpha(0.0),
particleLife : 3.5,
speed : 0.00005,
imageSize : imageSize,
emissionRate : 30.0,
emitter : new Cesium.CircleEmitter(0.1),
bursts : [ ],
lifetime : 0.1,
updateCallback : force,
modelMatrix : particlesModelMatrix,
emitterModelMatrix : emitterModelMatrix
}));
systemsArray.push(item);
}
}

var rocketSystems = [];
var cometSystems = [];
createParticleSystems(rocketOptions, rocketSystems);
createParticleSystems(cometOptions, cometSystems);

// toolbar elements
function showAll(systemsArray, show) {
var length = systemsArray.length;
for (var i = 0; i < length; ++i) {
systemsArray[i].show = show;
}
}

var options = [{
text : 'Comet Tail',
onselect : function() {
showAll(rocketSystems, false);
showAll(cometSystems, true);
recenterCamera();

}
}, {
text : 'Rocket Thruster',
onselect : function() {
showAll(cometSystems, false);
showAll(rocketSystems, true);
recenterCamera();
}
}];
Sandcastle.addToolbarMenu(options);
//Sandcastle_End
Sandcastle.finishedLoading();
}

if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
</script>

</body>
</html>
Binary file added Apps/Sandcastle/gallery/Particle System Tails.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading