Image Rotate Causing Strange Zooming In and Out

[devguy22]

So, I have tried creating something in Cesium in two different ways with the goal to be having a canvas displayed on the map, and rotate. I've tried using an Entity via a RectangleGraphics with a material pointing at a canvas (displaying an image), as well as building my own WebGL shader and using a texture to house the raw image data from a canvas context. Both result in odd zooming in and out of the image upon rotation. I have included some Sandcastle ready code that sort of shows off this strange issue (I've only tried it in 1.7 and 1.9).

var viewer = new Cesium.Viewer('cesiumContainer');
var recgraphics;
var rot = 0;
var canvas;
var context;
var image;
var material;
var rect;
var entity;

function addBillboard() {
Sandcastle.declare(addBillboard);
rect = Cesium.Rectangle.fromDegrees(-86.69777, 30.03883, -76.69777, 40.03883);
canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
context = canvas.getContext('2d');
image = new Image(300, 300);
image.src = '../images/whiteShapes.png';
context.drawImage(image, 0, 0);
material = new Cesium.ImageMaterialProperty();
material.image = canvas;
recgraphics = new Cesium.RectangleGraphics({
coordinates: rect,
material: material,
rotation: 0,
stRotation: 0
});
entity = new Cesium.Entity();
entity.rectangle = recgraphics;

viewer.entities.add(entity);
setTimeout(causeRotate, 100);

}

function causeRotate() {
context.drawImage(image, 0, 0);
recgraphics.rotation = rot;
recgraphics.stRotation = rot;
if( rot > 6.28 ){
rot = 0;}
else{
rot+= 0.015;}
setTimeout(causeRotate, 100);
//console.log(recgraphics);
}

Sandcastle.addToolbarMenu([{
text : 'Add billboard',
onselect : function() {
addBillboard();
Sandcastle.highlight(addBillboard);
}
}]);

Sandcastle.reset = function () {
viewer.entities.removeAll();
};

In the causeRotate function, it slowly rotates the rectangle and the image on the rectangle. I can try only changing one of those two at a time, and I get similar results. Any ideas? Fixing this is really important as I cannot have the image zoom level change when rotating.

Also of note, it flickers like crazy with that Entity option. With the texture/shader path, I had an asynchronous option on the RectanglePrimitive object (the RectangleGeometry has no such property). And yes, I do need to use the canvas rather than just the image because in my stuff, I have an image stream and so the image is not static and needs to be redrawn on the canvas each time through.

[hpinkos]

For the texture rotation issue: see #2737

The flickering is happening because your primitive was being drawn asynchronously. Use a CallbackProperty for a value that is changing frequently.

I'm closing this issue because it is a duplicate.