Transitioning between 2d to 3d cause orbit path's to render in front of the globe
- Dominant language
- JavaScript
- Stars
- 15.7k
- Forks
- 3.9k
- Avg merge
- 4d 6h
- Merged PRs (30d)
- 34
Description
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()
```javascript
/**
* 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.
```javascript
// 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
}
}
});
```
Contributor guide
Research direction
Start with PathGraphics and PointPrimitive rendering, then trace the Scene morphStart and morphComplete transition from 2D to 3D. Reproduce the reported case without the workaround and determine why the orbit path renders in front of the globe; done means the path remains correctly depth-tested after the transition.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100