Cesium:矩形实体上的自定义 material
Cesium: Custom material on a Rectangle Entity
我正在尝试添加一个实体,该实体具有多个不同的属性,例如 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 包装在自定义 Material属性 中以使其工作?
出于好奇,为什么 Material 和 Material属性 之间的功能差异?
p.s。 GroundPrimitive 对我不起作用,因为我需要支持的主要浏览器之一 (Safari) 报告 GroundPrimitives.isSupported = false
也张贴在这里https://groups.google.com/forum/#!topic/cesium-dev/1IPjHD7G_NA
汉娜在论坛上回答了这个问题。我会在下面复制她的回答,但首先我会添加我自己的注释,说明为什么 MaterialProperty
与 Material
不同。
Property
版本,与所有 Cesium Entity Properties 一样,旨在描述当 Cesium 动画时,某些事物的定义如何随时间变化。例如,MaterialProperty
可以在一个时间间隔内表示纯色,而在单独的时间间隔内表示条纹 material。实际的底层 Material
可能会被破坏,并因此在动画期间创建一个替换的。
对于你的情况,如果你真的需要一个定制的 Material,你目前最好的选择是避免实体 API 及其时间动态属性,而只使用图形基元直接用Material
class。但正如 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
}),
}
});
我正在尝试添加一个实体,该实体具有多个不同的属性,例如 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 包装在自定义 Material属性 中以使其工作?
出于好奇,为什么 Material 和 Material属性 之间的功能差异?
p.s。 GroundPrimitive 对我不起作用,因为我需要支持的主要浏览器之一 (Safari) 报告 GroundPrimitives.isSupported = false
也张贴在这里https://groups.google.com/forum/#!topic/cesium-dev/1IPjHD7G_NA
汉娜在论坛上回答了这个问题。我会在下面复制她的回答,但首先我会添加我自己的注释,说明为什么 MaterialProperty
与 Material
不同。
Property
版本,与所有 Cesium Entity Properties 一样,旨在描述当 Cesium 动画时,某些事物的定义如何随时间变化。例如,MaterialProperty
可以在一个时间间隔内表示纯色,而在单独的时间间隔内表示条纹 material。实际的底层 Material
可能会被破坏,并因此在动画期间创建一个替换的。
对于你的情况,如果你真的需要一个定制的 Material,你目前最好的选择是避免实体 API 及其时间动态属性,而只使用图形基元直接用Material
class。但正如 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
}),
}
});