proper updates

CesiumGS · Apr 5, 2018 · 5fc1db4 · 5fc1db4
1 parent dca9817
commit 5fc1db4
Show file tree

Hide file tree

Showing 8 changed files with 408 additions and 5 deletions.
diff --git a/Apps/SampleData/circular_particle.png b/Apps/SampleData/circular_particle.png
diff --git a/Apps/SampleData/snowflake_particle.png b/Apps/SampleData/snowflake_particle.png
diff --git a/Apps/Sandcastle/gallery/Particle System Tails.html b/Apps/Sandcastle/gallery/Particle System Tails.html
@@ -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();
+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),
+            life : 3.5,
+            speed : 0.00005,
+            width : 15.0,
+            height : 15.0,
+            rate : 30.0,
+            emitter : new Cesium.CircleEmitter(0.1),
+            bursts : [ ],
+            lifeTime : 0.1,
+            forces : [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>
diff --git a/Apps/Sandcastle/gallery/Particle System Tails.jpg b/Apps/Sandcastle/gallery/Particle System Tails.jpg
diff --git a/Apps/Sandcastle/gallery/Particle System Weather.html b/Apps/Sandcastle/gallery/Particle System Weather.html
@@ -0,0 +1,167 @@
+<!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 rain and snow.">
+    <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,
+    terrainProvider: Cesium.createWorldTerrain()
+});
+var scene = viewer.scene;
+scene.globe.depthTestAgainstTerrain = true;
+var recenterFunction = function() {
+    scene.camera.setView({
+        destination : new Cesium.Cartesian3(277096.634865404, 5647834.481964232, 2985563.7039122293),
+        orientation : {
+            heading : 4.731089976107251,
+            pitch : -0.32003481981370063
+        }
+    });
+};
+recenterFunction();
+
+// snow
+var snowParticleSize = scene.drawingBufferWidth / 100.0;
+var snowRadius = 100000.0;
+
+var snowGravityScratch = new Cesium.Cartesian3();
+var snowUpdate = function(particle, dt) {
+    snowGravityScratch = Cesium.Cartesian3.normalize(particle.position, snowGravityScratch);
+    Cesium.Cartesian3.multiplyByScalar(snowGravityScratch, Cesium.Math.randomBetween(-30.0, -300.0), snowGravityScratch);
+    particle.velocity = Cesium.Cartesian3.add(particle.velocity, snowGravityScratch, particle.velocity);
+
+    var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
+    if (distance > (snowRadius)) {
+        particle.endColor.alpha = 0.0;
+    } else {
+        particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
+    }
+};
+
+var snowSystem = new Cesium.ParticleSystem({
+    modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
+    minimumSpeed : -1.0,
+    maximumSpeed : 0.0,
+    lifeTime : 15.0,
+    emitter : new Cesium.SphereEmitter(snowRadius),
+    startScale : 0.5,
+    endScale : 1.0,
+    image : "../../SampleData/snowflake_particle.png",
+    rate : 7000.0,
+    startColor : Cesium.Color.WHITE.withAlpha(0.0),
+    endColor : Cesium.Color.WHITE.withAlpha(1.0),
+    minimumWidth : snowParticleSize,
+    minimumHeight :snowParticleSize,
+    maximumWidth : snowParticleSize * 2.0,
+    maximumHeight :snowParticleSize * 2.0,
+    forces : [snowUpdate]
+});
+scene.primitives.add(snowSystem);
+
+// rain
+var rainParticleSize = scene.drawingBufferWidth / 80.0;
+var rainRadius = 100000.0;
+
+var rainGravityScratch = new Cesium.Cartesian3();
+var rainUpdate = function(particle, dt) {
+    rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
+    rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch, -1050.0, rainGravityScratch);
+
+    particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);
+
+    var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
+    if (distance > (rainRadius)) {
+        particle.endColor.alpha = 0.0;
+    } else {
+        particle.endColor.alpha = rainSystem.endColor.alpha / (distance / rainRadius + 0.1);
+    }
+};
+
+var rainSystem = new Cesium.ParticleSystem({
+    modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
+    speed : -1.0,
+    lifeTime : 15.0,
+    emitter : new Cesium.SphereEmitter(rainRadius),
+    startScale : 1.0,
+    endScale : 0.0,
+    image : "../../SampleData/circular_particle.png",
+    rate : 9000.0,
+    startColor :new Cesium.Color(0.27, 0.5, 0.70, 0.0),
+    endColor : new Cesium.Color(0.27, 0.5, 0.70, 0.98),
+    width : rainParticleSize,
+    height : rainParticleSize * 2,
+    forces : [rainUpdate]
+});
+scene.primitives.add(rainSystem);
+
+// button
+Sandcastle.addToolbarButton("Recenter", recenterFunction);
+
+// drop down
+var options = [{
+    text : "Snow",
+    onselect : function() {
+        rainSystem.show = false;
+        snowSystem.show = true;
+
+        scene.skyAtmosphere.hueShift = -0.8;
+        scene.skyAtmosphere.saturationShift = -0.7;
+        scene.skyAtmosphere.brightnessShift = -0.33;
+
+        scene.fog.density = 0.001;
+        scene.fog.minimumBrightness = 0.8;
+    }
+}, {
+    text : "Rain",
+    onselect : function() {
+        rainSystem.show = true;
+        snowSystem.show = false;
+
+        scene.skyAtmosphere.hueShift = -0.97;
+        scene.skyAtmosphere.saturationShift = 0.25;
+        scene.skyAtmosphere.brightnessShift = -0.4;
+
+        scene.fog.density = 0.00025;
+        scene.fog.minimumBrightness = 0.01;
+    }
+}];
+Sandcastle.addToolbarMenu(options);
+        //Sandcastle_End
+    Sandcastle.finishedLoading();
+    }
+
+    if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+    } else if (typeof require === "function") {
+    require(["Cesium"], startup);
+    }
+</script>
+
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Particle System Weather.jpg b/Apps/Sandcastle/gallery/Particle System Weather.jpg