CZML polygon with image material

CesiumJS
1

I’m trying to render a polygon using czml. I’m using an image as the material which is in ‘png’ format. The polygon and image are rotated. I’m seeing an artifact at the edge of the polygon, it looks as the the beginning of the polygon was clipped and placed at the end. It’s almost as if the image is shifted by a few pixels.

2

It sounds like the dimensions of the polygon don’t exactly match the dimensions of the image and the image is repeating. You should be able to change the repeating parameters in the image material property: https://cesium.com/docs/cesiumjs-ref-doc/ImageMaterialProperty.html.

Or use the stRotation property to rotate the image without rotating the polygon like in this Sandcastle (under the “Draw Textured Polygon” dropdown).

3

Shouldn’t the image stretch to fill the polygon?

4

I should probably add that this worked in Cesium 1.30, it didn’t work in 1.48 or the latest 1.68

5

I’ve included sample code I used in SandCastle to reproduce the problem. You can see the artifact in the upper right corner of the image.
var czml = [{
“id” : “document”,
“name” : “CZML Geometries: Polygon”,
“version” : “1.0”
}, {
“id” : “redPolygon”,
“name” : “Red polygon on surface”,
“polygon” : {
“positions” : {
“cartographicDegrees” : [
-115.0, 37.0, 0,
-115.0, 25.0, 0,
-102, 25.0, 0,
-102, 37.0, 0
]
},
“material” : {
“image” : {
“image” : ‘…/images/facility.gif’,
“transparent” : “true”
}
},
“stRotation” : 0.30943951023931954923084289221863
}
}];

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

6

An update.
I found that if I explicitly set ‘extrudedHeightReference’ to ‘NONE’ and ‘extrudedHeight’ to 0 the problem goes away, however now a rectangle flashes on the display prior to the image being displayed. The flash happens very quickly.

7

Thanks for the code sample reproducing it. I see your issue now. I put it in a Sandcastle here for easy testing (since I had to manually fix the quotes to run the code you posted. You can post it in a code block to avoid formatting errors).

I think the issue here is how the texture should handle when the image aspect ratio doesn’t fit the polygon surface’s aspect ratio. It doesn’t stretch - we do have a feature request for this here: https://github.com/CesiumGS/cesium/issues/4164. It may default to repeat, and setting the extrudedHeight somehow triggers a codepath that overwrites that.

I did try setting repeat: [0, 0] in the image material, but that didn’t seem to change it.

8

Thanks, appreciated.
Any idea why when I use extruded height the image flashes before appearing and, if so, how to remedy it?

9

The flashing happens because CesiumJS will display a white image until the image is loaded. The extruded height might just be causing a small delay. You could try preloading the image and passing in an image element, instead of a URL, like suggested here: Load image before show by imageMaterialProperty.

I think you’d need to do this with the Entity API, outside of the CZML, since you wouldn’t be able to embed a preloaded image in CZML.

10

Thanks, I’ll give it a shot