Transitioning between 2d to 3d cause orbit path's to render in front of the globe

[AshitakaLax]

Sandcastle example: Sorry don't have the time and resources (my code was developed in Angular) This issue did still appear on latest version of Cesium also.

1. first directly go to the 2d display before selecting any point(for some reason if you start in 3d it will work as expected).

2. The object I'm using to render the path is a PointPrimitive which we selected from the Scene using Pick().

3. We then add a PathGraphic to the point by assigning it to the PointPrimitive.id.path = new PathGraphic()

   /**
   * Adds orbit path to Cesium
   * @param pickedObject The object to add to the trailing orbit path. <-- this object is the 
   */
   addOrbitPath(pickedObject: any) {
    // Adds the orbit path.
    let glowLine = new Cesium.PolylineGlowMaterialProperty({
     color: Cesium.Color.BLUE,
   });
   let path = new Cesium.PathGraphics({
     leadTime: 5200,
     trailTime: 0,
     material: glowLine,
     width: 10,
   });
   pickedObject.id.path = path;
   }

   

4. After the path is render switch to 3d (Notice the lines are displayed infront of the globe

5. After Workaround(code below) patch, and expected result

Here is the pickedObject chrome output, may help

{primitive: PointPrimitive, collection: PointPrimitiveCollection, id: Entity}
collection: PointPrimitiveCollection {_sp: ShaderProgram, _spTranslucent: ShaderProgram, _rsOpaque: RenderState, _rsTranslucent: RenderState, _vaf: VertexArrayFacade, …}
id: Entity {_availability: TimeIntervalCollection, _id: "43013", _definitionChanged: Event, _name: "--redacted--", _show: true, …}
primitive: PointPrimitive {_show: true, _position: Cartesian3, _actualPosition: Cartesian3, _color: Color, _outlineColor: Color, …}
__proto__: Object

Browser: Chrome

Operating System: Windows

Work Around

To resolve this issue I stored all of the PointPrimitive's and remove them during the start of the transition from 2d to 3d and add them back in at the end of the transition. This doesn't show the lines as it morphs like it does when you switch from 3d to 2d, but it doesn't mess up the display of the path's either.

   // Remove all of the Picked Objects(aka PointPrimitives) from the global list of selectedCrafts
    this.cesiumViewer.scene.morphStart.addEventListener((ignore, previousMode, newMode) => {
      if (previousMode === SceneMode.SCENE2D && newMode === SceneMode.SCENE3D) {
        for (let index = 0; index < this.selectedCrafts.length; index++) {
          // Remove the orbit path.
          const pickedObject = this.selectedCrafts[index];
          pickedObject.id.path = undefined;
          this.removeOrbitPath(pickedObject);
        }
      }
    });
 this.cesiumViewer.scene.morphComplete.addEventListener((ignore, previousMode, newMode) => {
      if (previousMode === SceneMode.SCENE2D && newMode === SceneMode.SCENE3D) {
       // Iterate through each stored object, and 
        for (let index = 0; index < this.selectedCrafts.length; index++) {
          const pickedObject = this.selectedCrafts[index];
          this.addOrbitPath(pickedObject); // this is the code snippet shown above
        }
      }
    });

[ebogo1]

Thanks for opening an issue @AshitakaLax! We'll look into this once we get a chance.