Add splitDirection property for PointPrimitive and Billboards

CHANGES.md

@@ -1,5 +1,7 @@
 # Change Log
 
+- Added SplitDirection property for display PointPrimitive relative to the `Scene.splitPosition`.
+
 ### 1.118 - 2024-06-01
 
 #### @cesium/engine

CONTRIBUTORS.md

@@ -389,3 +389,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute to Cesiu
 - [dslming](https://github.com/dslming)
 - [Peter A. Jonsson](https://github.com/pjonsson)
 - [Zhongxiang Wang](https://github.com/plainheart)
+- [Vladislav Yunev](https://github.com/YunVlad)

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;

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;

packages/engine/Source/Scene/PointPrimitive.js

@@ -11,6 +11,7 @@ import Matrix4 from "../Core/Matrix4.js";
 import NearFarScalar from "../Core/NearFarScalar.js";
 import SceneMode from "./SceneMode.js";
 import SceneTransforms from "./SceneTransforms.js";
+import SplitDirection from "./SplitDirection.js";
 
 /**
  * <div class="notice">
@@ -117,6 +118,11 @@ function PointPrimitive(options, pointPrimitiveCollection) {
   this._pointPrimitiveCollection = pointPrimitiveCollection;
   this._dirty = false;
   this._index = -1; //Used only by PointPrimitiveCollection
+
+  this._splitDirection = defaultValue(
+    options.splitDirection,
+    SplitDirection.NONE
+  );
 }
 
 const SHOW_INDEX = (PointPrimitive.SHOW_INDEX = 0);
@@ -129,7 +135,8 @@ const SCALE_BY_DISTANCE_INDEX = (PointPrimitive.SCALE_BY_DISTANCE_INDEX = 6);
 const TRANSLUCENCY_BY_DISTANCE_INDEX = (PointPrimitive.TRANSLUCENCY_BY_DISTANCE_INDEX = 7);
 const DISTANCE_DISPLAY_CONDITION_INDEX = (PointPrimitive.DISTANCE_DISPLAY_CONDITION_INDEX = 8);
 const DISABLE_DEPTH_DISTANCE_INDEX = (PointPrimitive.DISABLE_DEPTH_DISTANCE_INDEX = 9);
-PointPrimitive.NUMBER_OF_PROPERTIES = 10;
+const SPLIT_DIRECTION_INDEX = (PointPrimitive.SPLIT_DIRECTION_INDEX = 10);
+PointPrimitive.NUMBER_OF_PROPERTIES = 11;
 
 function makeDirty(pointPrimitive, propertyChanged) {
   const pointPrimitiveCollection = pointPrimitive._pointPrimitiveCollection;
@@ -486,6 +493,24 @@ Object.defineProperties(PointPrimitive.prototype, {
       }
     },
   },
+
+  /**
+   * The {@link SplitDirection} to apply to this point.
+   * @memberof PointPrimitive.prototype
+   * @type {SplitDirection}
+   * @default {@link SplitDirection.NONE}
+   */
+  splitDirection: {
+    get: function () {
+      return this._splitDirection;
+    },
+    set: function (value) {
+      if (this._splitDirection !== value) {
+        this._splitDirection = value;
+        makeDirty(this, SPLIT_DIRECTION_INDEX);
+      }
+    },
+  },
 });
 
 PointPrimitive.prototype.getPickId = function (context) {
@@ -657,7 +682,8 @@ PointPrimitive.prototype.equals = function (other) {
         this._distanceDisplayCondition,
         other._distanceDisplayCondition
       ) &&
-      this._disableDepthTestDistance === other._disableDepthTestDistance)
+      this._disableDepthTestDistance === other._disableDepthTestDistance &&
+      this._splitDirection === other._splitDirection)
   );
 };
 

packages/engine/Source/Scene/PointPrimitiveCollection.js

@@ -38,6 +38,7 @@ const DISTANCE_DISPLAY_CONDITION_INDEX =
   PointPrimitive.DISTANCE_DISPLAY_CONDITION_INDEX;
 const DISABLE_DEPTH_DISTANCE_INDEX =
   PointPrimitive.DISABLE_DEPTH_DISTANCE_INDEX;
