Can I rotate an Image?
var image = new Image();
image.onload = function() {
var billboard = new Cesium.BillboardCollection();
var textureAtlas = scene.getContext().createTextureAtlas({
image : image
});
billboard.setTextureAtlas(textureAtlas);
img = billboard.add({
position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(x, y, z)),
imageIndex : 0
});
primitives.add(billboard);
};
image.src = ‘…/…/Images/image.png’;
before:
after:
Thank you!
Hi Tamy,
Billboards do not support rotating an image yet, but I believe you can do it with CSS.
Patrick
Thank you Patrick,
I can rotate an image with css through javascript in a html page (Google Chrome):
but it doesn’t work in Cesium:
var image = new Image();
image.src = ‘image.png’;
image.style.webkitTransform = “rotate(90deg)”; //putting it here or…
image.onload = function() {
image.style.webkitTransform = “rotate(90deg)”; //putting it here
var billboards = new Cesium.BillboardCollection();
var textureAtlas = scene.getContext().createTextureAtlas({image : image});
billboards.setTextureAtlas(textureAtlas);
billboards.add({
position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-75.59777, 40.03883)),
imageIndex : 0
});
scene.getPrimitives().add(billboards);
};
****image.style.webkitTransform - Google Chrome
image.style.MozTransform - Firefox
Do you have any idea why is it happening?
I’m fairly certain that WebGL only supports creating textures from the original source image “as is”. Any transforms applied by the browser, via CSS or other means (such as modifying the width/height properties in Javascript) do not translate into the resulting texture. I’m not 100% positive on this, but I ran into a similar problem when trying to dynamically resize images. I wonder what WebGL spec says on the subject.
The workaround in this case would be:
Create a new Canvas
Draw the rotated image onto the canvas
Make a texture out of the canvas
The above should definitely work, but in the long run we definitely should support rotation at the primitive level.
Guys, shouldn’t the billboard primitive have its own screen-space rotation angle that can be changed at runtime without rebuilding the texture?
--Ed.I think Matt is right. Ed, we will add that feature as priorities allow. Given that it is non-trivial to stay under the guaranteed maximum number of WebGL vertex attributes, I do not see us doing it in the short-term.
Patrick
One other thing to keep in mind when trying the canvas approach is that the canvas will need to be bigger than the original image, in order to fit the rotated image, since both must be rectangular. As a result, the image created from the canvas will have transparent corners, and because billboards are drawn in a fixed order regardless of where the camera is, you can end up with artifacts when the alpha-blending is done in the wrong order from the camera’s perspective.
Cozzi, understood. Here’s a goofy idea: Could the rotation angle sneak in as the last value of a vec4 position attribute?
–Ed.
Ed,
As Cozzi stated, you are absolutely correct, the primitive should support it. In addition to finding the time to do it, we also have to keep in mind that rotation can get a little tricky when you allow the map to be oriented any way other than “north” being up in screen space. We need to be able to specify the rotation in such a way so that pointing is view dependent. This is why it just can’t be a simple “rotation” property but also has to have some sort of reference direction associated with it. Insight3D has these capabilities (Bagnell added them) so it’s something we have experience with, we just need to do it. It’s unclear whether this extra information needs to be passed to the shader or if the shader only needs the final rotation.
Ed - we already pack attributes like mad. We need to explore compressing them. I have plenty of ideas. When it’s high enough priority, we’ll investigate.
Hi Tamy,
Billboard rotation is now available in master and will be in the next release. You might want to update your code because it will be faster than drawing the rotated image to a canvas.
Regards,
Dan
Very nice! Thanks!
Hi,
I know your post is a couple of years old. I am new to this - how did you get the billboard to rotate for you ?
thanks
Nagi
Hello Nagi,
Billboard has a rotation property. Here’s a code example:
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard :{
image : '../images/Cesium_Logo_overlay.png',
rotation: Cesium.Math.toRadians(90)
}
});
``
Best,
Hannah