Add atmosphere lighting example.

CesiumGS · Sep 20, 2018 · 3636dbb · 3636dbb
1 parent 14e3114
commit 3636dbb
Show file tree

Hide file tree

Showing 2 changed files with 169 additions and 0 deletions.
diff --git a/Apps/Sandcastle/gallery/Atmosphere.html b/Apps/Sandcastle/gallery/Atmosphere.html
@@ -0,0 +1,169 @@
+<!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="Adjust hue, saturation, and brightness of the sky/atmosphere.">
+    <meta name="cesium-sandcastle-labels" content="Showcases">
+    <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);
+    #toolbar {
+        background: rgba(42, 42, 42, 0.8);
+        padding: 4px;
+        border-radius: 4px;
+    }
+    #toolbar input {
+        vertical-align: middle;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar">
+<table><tbody>
+<tr>
+    <td>Lighting Fade Out Distance</td>
+    <td>
+        <input type="range" min="1e6" max="1e8" step="1e6" data-bind="value: lightingFadeOutDistance, valueUpdate: 'input'">
+        <input type="text" size="10" data-bind="value: lightingFadeOutDistance">
+    </td>
+</tr>
+<tr>
+    <td>Lighting Fade In Distance</td>
+    <td>
+        <input type="range" min="1e6" max="1e8" step="1e6" data-bind="value: lightingFadeInDistance, valueUpdate: 'input'">
+        <input type="text" size="10" data-bind="value: lightingFadeInDistance">
+    </td>
+</tr>
+<tr>
+    <td>Night Fade Out Distance</td>
+    <td>
+        <input type="range" min="1e6" max="1e8" step="1e6" data-bind="value: nightFadeOutDistance, valueUpdate: 'input'">
+        <input type="text" size="10" data-bind="value: nightFadeOutDistance">
+    </td>
+</tr>
+<tr>
+    <td>Night Fade In Distance</td>
+    <td>
+        <input type="range" min="1e6" max="1e8" step="1e6" data-bind="value: nightFadeInDistance, valueUpdate: 'input'">
+        <input type="text" size="10" data-bind="value: nightFadeInDistance">
+    </td>
+</tr>
+</tbody></table>
+</div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer', {
+    sceneModePicker:false
+});
+var scene = viewer.scene;
+var globe = scene.globe;
+
+var defaultLightFadeOut = globe.lightingFadeOutDistance;
+var defaultLightFadeIn = globe.lightingFadeInDistance;
+var defaultNightFadeOut = globe.nightFadeOutDistance;
+var defaultNightFadeIn = globe.nightFadeInDistance;
+
+// The viewModel tracks the state of our mini application.
+var viewModel = {
+    lightingFadeOutDistance : defaultLightFadeOut,
+    lightingFadeInDistance : defaultLightFadeIn,
+    nightFadeOutDistance : defaultNightFadeOut,
+    nightFadeInDistance : defaultNightFadeIn
+};
+// Convert the viewModel members into knockout observables.
+Cesium.knockout.track(viewModel);
+
+// Bind the viewModel to the DOM elements of the UI that call for it.
+var toolbar = document.getElementById('toolbar');
+Cesium.knockout.applyBindings(viewModel, toolbar);
+
+// Make the skyAtmosphere's HSB parameters subscribers of the viewModel.
+function subscribeParameter(name) {
+    Cesium.knockout.getObservable(viewModel, name).subscribe(
+        function(newValue) {
+            globe[name] = newValue;
+        }
+    );
+}
+
+subscribeParameter('lightingFadeOutDistance');
+subscribeParameter('lightingFadeInDistance');
+subscribeParameter('nightFadeOutDistance');
+subscribeParameter('nightFadeInDistance');
+
+Sandcastle.addToggleButton('Ground atmosphere', globe.showGroundAtmosphere, function(checked) {
+    globe.showGroundAtmosphere = checked;
+});
+
+Sandcastle.addToggleButton('Lighting', globe.enableLighting, function(checked) {
+    globe.enableLighting = checked;
+});
+
+Sandcastle.addToolbarMenu([{
+    text : 'Cesium World Terrain - no effects',
+    onselect : function() {
+        viewer.terrainProvider = Cesium.createWorldTerrain();
+    }
+}, {
+    text : 'Cesium World Terrain w/ Vertex Normals',
+    onselect : function() {
+        viewer.terrainProvider = Cesium.createWorldTerrain({
+            requestVertexNormals : true
+        });
+    }
+}, {
+    text : 'Cesium World Terrain w/ Water',
+    onselect : function() {
+        viewer.terrainProvider = Cesium.createWorldTerrain({
+            requestWaterMask : true
+        });
+    }
+}, {
+    text : 'Cesium World Terrain w/ Vertex Normals and Water',
+    onselect : function() {
+        viewer.terrainProvider = Cesium.createWorldTerrain({
+            requestVertexNormals : true,
+            requestWaterMask : true
+        });
+    }
+}, {
+    text : 'EllipsoidTerrainProvider',
+    onselect : function() {
+        viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
+    }
+}]);
+
+Sandcastle.addToolbarButton('Reset Fade Distances', function() {
+    globe.lightingFadeOutDistance = defaultLightFadeOut;
+    globe.lightingFadeInDistance = defaultLightFadeIn;
+    globe.nightFadeOutDistance = defaultNightFadeOut;
+    globe.nightFadeInDistance = defaultNightFadeIn;
+});
+
+//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/Atmosphere.jpg b/Apps/Sandcastle/gallery/Atmosphere.jpg