Add splitDirection property for PointPrimitive

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;

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,

packages/engine/Source/Scene/Billboard.js

@@ -21,6 +21,7 @@ import HorizontalOrigin from "./HorizontalOrigin.js";
 import SceneMode from "./SceneMode.js";
 import SceneTransforms from "./SceneTransforms.js";
 import VerticalOrigin from "./VerticalOrigin.js";
+import SplitDirection from "./SplitDirection.js";
 
 /**
  * @typedef {object} Billboard.ConstructorOptions
@@ -49,6 +50,7 @@ import VerticalOrigin from "./VerticalOrigin.js";
  * @property {BoundingRectangle} [imageSubRegion] A {@link BoundingRectangle} Specifying the sub-region of the image to use for the billboard, rather than the entire image.
  * @property {DistanceDisplayCondition} [distanceDisplayCondition] A {@link DistanceDisplayCondition} Specifying the distance from the camera at which this billboard will be displayed.
  * @property {number} [disableDepthTestDistance] A number specifying the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
+ * @property {SplitDirection} [splitDirection] A {@link SplitDirection} Specifying the split property of the billboard.
  */
 
 /**
@@ -250,6 +252,11 @@ function Billboard(options, billboardCollection) {
   this._outlineWidth = defaultValue(options.outlineWidth, 0.0);
 
   this._updateClamping();
+
+  this._splitDirection = defaultValue(
+    options.splitDirection,
+    SplitDirection.NONE
+  );
 }
 
 const SHOW_INDEX = (Billboard.SHOW_INDEX = 0);
@@ -270,7 +277,8 @@ const DISTANCE_DISPLAY_CONDITION = (Billboard.DISTANCE_DISPLAY_CONDITION = 14);
 const DISABLE_DEPTH_DISTANCE = (Billboard.DISABLE_DEPTH_DISTANCE = 15);
 Billboard.TEXTURE_COORDINATE_BOUNDS = 16;
 const SDF_INDEX = (Billboard.SDF_INDEX = 17);
-Billboard.NUMBER_OF_PROPERTIES = 18;
+const SPLIT_DIRECTION_INDEX = (Billboard.SPLIT_DIRECTION_INDEX = 18);
+Billboard.NUMBER_OF_PROPERTIES = 19;
 
 function makeDirty(billboard, propertyChanged) {
   const billboardCollection = billboard._billboardCollection;
@@ -1072,6 +1080,24 @@ Object.defineProperties(Billboard.prototype, {
       }
     },
   },
+
+  /**
+   * Gets or sets the {@link SplitDirection} of this billboard.
+   * @memberof Billboard.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);
+      }
+    },
+  },
 });
 
 Billboard.prototype.getPickId = function (context) {
@@ -1565,7 +1591,8 @@ Billboard.prototype.equals = function (other) {
         this._distanceDisplayCondition,
         other._distanceDisplayCondition
       ) &&
-      this._disableDepthTestDistance === other._disableDepthTestDistance)
+      this._disableDepthTestDistance === other._disableDepthTestDistance &&
+      this._splitDirection === other._splitDirection)
   );
 };
 

packages/engine/Source/Scene/BillboardCollection.js

@@ -54,6 +54,7 @@ const DISTANCE_DISPLAY_CONDITION_INDEX = Billboard.DISTANCE_DISPLAY_CONDITION;
 const DISABLE_DEPTH_DISTANCE = Billboard.DISABLE_DEPTH_DISTANCE;
 const TEXTURE_COORDINATE_BOUNDS = Billboard.TEXTURE_COORDINATE_BOUNDS;
 const SDF_INDEX = Billboard.SDF_INDEX;
+const SPLIT_DIRECTION_INDEX = Billboard.SPLIT_DIRECTION_INDEX;
 const NUMBER_OF_PROPERTIES = Billboard.NUMBER_OF_PROPERTIES;
 
 let attributeLocations;
@@ -71,6 +72,7 @@ const attributeLocationsBatched = {
   textureCoordinateBoundsOrLabelTranslate: 9,
   a_batchId: 10,
   sdf: 11,
+  splitDirection: 12,
 };
 
 const attributeLocationsInstanced = {
@@ -87,6 +89,7 @@ const attributeLocationsInstanced = {
   textureCoordinateBoundsOrLabelTranslate: 10,
   a_batchId: 11,
   sdf: 12,
+  splitDirection: 13,
 };
 
 /**
@@ -311,6 +314,7 @@ function BillboardCollection(options) {
     BufferUsage.STATIC_DRAW, // PIXEL_OFFSET_SCALE_BY_DISTANCE_INDEX
     BufferUsage.STATIC_DRAW, // DISTANCE_DISPLAY_CONDITION_INDEX
     BufferUsage.STATIC_DRAW, // TEXTURE_COORDINATE_BOUNDS
+    BufferUsage.STATIC_DRAW, // SPLIT_DIRECTION_INDEX
   ];
 
   this._highlightColor = Color.clone(Color.WHITE); // Only used by Vector3DTilePoints
@@ -777,6 +781,12 @@ function createVAF(
       componentDatatype: ComponentDatatype.FLOAT,
       usage: buffersUsage[TEXTURE_COORDINATE_BOUNDS],
     },
+    {
+      index: attributeLocations.splitDirection,
+      componentsPerAttribute: 1,
+      componentDatatype: ComponentDatatype.FLOAT,
+      usage: buffersUsage[SPLIT_DIRECTION_INDEX],
+    },
   ];
 
   // Instancing requires one non-instanced attribute.
@@ -1586,6 +1596,34 @@ function writeSDF(
   }
 }
 
+function writeSplitDirection(
+  billboardCollection,
+  frameState,
+  textureAtlasCoordinates,
+  vafWriters,
+  billboard
+) {
+  const writer = vafWriters[attributeLocations.splitDirection];
+  let direction = 0.0;
+
+  const split = billboard.splitDirection;
+  if (defined(split)) {
+    direction = split;
+  }
+
+  let i;
+  if (billboardCollection._instanced) {
+    i = billboard._index;
+    writer(i, direction);
+  } else {
+    i = billboard._index * 4;
+    writer(i + 0, direction);
+    writer(i + 1, direction);
+    writer(i + 2, direction);
+    writer(i + 3, direction);
+  }
+}
+
 function writeBillboard(
   billboardCollection,
   frameState,
@@ -1670,6 +1708,13 @@ function writeBillboard(
     vafWriters,
     billboard
   );
+  writeSplitDirection(
+    billboardCollection,
+    frameState,
+    textureAtlasCoordinates,
+    vafWriters,
+    billboard
+  );
 }
 
 function recomputeActualPositions(
@@ -1981,6 +2026,10 @@ BillboardCollection.prototype.update = function (frameState) {
       writers.push(writeSDF);
     }
 
+    if (properties[SPLIT_DIRECTION_INDEX]) {
+      writers.push(writeSplitDirection);
+    }
+
     const numWriters = writers.length;
     vafWriters = this._vaf.writers;
 

packages/engine/Source/Shaders/BillboardCollectionFS.glsl

@@ -7,6 +7,7 @@ uniform vec4 u_highlightColor;
 in vec2 v_textureCoordinates;
 in vec4 v_pickColor;
 in vec4 v_color;
+in float v_splitDirection;
 
 #ifdef SDF
 in vec4 v_outlineColor;
@@ -86,6 +87,9 @@ vec4 getSDFColor(vec2 position, float outlineWidth, vec4 outlineColor, float smo
 
 void main()
 {
+    if (v_splitDirection < 0.0 && gl_FragCoord.x > czm_splitPosition) discard;
+    if (v_splitDirection > 0.0 && gl_FragCoord.x < czm_splitPosition) discard;
+
     vec4 color = texture(u_atlas, v_textureCoordinates);
 
 #ifdef SDF

packages/engine/Source/Shaders/BillboardCollectionVS.glsl

@@ -11,6 +11,7 @@ in vec4 scaleByDistance;                            // near, nearScale, far, far
 in vec4 pixelOffsetScaleByDistance;                 // near, nearScale, far, farScale
 in vec4 compressedAttribute3;                       // distance display condition near, far, disableDepthTestDistance, dimensions
 in vec2 sdf;                                        // sdf outline color (rgb) and width (w)
+in float splitDirection;                            // splitDirection
 #if defined(VERTEX_DEPTH_CHECK) || defined(FRAGMENT_DEPTH_CHECK)
 in vec4 textureCoordinateBoundsOrLabelTranslate;    // the min and max x and y values for the texture coordinates
 #endif
@@ -28,6 +29,7 @@ out mat2 v_rotationMatrix;
 
 out vec4 v_pickColor;
 out vec4 v_color;
+out float v_splitDirection;
 #ifdef SDF
 out vec4 v_outlineColor;
 out float v_outlineWidth;
@@ -430,5 +432,5 @@ if (lengthSq < disableDepthTestDistance) {
 
     v_color = color;
     v_color.a *= translucency;
-
+    v_splitDirection = splitDirection;
 }