Image material flicker on Ellipsoid transform
- Dominant language
- JavaScript
- Stars
- 15.7k
- Forks
- 3.9k
- Avg merge
- 4d 6h
- Merged PRs (30d)
- 34
Description
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:
```javascript
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
Contributor guide
Research direction
Start with the Sandcastle example in the issue and reproduce the image-material behavior while transforming the red and yellow ellipsoids, comparing them with the blue box. Trace the ellipsoid rendering path and its orientation updates; done means the texture remains displayed without flickering during both callback-driven and interval-driven transforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100