Tiles as a layer

1. A concise explanation of the problem you’re experiencing.

Hi,

I create a tile. For instance:

var instance = new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
});

var ovcPrimitive =new Cesium.Primitive({
geometryInstances : instance,
appearance : new Cesium.EllipsoidSurfaceAppearance({
})
});

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(???);//???

I want to change the alpha of my instance for fade in and fade out.

My question is how my instance can be considered as a layer? I mean how I can pass my instance to layers.addImageryProvider.

Thanks

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you’re using, your operating system and browser.

Hey Maryam,

If you’re just trying to set the alpha, you can do that in the material(https://cesiumjs.org/Cesium/Build/Documentation/Material.html) for the EllipsoidSurfaceAppearance.

You can also use an image as an Imagery Layer with the SingleTileImageryProvider (https://cesiumjs.org/Cesium/Build/Documentation/SingleTileImageryProvider.html).

If all you want is to fade in/out a polygon, an easier way to do that would be just using an entity:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var color = new Cesium.Color(1.0, 0.0, 0.0, 1.0);

var counter = 0;

var redPolygon = viewer.entities.add({

name : ‘Red polygon on surface’,

id: ‘1’,

polygon : {

hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,

-115.0, 32.0,

-107.0, 33.0,

-102.0, 31.0,

-102.0, 35.0]),

material : new Cesium.ColorMaterialProperty(

new Cesium.CallbackProperty(function(time, result) {

color.alpha = (Math.cos(counter) + 1) * 0.5;

counter += 0.1;

return color;

}, false))

}

});

viewer.zoomTo(viewer.entities);

``

Here’s a running example.

Thanks Omar. Sorry I am new in this area and still I have a problem.
I build a set of tiles (cube) then I want to fade in and fade out tiles.
What I do is
var ovcPrimitive = new Cesium.Primitive({
geometryInstances: ovcInstances,
asynchronous: false,
vertexCacheOptimize: true,
allowPicking: false,
appearance: new Cesium.PerInstanceColorAppearance({
closed: true,
translucent: false,
}),
material : new Cesium.ColorMaterialProperty(
new Cesium.CallbackProperty(function(time, result) {
color.alpha =(Math.cos(counter) + 1) * 0.5;
counter += 0.1;
return color;
}, false))
});

that.primitive.add(ovcPrimitive);
Cesium.when(that.primitive.readyPromise).then(undisplayFunc);
viewer.scene.primitives.add(that.primitive);

But nothing happen. Thank you so much

Actually, I think I know what the problem is. What I am doing is building a set of tiles. Each tile can have some subsets. I wanna fade in and fade out tiles (or instances in the fades). If I want to apply

material : new Cesium.ColorMaterialProperty(
new Cesium.CallbackProperty(function(time, result) {
color.alpha =(Math.cos(counter) + 1) * 0.5;
counter += 0.1;
return color;
}, false))
});

I need to apply the above code for each tile. It means there should be something like Cesium.ColorMaterialProperty but it does not have any material attribute. I would appreciate if you can help me.

Regards,

Maryam

I’m not sure exactly what you mean. The Appearance does have a material property that you can supply.

Can you share a Sandcastle example of how your code works so far?

Thanks Omar .
In the PerInstanceColorAppearance, there is no option to change color (or alpha per instance). The all provided options are flat, faceForward,
translucent, closed, vertexShaderSource, fragmentShaderSource, renderState.
https://cesiumjs.org/Cesium/Build/Documentation/PerInstanceColorAppearance.html#renderState

Could you please give me a simple code how you change alpha in perinstanceColotApperance.

In
my case, I have an array of GeometryInstance (geometry, color, …) that makes a tile. I wanna change the alpha of each instance (that can different colors) frequently (fade in and fade out).

Thanks

Maryam

In the following example, two GeometryInstancs are built and shown on the screen:

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var counter =0;

var instance = new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes : {
color : new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 1)
},

});

var anotherInstance = new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes : {
color : new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0,1)
}
});

scene.primitives.add(new Cesium.Primitive({
geometryInstances : [instance, anotherInstance],
appearance : new Cesium.PerInstanceColorAppearance()

}));

My problem is if the following part for changing the alpha. I mean using Cesium.Appearance and material are correct?

var arrowMaterialAppearance = new Cesium.Appearance({
material : new Cesium.ColorMaterialProperty({
color : new Cesium.CallbackProperty(

__function (time, result){
return Cesium.Color.fromAlpha(
Cesium.Color.RED,
(Math.cos(100) + 1) * 0.5,
result);

                    }, false)
                      
         }),
 });__

Also, where should I put it? I am just confused because in GeometryInstance there is no option for appearance (or something else that the alpha can be changed) and in Cesium.Primitivewe use
PerInstanceColorAppearanc :((((

I really appreciate you if you can help me. I spent lots of time and could not fix it (new to cesium)

The color is stored as a vertex attribute for each instance. So to change it, you have to change it on the instance, like in Hannah’s example linked to earlier. So this is what an example would look like. The blue rectangle fades in and out.

Thank you so much. It was really helpful. I have a error. When I try to use getGeometryInstanceAttributes, it gives me the error that "
getGeometryInstanceAttributes is not a function

"

This a part of the code:

var load = function(viewer, callback) {

var cubes;
req.onload = function(evt) {

that.primitive = …
this.primitive = viewer.scene.primitives.add(that.primitive);
callback(viewer, this.primitive
, this.number_cube);
}

function callBackFunc (viewer, myPrimitive, cubes) {

var i = 0;

var color = myPrimitive.getGeometryInstanceAttributes(i).color; // ERROR: myPrimitive.getGeometryInstanceAttributes is not a function
color[3] = (Math.cos(counter) * 0.5 + 0.5) * 255;
myPrimitive.getGeometryInstanceAttributes(i).color = color;
});

}

I call the "
getGeometryInstanceAttributes" over the variable containing
viewer.scene.primitives.add(that.primitive). But still gives me an error.

I really appreciate your help.

Maryam

Sorry, I want to correct something. Ignore the previous post of mine. This is my issue

Thank you so much. It was really helpful. I have a error. When I try to use getGeometryInstanceAttributes, it gives me the error that "
getGeometryInstanceAttributes is not a function

"

This a part of the code:

var load = function(viewer, callback) {

var cubes;
req.onload = function(evt) {

that.primitive = …
viewer.scene.primitives.add(that.primitive);
callback(viewer,

that.primitive
, this.number_cube);
}

function callBackFunc (viewer, myPrimitive, cubes) {

var i = 0;

var color = myPrimitive.getGeometryInstanceAttributes(i).color; // ERROR: myPrimitive.getGeometryInstanceAttributes is not a function
color[3] = (Math.cos(counter) * 0.5 + 0.5) * 255;
myPrimitive.getGeometryInstanceAttributes(i).color = color;
});

}

I call the "
getGeometryInstanceAttributes" over the variable containing
viewer.scene.primitives.add(that.primitive). But still gives me an error.

I really appreciate your help.

If anyone else is following this thread, see the answer here: https://groups.google.com/d/msg/cesium-dev/93GZVBcmlsk/-o9Tj1zZCgAJ