how to clamp recatangle to terrain

[cody dooderson]

Is there a way to get a rectangle with a material to clamp to the terrain? I did a test and it appears like the rectangle is floating just below the surface of the terrain.

GroundPrimitives might be what I'm looking for, but they don't seem to support materials. Is that true?

My test function looks like this...after initializing a globe with the STK world terrain server for terrain. 

function applyImageMaterial(scene) {

    var rect = new Cesium.RectanglePrimitive({

        rectangle : Cesium.Rectangle.fromDegrees(-120.806675, 38.155737080, -120.44000, 38.37165943764687)

    })

   var rectangle = scene.primitives.add(rect);

   var material = new Cesium.Material({

        fabric : {

            type : 'Image',

            uniforms : {

                image : './img/owls.jpg'

            },

            components : { alpha:0.4},

        },

     });

    rectangle.material = material

}

The result looks weird. It's hard to tell from this picture but you can really notice, when you move around the, that the image is not clamped to the ground. 

[Hannah Pinkos]

Hello,

Currently, GroundPrimitive only supports a PerInstanceColorAppearance.  Here is an example of how to draw a green rectangle that is clamped to terrain:

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
scene.terrainProvider = new Cesium.CesiumTerrainProvider({
    url : '//assets.agi.com/stk-terrain/world',
    requestVertexNormals : true
});

scene.groundPrimitives.add(new Cesium.GroundPrimitive({
    geometryInstance : new Cesium.GeometryInstance({
        geometry : new Cesium.RectangleGeometry({
            rectangle : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0)
        }),
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 0.5))
        }
    })
}));

If you need to display an image, you can use a SingleTileImageryProvider.  That will clamp to terrain.

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

var layers = viewer.imageryLayers;
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../images/Cesium_Logo_overlay.png',
    rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

Best,

Hannah

[skirve...@qq.com]

var scene = viewer.scene;
var instanceRect = new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({

rectangle : Cesium.Rectangle.fromDegrees(-120.806675, 38.155737080, -120.44000, 38.37165943764687)

}),
id : 'my rectangle',
attributes : {
color : new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.5)
}
});
var primitive = new Cesium.GroundPrimitive({
geometryInstance : instanceRect
});
scene.primitives.add(primitive);