CesiumGS · ggetz · Jul 26, 2024 · May 13, 2024 · May 13, 2024 · May 14, 2024
diff --git a/Apps/Sandcastle/gallery/SplitDirection.html b/Apps/Sandcastle/gallery/SplitDirection.html
@@ -0,0 +1,191 @@
+<!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="Using the SplitDirection parameter to hide or draw Points or Billboards depending on the position of the slider."
+    />
+    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></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);
+
+      #slider {
+        position: absolute;
+        left: 50%;
+        top: 0px;
+        background-color: #d3d3d3;
+        width: 5px;
+        height: 100%;
+        z-index: 9999;
+      }
+
+      #slider:hover {
+        cursor: ew-resize;
+      }
+    </style>
+    <div id="cesiumContainer" class="fullSize">
+      <div id="slider"></div>
+    </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
+        const viewer = new Cesium.Viewer("cesiumContainer");
+        const points = viewer.scene.primitives.add(
+          new Cesium.PointPrimitiveCollection()
+        );
+        const billboards = viewer.scene.primitives.add(
+          new Cesium.BillboardCollection()
+        );
+
+        function testPoints() {
+          Sandcastle.declare(testPoints);
+
+          viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(-75.0, 40.0),
+            point: {
+              show: true,
+              color: Cesium.Color.SKYBLUE,
+              pixelSize: 10,
+              outlineColor: Cesium.Color.GREEN,
+              outlineWidth: 3,
+              splitDirection: Cesium.SplitDirection.LEFT,
+            },
+          });
+
+          points.add({
+            position: new Cesium.Cartesian3.fromDegrees(-75, 35),
+            color: Cesium.Color.RED,
+            splitDirection: Cesium.SplitDirection.RIGHT,
+          });
+          points.add({
+            position: new Cesium.Cartesian3.fromDegrees(-125, 35),
+            color: Cesium.Color.WHITE,
+            splitDirection: Cesium.SplitDirection.NONE,
+          });
+          points.add({
+            position: new Cesium.Cartesian3.fromDegrees(-100, 20),
+            color: Cesium.Color.YELLOW,
+            splitDirection: Cesium.SplitDirection.LEFT,
+          });
+        }
+
+        function testBillboards() {
+          Sandcastle.declare(testBillboards);
+
+          viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(-75.0, 50.0),
+            billboard: {
+              show: true,
+              image: "../images/facility.gif",
+              pixelSize: 100,
+              splitDirection: Cesium.SplitDirection.LEFT,
+            },
+          });
+
+          billboards.add({
+            position: new Cesium.Cartesian3.fromDegrees(-75, 35),
+            image: "../images/facility.gif",
+            splitDirection: Cesium.SplitDirection.RIGHT,
+          });
+          billboards.add({
+            position: new Cesium.Cartesian3.fromDegrees(-125, 35),
+            image: "../images/facility.gif",
+            splitDirection: Cesium.SplitDirection.NONE,
+          });
+          billboards.add({
+            position: new Cesium.Cartesian3.fromDegrees(-100, 20),
+            image: "../images/Cesium_Logo_overlay.png",
+            splitDirection: Cesium.SplitDirection.LEFT,
+          });
+        }
+
+        // Sync the position of the slider with the split position
+        const slider = document.getElementById("slider");
+        viewer.scene.splitPosition =
+          slider.offsetLeft / slider.parentElement.offsetWidth;
+
+        const handler = new Cesium.ScreenSpaceEventHandler(slider);
+
+        let moveActive = false;
+
+        function move(movement) {
+          if (!moveActive) {
+            return;
+          }
+          const relativeOffset = movement.endPosition.x;
+          const splitPosition =
+            (slider.offsetLeft + relativeOffset) /
+            slider.parentElement.offsetWidth;
+          slider.style.left = `${100.0 * splitPosition}%`;
+          viewer.scene.splitPosition = splitPosition;
+        }
+
+        handler.setInputAction(function () {
+          moveActive = true;
+        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+        handler.setInputAction(function () {
+          moveActive = true;
+        }, Cesium.ScreenSpaceEventType.PINCH_START);
+
+        handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+        handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
+
+        handler.setInputAction(function () {
+          moveActive = false;
+        }, Cesium.ScreenSpaceEventType.LEFT_UP);
+        handler.setInputAction(function () {
+          moveActive = false;
+        }, Cesium.ScreenSpaceEventType.PINCH_END);
+
+        //Sandcastle toolbar
+        Sandcastle.addToolbarMenu([
+          {
+            text: "Points",
+            onselect: function () {
+              testPoints();
+              Sandcastle.highlight(testPoints);
+            },
+          },
+          {
+            text: "Billboards",
+            onselect: function () {
+              testBillboards();
+              Sandcastle.highlight(testBillboards);
+            },
+          },
+        ]);
+
+        Sandcastle.reset = function () {
+          viewer.entities.removeAll();
+          points.removeAll();
+          billboards.removeAll();
+        }; //Sandcastle_End
+        Sandcastle.finishedLoading();
+      };
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        window.startup(Cesium).catch((error) => {
+          "use strict";
+          console.error(error);
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/SplitDirection.jpg b/Apps/Sandcastle/gallery/SplitDirection.jpg
diff --git a/CHANGES.md b/CHANGES.md
@@ -4,6 +4,10 @@
 
 #### @cesium/engine
 
+##### Additions :tada:
+
+- Added SplitDirection property for display PointPrimitive and Billboard relative to the `Scene.splitPosition`. [#11982](https://github.com/CesiumGS/cesium/pull/11982)
+
 ##### Fixes :wrench:
 
 - Updated geometric self-shadowing function to improve direct lighting on models using physically-based rendering. [#12063](https://github.com/CesiumGS/cesium/pull/12063)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -391,3 +391,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute to Cesiu
 - [Peter A. Jonsson](https://github.com/pjonsson)
 - [Zhongxiang Wang](https://github.com/plainheart)
 - [Tim Schneider](https://github.com/Tim-S)
+- [Vladislav Yunev](https://github.com/YunVlad)
diff --git a/packages/engine/Source/DataSources/BillboardGraphics.js b/packages/engine/Source/DataSources/BillboardGraphics.js
@@ -29,6 +29,7 @@ import createPropertyDescriptor from "./createPropertyDescriptor.js";
  * @property {Property | BoundingRectangle} [imageSubRegion] A Property specifying a {@link BoundingRectangle} that defines a sub-region of the image to use for the billboard, rather than the entire image, measured in pixels from the bottom-left.
  * @property {Property | DistanceDisplayCondition} [distanceDisplayCondition] A Property specifying at what distance from the camera that this billboard will be displayed.
  * @property {Property | number} [disableDepthTestDistance] A Property specifying the distance from the camera at which to disable the depth test to.
+ * @property {Property | SplitDirection} [splitDirection] A Property specifying the {@link SplitDirection} of the billboard.
  */
 
 /**
@@ -89,6 +90,8 @@ function BillboardGraphics(options) {
   this._distanceDisplayConditionSubscription = undefined;
   this._disableDepthTestDistance = undefined;
   this._disableDepthTestDistanceSubscription = undefined;
+  this._splitDirection = undefined;
+  this._splitDirectionSubscription = undefined;
 
   this.merge(defaultValue(options, defaultValue.EMPTY_OBJECT));
 }
@@ -330,6 +333,14 @@ Object.defineProperties(BillboardGraphics.prototype, {
   disableDepthTestDistance: createPropertyDescriptor(
     "disableDepthTestDistance"
   ),
+
+  /**
+   * Gets or sets the Property specifying the {@link SplitDirection} of this billboard.
+   * @memberof BillboardGraphics.prototype
+   * @type {Property|undefined}
+   * @default SplitDirection.NONE
+   */
+  splitDirection: createPropertyDescriptor("splitDirection"),
 });
 
 /**
@@ -362,6 +373,7 @@ BillboardGraphics.prototype.clone = function (result) {
   result.imageSubRegion = this._imageSubRegion;
   result.distanceDisplayCondition = this._distanceDisplayCondition;
   result.disableDepthTestDistance = this._disableDepthTestDistance;
+  result.splitDirection = this._splitDirection;
   return result;
 };
 
@@ -425,5 +437,9 @@ BillboardGraphics.prototype.merge = function (source) {
     this._disableDepthTestDistance,
     source.disableDepthTestDistance
   );
+  this.splitDirection = defaultValue(
+    this.splitDirection,
+    source.splitDirection
+  );
 };
 export default BillboardGraphics;
diff --git a/packages/engine/Source/DataSources/BillboardVisualizer.js b/packages/engine/Source/DataSources/BillboardVisualizer.js
@@ -13,6 +13,7 @@ import HorizontalOrigin from "../Scene/HorizontalOrigin.js";
 import VerticalOrigin from "../Scene/VerticalOrigin.js";
 import BoundingSphereState from "./BoundingSphereState.js";
 import Property from "./Property.js";
+import SplitDirection from "../Scene/SplitDirection.js";
 
 const defaultColor = Color.WHITE;
 const defaultEyeOffset = Cartesian3.ZERO;
@@ -24,6 +25,7 @@ const defaultAlignedAxis = Cartesian3.ZERO;
 const defaultHorizontalOrigin = HorizontalOrigin.CENTER;
 const defaultVerticalOrigin = VerticalOrigin.CENTER;
 const defaultSizeInMeters = false;
+const defaultSplitDirection = SplitDirection.NONE;
 
 const positionScratch = new Cartesian3();
 const colorScratch = new Color();
@@ -219,6 +221,11 @@ BillboardVisualizer.prototype.update = function (time) {
       billboardGraphics._disableDepthTestDistance,
       time
     );
+    billboard.splitDirection = Property.getValueOrDefault(
+      billboardGraphics._splitDirection,
+      time,
+      defaultSplitDirection
+    );
 
     const subRegion = Property.getValueOrUndefined(
       billboardGraphics._imageSubRegion,

diff --git a/packages/engine/Source/DataSources/PointGraphics.js b/packages/engine/Source/DataSources/PointGraphics.js
@@ -19,6 +19,7 @@ import createPropertyDescriptor from "./createPropertyDescriptor.js";
  * @property {Property | NearFarScalar} [translucencyByDistance] A {@link NearFarScalar} Property used to set translucency based on distance from the camera.
  * @property {Property | DistanceDisplayCondition} [distanceDisplayCondition] A Property specifying at what distance from the camera that this point will be displayed.
  * @property {Property | number} [disableDepthTestDistance] A Property specifying the distance from the camera at which to disable the depth test to.
+ * @property {Property | SplitDirection} [splitDirection] A Property specifying the {@link SplitDirection} split to apply to this point.
  */
 
 /**
@@ -51,6 +52,8 @@ function PointGraphics(options) {
   this._distanceDisplayConditionSubscription = undefined;
   this._disableDepthTestDistance = undefined;
   this._disableDepthTestDistanceSubscription = undefined;
+  this._splitDirection = undefined;
+  this._splitDirectionSubscription = undefined;
 
   this.merge(defaultValue(options, defaultValue.EMPTY_OBJECT));
 }
@@ -154,6 +157,14 @@ Object.defineProperties(PointGraphics.prototype, {
   disableDepthTestDistance: createPropertyDescriptor(
     "disableDepthTestDistance"
   ),
+
+  /**
+   * Gets or sets the Property specifying the {@link SplitDirection} of this point.
+   * @memberof PointGraphics.prototype
+   * @type {Property|undefined}
+   * @default SplitDirection.NONE
+   */
+  splitDirection: createPropertyDescriptor("splitDirection"),
 });
 
 /**
@@ -176,6 +187,7 @@ PointGraphics.prototype.clone = function (result) {
   result.translucencyByDistance = this._translucencyByDistance;
   result.distanceDisplayCondition = this.distanceDisplayCondition;
   result.disableDepthTestDistance = this.disableDepthTestDistance;
+  result.splitDirection = this.splitDirection;
   return result;
 };
 
@@ -217,5 +229,10 @@ PointGraphics.prototype.merge = function (source) {
     this.disableDepthTestDistance,
     source.disableDepthTestDistance
   );
+
+  this.splitDirection = defaultValue(
+    this.splitDirection,
+    source.splitDirection
+  );
 };
 export default PointGraphics;
diff --git a/packages/engine/Source/DataSources/PointVisualizer.js b/packages/engine/Source/DataSources/PointVisualizer.js
@@ -10,12 +10,14 @@ import createBillboardPointCallback from "../Scene/createBillboardPointCallback.
 import HeightReference from "../Scene/HeightReference.js";
 import BoundingSphereState from "./BoundingSphereState.js";
 import Property from "./Property.js";
+import SplitDirection from "../Scene/SplitDirection.js";
 
 const defaultColor = Color.WHITE;
 const defaultOutlineColor = Color.BLACK;
 const defaultOutlineWidth = 0.0;
 const defaultPixelSize = 1.0;
 const defaultDisableDepthTestDistance = 0.0;
+const defaultSplitDirection = SplitDirection.NONE;
 
 const colorScratch = new Color();
 const positionScratch = new Cartesian3();
@@ -192,6 +194,11 @@ PointVisualizer.prototype.update = function (time) {
         time,
         defaultDisableDepthTestDistance
       );
+      pointPrimitive.splitDirection = Property.getValueOrDefault(
+        pointGraphics._splitDirection,
+        time,
+        defaultSplitDirection
+      );
     } else if (defined(billboard)) {
       billboard.show = true;
       billboard.position = position;
@@ -215,6 +222,11 @@ PointVisualizer.prototype.update = function (time) {
         time,
         defaultDisableDepthTestDistance
       );
+      billboard.splitDirection = Property.getValueOrDefault(
+        pointGraphics._splitDirection,
+        time,
+        defaultSplitDirection
+      );
       billboard.heightReference = heightReference;
 
       const newColor = Property.getValueOrDefault(