Translate and Rotate Primitive's Underlying RectangleGeometry

CesiumJS
1

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?

2

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?

3

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

4

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

5

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
  }
});

6

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