CesiumGS · Samulus · Dec 21, 2020 · Sep 3, 2020 · Sep 3, 2020 · Sep 3, 2020
diff --git a/Apps/Sandcastle/gallery/Elevation Band Material.html b/Apps/Sandcastle/gallery/Elevation Band Material.html
@@ -0,0 +1,325 @@
+<!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="Apply elevation band material to the globe."
+    />
+    <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="../../../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);
+    </style>
+    <div id="cesiumContainer" class="fullSize"></div>
+    <div id="loadingOverlay"><h1>Loading...</h1></div>
+    <div id="toolbar">
+      <table>
+        <tbody>
+          <tr>
+            <td>Background Transparency</td>
+            <td>
+              <input
+                type="range"
+                min="0.0"
+                max="1.0"
+                step="0.01"
+                data-bind="value: backgroundTransparency, valueUpdate: 'input'"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Band Transparency</td>
+            <td>
+              <input
+                type="range"
+                min="0.0"
+                max="1.0"
+                step="0.01"
+                data-bind="value: bandTransparency, valueUpdate: 'input'"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Band Thickness</td>
+            <td>
+              <input
+                type="range"
+                min="10"
+                max="1000"
+                step="1"
+                data-bind="value: bandThickness, valueUpdate: 'input'"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Band 1 Position</td>
+            <td>
+              <input
+                type="range"
+                min="4000"
+                max="8848"
+                step="1"
+                data-bind="value: band1Position, valueUpdate: 'input'"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Band 2 Position</td>
+            <td>
+              <input
+                type="range"
+                min="4000"
+                max="8848"
+                step="1"
+                data-bind="value: band2Position, valueUpdate: 'input'"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Band 3 Position</td>
+            <td>
+              <input
+                type="range"
+                min="4000"
+                max="8848"
+                step="1"
+                data-bind="value: band3Position, valueUpdate: 'input'"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Gradient</td>
+            <td>
+              <input type="checkbox" data-bind="checked: gradient" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <script id="cesium_sandcastle_script">
+      function startup(Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        var viewer = new Cesium.Viewer("cesiumContainer", {
+          terrainProvider: Cesium.createWorldTerrain({
+            requestVertexNormals: true, //Needed to visualize slope
+          }),
+        });
+
+        viewer.camera.setView({
+          destination: new Cesium.Cartesian3(
+            290637.5534733206,
+            5637471.593707632,
+            2978256.8126927214
+          ),
+          orientation: {
+            heading: 4.747266966349747,
+            pitch: -0.2206998858596192,
+            roll: 6.280340554587955,
+          },
+        });
+
+        var viewModel = {
+          gradient: false,
+          band1Position: 7000.0,
+          band2Position: 7500.0,
+          band3Position: 8000.0,
+          bandThickness: 100.0,
+          bandTransparency: 0.5,
+          backgroundTransparency: 0.75,
+        };
+
+        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(updateMaterial);
+          }
+        }
+
+        function updateMaterial() {
+          var gradient = Boolean(viewModel.gradient);
+          var band1Position = Number(viewModel.band1Position);
+          var band2Position = Number(viewModel.band2Position);
+          var band3Position = Number(viewModel.band3Position);
+          var bandThickness = Number(viewModel.bandThickness);
+          var bandTransparency = Number(viewModel.bandTransparency);
+          var backgroundTransparency = Number(viewModel.backgroundTransparency);
+
+          var layers = [];
+          var backgroundLayer = {
+            entries: [
+              {
+                height: 4200.0,
+                color: new Cesium.Color(0.0, 0.0, 0.2, backgroundTransparency),
+              },
+              {
+                height: 8000.0,
+                color: new Cesium.Color(1.0, 1.0, 1.0, backgroundTransparency),
+              },
+              {
+                height: 8500.0,
+                color: new Cesium.Color(1.0, 0.0, 0.0, backgroundTransparency),
+              },
+            ],
+            extendDownwards: true,
+            extendUpwards: true,
+          };
+          layers.push(backgroundLayer);
+
+          var gridStartHeight = 4200.0;
+          var gridEndHeight = 8848.0;
+          var gridCount = 50;
+          for (var i = 0; i < gridCount; i++) {
+            var lerper = i / (gridCount - 1);
+            var heightBelow = Cesium.Math.lerp(
+              gridStartHeight,
+              gridEndHeight,
+              lerper
+            );
+            var heightAbove = heightBelow + 10.0;
+            var alpha =
+              Cesium.Math.lerp(0.2, 0.4, lerper) * backgroundTransparency;
+            layers.push({
+              entries: [
+                {
+                  height: heightBelow,
+                  color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
+                },
+                {
+                  height: heightAbove,
+                  color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
+                },
+              ],
+            });
+          }
+
+          var antialias = Math.min(10.0, bandThickness * 0.1);
+
+          if (!gradient) {
+            var band1 = {
+              entries: [
+                {
+                  height: band1Position - bandThickness * 0.5 - antialias,
+                  color: new Cesium.Color(0.0, 0.0, 1.0, 0.0),
+                },
+                {
+                  height: band1Position - bandThickness * 0.5,
+                  color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
+                },
+                {
+                  height: band1Position + bandThickness * 0.5,
+                  color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
+                },
+                {
+                  height: band1Position + bandThickness * 0.5 + antialias,
+                  color: new Cesium.Color(0.0, 0.0, 1.0, 0.0),
+                },
+              ],
+            };
+
+            var band2 = {
+              entries: [
+                {
+                  height: band2Position - bandThickness * 0.5 - antialias,
+                  color: new Cesium.Color(0.0, 1.0, 0.0, 0.0),
+                },
+                {
+                  height: band2Position - bandThickness * 0.5,
+                  color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
+                },
+                {
+                  height: band2Position + bandThickness * 0.5,
+                  color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
+                },
+                {
+                  height: band2Position + bandThickness * 0.5 + antialias,
+                  color: new Cesium.Color(0.0, 1.0, 0.0, 0.0),
+                },
+              ],
+            };
+
+            var band3 = {
+              entries: [
+                {
+                  height: band3Position - bandThickness * 0.5 - antialias,
+                  color: new Cesium.Color(1.0, 0.0, 0.0, 0.0),
+                },
+                {
+                  height: band3Position - bandThickness * 0.5,
+                  color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
+                },
+                {
+                  height: band3Position + bandThickness * 0.5,
+                  color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
+                },
+                {
+                  height: band3Position + bandThickness * 0.5 + antialias,
+                  color: new Cesium.Color(1.0, 0.0, 0.0, 0.0),
+                },
+              ],
+            };
+
+            layers.push(band1);
+            layers.push(band2);
+            layers.push(band3);
+          } else {
+            var combinedBand = {
+              entries: [
+                {
+                  height: band1Position - bandThickness * 0.5,
+                  color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
+                },
+                {
+                  height: band2Position,
+                  color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
+                },
+                {
+                  height: band3Position + bandThickness * 0.5,
+                  color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
+                },
+              ],
+            };
+
+            layers.push(combinedBand);
+          }
+
+          var material = Cesium.createElevationBandMaterial({
+            scene: viewer.scene,
+            layers: layers,
+          });
+          viewer.scene.globe.material = material;
+        }
+
+        updateMaterial();
+        //Sandcastle_End
+        Sandcastle.finishedLoading();
+      }
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        startup(Cesium);
+      }
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Elevation Band Material.jpg b/Apps/Sandcastle/gallery/Elevation Band Material.jpg
diff --git a/CHANGES.md b/CHANGES.md
@@ -2,6 +2,10 @@
 
 ### 1.77 - 2020-01-04
 
