Custom material on a Rectangle Entity

CesiumJS
1

I am trying to add an Entity whose has several varying properties such as material (alpha, mostly) and rotation. RectangleGraphics has rotation covered, and works when I set the material to represent a texture.

    viewer.entities.add({
      name: 'Site Layer',
      rectangle: {
        coordinates: rectangle,
        material: 'Image.jpg',
        rotation: Cesium.Math.toRadians(13)
      }
    });

However, when I tried to implement transparency by using a custom Material (using https://github.com/AnalyticalGraphicsInc/cesium/issues/2484) it shows up as a white texture instead of the desired result ... something like:

    material = new Cesium.Material({
        fabric : {
            type : 'Color',
                uniforms : {
                    image : 'Image.jpg',
                    alpha : 0.5
                }
                 components : {
                     diffuse : 'texture2D(image, materialInput.st).rgb',
                     alpha : 'texture2D(image, materialInput.st).a * alpha'
    }
            }
        }
    );
    viewer.entities.add({
      name: 'Site Layer',
      rectangle: {
        coordinates: rectangle,
        material: material,
        rotation: Cesium.Math.toRadians(13)
      }
    });

Reading the docs, the material in rectangle seems to be a Cesium.MaterialProperty rather than Cesium.Material ... does that mean I can't simply assign a Material to a Rectangle? And if not, can I somehow wrap the Material inside a custom MaterialProperty to make it work?

And for curiosity, why is the functional difference between Material and MaterialProperty?

p.s. GroundPrimitive doesn't work for me because one of the main browsers I need to support (Safari) reports GroundPrimitives.isSupported = false

2

Hello,

This should be fixed in the upcoming release (1.16)

You can use this code to make a translucent image:

var viewer = new Cesium.Viewer(‘cesiumContainer’);
viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-125,30,-110,40),
material: new Cesium.ImageMaterialProperty({
image: ‘…/images/Cesium_Logo_Color.jpg’,
alpha: 0.5
}),
}
});

``

Regarding the GroundPrimitive, Safari doesn’t have great WebGL support (at least not as good as Chrome and Firefox), so some of our more advanced features like the GroundPrimitive unfortunately won’t work until they make advances to the browser.

Best,

Hannah

3

Thanks Hannah. Just updated to 1.16 and it works as advertised, great stuff!

For future reference, I'd still like to know how I can attach a custom material to an Entity so that I can mess with things like specular maps / alpha maps of an Entity if I want to.

Would that be done by creating a custom MaterialProperty? Looking at the source I'm slightly confused how that's done, so some sample code would be lovely.

4

You would have to create a custom MaterialProperty. Entities use properties to create a higher level interface that handles changes automatically so the user doesn’t have to delete and re-add geometry when things change.

I’m not incredibly familiar with this code, but this function is responsible for creating a Material from the MaterialProperty:

To create a custom material for your new MaterialProperty to use, I think you just have to write a shader.

I think the function Material.fromType(‘myType’, uniforms) creates a material that uses myTypeMaterial.glsl.

Hopefully someone else can elaborate on this if I’m missing something or got something wrong. haha.

Best,

Hannah