CesiumGS · pjcozzi · Nov 9, 2015 · Oct 22, 2015 · Oct 23, 2015 · Oct 23, 2015
diff --git a/Apps/Sandcastle/gallery/development/Fog.html b/Apps/Sandcastle/gallery/development/Fog.html
@@ -0,0 +1,181 @@
+<!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="Control fog parameters.">
+    <meta name="cesium-sandcastle-labels" content="Development">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/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">
+<table><tbody>
+    <tr>
+        <td>enabled</td>
+        <td><input type="checkbox" data-bind="checked: enabled"/></td>
+    </tr>
+    <tr>
+        <td>start height</td>
+        <td><input type="text" size="5" data-bind="value: startHeight"></td>
+    </tr>
+    <tr>
+        <td>start density</td>
+        <td><input type="text" size="5" data-bind="value: startDensity"></td>
+    </tr>
+    <tr>
+        <td>end height</td>
+        <td><input type="text" size="5" data-bind="value: endHeight"></td>
+    </tr>
+    <tr>
+        <td>end density</td>
+        <td><input type="text" size="5" data-bind="value: endDensity"></td>
+    </tr>
+</tbody></table>
+<div id="zoomButtons"></div>
+</div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    "use strict";
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer');
+viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
+    url : '//assets.agi.com/stk-terrain/world',
+    requestWaterMask : true,
+    requestVertexNormals : true
+});
+
+viewer.extend(Cesium.viewerCesiumInspectorMixin);
+
+/*
+viewer.imageryLayers.removeAll();
+viewer.imageryLayers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
+    url : require.toUrl('Assets/Textures/NaturalEarthII')
+}));
+*/
+
+//viewer.scene.globe.enableLighting = true;
+
+//The viewModel tracks the state of our mini application.
+var viewModel = {
+    enabled : true,
+    startDensity : 0,
+    endDensity : 0,
+    startHeight : 0,
+    endHeight : 0
+};
+// 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);
+
+Cesium.knockout.getObservable(viewModel, 'enabled').subscribe(
+    function(newValue) {
+        viewer.scene.fogEnabled = newValue;
+    }
+);
+
+Cesium.knockout.getObservable(viewModel, 'startDensity').subscribe(
+    function(newValue) {
+        viewer.scene.fogStartDensity = newValue;
+    }
+);
+
+Cesium.knockout.getObservable(viewModel, 'endDensity').subscribe(
+    function(newValue) {
+        viewer.scene.fogEndDensity = newValue;
+    }
+);
+
+Cesium.knockout.getObservable(viewModel, 'startHeight').subscribe(
+    function(newValue) {
+        viewer.scene.fogStartHeight = newValue;
+    }
+);
+
+Cesium.knockout.getObservable(viewModel, 'endHeight').subscribe(
+    function(newValue) {
+        viewer.scene.fogEndHeight = newValue;
+    }
+);
+
+viewModel.enabled = viewer.scene.fogEnabled;
+viewModel.startDensity = viewer.scene.fogStartDensity;
+viewModel.endDensity = viewer.scene.fogEndDensity;
+viewModel.startHeight = viewer.scene.fogStartHeight;
+viewModel.endHeight = viewer.scene.fogEndHeight;
+
+/*
+Sandcastle.addToolbarMenu([{
+    text : 'Half Dome',
+    onselect : function() {
+        var target = new Cesium.Cartesian3(-2489625.0836225147, -4393941.44443024, 3882535.9454173897);
+        var offset = new Cesium.Cartesian3(-6857.40902037546, 412.3284835694358, 2147.5545426812023);
+        viewer.camera.lookAt(target, offset);
+        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+    }
+}, {
+    text : 'Mount Everest',
+    onselect : function() {
+        var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
+        var offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
+        viewer.camera.lookAt(target, offset);
+        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+    }
+}, {
+    text : 'San Francisco Bay',
+    onselect : function() {
+        var target = new Cesium.Cartesian3(-2708814.85583248, -4254159.450845907, 3891403.9457429945);
+        var offset = new Cesium.Cartesian3(70642.66030209465, -31661.517948317807, 35505.179997143336);
+        viewer.camera.lookAt(target, offset);
+        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+    }
+}], 'zoomButtons');
+*/
+
+var scene = viewer.scene;
+var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+handler.setInputAction(function(movement) {
+    var ray = scene.camera.getPickRay(movement.position);
+    var pickedPosition = scene.globe.pick(ray, scene);
+    if (Cesium.defined(pickedPosition)) {
+        console.log(Cesium.Cartesian3.distance(pickedPosition, scene.camera.position));
+    }
+}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+scene.camera.setView({
+    destination : new Cesium.Cartesian3(-2467070.494299382, -4414079.174382873, 3880669.8976452565),
+    orientation : {
+        heading : 1.7833456822869636,
+        pitch : -0.1764684555868994
+    }
+});
+
+scene.globe._surface._debug.enableDebugOutput = true;
+
+//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Source/Core/Math.js b/Source/Core/Math.js
@@ -309,6 +309,16 @@ define([
         return ((1.0 - time) * p) + (time * q);
     };
 
+    CesiumMath.smoothstep = function(edge0, edge1, x) {
+        x = CesiumMath.clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+        return x * x * (3.0 - x * 1.0);
+    };
+
+    CesiumMath.smootherstep = function(edge0, edge1, x) {
+        x = CesiumMath.clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+        return x * x * x * (10.0 + x * (-15.0 + x * 6.0));
+    };
+
     /**
      * pi
      *

diff --git a/Source/Renderer/AutomaticUniforms.js b/Source/Renderer/AutomaticUniforms.js
@@ -1396,6 +1396,14 @@ define([
             getValue : function(uniformState) {
                 return uniformState.resolutionScale;
             }
+        }),
+
+        czm_fogDensity : new AutomaticUniform({
+            size : 1,
+            datatype : WebGLConstants.FLOAT,
+            getValue : function(uniformState) {
+                return uniformState.fogDensity;
+            }
         })
     };
 

diff --git a/Source/Renderer/UniformState.js b/Source/Renderer/UniformState.js
@@ -146,6 +146,8 @@ define([
         this._frustum2DWidth = 0.0;
         this._eyeHeight2D = new Cartesian2();
         this._resolutionScale = 1.0;
+
+        this._fogDensity = undefined;
     };
 
     defineProperties(UniformState.prototype, {
@@ -764,6 +766,12 @@ define([
             get : function() {
                 return this._resolutionScale;
             }
+        },
+
+        fogDensity : {
+            get : function() {
+                return this._fogDensity;
+            }
         }
     });
 
@@ -904,6 +912,8 @@ define([
         this._entireFrustum.y = camera.frustum.far;
         this.updateFrustum(camera.frustum);
 
+        this._fogDensity = frameState.fogDensity;
+
         this._frameState = frameState;
         this._temeToPseudoFixed = Transforms.computeTemeToPseudoFixedMatrix(frameState.time, this._temeToPseudoFixed);
     };

diff --git a/Source/Scene/FrameState.js b/Source/Scene/FrameState.js
@@ -135,6 +135,9 @@ define([
          * @default false
          */
         this.scene3DOnly = false;
+
+        this.fogEnabled = true;
+        this.fogDensity = undefined;
     };
 
     /**

diff --git a/Source/Scene/Globe.js b/Source/Scene/Globe.js
@@ -40,6 +40,7 @@ define([
         '../Shaders/GlobeFSPole',
         '../Shaders/GlobeVS',
         '../Shaders/GlobeVSPole',
+        '../Shaders/GroundAtmosphere',
         '../ThirdParty/when',
         './GlobeSurfaceShaderSet',
         './GlobeSurfaceTileProvider',
@@ -89,6 +90,7 @@ define([
         GlobeFSPole,
         GlobeVS,
         GlobeVSPole,
+        GroundAtmosphere,
         when,
         GlobeSurfaceShaderSet,
         GlobeSurfaceTileProvider,
@@ -122,7 +124,7 @@ define([
         this._surfaceShaderSet = new GlobeSurfaceShaderSet();
 
         this._surfaceShaderSet.baseVertexShaderSource = new ShaderSource({
-            sources : [GlobeVS]
+            sources : [GroundAtmosphere, GlobeVS]
         });
 
         this._surfaceShaderSet.baseFragmentShaderSource = new ShaderSource({

diff --git a/Source/Scene/GlobeSurfaceShaderSet.js b/Source/Scene/GlobeSurfaceShaderSet.js
@@ -66,7 +66,7 @@ define([
         return useWebMercatorProjection ? get2DYPositionFractionMercatorProjection : get2DYPositionFractionGeographicProjection;
     }
 
-    GlobeSurfaceShaderSet.prototype.getShaderProgram = function(context, sceneMode, surfaceTile, numberOfDayTextures, applyBrightness, applyContrast, applyHue, applySaturation, applyGamma, applyAlpha, showReflectiveOcean, showOceanWaves, enableLighting, hasVertexNormals, useWebMercatorProjection) {
+    GlobeSurfaceShaderSet.prototype.getShaderProgram = function(context, sceneMode, surfaceTile, numberOfDayTextures, applyBrightness, applyContrast, applyHue, applySaturation, applyGamma, applyAlpha, showReflectiveOcean, showOceanWaves, enableLighting, hasVertexNormals, useWebMercatorProjection, enableFog) {
         var flags = sceneMode |
                     (applyBrightness << 2) |
                     (applyContrast << 3) |
@@ -78,7 +78,8 @@ define([
                     (showOceanWaves << 9) |
                     (enableLighting << 10) |
                     (hasVertexNormals << 11) |
-                    (useWebMercatorProjection << 12);
+                    (useWebMercatorProjection << 12) |
+                    (enableFog << 13);
 
         var surfaceShader = surfaceTile.surfaceShader;
         if (defined(surfaceShader) &&
@@ -138,6 +139,11 @@ define([
                 }
             }
 
+            if (enableFog) {
+                vs.defines.push('FOG');
+                fs.defines.push('FOG');
+            }
+
             var computeDayColor = '\
     vec4 computeDayColor(vec4 initialColor, vec2 textureCoordinates)\n\
     {\n\

diff --git a/Source/Scene/GlobeSurfaceTileProvider.js b/Source/Scene/GlobeSurfaceTileProvider.js
@@ -438,10 +438,18 @@ define([
      * @returns {Visibility} The visibility of the tile.
      */
     GlobeSurfaceTileProvider.prototype.computeTileVisibility = function(tile, frameState, occluders) {
-        var surfaceTile = tile.data;
+        if (frameState.fogEnabled) {
+            var distance = this.computeDistanceToTile(tile, frameState);
+            var scalar = distance * frameState.fogDensity;
+            var fog = 1.0 - Math.exp(-(scalar * scalar));
 
-        var cullingVolume = frameState.cullingVolume;
+            if (fog >= 1.0) {
+                return Visibility.NONE;
+            }
+        }
 
+        var surfaceTile = tile.data;
+        var cullingVolume = frameState.cullingVolume;
         var boundingVolume = defaultValue(surfaceTile.orientedBoundingBox, surfaceTile.boundingSphere3D);
 
         if (frameState.mode !== SceneMode.SCENE3D) {
@@ -930,6 +938,7 @@ define([
         var oceanNormalMap = tileProvider.oceanNormalMap;
         var showOceanWaves = showReflectiveOcean && defined(oceanNormalMap);
         var hasVertexNormals = tileProvider.terrainProvider.ready && tileProvider.terrainProvider.hasVertexNormals;
+        var enableFog = frameState.fogEnabled;
 
         if (showReflectiveOcean) {
             --maxTextures;
@@ -1117,7 +1126,7 @@ define([
             uniformMap.waterMask = waterMaskTexture;
             Cartesian4.clone(surfaceTile.waterMaskTranslationAndScale, uniformMap.waterMaskTranslationAndScale);
 
-            command.shaderProgram = tileProvider._surfaceShaderSet.getShaderProgram(context, frameState.mode, surfaceTile, numberOfDayTextures, applyBrightness, applyContrast, applyHue, applySaturation, applyGamma, applyAlpha, showReflectiveOcean, showOceanWaves, tileProvider.enableLighting, hasVertexNormals, useWebMercatorProjection);
+            command.shaderProgram = tileProvider._surfaceShaderSet.getShaderProgram(context, frameState.mode, surfaceTile, numberOfDayTextures, applyBrightness, applyContrast, applyHue, applySaturation, applyGamma, applyAlpha, showReflectiveOcean, showOceanWaves, tileProvider.enableLighting, hasVertexNormals, useWebMercatorProjection, enableFog);
             command.renderState = renderState;
             command.primitiveType = PrimitiveType.TRIANGLES;
             command.vertexArray = surfaceTile.vertexArray;

diff --git a/Source/Scene/Scene.js b/Source/Scene/Scene.js
@@ -505,6 +505,12 @@ define([
          */
         this.copyGlobeDepth = false;
 
+        this.fogEnabled = true;
+        this.fogStartDensity = 0.00002;
+        this.fogEndDensity = 9e-8;
+        this.fogStartHeight = 2000.0;
+        this.fogEndHeight = 100000.0;
+
         this._performanceDisplay = undefined;
         this._debugVolume = undefined;
 
@@ -955,6 +961,24 @@ define([
         return undefined;
     }
 
+    function updateFog(scene) {
+        var frameState = scene.frameState;
+        var enabled = frameState.fogEnabled = scene.fogEnabled;
+        if (enabled) {
+            var height = scene.camera.positionCartographic.height;
+
+            var startHeight = scene.fogStartHeight;
+            var endHeight = scene.fogEndHeight;
+
+            var startDensity = scene.fogStartDensity;
+            var endDensity = scene.fogEndDensity;
+
+            var t = CesiumMath.smoothstep(startHeight, endHeight, height);
+            t = CesiumMath.clamp(t, 0.0, 1.0);
+            frameState.fogDensity = CesiumMath.lerp(startDensity, endDensity, t);
+        }
+    }
+
     function clearPasses(passes) {
         passes.render = false;
         passes.pick = false;
@@ -975,6 +999,7 @@ define([
         frameState.occluder = getOccluder(scene);
 
         clearPasses(frameState.passes);
+        updateFog(scene);
     }
 
     function updateFrustums(near, far, farToNearRatio, numFrustums, frustumCommandsList) {