+##### Additions :tada:
+
+- Added `ElevationBand` material, which maps colors and gradients to exact elevations. [#9132](https://github.com/CesiumGS/cesium/pull/9132)
+
 ##### Fixes :wrench:
 
 - Fixed an issue where changing a model or tileset's `color`, `backFaceCulling`, or `silhouetteSize` would trigger an error. [#9271](https://github.com/CesiumGS/cesium/pull/9271)

diff --git a/Source/Renderer/ShaderSource.js b/Source/Renderer/ShaderSource.js
@@ -270,6 +270,11 @@ function combineShader(shaderSource, isFragmentShader, context) {
     result += "#define OES_texture_float_linear\n\n";
   }
 
+  // Define a constant for the OES_texture_float extension since WebGL does not.
+  if (context.floatingPointTexture) {
+    result += "#define OES_texture_float\n\n";
+  }
+
   // append built-ins
   if (shaderSource.includeBuiltIns) {
     result += getBuiltinsAndAutomaticUniforms(combinedSources);

diff --git a/Source/Scene/Material.js b/Source/Scene/Material.js
@@ -19,6 +19,7 @@ import AspectRampMaterial from "../Shaders/Materials/AspectRampMaterial.js";
 import BumpMapMaterial from "../Shaders/Materials/BumpMapMaterial.js";
 import CheckerboardMaterial from "../Shaders/Materials/CheckerboardMaterial.js";
 import DotMaterial from "../Shaders/Materials/DotMaterial.js";
+import ElevationBandMaterial from "../Shaders/Materials/ElevationBandMaterial.js";
 import ElevationContourMaterial from "../Shaders/Materials/ElevationContourMaterial.js";
 import ElevationRampMaterial from "../Shaders/Materials/ElevationRampMaterial.js";
 import FadeMaterial from "../Shaders/Materials/FadeMaterial.js";
@@ -216,6 +217,11 @@ import when from "../ThirdParty/when.js";
  *  <ul>
  *      <li><code>image</code>: color ramp image to use for color the terrain by aspect.</li>
  *  </ul>
+ *  <li>ElevationBand</li>
+ *  <ul>
+ *      <li><code>heights</code>: image of heights sorted from lowest to highest.</li>
+ *      <li><code>colors</code>: image of colors at the corresponding heights.</li>
+ * </ul>
  * </ul>
  * </ul>
  * </div>
@@ -1691,4 +1697,23 @@ Material._materialCache.addMaterial(Material.AspectRampMaterialType, {
   },
   translucent: false,
 });
+
+/**
+ * Gets the name of the elevation band material.
+ * @type {String}
+ * @readonly
+ */
+Material.ElevationBandType = "ElevationBand";
+Material._materialCache.addMaterial(Material.ElevationBandType, {
+  fabric: {
+    type: Material.ElevationBandType,
+    uniforms: {
+      heights: Material.DefaultImageId,
+      colors: Material.DefaultImageId,
+    },
+    source: ElevationBandMaterial,
+  },
+  translucent: true,
+});
+
 export default Material;