Cesium: Custom material on a Rectangle Entity

问题

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({ 
  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

Also posted here https://groups.google.com/forum/#!topic/cesium-dev/1IPjHD7G_NA

回答1:

Hannah answered this on the forums. I'll copy her answer here below, but first I'll add my own notes on why MaterialProperty is different from Material.

The Property version, like all Cesium Entity Properties, is meant to describe how the definition of something changes over time when Cesium animates. For example, a MaterialProperty could indicate a solid color during one time interval, and a striped material during a separate time interval. The actual underlying Material may be destroyed and a replacement one created during animation as a result of this.

For your case, if you really need a custom-built Material, your best option currently is to avoid the Entity API and its time-dynamic properties, and just use a graphics primitive with the Material class directly. But as Hannah points out, you don't need that for simple image alpha blending. Hannah writes:

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
        }),
    }
});

来源：https://stackoverflow.com/questions/34001821/cesium-custom-material-on-a-rectangle-entity

标签

cesium