How do you lay a SlopeRamp onto a GroundPrimitive?

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

In the Globe Materials example in Sandcastle, you can color the terrain with a slopeRamp. What I want to do is color a GroundPrimitive with that slopeRamp.

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

Here’s code I added to Globe Materials to make and add the ground primitive:

var rectangleInstance = new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(-110.875092, 43.5769444, -110.822037, 43.6129629)
id : ‘rectangle’,
attributes : {
color : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)

var primitive = new Cesium.GroundPrimitive({
geometryInstances : rectangleInstance,
appearance : new Cesium.MaterialAppearance ({
material : Cesium.Material.fromType(‘SlopeRamp’)


Next, to get the slopeRamp shading onto it, I set the primitive’s image to the slopeRamp:

primitive.appearance.material.uniforms.image = getColorRamp(selectedShading);

globe.material = material;


Just before the globe.material line in the updateMaterial function. But it doesn’t have the slope color of the underlying elevation, it’s just the color of the 0th element in the slope ramp array. I assume this means it’s coloring the GroundPrimitive before it’s draped onto the surface.

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

I want to be able to highlight the slope of a defined area. Currently I only know how to show the slope over the entire globe, but I want to be able to either mask it off where I don’t want it, or to only show it where I do want it.

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

I’m working on Windows 10, Cesium 1.53, and Chrome 71.0.3578.98.

I know this is related to this thread (linking for future context) which I haven’t had a chance to look into yet. But I did want to say that is that I believe the reason this doesn’t work is that slope is a variable created in the vertex shader of the Globe (see

I also answered this here:

I think you’d basically need to write your own Appearance and compute the slope there. Given what you’re trying to do it might be easier to try the masking approach described before. There’s not a lot documented on this in CesiumJS right now but this is the most recent relevant discussion I can think of:

Hope this at least points you in the right direction.

Thank you, I kind of suspected that would be the case. The question by GHT is a lot like what I want to do, and the other one by jay.h might help too. I had seen the Geometry and Appearance page before and thought “Man! The EllipsoidSurfaceAppearance is almost there, if only it were TerrainSurfaceAppearance!” This will give me a direction to go in. I’m sure I’ll have more questions after I study up on it and start giving it a shot.