CZML icon heading (orientation?)

I have a .kmz that uses a values coupled with an arrow icon to display movement patterns. Is there any way I can apply the proper heading to the arrow icon? Is it possible to use Orientations with icons?

Unfortunately, not yet. We plan on supporting this in the future and
are obviously always looking for contributors who would like to help
out. The first step would be to add a rotation property to Billboard
and update the shaders to use it. After that it's a matter of adding
CZML support for it and then adding code to handle it in the KML
translator. We also have more complicated use cases that involve more
properties than a simple heading, but I haven't had a chance to
discuss them on the wiki yet, perhaps I'll update the roadmap within
the next couple of days to include it.

I think I can handle the Billboard properties and the CZML support and KML translation. However I just tried messing with the shaders and that blows my mind a bit. Any tips for applying a rotation to the shaders? My WebGL skills don’t exist yet.

Thanks!

Hi Ashley,

To get started, in BillboardCollectionVS.glsl, replace

vec2 halfSize = u_atlasSize * imageSize * 0.5 * scale * czm_highResolutionSnapScale;

halfSize *= ((direction * 2.0) - 1.0);

positionWC.xy += (origin * abs(halfSize)) + halfSize;

positionWC.xy += (pixelOffset * czm_highResolutionSnapScale);

positionWC.xy = mix(positionWC.xy, floor(positionWC.xy), u_clampToPixel);

with

vec2 halfSize = u_atlasSize * imageSize * 0.5 * scale * czm_highResolutionSnapScale;

halfSize *= ((direction * 2.0) - 1.0);

float theta = 30.0 * czm_radiansPerDegree;

mat2 rotation = mat2(

cos(theta), sin(theta),

-sin(theta), cos(theta));

halfSize = rotation * halfSize;

positionWC.xy += (origin * abs(halfSize)) + halfSize;

positionWC.xy += (pixelOffset * czm_highResolutionSnapScale);

positionWC.xy = mix(positionWC.xy, floor(positionWC.xy), u_clampToPixel);

Here we construct a 2x2 rotation matrix that rotates 30 degrees counter-clockwise in screen-space. I assume you’ll want to define rotation per-billboard, which means you’ll want to add a new attribute to the top of the shader, and then pass the data in as done for the other attributes in BillboardCollection.js.

Given all the optimizations, it will be a bit of work but not too hard; however, there is one subtle problem: the guaranteed minimum number of vertex attributes by WebGL is 8, and billboards are already using 8. If we exceed this, we are not guaranteed to run on all WebGL implementations. Check out WebGL Report. Most desktops have 16, so it might be OK for your case, but for the general case, we need to look more closely at combing and/or eliminating attributes. I will actually look at this a bit next week for another billboard feature, but I’m not sure that I’ll take it far enough to support any number of attributes.

Regards,

Patrick

Hi,

Has any work been done on adding orientation to icons (billboards)?

-Dave

Hi Dave,

I don’t believe anyone has worked on this yet. If you need something quick, it shouldn’t be too hard to tweak the billboards as I described earlier.

Patrick

Hi Dave,

Billboard rotation and orientation are now available in master and will be in the next release. There is an aligned axis property that is a unit vector in world space that will define the billboards up direction. For example, setting this property to the unit z direction will make the billboards up direction point towards the north pole.

Regards,

Dan

Hi Dan,

Thanks for the update! Is orientation support added to czml too?

-Dave

Yes, the alignedAxis property is available in CZML.

Hi All,

I’m trying to get this to work in a CZML file we’re producing but can’t quite get the configuration right, nor can I find it in either the Specs nor Sandcastle.

Could I please ask for a patient soul to write just a simple CZML “orientation” property snippet that includes axis aligned heading or orientation?

Thanks in advance,

Hugo

Ok,

Nevermind the question - I was looking in the wrong place.

It turns out I was expecting the alignedAxis to be a sub-property of the “orientation” property, but it was actually under DynamicBillboard.

(I was also looking under https://github.com/AnalyticalGraphicsInc/cesium/wiki/CZML-Content but that’s outdated and the property was nowhere to be found).

A quick glance at the code, and, alas, alignedAxis is actually a property of DynamicBillboard, and my code is now working.

Best,

Hugo