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;
}
}