+const SPLIT_DIRECTION_INDEX = PointPrimitive.SPLIT_DIRECTION_INDEX;
 const NUMBER_OF_PROPERTIES = PointPrimitive.NUMBER_OF_PROPERTIES;
 
 const attributeLocations = {
@@ -47,6 +48,7 @@ const attributeLocations = {
   compressedAttribute1: 3, // show, translucency by distance, some free space
   scaleByDistance: 4,
   distanceDisplayConditionAndDisableDepth: 5,
+  splitDirection: 6,
 };
 
 /**
@@ -216,6 +218,7 @@ function PointPrimitiveCollection(options) {
     BufferUsage.STATIC_DRAW, // SCALE_BY_DISTANCE_INDEX
     BufferUsage.STATIC_DRAW, // TRANSLUCENCY_BY_DISTANCE_INDEX
     BufferUsage.STATIC_DRAW, // DISTANCE_DISPLAY_CONDITION_INDEX
+    BufferUsage.STATIC_DRAW, // SPLIT_DIRECTION_INDEX
   ];
 
   const that = this;
@@ -497,6 +500,12 @@ function createVAF(context, numberOfPointPrimitives, buffersUsage) {
         componentDatatype: ComponentDatatype.FLOAT,
         usage: buffersUsage[DISTANCE_DISPLAY_CONDITION_INDEX],
       },
+      {
+        index: attributeLocations.splitDirection,
+        componentsPerAttribute: 1,
+        componentDatatype: ComponentDatatype.FLOAT,
+        usage: buffersUsage[SPLIT_DIRECTION_INDEX],
+      },
     ],
     numberOfPointPrimitives
   ); // 1 vertex per pointPrimitive
@@ -700,6 +709,24 @@ function writeDistanceDisplayConditionAndDepthDisable(
   writer(i, near, far, disableDepthTestDistance);
 }
 
+function writeSplitDirection(
+  pointPrimitiveCollection,
+  context,
+  vafWriters,
+  pointPrimitive
+) {
+  const i = pointPrimitive._index;
+  const writer = vafWriters[attributeLocations.splitDirection];
+  let direction = 0.0;
+
+  const split = pointPrimitive.splitDirection;
+  if (defined(split)) {
+    direction = split;
+  }
+
+  writer(i, direction);
+}
+
 function writePointPrimitive(
   pointPrimitiveCollection,
   context,
@@ -736,6 +763,12 @@ function writePointPrimitive(
     vafWriters,
     pointPrimitive
   );
+  writeSplitDirection(
+    pointPrimitiveCollection,
+    context,
+    vafWriters,
+    pointPrimitive
+  );
 }
 
 function recomputeActualPositions(
@@ -930,6 +963,10 @@ PointPrimitiveCollection.prototype.update = function (frameState) {
       writers.push(writeDistanceDisplayConditionAndDepthDisable);
     }
 
+    if (properties[SPLIT_DIRECTION_INDEX]) {
+      writers.push(writeSplitDirection);
+    }
+
     const numWriters = writers.length;
 
     vafWriters = this._vaf.writers;

packages/engine/Source/Shaders/PointPrimitiveCollectionFS.glsl

@@ -3,9 +3,13 @@ in vec4 v_outlineColor;
 in float v_innerPercent;
 in float v_pixelDistance;
 in vec4 v_pickColor;
+in float v_splitDirection;
 
 void main()
 {
+    if (v_splitDirection < 0.0 && gl_FragCoord.x > czm_splitPosition) discard;
+    if (v_splitDirection > 0.0 && gl_FragCoord.x < czm_splitPosition) discard;
+
     // The distance in UV space from this fragment to the center of the point, at most 0.5.
     float distanceToCenter = length(gl_PointCoord - vec2(0.5));
     // The max distance stops one pixel shy of the edge to leave space for anti-aliasing.

packages/engine/Source/Shaders/PointPrimitiveCollectionVS.glsl

@@ -6,12 +6,14 @@ in vec4 compressedAttribute0;                       // color, outlineColor, pick
 in vec4 compressedAttribute1;                       // show, translucency by distance, some free space
 in vec4 scaleByDistance;                            // near, nearScale, far, farScale
 in vec3 distanceDisplayConditionAndDisableDepth;    // near, far, disableDepthTestDistance
+in float splitDirection;                            // splitDirection
 
 out vec4 v_color;
 out vec4 v_outlineColor;
 out float v_innerPercent;
 out float v_pixelDistance;
 out vec4 v_pickColor;
+out float v_splitDirection;
 
 const float SHIFT_LEFT8 = 256.0;
 const float SHIFT_RIGHT8 = 1.0 / 256.0;
@@ -180,4 +182,5 @@ void main()
     gl_Position *= show;
 
     v_pickColor = pickColor;
+    v_splitDirection = splitDirection;
 }

packages/engine/Specs/DataSources/PointGraphicsSpec.js

@@ -5,6 +5,7 @@ import {
   ConstantProperty,
   PointGraphics,
   HeightReference,
+  SplitDirection,
 } from "../../index.js";
 
 describe("DataSources/PointGraphics", function () {
@@ -19,6 +20,7 @@ describe("DataSources/PointGraphics", function () {
       heightReference: HeightReference.RELATIVE_TO_GROUND,
       distanceDisplayCondition: new DistanceDisplayCondition(10.0, 100.0),
       disableDepthTestDistance: 10.0,
+      splitDirection: SplitDirection.LEFT,
     };
 
     const point = new PointGraphics(options);
@@ -31,6 +33,7 @@ describe("DataSources/PointGraphics", function () {
     expect(point.heightReference).toBeInstanceOf(ConstantProperty);
     expect(point.distanceDisplayCondition).toBeInstanceOf(ConstantProperty);
     expect(point.disableDepthTestDistance).toBeInstanceOf(ConstantProperty);
+    expect(point.splitDirection).toBeInstanceOf(ConstantProperty);
 
     expect(point.color.getValue()).toEqual(options.color);
     expect(point.pixelSize.getValue()).toEqual(options.pixelSize);
@@ -45,6 +48,7 @@ describe("DataSources/PointGraphics", function () {
     expect(point.disableDepthTestDistance.getValue()).toEqual(
       options.disableDepthTestDistance
     );
+    expect(point.splitDirection.getValue()).toEqual(options.splitDirection);
   });
 
   it("merge assigns unassigned properties", function () {
@@ -62,6 +66,7 @@ describe("DataSources/PointGraphics", function () {
       new DistanceDisplayCondition(10.0, 100.0)
     );
     source.disableDepthTestDistance = new ConstantProperty(10.0);
+    source.splitDirection = new ConstantProperty(SplitDirection.LEFT);
 
     const target = new PointGraphics();
     target.merge(source);
@@ -78,6 +83,7 @@ describe("DataSources/PointGraphics", function () {
     expect(target.disableDepthTestDistance).toBe(
       source.disableDepthTestDistance
     );
+    expect(target.splitDirection).toBe(source.splitDirection);
   });
 
   it("merge does not assign assigned properties", function () {
@@ -95,6 +101,7 @@ describe("DataSources/PointGraphics", function () {
       new DistanceDisplayCondition(10.0, 100.0)
     );
     source.disableDepthTestDistance = new ConstantProperty(10.0);
+    source.splitDirection = new ConstantProperty(SplitDirection.LEFT);
 
     const color = new ConstantProperty(Color.WHITE);
     const pixelSize = new ConstantProperty(1);
@@ -108,6 +115,7 @@ describe("DataSources/PointGraphics", function () {
       new DistanceDisplayCondition(10.0, 100.0)
     );
     const disableDepthTestDistance = new ConstantProperty(20.0);
+    const splitDirection = new ConstantProperty(SplitDirection.RIGHT);
 
     const target = new PointGraphics();
     target.color = color;
@@ -119,6 +127,7 @@ describe("DataSources/PointGraphics", function () {
     target.heightReference = heightReference;
     target.distanceDisplayCondition = distanDisplayCondition;
     target.disableDepthTestDistance = disableDepthTestDistance;
+    target.splitDirection = splitDirection;
 
     target.merge(source);
     expect(target.color).toBe(color);
@@ -130,6 +139,7 @@ describe("DataSources/PointGraphics", function () {
     expect(target.heightReference).toBe(heightReference);
     expect(target.distanceDisplayCondition).toBe(distanDisplayCondition);
     expect(target.disableDepthTestDistance).toBe(disableDepthTestDistance);
+    expect(target.splitDirection).toBe(splitDirection);
   });
 
   it("clone works", function () {
@@ -147,6 +157,7 @@ describe("DataSources/PointGraphics", function () {
       new DistanceDisplayCondition(10.0, 100.0)
     );
     source.disableDepthTestDistance = new ConstantProperty(10.0);
+    source.splitDirection = new ConstantProperty(SplitDirection.LEFT);
 
     const result = source.clone();
     expect(result.color).toBe(source.color);
@@ -162,6 +173,7 @@ describe("DataSources/PointGraphics", function () {
     expect(result.disableDepthTestDistance).toBe(
       source.disableDepthTestDistance
     );
+    expect(result.splitDirection).toBe(source.splitDirection);
   });
 
   it("merge throws if source undefined", function () {