CesiumGS · IanLilleyT · May 21, 2020 · May 17, 2020 · May 18, 2020 · May 18, 2020
diff --git a/Apps/SampleData/models/ParcLeadMine/ParcLeadMine.glb b/Apps/SampleData/models/ParcLeadMine/ParcLeadMine.glb
diff --git a/Apps/Sandcastle/gallery/Cartographic Limit Rectangle.html b/Apps/Sandcastle/gallery/Cartographic Limit Rectangle.html
@@ -39,6 +39,9 @@
           terrainProvider: Cesium.createWorldTerrain(),
         });
 
+        var scene = viewer.scene;
+        var globe = scene.globe;
+
         // Tropics of Cancer and Capricorn
         var coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(
           -180.0,
@@ -47,9 +50,11 @@
           23.43687
         );
 
-        viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
-        viewer.scene.globe.showSkirts = false;
-        viewer.scene.skyAtmosphere.show = false;
+        globe.cartographicLimitRectangle = coffeeBeltRectangle;
+        globe.showSkirts = false;
+        globe.backFaceCulling = false;
+        globe.undergroundColor = undefined;
+        scene.skyAtmosphere.show = false;
 
         // Add rectangles to show bounds
         var rectangles = [];

diff --git a/Apps/Sandcastle/gallery/Underground Color.html b/Apps/Sandcastle/gallery/Underground Color.html
@@ -0,0 +1,230 @@
+<!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="Use Viewer to start building new applications or easily embed Cesium into existing applications."
+    />
+    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script
+      type="text/javascript"
+      src="../../../Build/CesiumUnminified/Cesium.js"
+      nomodule
+    ></script>
+    <script type="module" src="../load-cesium-es6.js"></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;
+      }
+      #toolbar .header {
+        font-weight: bold;
+      }
+    </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>Near distance</td>
+            <td>
+              <input
+                type="range"
+                min="0.0"
+                max="1000000.0"
+                step="1.0"
+                data-bind="value: nearDistance, valueUpdate: 'input'"
+              />
+              <input type="text" size="5" data-bind="value: nearDistance" />
+            </td>
+          </tr>
+          <tr>
+            <td>Far distance</td>
+            <td>
+              <input
+                type="range"
+                min="100000.0"
+                max="3000000.0"
+                step="1.0"
+                data-bind="value: farDistance, valueUpdate: 'input'"
+              />
+              <input type="text" size="5" data-bind="value: farDistance" />
+            </td>
+          </tr>
+          <tr>
+            <td>Near alpha</td>
+            <td>
+              <input
+                type="range"
+                min="0.0"
+                max="1.0"
+                step="0.01"
+                data-bind="value: nearAlpha, valueUpdate: 'input'"
+              />
+              <input type="text" size="5" data-bind="value: nearAlpha" />
+            </td>
+          </tr>
+          <tr>
+            <td>Far alpha</td>
+            <td>
+              <input
+                type="range"
+                min="0.0"
+                max="1.0"
+                step="0.01"
+                data-bind="value: farAlpha, valueUpdate: 'input'"
+              />
+              <input type="text" size="5" data-bind="value: farAlpha" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <script id="cesium_sandcastle_script">
+      function startup(Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        var viewer = new Cesium.Viewer("cesiumContainer");
+
+        var scene = viewer.scene;
+        var globe = scene.globe;
+
+        scene.screenSpaceCameraController.enableCollisionDetection = false;
+
+        var longitude = -3.82518;
+        var latitude = 53.11728;
+        var height = -500.0;
+        var position = Cesium.Cartesian3.fromDegrees(
+          longitude,
+          latitude,
+          height
+        );
+        var url = "../../SampleData/models/ParcLeadMine/ParcLeadMine.glb";
+
+        var entity = viewer.entities.add({
+          name: url,
+          position: position,
+          model: {
+            uri: url,
+          },
+        });
+
+        viewer.scene.camera.setView({
+          destination: new Cesium.Cartesian3(
+            3827058.651471591,
+            -256575.7981065622,
+            5078738.238484612
+          ),
+          orientation: new Cesium.HeadingPitchRoll(
+            1.9765540737339418,
+            -0.17352018581162754,
+            0.0030147639151465455
+          ),
+          endTransform: Cesium.Matrix4.IDENTITY,
+        });
+
+        var originalColor = Cesium.Color.BLACK;
+        var originalNearDistance = 1000.0;
+        var originalFarDistance = 1000000.0;
+        var originalNearAlpha = 0.0;
+        var originalFarAlpha = 1.0;
+
+        var color = originalColor;
+
+        var viewModel = {
+          enabled: true,
+          nearDistance: originalNearDistance,
+          farDistance: originalFarDistance,
+          nearAlpha: originalNearAlpha,
+          farAlpha: originalFarAlpha,
+        };
+
+        Cesium.knockout.track(viewModel);
+        var toolbar = document.getElementById("toolbar");
+        Cesium.knockout.applyBindings(viewModel, toolbar);
+        for (var name in viewModel) {
+          if (viewModel.hasOwnProperty(name)) {
+            Cesium.knockout.getObservable(viewModel, name).subscribe(update);
+          }
+        }
+
+        Sandcastle.addToolbarButton("Random color", function () {
+          color = Cesium.Color.fromRandom({
+            alpha: 1.0,
+          });
+          update();
+        });
+
+        Sandcastle.addToolbarButton("Clear", function () {
+          color = originalColor;
+          viewModel.enabled = true;
+          viewModel.nearDistance = originalNearDistance;
+          viewModel.farDistance = originalFarDistance;
+          viewModel.nearAlpha = originalNearAlpha;
+          viewModel.farAlpha = originalFarAlpha;
+          update();
+        });
+
+        function update() {
+          globe.undergroundColor = viewModel.enabled ? color : undefined;
+
+          var nearDistance = Number(viewModel.nearDistance);
+          nearDistance = isNaN(nearDistance)
+            ? originalNearDistance
+            : nearDistance;
+
+          var farDistance = Number(viewModel.farDistance);
+          farDistance = isNaN(farDistance) ? originalFarDistance : farDistance;
+
+          if (nearDistance > farDistance) {
+            nearDistance = farDistance;
+          }
+
+          var nearAlpha = Number(viewModel.nearAlpha);
+          nearAlpha = isNaN(nearAlpha) ? 0.0 : nearAlpha;
+
+          var farAlpha = Number(viewModel.farAlpha);
+          farAlpha = isNaN(farAlpha) ? 1.0 : farAlpha;
+
+          globe.undergroundColorAlphaByDistance.near = nearDistance;
+          globe.undergroundColorAlphaByDistance.far = farDistance;
+          globe.undergroundColorAlphaByDistance.nearValue = nearAlpha;
+          globe.undergroundColorAlphaByDistance.farValue = farAlpha;
+        }
+        update(); //Sandcastle_End
+        Sandcastle.finishedLoading();
+      }
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        startup(Cesium);
+      }
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Underground Color.jpg b/Apps/Sandcastle/gallery/Underground Color.jpg
diff --git a/CHANGES.md b/CHANGES.md
@@ -6,6 +6,7 @@
 
 - Added `Cesium3DTileset.extensions` to get the extensions property from the tileset JSON. [#8829](https://github.com/CesiumGS/cesium/pull/8829)
 - Added `frustumSplits` option to `DebugCameraPrimitive`. [8849](https://github.com/CesiumGS/cesium/pull/8849)
+- Added `Globe.undergroundColor` and `Globe.undergroundColorAlphaByDistance` for controlling how the back side of the globe is rendered when the camera is underground or the globe is translucent. [#8867](https://github.com/CesiumGS/cesium/pull/8867)
 
 ##### Fixes :wrench:
 

diff --git a/LICENSE.md b/LICENSE.md
@@ -959,6 +959,12 @@ Creative Commons Attribution 3.0
 (c) copyright 2012, Dennis Haupt
 http://www.blendswap.com/blends/view/61653
 
+### Perc Lead Mine
+
+Creative Commons Attribution 4.0 International
+(c) copyright 2019, Dr Edward Alan Lockhart
+https://sketchfab.com/3d-models/parc-lead-mine-4759a23abbff454c8c682ff9b02ba111
+
 ### GitHub logo
 
 https://github.com/logos

diff --git a/Source/Renderer/AutomaticUniforms.js b/Source/Renderer/AutomaticUniforms.js
@@ -1896,5 +1896,19 @@ var AutomaticUniforms = {
       return uniformState.ellipsoid.oneOverRadii;
     },
   }),
+
+  /**
+   * An automatic GLSL uniform that stores the camera's height above or below the ellipsoid.
+   *
+   * @alias czm_cameraHeight
+   * @glslUniform
+   */
+  czm_cameraHeight: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT,
+    getValue: function (uniformState) {
+      return uniformState.cameraHeight;
+    },
+  }),
 };
 export default AutomaticUniforms;
