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