Rectangles and their image materials are distorted when rotated

CesiumJS
1

We have noticed that rectangles are drawn differently between the 2D projections (Geographic and Web Mercator), also they are different in 3D.

Notice in the images below how the aspect ratios and shapes of the rectangles are altered when rotated:

2D, Web Mercator:

image
image474×676 58.9 KB

3D:

image
image474×676 57.8 KB

Whereas this is not happening in 2D, with a Geographic projection:

2D, Geographic:

image
image474×676 60.6 KB

However, the problem with the Geographic projection is that this is where the map is more distorted: notice the white building in the background is skewed, and the map is even more distorted near the poles.

Is there a way to draw a Rectangle in 2D Web Mercator or 3D mode that is not skewed when rotated?

Here is a Sandcastle that demonstrates what’s happening.

2

The difference you’re seeing between web mercator and geographic is due to the distortion caused by web mercator using a sphere instead of an ellipsoid. The 3D difference is caused by the perspective projection.

I’ve modified the Sandcastle to center the image on 0, 0 to minimize the 2D distortion. I was then able to take snapshots, crop, and align subimages to compare which showed much less distortion at the equator.

const viewerWM = new Cesium.Viewer("wmContainer", {
  sceneMode: Cesium.SceneMode.SCENE2D,
  mapProjection: new Cesium.WebMercatorProjection()
});
const viewerG = new Cesium.Viewer("gContainer", {
  sceneMode: Cesium.SceneMode.SCENE2D
});
const viewer3D = new Cesium.Viewer("3dContainer", {
  sceneMode: Cesium.SceneMode.SCENE3D
});

const westRad = -1.5131722855601586;
const southRad = 0.6062598514783867;
const eastRad = -1.513140827552303;
const northRad = 0.6062823187875973;
const deltaLonOverTwo = (eastRad - westRad) / 2.0;
const deltaLatOverTwo = (northRad - southRad) / 2.0;

var centerLonRad, centerLatRad;
var rectangle;

if (1 === 1) {
  centerLonRad = westRad + deltaLonOverTwo;
  centerLatRad = southRad + deltaLatOverTwo;
  rectangle = Cesium.Rectangle.fromRadians(
    westRad, southRad, eastRad, northRad);
} else {
  centerLonRad = 0.0;
  centerLatRad = 0.0;
  rectangle = Cesium.Rectangle.fromRadians(
    centerLonRad - deltaLonOverTwo, centerLatRad - deltaLatOverTwo,
    centerLonRad + deltaLonOverTwo, centerLatRad + deltaLatOverTwo
  );
}

const rotation = Cesium.Math.toRadians(45);

viewerWM.entities.add({
  name: "Rotating rectangle with rotating texture coordinate",
  rectangle: {
    coordinates: rectangle,
    material: "../images/Cesium_Logo_Color.jpg",
    rotation: rotation,
    stRotation: rotation,
    //classificationType: Cesium.ClassificationType.TERRAIN,
  },
});

viewerG.entities.add({
  name: "Rotating rectangle with rotating texture coordinate",
  rectangle: {
    coordinates: rectangle,
    material: "../images/Cesium_Logo_Color.jpg",
    rotation: rotation,
    stRotation: rotation,
    //classificationType: Cesium.ClassificationType.TERRAIN,
  },
});

viewer3D.entities.add({
  name: "Rotating rectangle with rotating texture coordinate",
  rectangle: {
    coordinates: rectangle,
    material: "../images/Cesium_Logo_Color.jpg",
    rotation: rotation,
    stRotation: rotation,
    //classificationType: Cesium.ClassificationType.TERRAIN,
  },
});

const center = Cesium.Cartesian3.fromRadians(centerLonRad, centerLatRad);

//viewerWM.zoomTo(viewerWM.entities)
//viewerG.zoomTo(viewerG.entities)

//viewer3D.zoomTo(viewer3D.entities)
viewerWM.camera.lookAt(center, new Cesium.Cartesian3(0.0, 0, 890.0));
viewerG.camera.lookAt(center, new Cesium.Cartesian3(0.0, 0, 890.0));
viewer3D.camera.lookAt(center, new Cesium.Cartesian3(0.0, 0, 890.0));

Here are cropped images of the web mercator differences at the different latitudes:

image
image

Hope that helps.

Scott

3

Thanks for the reply.

So basically you’re saying that near the equator the rectangles are less distorted. Do you know if there is a way to get the same shape in 2D regardless of the position?

In 3D you mention is due to the perspective projection. Is it possible to control this projection so the rectangle looks the same way as in the equator? I am thinking of maybe controlling the camera location and where it’s looking at, but I’m not sure.