Polygon image material

We are working on a project displaying aerial/satellite imagery on the ground.

To display the image we apply ImageMaterialProperty to polygons loaded from GeoJSON.

what we are seeing is some misalignment of image and footprint. In some cases the image gets truncated, while in others there is a gap.

**Is there detailed description of how **ImageMaterialProperty is applied to a polygon?

Thank you

Specifically the most concerning is the fact of different behavior in 3D and 2/2.5D

It can be seen on western corner of image at:

Attached is the corner zoomed in.

How can it be fixed? Although none of the representations is pixel-perfect we would prefer the one if 3D - the image covers the footprint

Thank you

One thing is that you’re setting the arcType on one of the polygons but not the other. I’d make sure both have the same properties to make sure they align.

I actually wasn’t able to easily reproduce this, since the image’s corners contain transparency, so it’s hard to see where it actually ends. If you replace the image you have with just a solid white image it should be easier to see, like if you set img2Url to be:

img2Url = ‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wwIDycuUQ/+9QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12P8//8/AxJgYkAFpPIB6vYDBz/LmVgAAAAASUVORK5CYII=’;

``

Thank you Omar

Unfortunately arc type does not affect the view.

Let me explain detail of what are we doing:

We have georeferenced image that need to be placed of the correct polygon on map. We are trying to achieve it so image completelt covers footprint polygon and is not truncated - ie ideal match

From our observation it seems that Cesium applies image material to MBR of the polygon and mask it by the polygon so no image is displayed outside.

So we reproject our georeferenced image (https://public-test-bucket-123456.s3.amazonaws.com/grid-gcp-2.tif) with corners matching footprint polygon to epsg 4326 (WGS84) (

https://public-test-bucket-123456.s3.amazonaws.com/grid-2-warped.tif reprojected using gdalwarp) and use the reprojected image as Image material (after converting to PNG

https://public-test-bucket-123456.s3.amazonaws.com/grid-2-warped.png)

Unfortunately the image still does not match, and the relative positioning of image and footprint seems to be different in 2D and 3D

Any suggestion on how to improve the match? Any description of math involved in applying image material?

Thank you very much,

Akbar

Do you have a georeferenced GeoTIFF version of your image? Usually the easiest way to get it in the correct location would be uploading it to Cesium ion (https://cesium.com/ion/) which will automatically reproject and place it in the correct location. Can you try that just for comparison and let me know if it produces the correct result?

Thank you Omar,

Yes the image at https://public-test-bucket-123456.s3.amazonaws.com/grid-gcp-2.tif is georeferenced using GCP of all 4 corners. Unfortunately Cesium ION could not process it (Error: Missing or invalid spatial reference system
File: grid-gcp-2.tif) - seems it does not support that type of referencing.

The I tried to process https://public-test-bucket-123456.s3.amazonaws.com/grid-2-warped.tif which is the same file reprojected to EPSG:4326. It converted it to an WMTS layer which is slightly larger than the actual footprint.

Although that would be acceptable in our case, it requires a serious architectural change.

Is it possible to achieve similar result without using image as WMTS layer?

Thank you,

Akbar

The uploaded TIFF does need to be a GeoTIFF with a defined CRS for ion to correctly reproject it and place it on the globe.

Would you be able to share a screenshot or ideally a Sandcastle of the WMTS that’s closer to correct? That’ll help provide a reference for us when debugging here. You can email support@cesium.com with a reference to this thread if you have data you can’t share publicly.

Here is updated Sandcstle with the WMTS layer included (we don’t have other resources, so my key is included as well)

an issue using WMTS layer is that seems we cannot control its ordering (also posted at https://groups.google.com/forum/?hl=en#!topic/cesium-dev/d4whtBwXDvg)

Thank you

Is it possible to scale the image? I would think increasing the size of image would make it fill the polygon (at the expense of precision)

Thanks for putting together that code example. I can see the difference between the WMTS layer and the image. I can see that neither seem to be quite “correct” relative to the polygon. I do believe that the reason the image doesn’t fit the polygon in this case is likely in part due to the 1 pixel of transparency it has at one end that grows when stretched here.

For scaling, CesiumJS doesn’t have a way to scale the polygon directly, but you could use TurfJS to scale the polygon coordinates (see https://turfjs.org/docs/#transformScale) before creating the polygon. So you’d have the unscaled footprint, and when creating the polygon for the image, scale that up a little bit.