Selection of a Outlined (no fill) Billboard Image

1. A concise explanation of the problem you’re experiencing.

I have a billboard of a circle outline (which looks similiar to https://fontawesome.com/icons/circle?style=regular). I have no problems selecting the billboard (scene.pick, scene.drillpick) when I click on the outline. I would like to be able to select the billboard when clicking inside of the outline.

I have played around with scene.pickTranslucentDepth and scene.useDepthPicking, and they do not seem to provide me with the desired behavior.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

This can be replicated by using the sandcaste billboards by changing the billboard image to be a circle outline.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Consistency with previous toolset

4. The Cesium version you’re using, your operating system and browser.

I have tried this in Cesium 1.46 as well as Cesium 1.42

Any help would be greatly appreciated.

Thanks in advance

Hi Jerrold,

When using scene.pickTranslucentDepth, are you calling scene.render() before picking?

From the docs:

When true, enables picking translucent geometry using the depth buffer. Note that Scene#useDepthPicking must also be true for this enabling to work.
Render must be called between picks.
There is a decrease in performance when enabled. There are extra draw calls to write depth for translucent geometry.

Also if that doesn’t solve it, if you could provide a code snippet, preferably with Sandcastle, it would help us debug this.

Thanks!

Gabby

Abby,

Two files have been attached the circle.png should be placed in the Apps/Sandcastle/images directory.

Thanks

Jerrold

SandcastleExample.txt (9.31 KB)

circle.png

Hi Jerrold,

I don’t see any code for picking the entity. Can you include that?

Thanks,

Gabby

Gabby,

I noticed that the Cesium Overlay images appear to work as expected, but my images don’t (Drop the following into Cesium) is there anything special in the image construction? Using GIMP I noticed that my image mode was Indexed and the Cesium Image was RGB. I did change my image mode to be in RGB mode I exported it and it still does not appear to work. Thanks in advance!!!

//attributes

var billboards = null;

var eventHandler = null;

var scene = null;

var viewer = null;

//functions

var _handleLeftMouseClick = null;

viewer = new Cesium.Viewer(‘cesiumContainer’);

scene = viewer.scene;

billboards = scene.primitives.add(new Cesium.BillboardCollection());

billboards.add({

position : Cesium.Cartesian3.fromDegrees(-77, 41, 100),

image : ‘…/images/Cesium_Logo_overlay.png’,

id: ‘Cesium’

});

billboards.add({

position : Cesium.Cartesian3.fromDegrees(-87, 41, 100),

image : ‘…/images/circle.png’,

id: ‘circle’

});

_handleLeftMouseClick = function(movement) {

var pickedObject = null;

if (movement.hasOwnProperty(‘endPosition’)) {

pickedObject = [scene.pick(movement.endPosition)];

}

else if (movement.hasOwnProperty(‘position’)) {

pickedObject = [scene.pick(movement.position)];

}

if(pickedObject && (0 < pickedObject.length) && pickedObject[0]) {

console.warn('Screen element picked ’ + pickedObject[0].id);

}

else if(pickedObject && (0 < pickedObject.length) && !pickedObject[0]) {

console.warn(‘You must have picked on a translucent part of an image’);

}

};

eventHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

eventHandler.setInputAction(_handleLeftMouseClick, Cesium.ScreenSpaceEventType.LEFT_CLICK);

eventHandler.setInputAction(_handleLeftMouseClick, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Hi Jerrold,

If the image is RGB it should work. Can you provide the re-exported version?

Thanks,

Gabby

Gabby,

Attached RGB circle.png file. Thanks

circle.png

Any reason you can’t add 1/256 of alpha to the parts that are fully transparent? You’ll still be able to see thru the image and will be able to pick anywhere?

Scott,

That did the trick thanks!