Tutorial: How to set the color of an ellipsoid in a CZML document?

Question

How to specify the color of an ellipsoid in CZML?When I add an entity to the viewer in JavaScript, the following code snippet works:

let redEllipsoid = viewer.entities.add({
  "name": "red ellipsoid",
  "position": Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  "ellipsoid": {
    "radii": new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
    "material": Cesium.Color.RED.withAlpha(0.5),
    "outline": true,
    "outlineColor": Cesium.Color.BLACK
  }
});

This code snippet also works:

let redEllipsoid = viewer.entities.add({
  "name": "red ellipsoid",
  "position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  "ellipsoid": {
    "radii": {
      x: 200000,
      y: 200000,
      z: 300000
    },
    "material": Cesium.Color.RED.withAlpha(0.5),
    "outline": true,
    "outlineColor": {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    }
  }
});

But this code snippet does not work (returns the default white ellipsoid):

let redEllipsoid = viewer.entities.add({
  "name": "red ellipsoid",
  "position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  "ellipsoid": {
    "radii": {
      x: 200000,
      y: 200000,
      z: 300000
    },
    "material": {
      "solidColor": {
        "color": {
          "rgba": [1, 0, 0, 0.5]
        }
      }
    },
    "outline": true,
    "outlineColor": {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    }
  }
});

This code snippet also doesn’t work (returns the default white ellipsoid):

let redEllipsoid = viewer.entities.add({
  "name": "red ellipsoid",
  "position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  "ellipsoid": {
    "radii": {
      x: 200000,
      y: 200000,
      z: 300000
    },
    "material": {
      "color": {
        red: 1,
        green: 0,
        blue: 0,
        alpha: 0.5
      }
    },
    "outline": true,
    "outlineColor": {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    }
  }
});

This code snippet also doesn’t work (returns the default white ellipsoid):

let redEllipsoid = viewer.entities.add({
  "name": "red ellipsoid",
  "position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  "ellipsoid": {
    "radii": {
      x: 200000,
      y: 200000,
      z: 300000
    },
    "material": {
      red: 1,
      green: 0,
      blue: 0,
      alpha: 0.5
    },
    "outline": true,
    "outlineColor": {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    }
  }
});

I'm confused because typing Cesium.Color.RED.withAlpha(0.5) into the console after Cesium is loaded returns ne {red: 1, green: 0, blue: 0, alpha: 0.5}. One would expect that the object specified by a given static member would work...

This is the type of "material". Since it's an abstract class with no properties, am I unable to specify it via CZML? It would be very cumbersome if setting the color of the ellipsoid could only be done through post-processing, since I'd like to be able to do a lot of the processing offline and then just load the CZML in the browser.

EDIT: CZML documentation is difficult to find and navigate, but the straightforward answers are all there:

See the CZML documentation's Ellipsoid page, Material page, SolidColorMaterial page, Color ; page, and optionally the RgbaValue page. It's formatted as a GitHub wiki, with a page for each project, and unfortunately most of the documentation projects are hidden until you click "Show 128 more pages".

Answer 1

The problem is that EntityCollection.add(...)accepted Entity.ConstructorOptions are similar to CZML in some aspects, but have some obvious differences. Your first few working code snippets in the question use ConstructorOptions correctly, but they don't handle color and position exactly like CZML.

To convert the code to the original CZML format, you can use CzmlDataSource.load(...) on the CZML content. For example: Sandcastle real-time demonstration

const czml = [
  {
    id: "document",
    version: "1.0",
  },
  {
    "id": "red ellipsoid",
    "name": "red ellipsoid",
    "position": {
      "cartesian": [
        -2083516.9683773473,
        -4679655.730028949,
        4270821.855106338
      ]
    },
    "ellipsoid": {
      "radii": {
        "cartesian": [
          200000,
          200000,
          300000
        ]
      },
      "material": {
        "solidColor": {
          "color": {
            "rgba": [255, 0, 0, 128]
          }
        }
      },
      "outline": true,
      "outlineColor": {
        red: 0,
        green: 0,
        blue: 0,
        alpha: 1
      }
    }    
  },
];

const viewer = new Cesium.Viewer("cesiumContainer");
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);