Add heading option for a billboard

[welchyd]

When I have a billboard with an image that is facing north, I can tilt the camera so the image is flipped. This is not what I would've expected, and there doesn't seem to be a way to keep the billboard's direction locked. Please fix.

Expected behavior - image pointing north:

After a slight camera tilt, it then faces more southward:

At a more extreme tilt, it seems to be pointing into the earth:

I've been able to get it to happen in this workspace: https://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=6f6710474236e3ffb99d41673e7b3632

[schmidtk]

This is similar to the issue fixed in #2487, but I believe what's needed is a way to render the billboard parallel to the Earth. This was asked in the forum awhile back, and I haven't been able to find a solution either. Using an entity with a material to display the icon has the desired rotation effect, but doesn't maintain constant pixel dimensions like a billboard.

[hpinkos]

@welchyd the billboard is behaving as expected. The reason it seems to be flipping when you tilt the globe beyond a certain point is because the Z axis is now pointing down in screen space (ie the north pole is below the south pole) so the billboard rotates so it continues to point along the positive Z axis.

It seems like what you want is to set heading: 0 for the billboard. We don't currently have that option, but I'll re-label this issue for us to consider adding it.

[welchyd]

A heading would be awesome! Thanks @hpinkos I did try working around this by drawing the icon as a material on a rectangle geometry, but that doesn't really scale with zoom nicely. Would love to see this added to the Billboard!

[esparano]

There is a related problem where the "aligned axis" does not work as expected, and billboards that are near the edges of the screen behave as if their rotations are calculated from the center of the screen.

For example, we have a grid of billboards whose alignedAxes are tangent to the Earth's surface, pointing north, with 0 rotation:

While it looks fine or "close enough" at some angles, at other angles the billboards are not rendered correctly. The camera is pointed south in the following picture: One would expect the billboards to the right (west) to point down-right, and the billboards to the left (east) to point down-left.

There is a problem in the BillboardCollection shader where the billboards near the center of the screen are rendered correctly, and all other billboards render as if they are at the center of the screen. You can see what I mean by the "red circle" on the previous picture. IF the billboards were all located at the center of the screen, their orientations would be correct.

I want to emphasize that this is different from a heading option for billboards and is a bug in the rendering based on the alignedAxis/rotation. The BillboardCollection shader code does not take screen location of the billboard into account.

[hpinkos]

Also requested by @hieeyh in #6825

[himby]

Bumping this one. This feature would be really nice, I'm currently working on an app that shows ships moving around in different directions, and as a workaround I have created polygons instead. but as pointed out these don't scale. So to come around that problem i use PointGraphics instead when zooming out. Billboards with heading seems perfect for the job. I've tried to modify BillboardCollectionVS.glsl to force billboards to lay flat on the ground, but this shader is a bit complex and I'm currently struggling to adjust it to how I want. Could someone else give it a try please?

[MishkaRogachev]

Hi! Have same needs, but maybe it is better to have a new separated graphics for oriented SVGs using Cesium.HeadingPitchRoll?

[abigstupidbear]

now do you have any solution to solve it？？

[sersanchus]

I faced this exactly problem and I come to this sollution, see if that suites you too. It's based on updating the rotation of the billoboard acording to camera's actual heading.

const self = this;

style.billboard.rotation = new Cesium.CallbackProperty(function (time, result) {
    return self.map.scene.camera.heading;
}, false);

[ellmatt]

I faced the same issue recently and came up with the following approach to solve this problem in sandcastle. Sandcastle