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 the route of using an Entity via a RectangleGraphics with a material pointing at a canvas, as well as building my own WebGL shader and using a texture to house the raw image data from an 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 seen it in 1.7 and 1.9, and it may have been around earlier).
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.