Polygon entity with repeatitive background texture

CesiumJS
1

Hi, I want to have a polygon with a background of repetative textures instead of solid color/non-repeatitive texture. There are a lot of examples showing only one background image for polygons example, but what I want is a tiled background for the polygon.

For this purpose, I tried writing some custom material shaders but couldn’t achieve a result. The problem might be related to this answer: angular - Cesium material being ignored on polygon - Stack Overflow or it might not be possible to write CustomShaders or Materials for polygons.

This is my initial attempt.

Cesium.GeoJsonDataSource.load("./data/polygondata.geojson").then(function (dataSource) {
    viewer.dataSources.add(dataSource);
    var entities = dataSource.entities.values;
    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        var canvas = createDynamicTexture();
        var imageMaterial = new Cesium.ImageMaterialProperty({  // NEW IMAGE PROPERTY
            image: canvas,
            repeat: new Cesium.Cartesian2(5, 5),
         });
         entity.polygon.material = imageMaterial ;  // SETTING THE PROPERTY
    }
}

It works, but the image is repeated by 5x5 for each polygon independent of the polygon area, either small polygons or big polygons. The output looks like this:

image

This is what I want to achieve for all polygons combined together (ignore numbers being different or unordered)
image

I read some docs about CustomShader but couldn’t find a way to apply it to polygon entities, the example shows glTF and 3dtiles usages.

Probably most elegant solution will be tiling those backgrounds wrt screen coordinates, so that the numbers will be ordered whether the polygon is small or big. However first I need to find a way to apply a CustomShader (or another alternative) to polygons.

2

Hi @yunusyurtturk,

Yes, as you stated, the repeat for materials on polygons will resize the image to ensure the image is repeated 5x5 times in every polygon.

I like your thinking around an implementation along the lines of a CustomShader. For a polygon, you can accomplish something similar where you can write GLSL code directly for a custom appearance with a new Material and the Fabric Schema.

I hope that helps. Let me know if you’re still having trouble creating the intended effect.

Thanks,
Gabby

3

Hi @Gabby_Getz ,

(reader, please take my statements here with a grain of salt)
I think there is a distinction between primitive and entity API’s regarding materials. I’m not able to apply any Cesium.Material, either fabric or directly, to polygon “entities”. Setting Cesium.MaterialProperty instead of Cesium.Material works but available MaterialProperties were limited in my case.

On StackOverflow, I found this answer that guided me in the right direction: cesiumjs - How to use Material.fromType in Cesium - Stack Overflow

If whats written in the SO answer is correct, then I kindly suggest to update fabric-related documentation to emphasize that fabric/Cesium.Material is not applicable to entity-type
polygons. The document contains a lot of code samples like the one below, which made me think I could apply Cesium.Material to any polygons.

polygon.material = new Cesium.Material({
  fabric : {
    type : 'SpecularMap',
    uniforms : {
      image : 'specular.png',
      channel : 'a'
    }
  }
});

Here is the good part, I found a way to apply custom fabric materials to entities, thanks to @Matt_Amato

And some screenshots:
image

image

4

Thanks for the update @yunusyurtturk! It looks like you’ve got this working, correct?

Yes, custom materials are not directly supported through the Entity API. Typically for advanced visualizations like this, we recommend using the Primitive API instead.

I’m glad you found a workaround to use it with Entities! I would just point out that this is using a private API, which may be subject to change without advanced notice (Though this is quite a stable part of the API, so I would not expect any changes in the near future).

1 Like
5

Yes, it works :+1: