Use a color gradient material for entities

Is there a way to use a color gradient as the material for an entity?

I see that canvases are allowed as input for the material, but is that referring to an html canvas element with the background specified as the color?

Either way, I cannot get the entity to display a color gradient. What I've been doing instead is drawing a series of the same shape, one atop another, and specifying the transparency and the color throughout the process. This achieves a gradient-like appearance, but it may be at the cost of performance. Here's my code for that:

function addEllipse (semiMinorAxis, semiMajorAxis, x, y, rotation) {
    var red, green, blue, opacity;
    var axisRatio;
    var shapeCount = semiMajorAxis;
    var minorAxisStep = semiMinorAxis / semiMajorAxis;
    var majorAxisStep = semiMajorAxis / semiMajorAxis;
    var newSemiMajorAxis = semiMajorAxis;
    var newSemiMinorAxis = semiMinorAxis;
    for(i = 0; i < shapeCount; i++) {
        axisRatio = newSemiMajorAxis / semiMajorAxis;
        if(axisRatio >= 0.75) {
      red = 0.03;
      green = 0.06;
      blue = 0.12;
      opacity = 1.8 / shapeCount;
  } else if(axisRatio >= 0.33) {
      red = 0.06;
      green = 0.12.
      blue = 0.06;
      opacity = 3.6 / shapeCount;
  } else {
      red = 0.12;
      green = 0;
      blue = 0;
      opacity = 5.4 / shapeCount;
  }
        var testMaterial = new Cesium.Color(red, green, blue, opacity);
        entities.add({
            position : Cesium.Cartesian3.fromDegrees(x, y),
      ellipse : {
          semiMinorAxis : newSemiMinorAxis,
          semiMajorAxis : newSemiMajorAxis,
          rotation : Cesium.Math.toRadians(rotation),
          outline : true,
          outlineColor : Cesium.Color.WHITE,
          outlineWidth : 4,
          material: testMaterial
      }

        });
        newSemiMinorAxis -= minorAxisStep;
        newSemiMajorAxis -= majorAxisStep;
    }
}

Hi there,

I think the most performant way to get a gradient material would be to use an image material. You can create a gradient image and apply it like a texture: http://cesiumjs.org/tutorials/Visualizing-Spatial-Data/

Hope that helps,

  • Rachel