CesiumGS / CesiumGS/cesium

Image material flicker on Ellipsoid transform

Open
#9,601 2 comments 0 reactions 0 assignees View on GitHub
category - polygons/geometry type - bug
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.
![scrnli_08_06_2021_14-34-44](https://user-images.githubusercontent.com/36496669/121130700-bd6b9e00-c869-11eb-85e8-361506ff03d1.gif)
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.