RectangleGeometry rotation seems buggy

[lucash...@gmail.com]

Hi list,

I think the rotation property of RectangleGeometry is a little buggy. I am setting rotation as such:

this.rectangleInstance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(this.coords[0], this.coords[1], this.coords[2], this.coords[3]),
ellipsoid : viewer["scene"]["globe"]["ellipsoid"],
height: this.heightInput.value,
rotation: this.rotationInput.value / 180 * Math.PI,
stRotation: this.rotationInput.value / 180 * Math.PI
})
});

When I am leaving the rectangle coordinates (this.coords array) alone and merely change the rotation and stRotation property over my this.rotationInput I get the following:

http://postimg.org/image/65bcbv2b7/

So besides some warping effects, the material is also slightly differently rotated then the geometry itself. See for example how the grey vertical field in the 0 Degrees rectangle is translated.

Any ideas?

Secondly, After I add a primitive to the scene I can't seem to update the rectanglegeometry anymore because the GeometryInstances array of the primitive is cleared for some reason. I also asked that here by the way (https://groups.google.com/forum/#!topic/cesium-dev/DG-pNzHlxWM)

Best,
Lucas

[lucash...@gmail.com]

EDIT:

The material is NOT differently rotated as the geometry when the rotation is set to 45 / 135 and 315 degrees by the way... however the warping effect is still there even with these rotations.

See: http://postimg.org/image/xsz9327pt/

[lucash...@gmail.com]

EDIT:

So I have tried to implement the same functionality with a PolygonGeometry.

I compute the four corners with formula from this site:
http://www.movable-type.co.uk/scripts/latlong.html (Destination point given distance and bearing from start point) and then load the image on top. When I rotate I only set the stRotation property on PolygonGeometry to the new rotation. Because I compute the (rotated) corner coordinates myself this gets rid of the warping I previously mentioned, but the material is still problematic.

[Hannah Pinkos]

Hello,

The behavior you are seeing with the RectangleGeometry is as it's meant to be.  The shape looks a little wonky because the RectangleGeometry is defined in longitude/latitude coordinates and is meant to maintain it's rectangle shape when projected to 2D.

I think you're on the right track with using a PolygonGeometry instead.  Can you paste a code sample? I might be able to help you figure out what's wrong with your material.

(also, i'll answer your question about primitives in the other forum post)

Best,

Hannah

[Matthew Amato]

You may be running into this bug: https://github.com/AnalyticalGraphicsInc/cesium/issues/2737

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[lucash...@gmail.com]

@Hannah, thanks for your answer. I don't believe the RectangleGeometry rotation is working as its meant to be, because it is exactly NOT maintaining the rectangle shape, see for example the 80 degrees turned image.. its totally warped (= not maintaining aspect ratio of rectangle). Although the polygon approach is correctly rotating the geometry, I see this as a work-around for the incorrect implemented RectangleGeometry rotation. I would much prefer to actually use a RectangleGeometry with functioning rotation! To compute the four corners of a rotated rectangle I am using this quick and dirty stuff here:

blah.prototype.computePolygonCoordinates = function(rot) {
var R= 6371000;
var d = 200;
var lat1D = this.latitudeInput.value;
var lon1D = this.longitudeInput.value;
var lat1 = lat1D / 180 * Math.PI;
var lon1 = lon1D / 180 * Math.PI;
var brng = Cesium.Math.toRadians(90+rot);
var lat2 = Math.asin( Math.sin(lat1)*Math.cos(d/R) + Math.cos(lat1)*Math.sin(d/R)*Math.cos(brng) );
var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat1), Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2));
d = d / this.aspectRatio;
brng = Cesium.Math.toRadians(0+rot);
var lat3 = Math.asin( Math.sin(lat2)*Math.cos(d/R) + Math.cos(lat2)*Math.sin(d/R)*Math.cos(brng) );
var lon3 = lon2 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat2), Math.cos(d/R)-Math.sin(lat2)*Math.sin(lat3));
d = d * this.aspectRatio;
brng = Cesium.Math.toRadians(270+rot);
var lat4 = Math.asin( Math.sin(lat3)*Math.cos(d/R) + Math.cos(lat3)*Math.sin(d/R)*Math.cos(brng) );
var lon4 = lon3 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat3), Math.cos(d/R)-Math.sin(lat3)*Math.sin(lat4));
var lat2D = Cesium.Math.toDegrees(lat2);
var lon2D = Cesium.Math.toDegrees(lon2);
var lat3D = Cesium.Math.toDegrees(lat3);
var lon3D = Cesium.Math.toDegrees(lon3);
var lat4D = Cesium.Math.toDegrees(lat4);
var lon4D = Cesium.Math.toDegrees(lon4);
return [lon1D, lat1D ,
lon2D, lat2D,
lon3D, lat3D,
lon4D, lat4D];
}

