Columbus view doesn't respect the billboard height

CesiumJS
1

I’ve an application that shows both dynamic billboards and dynamic primitives in a map. All these graphical components have a height and Cesium respects the z-order when the view is using the SCENE3D.

But when I update the scene to a COLUMBUS_VIEW, the z-order is not respected. It seems that all the billboards are drawn first and then Cesium draws all the primitives. The effect is that is not possible to see a billboards over a primitive (I know that the height is correctly defined because in 3D it works fine). It seems that all the billboards are clamped to the surface (despite of I’m using the heightReference property).

I’ve also tried to reproduce the error in the SandCastle without success. Anybody has an idea about where the problem is?

Regards,
Jorge

2

Hi Jorge,

I know this is an issue in 2D. We have an issue written up here: https://github.com/AnalyticalGraphicsInc/cesium/issues/3647

I haven’t seen this problem in CV though.

What version of Cesium are you using? Are you using terrain? And how are you adding the billboards?

Best,

Hannah

3

Hi Hanna

We are using the latest Cesium version released this month

We are not using terrain. The billboards are using the HeightReference = NONE that I assume that means “use the absolute value of the z coordinate”.

We add the enities to the map using the “viewer.entities.add” method and once the entity is created we add the billboard:

entity.billboard = {
   image : "http://example.com/my.svg",

heightReference: Cesium.HeightReference.NONE,
};


``

Regards,

Jorge
4

Thanks Jorge! heightReference is actually not used by the entity API at this time, so that shouldn’t have any effect.
Can you give me an example for your entire entity? Maybe the bug depends on what other primitive types the entity is adding.

-Hannah

5

Hi Hanna.

We don’t load the SVG from an external URL: we create an SVG that depends on some parameters of our model. Our code makes something like:

var image = new Image();

image.src = "…
entity.billboard.image = image


We have changed the way to load the SVG and now we are doing something like;

var image = new Image();
image.onload = function() {
entity.billboard.image = image
};
image.src = "…;


Since we have made this change the problem of the height has disappeared. It seems that using the first method to load an SVG the resource was not correctly loaded. Using the first approach, we also had problems in Firefox that it was not able to load all the resources. Now this problem has been fixed.

Thanks for you help!

Regards,

Jorge

6

In order to create a WebGL texture, Cesium needs to know the height and width of the image, which means you need to wait for the image to load before assigning it to the billboard. Your first code example doesn’t work because you’re assigning before the image has finished loading.