Billboard alignedAxis error??

CesiumJS
1

Hi,

I am using billboards that have alignedAxis = Cesium.Cartesian3.ZERO (pointing to the top of the screen), and billboards that have alignedAxis = Cesium.Cartesian3.UNIT_Z (pointing North).

The ones with Cartesian3.ZERO work fine until I add the ones with Cartesian3.UNIT_Z. After that, the alignedAxis property seems to be Cartesian3.UNIT_Z for all billboards, and the Cartesian3.ZERO ones are upside-down.

Is that a bug or a misunderstanding from my side?

Thanks, Willem

Sandcastle (click ‘Add second billboard’ to see the effect):

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

var pinBuilder = new Cesium.PinBuilder();

function addBillboard() {

Sandcastle.declare(addBillboard);

viewer.entities.add({

    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),

    billboard :{

        image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),

        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

        rotation: 0.0,

        alignedAxis: Cesium.Cartesian3.ZERO // should point to top of the screen

    }

});

}

function addSecondBillboard() {

Sandcastle.declare(addSecondBillboard);

viewer.entities.add({

    position : Cesium.Cartesian3.fromDegrees(-93.0, 37.0),

    billboard : {

        image : pinBuilder.fromColor(Cesium.Color.RED, 48).toDataURL(),

        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

        rotation: 0.0,

        alignedAxis: Cesium.Cartesian3.UNIT_Z // should point North

    }

});

}

Sandcastle.addToolbarMenu([{

text : 'Add billboard',

onselect : function() {

    addBillboard();

    Sandcastle.highlight(addBillboard);

}

}, {

text : 'Add second billboard',

onselect : function() {

    addSecondBillboard();

    Sandcastle.highlight(addSecondBillboard);

}

}]);

Sandcastle.reset = function () {

//viewer.entities.removeAll();

};

2

Hello Willem,

This looks like a bug on our end. I’ve filed an issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/3318

Thanks!

Hannah

3

Hi Hannah,

Thanks for the quick reply.

I tested a few older Cesium versions (up to 1.6) but they all have this issue.

Is there a way to work around this issue, or apply some local fix?

Thanks, Willem

4

Hi Willem,

The problem is caused by having billboards with different alignedAxis in the same BillboardCollection.
I think the easiest workaround would be to not use the Entity API and declare your own BillboardCollections like this:

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

var pinBuilder = new Cesium.PinBuilder();

var billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
rotation: 0.0,
alignedAxis: Cesium.Cartesian3.ZERO,
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)
});

billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
image : pinBuilder.fromColor(Cesium.Color.RED, 48).toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
rotation: 0.0,
alignedAxis: Cesium.Cartesian3.UNIT_Z,
position : Cesium.Cartesian3.fromDegrees(-93.0, 37.0)
});

``

However, if you need a lot of the Entity API features, you might be able to change the BillboardVisualizer so it creates a new BillboardCollection for each entity. I think this is the code responsible for that: https://github.com/AnalyticalGraphicsInc/agi-cesium-cloud/blob/master/public/Cesium/DataSources/BillboardVisualizer.js#L126

Best,

Hannah

5

Hi Hannah,

Thank you for the detailed information.

We do use the Entity API, so I’ll look into changing the BillboardVisualizer later this week. Will creating many (max 500) BillboardCollections have a performance impact? If that is the case, BillboardVisualizer could use a separate collection for each alignedAxis flavour (more changes required in that case).

Thanks, WIllem

6

Good point. Yes, creating a whole bunch of BillboardCollections will probably impact performance. You’re solution of creating one collection for each type of alignedAxis is much better =)

-Hannah

7

Since this is a bug in Cesium, we’d be happy to take a pull request that fixes the real issue at the BillboardCollection level. Of course you can spend your time however you like, but it might actually be easier to fix the underlying issue instead of hacking up BillboardVisualizer.

8

This issue has been fixed and will be available in the upcoming 1.20 release.

Best,

Hannah

9

Hi Cesium team,

Thanks for fixing this! I’ll test as soon as 1.20 is available.

(I did look into the code and stepped thru the debugger to try to find the problem, but I had no idea what was wrong)

Thanks, Willem