Perhaps for Cesium.RectangleGeometry rotation should be used something similar.

[lucash...@gmail.com]

See also this gif: https://twitter.com/lvWal/status/649896228545802240

[Hannah Pinkos]

Yes, the RectangleGeometry should look warped when rotated on the 3D globe.  If you change the SceneMode to 2D using the SceneModePicker, the rotated RectangleGeometry will look like a rectangle.  This is how it is meant to work.  

I understand that this is not what you expect for you use case, and that is why you should use the PolygonGeometry instead.

-Hannah

[lucash...@gmail.com]

Hi Hannah, I am very sorry but I am afraid your are really wrong here. I tried out the rectangle rotation with a rectangle of width 2 meters. You agree that at such small scales the earth curvature is fully negligible (Do you notice earths curvature when you look down the end of your desk)? Therefore, rotating this object in 2D projected or 3D ellipsoid should be identical. I really dont know how to explain this to you any better but the code you use for rectangle rotation is false.. thats unfornately a fact.. I really hope you guys understand what I mean and put this on the list to be fixed, because.. well.. currently your rectangle rotation is faulty.

And by the way, now we are only talking about the geometry rotation.. the second bug is that the material is lacking behind in the rotation.. see the gif and screenshot.

Best,
Lucas

[lucash...@gmail.com]

Dear Cesium guys,
I made a little video in an attempt to show the problems with rectangle rotation.

https://www.youtube.com/watch?v=46xek0WHZRk

- I made a blue square with Inkscape (png).
- I loaded this png as material over a Rectangle and added as primitive to the scene.
- The size of the rectangle is 200m, earths curvature is fully negligible at this scale, so funky haversine stuff where the sum of angles in a triangle is no longer 180Degrees etc is not significant.
- The lower left corner of the rectangle is taken from a mouseclick. The upper right corner is computed with a formula from here: http://www.movable-type.co.uk/scripts/latlong.html. Which shows the general formula for computing a second coordinate which lies at a distance and bearing from a first point.
- This results in a correctly drawn rectangle on the 3D globe. (rotation = 0)
- Upon rotation there can be noticed two things:
(1) The material is not rotated correctly. this seems to be the already filed here: https://github.com/AnalyticalGraphicsInc/cesium/issues/2737. (At right angles, 90 degrees etc this error doesnt occur by the way)
(2) The rotation of the rectangle is not computed properly, the square is skewed at nonzero rotations. This is visible at all rotations but most strongly at 80 or 110 degrees. At 90 Degrees the square is not skewed (angles are still 90Degrees) but the sides are no longer identical in length. (so its a rectangle instead of a square, aspectRatio != 1).
In 2D view the following can be added:
- At 0 Degrees rotation the square is displayed as a rectangle (aspectRatio != 1).
- Under rotation this rectangle is maintained. So although the initial rectangle under 0 rotation is not correct, when rotated this rectangle at least doesnt "change shape" as is the case for 3D.

Please let me know if I am missing something here.

Best,
Lucas

[lucash...@gmail.com]

I also tried to use PolygonGeometry instead. In that case Iam no longer using the rotation property but I compute the coordinates of the corners myself.

http://youtu.be/SEywSgEa1P8

This following is noticed:

(1) The geometry is now correctly rotated, the geometry is no longer warped, skewed etc.
(2) At some rotations the material is displayed correctly, at others not. Sometimes its black, sometimes the half of the geometry is shown correctly, the other half not (over the diagonal).
When switching to 2D mode:
(3) At 0 Degrees the geometry is not a square, aspectRatio != 1.
(4) With nonzero rotation: the geometry gets skewed and warped.

So appaerently: if I use RectangleGeometry then 3D rotation gets warped and skewed. But 2D view rotation works, although the coordinates of the rectangle does not get translated well into 2D mode, leading to a non-square geometry.
if I use PolygonGeometry, then 3D rotation works but 2D rotation gets warped and skewed..

What is happening here?

Best,
Lucas