Image material flicker on Ellipsoid transform

[dtcwee]

Transforming an ellipsoid with an image material texture causes that texture to not display or, at slower transform rates, flicker.

Note:

1. This issue does not affect boxes, and presumably does not affect simple geometries.
2. The red sphere is animated by setInterval. Flicker is visible at each transform.
3. The yellow ellipsoid actually has the same image material as the red ellipsoid. It is animated by a callback similar the blue box's. Its image material does not display at all.

I'm guessing that applying texture to ellipsoid is slow enough to be noticeable, or easily overridden by the next transform.

Sandcastle example based on Spheres and Ellipsoids:

var viewer = new Cesium.Viewer('cesiumContainer', {
      shouldAnimate: true,
    });
var bluePosition = Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0);
var redPosition = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0);
var yellowPosition = Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0);

function computeOrientation(position) {
      var timestamp = Cesium.JulianDate.toDate(viewer.clock.currentTime).getTime();
      var heading = Cesium.Math.toRadians(timestamp/100);
      var pitch = Cesium.Math.toRadians(0);
      var roll = 0;
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr); 
      return orientation;
}

var blueBox = viewer.entities.add({
  name: "Blue box",
  position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  orientation: new Cesium.CallbackProperty(function() {return computeOrientation(bluePosition);}, false),
  box: {
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    material: new Cesium.ImageMaterialProperty({
          image: "../images/Cesium_Logo_Color.jpg",
          color: Cesium.Color.BLUE,
          transparent: false,
    }),
  },
});



var redSphere = viewer.entities.add({
  name: "Red sphere with black outline",
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
  orientation: computeOrientation(redPosition),
  ellipsoid: {
    radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
    material: new Cesium.ImageMaterialProperty({
          image: "../images/Cesium_Logo_Color.jpg",
          color: Cesium.Color.RED.withAlpha(0.75),
          transparent: false,
    }),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

    function setOrientation() {
     redSphere.orientation = computeOrientation(redPosition);     
    }
    setInterval(setOrientation, 500);

var outlineOnly = viewer.entities.add({
  name: "Yellow ellipsoid outline",
  position: yellowPosition,
  orientation: new Cesium.CallbackProperty(function() {return computeOrientation(yellowPosition);}, false),
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
    material: new Cesium.ImageMaterialProperty({
          image: "../images/Cesium_Logo_Color.jpg",
          color: Cesium.Color.YELLOW.withAlpha(0.5),
          transparent: false,
    }),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
    slicePartitions: 24,
    stackPartitions: 36,
  },
});

viewer.zoomTo(viewer.entities);

Browser: Firefox 89, Chrome 91

Operating System: Win 10 64 bit

[ebogo1]

Thanks @dtcwee, this definitely looks like a bug. I can replicate the behavior on macOS as well.

For convenience, here's the above code in a Sandcastle.

[ggetz]

Also reported in #11123.