Dynamic terrain exaggeration

Apps/Sandcastle/gallery/Terrain Exaggeration.html

@@ -24,86 +24,173 @@
   >
     <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">
-      <div id="zoomButtons"></div>
+      <table>
+        <tbody>
+          <tr>
+            <td>Exaggeration</td>
+            <td>
+              <input
+                type="range"
+                min="0"
+                max="10"
+                step="0.01"
+                data-bind="value: exaggeration, valueUpdate: 'input'"
+              />
+              <input type="text" size="5" data-bind="value: exaggeration" />
+            </td>
+          </tr>
+          <tr>
+            <td>Relative Height</td>
+            <td>
+              <input
+                type="range"
+                min="-1000"
+                max="9000"
+                step="1"
+                data-bind="value: relativeHeight, valueUpdate: 'input'"
+              />
+              <input type="text" size="5" data-bind="value: relativeHeight" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     <script id="cesium_sandcastle_script">
       function startup(Cesium) {
         "use strict";
         //Sandcastle_Begin
         var viewer = new Cesium.Viewer("cesiumContainer", {
-          terrainExaggeration: 2.0,
           terrainProvider: Cesium.createWorldTerrain(),
         });
 
-        Sandcastle.addDefaultToolbarMenu(
-          [
-            {
-              text: "Mount Everest",
-              onselect: function () {
-                viewer.camera.setView({
-                  destination: new Cesium.Cartesian3(
-                    277096.634865404,
-                    5647834.481964232,
-                    2985563.7039122293
-                  ),
-                  orientation: {
-                    heading: 4.731089976107251,
-                    pitch: -0.32003481981370063,
-                  },
-                });
-              },
-            },
-            {
-              text: "Half Dome",
-              onselect: function () {
-                viewer.camera.setView({
-                  destination: new Cesium.Cartesian3(
-                    -2497565.707296549,
-                    -4393815.215148996,
-                    3886033.5140598584
-                  ),
-                  orientation: {
-                    heading: 1.6690385899673323,
-                    pitch: -0.32086751043096884,
-                  },
-                });
-              },
-            },
-            {
-              text: "San Francisco Bay",
-              onselect: function () {
-                viewer.camera.setView({
-                  destination: new Cesium.Cartesian3(
-                    -2696570.092794883,
-                    -4276051.411224011,
-                    3887257.288168422
-                  ),
-                  orientation: {
-                    heading: 5.193128432412409,
-                    pitch: -0.3996479673257727,
-                  },
-                });
-                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 globe = scene.globe;
+        globe.terrainExaggeration = 2.0;
+        globe.terrainExaggerationRelativeHeight = 2400.0;
+
+        scene.camera.setView({
+          destination: new Cesium.Cartesian3(
+            336567.0354790703,
+            5664688.047602498,
+            2923204.3566963132
+          ),
+          orientation: new Cesium.HeadingPitchRoll(
+            1.2273281382639265,
+            -0.32239612370237514,
+            0.0027207329018610338
+          ),
+        });
+
+        viewer.entities.add({
+          position: new Cesium.Cartesian3(
+            314557.3531714575,
+            5659723.771882165,
+            2923538.5417330978
+          ),
+          ellipsoid: {
+            radii: new Cesium.Cartesian3(400.0, 400.0, 400.0),
+            material: Cesium.Color.RED,
+            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          },
+        });
+
+        var visualizeRelativeHeight = true;
+
+        function updateMaterial() {
+          if (visualizeRelativeHeight) {
+            var height = globe.terrainExaggerationRelativeHeight;
+            var exaggeration = globe.terrainExaggeration;
+            var alpha = Math.min(1.0, exaggeration * 0.25);
+            var layer = {
+              extendUpwards: true,
+              extendDownwards: true,
+              entries: [
+                {
+                  height: height + 100.0,
+                  color: new Cesium.Color(0.0, 1.0, 0.0, alpha * 0.25),
+                },
+                {
+                  height: height + 50.0,
+                  color: new Cesium.Color(1.0, 1.0, 1.0, alpha * 0.5),
+                },
+                {
+                  height: height,
+                  color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
+                },
+                {
+                  height: height - 50.0,
+                  color: new Cesium.Color(1.0, 1.0, 1.0, alpha * 0.5),
+                },
+                {
+                  height: height - 100.0,
+                  color: new Cesium.Color(1.0, 0.0, 0.0, alpha * 0.25),
+                },
+              ],
+            };
+            scene.globe.material = Cesium.createElevationBandMaterial({
+              scene: scene,
+              layers: [layer],
+            });
+          } else {
+            scene.globe.material = undefined;
+          }
+        }
+        updateMaterial();
+
+        var viewModel = {
+          exaggeration: globe.terrainExaggeration,
+          relativeHeight: globe.terrainExaggerationRelativeHeight,
+        };
+
+        function updateExaggeration() {
+          globe.terrainExaggeration = Number(viewModel.exaggeration);
+          globe.terrainExaggerationRelativeHeight = Number(
+            viewModel.relativeHeight
+          );
+          updateMaterial();
+        }
+
+        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(updateExaggeration);
+          }
+        }
+
+        Sandcastle.addToggleButton(
+          "Visualize Relative Height",
+          visualizeRelativeHeight,
+          function (checked) {
+            visualizeRelativeHeight = checked;
+            updateMaterial();
+          }
         );
+
+        Sandcastle.addToolbarButton("Remove Exaggeration", function () {
+          viewModel.exaggeration = 1.0;
+          viewModel.relativeHeight = 0.0;
+        });
         //Sandcastle_End
         Sandcastle.finishedLoading();
       }

CHANGES.md

@@ -4,6 +4,7 @@
 
 ##### Additions :tada:
 
+- Added dynamic terrain exaggeration with `Globe.terrainExaggeration` and `Globe.terrainExaggerationRelativeHeight`. [#9603](https://github.com/CesiumGS/cesium/pull/9603)
 - Added `options.fadingEnabled` parameter to `ShadowMap` to control whether shadows fade out when the light source is close to the horizon. [#9565](https://github.com/CesiumGS/cesium/pull/9565)
 - Added checks for supported 3D Tiles extensions. [#9552](https://github.com/CesiumGS/cesium/issues/9552)
 - Added documentation clarifying that the `outlineWidth` property will be ignored on all major browsers on Windows platforms. [#9600](https://github.com/CesiumGS/cesium/pull/9600)
@@ -16,6 +17,10 @@
 - Fixed broken image URL in the KML Sandcastle. [#9579](https://github.com/CesiumGS/cesium/pull/9579)
 - Fixed an error where the `positionToEyeEC` and `tangentToEyeMatrix` properties for custom materials were not set in `GlobeFS`. [#9597](https://github.com/CesiumGS/cesium/pull/9597)
 
+##### Deprecated :hourglass_flowing_sand:
+
+- `Scene.terrainExaggeration` and `options.terrainExaggeration` for `CesiumWidget`, `Viewer`, and `Scene` have been deprecated and will be removed in CesiumJS 1.85. They will be replaced with `Globe.terrainExaggeration`.
+
 ### 1.82.1 - 2021-06-01
 
 - This is an npm only release to fix the improperly published 1.82.0.

Source/Core/GoogleEarthEnterpriseTerrainData.js

@@ -138,6 +138,7 @@ var rectangleScratch = new Rectangle();
  * @param {Number} options.y The Y coordinate of the tile for which to create the terrain data.
  * @param {Number} options.level The level of the tile for which to create the terrain data.
  * @param {Number} [options.exaggeration=1.0] The scale used to exaggerate the terrain.
+ * @param {Number} [options.exaggerationRelativeHeight=0.0] The height from which terrain is exaggerated.
  * @param {Boolean} [options.throttle=true] If true, indicates that this operation will need to be retried if too many asynchronous mesh creations are already in progress.
  * @returns {Promise.<TerrainMesh>|undefined} A promise for the terrain mesh, or undefined if too many
  *          asynchronous mesh creations are already in progress and the operation should
@@ -158,6 +159,10 @@ GoogleEarthEnterpriseTerrainData.prototype.createMesh = function (options) {
   var y = options.y;
   var level = options.level;
   var exaggeration = defaultValue(options.exaggeration, 1.0);
+  var exaggerationRelativeHeight = defaultValue(
+    options.exaggerationRelativeHeight,
+    0.0
+  );
   var throttle = defaultValue(options.throttle, true);
 
   var ellipsoid = tilingScheme.ellipsoid;
@@ -185,6 +190,7 @@ GoogleEarthEnterpriseTerrainData.prototype.createMesh = function (options) {
     ellipsoid: ellipsoid,
     skirtHeight: this._skirtHeight,
     exaggeration: exaggeration,
+    exaggerationRelativeHeight: exaggerationRelativeHeight,
     includeWebMercatorT: true,
     negativeAltitudeExponentBias: this._negativeAltitudeExponentBias,
     negativeElevationThreshold: this._negativeElevationThreshold,
@@ -212,7 +218,6 @@ GoogleEarthEnterpriseTerrainData.prototype.createMesh = function (options) {
       result.numberOfAttributes,
       OrientedBoundingBox.clone(result.orientedBoundingBox),
       TerrainEncoding.clone(result.encoding),
-      exaggeration,
       result.westIndicesSouthToNorth,
       result.southIndicesEastToWest,
       result.eastIndicesNorthToSouth,
@@ -333,7 +338,6 @@ GoogleEarthEnterpriseTerrainData.prototype.upsample = function (
     isNorthChild: isNorthChild,
     childRectangle: childRectangle,
     ellipsoid: ellipsoid,
-    exaggeration: mesh.exaggeration,
   });
 
   if (!defined(upsamplePromise)) {