铯:矩形实体上的自定义 Material

Question

我正在尝试添加一个具有多种不同属性的实体，例如 Material (主要是 alpha)和旋转。 RectangleGraphics 覆盖了旋转，并且在我设置 Material 以表示纹理时起作用。

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

但是，当我尝试通过使用自定义 Material (使用 https://github.com/AnalyticalGraphicsInc/cesium/issues/2484 )来实现透明度时，它显示为白色纹理而不是所需的结果......类似于:

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

阅读文档，矩形中的 Material 似乎是 Cesium.MaterialProperty 而不是 Cesium.Material ......这是否意味着我不能简单地将 Material 分配给矩形？如果没有，我可以以某种方式将 Material 包裹在自定义 MaterialProperty 中以使其工作吗？

出于好奇，为什么 Material 和 MaterialProperty 之间的功能不同？

附言GroundPrimitive 对我不起作用，因为我需要支持的主要浏览器之一 (Safari) 报告 GroundPrimitives.isSupported = false

也贴在这里 https://groups.google.com/forum/#!topic/cesium-dev/1IPjHD7G_NA

Answer 1

汉娜在论坛上回答了这个问题。我将在下面复制她的回答，但首先我会添加我自己的注释，说明为什么 MaterialProperty不同于 Material .
Property版本，像所有 Cesium Entity Properties , 旨在描述当 Cesium 动画时某物的定义如何随时间变化。例如，MaterialProperty可以在一个时间间隔内表示纯色，在单独的时间间隔内表示条纹 Material 。实际标的Material因此，可能会被破坏，并在动画期间创建一个替代品。

对于你的情况，如果你真的需要一个定制的 Material ，你目前最好的选择是避免实体 API 及其时间动态属性，只使用带有 Material 的图形基元。直接上课。但正如 Hannah 指出的那样，对于简单的图像 alpha 混合，您不需要它。汉娜写道:

这应该在即将发布的版本 (1.16) 中修复
您可以使用此代码制作半透明图像:

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