Cesium Rectangle Primitive With Material?

Question

I was looking at the sandcastle example for applying material graphics to a rectangle...

var viewer = new Cesium.Viewer('cesiumContainer');

var redRectangle = viewer.entities.add({
    name : 'Red translucent rectangle',
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
        material : Cesium.Color.RED.withAlpha(0.5)
    }
});

Can someone provide an example of how to do this with the primitives API?

Answer 1

There's an extensive demo of this in the Sandcastle Materials Example. Here's a version that has been limited to just the one material:

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var rectangle = scene.primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.RectangleGeometry({
            rectangle : Cesium.Rectangle.fromDegrees(-120.0, 20.0, -60.0, 40.0),
            vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
        })
    }),
    appearance : new Cesium.EllipsoidSurfaceAppearance({
        aboveGround : false,
        material: Cesium.Material.fromType('Color')
    })
}));

// Default color is translucent red.
// We change to translucent yellow here as an example:
rectangle.appearance.material.uniforms.color = Cesium.Color.YELLOW.withAlpha(0.5);