Merge branch 'main' into jay_issue_11507

CesiumGS · Sep 20, 2024 · 5314819 · 5314819
2 parents 893dc6f + bbd6afd
commit 5314819
Show file tree

Hide file tree

Showing 79 changed files with 1,942 additions and 490 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -14,7 +14,7 @@ jobs:
     steps:
       - name: message result in slack
         id: slack
-        uses: slackapi/slack-github-action@v1.26.0
+        uses: slackapi/slack-github-action@v1.27.0
         env:
           SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
         with:

diff --git a/Apps/Sandcastle/gallery/Bathymetry.html b/Apps/Sandcastle/gallery/Bathymetry.html
@@ -106,9 +106,6 @@
 
         const scene = viewer.scene;
 
-        // prevent aliasing from countour lines
-        scene.msaaSamples = 4;
-
         const globe = scene.globe;
         globe.enableLighting = true;
         globe.maximumScreenSpaceError = 1.0; // Load higher resolution tiles for better seafloor shading

diff --git a/Apps/Sandcastle/gallery/Callback Position Property.html b/Apps/Sandcastle/gallery/Callback Position Property.html
@@ -0,0 +1,221 @@
+<!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 a CallbackPositionProperty when your data can't be pre-computed or needs to be derived from other properties at runtime."
+    />
+    <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);
+    </style>
+    <div id="cesiumContainer" class="fullSize"></div>
+    <div id="loadingOverlay"><h1>Loading...</h1></div>
+    <div id="toolbar"></div>
+    <script id="cesium_sandcastle_script">
+      window.startup = async function (Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        // This example illustrates a Callback Position Property, a position property whose
+        // value is lazily evaluated by a callback function.
+        // Use a CallbackPositionProperty when your data can't be pre-computed
+        // or needs to be derived from other properties at runtime.
+        const viewer = new Cesium.Viewer("cesiumContainer", {
+          terrain: Cesium.Terrain.fromWorldTerrain(),
+        });
+
+        // Enable lighting based on the sun position.
+        viewer.scene.globe.enableLighting = true;
+
+        // Enable depth testing so things behind the terrain disappear.
+        viewer.scene.globe.depthTestAgainstTerrain = true;
+
+        // Set bounds of our simulation time.
+        const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
+        const duration = 8;
+        const stop = Cesium.JulianDate.addSeconds(
+          start,
+          duration,
+          new Cesium.JulianDate()
+        );
+
+        // Make sure viewer is at the desired time.
+        viewer.clock.startTime = start.clone();
+        viewer.clock.stopTime = stop.clone();
+        viewer.clock.currentTime = start.clone();
+        viewer.clock.multiplier = 1.0;
+        viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
+        viewer.clock.shouldAnimate = true;
+
+        // Set timeline to simulation bounds.
+        viewer.timeline.zoomTo(start, stop);
+
+        // Prepare time samples.
+        const times = [0.0, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0];
+        const firstTime = times[0];
+        const lastTime = times[times.length - 1];
+        const delta = lastTime - firstTime;
+
+        // Prepare point samples. Before and after points are used to
+        // calculate the first and last tangents for the spline.
+        const before = Cesium.Cartesian3.fromDegrees(
+          -112.87962,
+          36.27375,
+          620.01
+        );
+        const points = [
+          Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 620.01),
+          Cesium.Cartesian3.fromDegrees(-112.87351, 36.27992, 617.9),
+          Cesium.Cartesian3.fromDegrees(-112.87081, 36.2816, 617.6),
+          Cesium.Cartesian3.fromDegrees(-112.86539, 36.28239, 625.36),
+          Cesium.Cartesian3.fromDegrees(-112.86108, 36.28137, 627.82),
+          Cesium.Cartesian3.fromDegrees(-112.85551, 36.27967, 625.54),
+          Cesium.Cartesian3.fromDegrees(-112.848, 36.27732, 628.9),
+          Cesium.Cartesian3.fromDegrees(-112.84086, 36.27739, 638.81),
+          Cesium.Cartesian3.fromDegrees(-112.83682, 36.27995, 643.31),
+        ];
+        const after = Cesium.Cartesian3.fromDegrees(
+          -112.83506,
+          36.2822,
+          643.31
+        );
+
+        // Calculate first and last tangents.
+        const firstTangent = Cesium.Cartesian3.subtract(
+          points[0],
+          before,
+          new Cesium.Cartesian3()
+        );
+        const lastTangent = Cesium.Cartesian3.subtract(
+          after,
+          points[8],
+          new Cesium.Cartesian3()
+        );
+
+        // Create the position spline.
+        const positionSpline = new Cesium.CatmullRomSpline({
+          times: times,
+          points: points,
+          firstTangent: firstTangent,
+          lastTangent: lastTangent,
+        });
+
+        // Create the callback position property and make it return spline evaluations.
+        const position = new Cesium.CallbackPositionProperty(function (
+          time,
+          result
+        ) {
+          const splineTime =
+            (delta * Cesium.JulianDate.secondsDifference(time, start)) /
+            duration;
+          if (splineTime < firstTime || splineTime > lastTime) {
+            return undefined;
+          }
+          return positionSpline.evaluate(splineTime, result);
+        },
+        false);
+
+        const orientation = new Cesium.VelocityOrientationProperty(position);
+
+        // Add a waypoints.
+        for (let i = 0; i < points.length; ++i) {
+          viewer.entities.add({
+            position: points[i],
+            point: {
+              pixelSize: 8,
+              color: Cesium.Color.TRANSPARENT,
+              outlineColor: Cesium.Color.YELLOW,
+              outlineWidth: 3,
+            },
+          });
+        }
+
+        // Create the entity and bind its position to the callback position property
+        viewer.entities.add({
+          availability: new Cesium.TimeIntervalCollection([
+            new Cesium.TimeInterval({
+              start: start,
+              stop: stop,
+            }),
+          ]),
+          position: position,
+          orientation: orientation,
+          model: {
+            uri: "../../SampleData/models/CesiumDrone/CesiumDrone.glb",
+            minimumPixelSize: 64,
+            maximumScale: 20000,
+          },
+          path: {
+            material: new Cesium.PolylineGlowMaterialProperty({
+              glowPower: 0.1,
+              color: Cesium.Color.YELLOW,
+            }),
+            width: 10,
+            resolution: 0.01,
+            leadTime: 1,
+            trailTime: 0.1,
+          },
+        });
+
+        const camera = viewer.camera;
+        const scene = viewer.scene;
+
+        const scratchPosition = new Cesium.Cartesian3();
+        const scratchOrientation = new Cesium.Quaternion();
+        const scratchTransform = new Cesium.Matrix4();
+        const offset = new Cesium.Cartesian3(-100, 0, 10);
+
+        // Update camera to follow entity's position and orientation
+        viewer.clock.onTick.addEventListener(function (clock) {
+          if (scene.mode === Cesium.Scene.MORPHING) {
+            return;
+          }
+          const time = clock.currentTime;
+          const entityPosition = position.getValue(time, scratchPosition);
+          const entityOrientation = orientation.getValue(
+            time,
+            scratchOrientation
+          );
+          if (entityPosition === undefined || entityOrientation === undefined) {
+            return;
+          }
+          const transform = Cesium.Matrix4.fromTranslationQuaternionRotationScale(
+            entityPosition,
+            entityOrientation,
+            Cesium.Cartesian3.ONE,
+            scratchTransform
+          );
+          camera.lookAtTransform(transform, offset);
+        });
+        //Sandcastle_End
+      };
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        window.startup(Cesium).catch((error) => {
+          "use strict";
+          console.error(error);
+        });
+        Sandcastle.finishedLoading();
+      }
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Callback Position Property.jpg b/Apps/Sandcastle/gallery/Callback Position Property.jpg
diff --git a/Apps/Sandcastle/gallery/Globe Materials – Water Mask Elevation Map.html b/Apps/Sandcastle/gallery/Globe Materials – Water Mask Elevation Map.html
@@ -0,0 +1,144 @@
+<!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 materials 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">
+      <div id="zoomButtons"></div>
+    </div>
+    <script id="cesium_sandcastle_script">
+      window.startup = async function (Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        const viewer = new Cesium.Viewer("cesiumContainer", {
+          terrain: Cesium.Terrain.fromWorldTerrain({
+            requestVertexNormals: true, // Needed for hillshading
+            requestWaterMask: true, // Needed to distinguish land from water
+          }),
+          timeline: false,
+          animation: false,
+        });
+
+        // Create a globe material for shading elevation only on land
+        const customElevationMaterial = new Cesium.Material({
+          fabric: {
+            type: "ElevationLand",
+            materials: {
+              waterMaskMaterial: {
+                type: "WaterMask",
+              },
+              elevationRampMaterial: {
+                type: "ElevationRamp",
+              },
+            },
+            components: {
+              diffuse: "elevationRampMaterial.diffuse",
+              alpha: "1.0 - waterMaskMaterial.alpha", // We'll need the inverse of the watermask to shade land
+            },
+          },
+          translucent: false,
+        });
+
+        const minHeight = -414.0; // approximate dead sea elevation
+        const maxHeight = 8777.0; // approximate everest elevation
+        const elevationRamp = [0.0, 0.045, 0.45, 0.5, 0.55, 1.0];
+        function getColorRamp() {
+          const ramp = document.createElement("canvas");
+          ramp.width = 100;
+          ramp.height = 1;
+          const ctx = ramp.getContext("2d");
+
+          const values = elevationRamp;
+
+          const grd = ctx.createLinearGradient(0, 0, 100, 0);
+
+          // See https://gis.stackexchange.com/questions/25099/choosing-colour-ramp-to-use-for-elevation
+          grd.addColorStop(values[0], "#344f31");
+          grd.addColorStop(values[1], "#5b8742");
+          grd.addColorStop(values[2], "#e6daa5");
+          grd.addColorStop(values[3], "#fdc771");
+          grd.addColorStop(values[4], "#b99d89");
+          grd.addColorStop(values[5], "#f0f0f0");
+
+          ctx.fillStyle = grd;
+          ctx.fillRect(0, 0, 100, 1);
+
+          return ramp;
+        }
+
+        const globe = viewer.scene.globe;
+        const material = customElevationMaterial;
+        const shadingUniforms =
+          material.materials.elevationRampMaterial.uniforms;
+        shadingUniforms.minimumHeight = minHeight;
+        shadingUniforms.maximumHeight = maxHeight;
+        shadingUniforms.image = getColorRamp();
+
+        globe.material = material;
+        globe.showWaterEffect = false;
+        globe.enableLighting = true;
+        globe.maximumScreenSpaceError = 0.5; // Load higher resolution tiles for more detailed shading
+
+        // Light the scene with a hillshade effect similar to https://pro.arcgis.com/en/pro-app/latest/tool-reference/3d-analyst/how-hillshade-works.htm
+        const scene = viewer.scene;
+        scene.light = new Cesium.DirectionalLight({
+          direction: new Cesium.Cartesian3(1, 0, 0), // Updated every frame
+        });
+
+        // Update the light position base on the camera
+        const scratchNormal = new Cesium.Cartesian3();
+        scene.preRender.addEventListener(function (scene, time) {
+          const surfaceNormal = globe.ellipsoid.geodeticSurfaceNormal(
+            scene.camera.positionWC,
+            scratchNormal
+          );
+          const negativeNormal = Cesium.Cartesian3.negate(
+            surfaceNormal,
+            surfaceNormal
+          );
+          scene.light.direction = Cesium.Cartesian3.normalize(
+            Cesium.Cartesian3.add(
+              negativeNormal,
+              scene.camera.rightWC,
+              surfaceNormal
+            ),
+            scene.light.direction
+          );
+        });
+        //Sandcastle_End
+      };
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        window.startup(Cesium).catch((error) => {
+          "use strict";
+          console.error(error);
+        });
+        Sandcastle.finishedLoading();
+      }
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Globe Materials – Water Mask Elevation Map.jpg b/Apps/Sandcastle/gallery/Globe Materials – Water Mask Elevation Map.jpg
diff --git a/Apps/Sandcastle/gallery/Globe Materials.html b/Apps/Sandcastle/gallery/Globe Materials.html
@@ -7,7 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
     />
-    <meta name="description" content="Apply materials to the globe." />
+    <meta name="description" content="Apply an elevation map to the globe." />
     <meta name="cesium-sandcastle-labels" content="Showcases" />
     <title>Cesium Demo</title>
     <script type="text/javascript" src="../Sandcastle-header.js"></script>