diff --git a/Source/Renderer/UniformState.js b/Source/Renderer/UniformState.js
@@ -141,6 +141,7 @@ function UniformState() {
   this._cameraDirection = new Cartesian3();
   this._cameraRight = new Cartesian3();
   this._cameraUp = new Cartesian3();
+  this._cameraHeight = 0.0;
   this._frustum2DWidth = 0.0;
   this._eyeHeight2D = new Cartesian2();
   this._pixelRatio = 1.0;
@@ -1010,6 +1011,18 @@ Object.defineProperties(UniformState.prototype, {
       return defaultValue(this._ellipsoid, Ellipsoid.WGS84);
     },
   },
+
+  /**
+   * The camera's height above or below the ellipsoid.
+   *
+   * @memberof UniformState.prototype
+   * @type {Number}
+   */
+  cameraHeight: {
+    get: function () {
+      return this._cameraHeight;
+    },
+  },
 });
 
 function setView(uniformState, matrix) {
@@ -1060,6 +1073,14 @@ function setCamera(uniformState, camera) {
   Cartesian3.clone(camera.directionWC, uniformState._cameraDirection);
   Cartesian3.clone(camera.rightWC, uniformState._cameraRight);
   Cartesian3.clone(camera.upWC, uniformState._cameraUp);
+
+  var positionCartographic = camera.positionCartographic;
+  if (!defined(positionCartographic)) {
+    uniformState._cameraHeight = -uniformState._ellipsoid.maximumRadius;
+  } else {
+    uniformState._cameraHeight = positionCartographic.height;
+  }
+
   uniformState._encodedCameraPositionMCDirty = true;
 }