Translate and Rotate Primitive's Underlying RectangleGeometry

[Paul Candela]

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?

[Paul Candela]

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?

[Alberto Acevedo]

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

[Hannah Pinkos]

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

[zehao...@gmail.com]

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

[Hannah Pinkos]

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