Selection of a Outlined (no fill) Billboard Image

CesiumJS
1

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

2

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

3

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

4

Hi Jerrold,

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

Thanks,

Gabby

5

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);

6

Hi Jerrold,

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

Thanks,

Gabby

7

Gabby,

Attached RGB circle.png file. Thanks

circle.png

8

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?

9

Scott,

That did the trick thanks!