Translate and Rotate Primitive's Underlying RectangleGeometry

Hello,

I have a scenario where I use a RectangleGeometry to make a GeometryInstance, and then use that to make a Primitive I add to the map like so:
myClass.prototype.createPrimitive = function(anchors, rot) {
  var rectGeometry = new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(anchors[3][1], anchors[3][0], anchors[1][1], anchors[1][0]),
                rotation: rot,
                stRotation: rot
  });
  
  var rectInstance = new Cesium.GeometryInstance({
    geometry : rectGeometry
  });
  this._costMapPrimitive = new Cesium.Primitive({
    geometryInstances: rectInstance,
    appearance: new Cesium.MaterialAppearance({
      material: this._material
    })
  });
  this._scene.primitives.add(this._costMapPrimitive);
}

this._material is a simple material I made that has an image.

Later on, I need to update the rotation, stRotation, and the rectangle boundaries of that first created rectangle. Removing the primitive and creating a new one everytime is slow and flickers like crazy. I've seen posts involving modifying the modelMatrix of my this._costMapPrimtitive, but I cannot quite figure out how I would go from that to entering new bounding coordinates or rotation for my RectangleGeometry.

Any ideas?

So, I changed instead to using a RectanglePrimitive which makes this process easier:
myClass.prototype.createPrimitive = function(anchors) {

if(this._costMapPrimitive) {

this._costMapPrimitive.rectangle = Cesium.Rectangle.fromDegrees(anchors[3][1], anchors[3][0], anchors[1][1], anchors[1][0]);

this._costMapPrimitive.rotation = this._costMapPrimitive.rotation + 0.01;

this._costMapPrimitive.textureRotationAngle = this._costMapPrimitive.textureRotationAngle + 0.01;

}

else {

this._costMapPrimitive = new Cesium.RectanglePrimitive({

rectangle: Cesium.Rectangle.fromDegrees(anchors[3][1], anchors[3][0], anchors[1][1], anchors[1][0]),

material: this._material,

asynchronous: false

});

this._scene.primitives.add(this._costMapPrimitive);

}

}

Setting asynchronous to false took away all the flickering for me. This works, but I noticed that as I rotate the primitive/texture (you can see for testing I put the rotation to slowly increase by 0.01 every call), the image on the material zooms in and out. It zooms in when the rotation makes the rectangle appear as a diamond (multiple of 45 degrees), and the image is zoomed out when the rectangle looks like a rectangle (multiple of 90 degrees). As the primitive and material remain a fixed size (regardless of orientation), I don’t understand why this is happening?

Paul,

Did you find a solution to the issue of the image in the material zooming in and out while rotating the rectangle? I’m asking because I’m experiencing exactly the same issue.

Thanks,

Alberto

Hello Alberto,

I believe this is a side effect of how we are computing texture coordinates for rotated rectangles. Could you paste a code snippet that shows when you are seeing this issue?

Thanks!

-Hannah

I believe I'm seeing this issue also, using the latest Cesium 1.16.

Here's a test page illustrating the texture issue:
http://www.zaiadesign.com/play/entity-rotation-test.html

The relevant code goes like this:

var viewModel = {
    rotation : 0.0
}
Cesium.knockout.track(viewModel);

function getRotationValue() {
    return viewModel.rotation;
}

var latitude = 40.0;
var longitude = -100.0;
var north = latitude + 0.35;
var south = latitude - 0.35;
var east = longitude + 1.55;
var west = longitude - 1.55;
var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

var imageUrl = 'images/Cesium_Logo_overlay.png';

var entity = viewer.entities.add({
  rectangle : {
    coordinates : rectangle,
    material : imageUrl,
    rotation : new Cesium.CallbackProperty(getRotationValue, false),
    stRotation : new Cesium.CallbackProperty(getRotationValue, false), // Need this to rotate texture
  }
});

Thanks for the sample demo!

Yes, I see you found that the problem is related to this issue: https://github.com/AnalyticalGraphicsInc/cesium/issues/2737

Hopefully someone will be able to take a look at it soon.

Best,

Hannah