How to select cesium entity which is under another cesium entity?

CesiumJS
1

Hello Team,
I got stuck in one of tricky problem of selecting cesium entity based on mouse click.
The problem is I am not able to select the cesium entity which are under other cesium entity.
considering this diagram,
yellow is the polygon and red is sphere.
polygon is on the top and sphere is below polygon.
for some reasons I need to select sphere on mouse click, but since it is under the polygon I am not able to select it.
image

Any possible Idea or solution that I can implement to get my problem resolve ?

Thank you !!

2

Hi there,

I think you’re looking for drill picking.

For a code example, click “Drill-down picking” in the picking example.

1 Like
3

Hello @Gabby_Getz
please consider the use case,
considering below image from top view we see, red arrow and orange surface.
image

From front view it look’s something like below image.
image

If we notice the arrow is hidden behind the orange surface, in this case I am not able to either see or select the arrow.

Do you have any solution in mind, where I can see that arrow and pick the arrow in second case/image.

Few of the things that I had tries is by assigning the z-index, while creating the poly line it did not worked.

let arrowEntity = viewer.entities.add({
            description: 'Preview Arrow for Vertical Dragging.',
            polyline: {
                positions: positions,
                width: width,
                arcType: Cesium.ArcType.NONE,
                material: new Cesium.PolylineArrowMaterialProperty(
                    color
                ),
                **zIndex: 10**
            },
        });

Few other thing’s that I tired is by disabling the depth test.

        let arrowPrimitive = viewer.scene.primitives.add(
            new Cesium.Primitive({
                geometryInstances: new Cesium.GeometryInstance({
                    geometry: new Cesium.PolylineGeometry({
                        positions: positions,
                        width: width,
                        arcType: Cesium.ArcType.NONE
                    })
                }),

                appearance: new Cesium.PolylineMaterialAppearance({
                    material: new Cesium.Material({
                        fabric: {
                            type: "PolylineArrow",
                            uniforms: {
                                color: color,
                            }
                        }
                    }),
                    renderState: {
                        depthTest: {
                            enabled: false  // shut off depth test
                        }
                    }
                }),
                asynchronous: false   // block or not
            })
        );

The disabling the depth test solution does not work for dynamic poly line, dynamic meaning I am updating the poly line in here every time I select and drag the arrow.

Let me know your feedback on these solutions and also please share if you have any solution in mind for this problem.

some of the reference links that I found regarding this problem
[depthFailMaterial for dynamic polylines · Issue #5333 · CesiumGS/cesium · GitHub](https://Depth material for poly line)

[Disable Depth Test For Polylines and Polygons - #6 by Josh_S](https://Disabling the depth test for the polyline)

Thank you !!

4

Hi there,

If something is completely behind another object in 3D space, it is difficult to get it to render in front in all cases. Given that progress has not been made on depthFailMaterial for dynamic polylines · Issue #5333 · CesiumGS/cesium · GitHub yet, I don’t believe there is anything in the public CesiumJS API that will work the same way.

Have you considered maybe making the surface in front of the arrow transparent on mouseover?

1 Like