Flickering Black Lines

CesiumJS
1

Hi all,

When a camera FlyTo is setup to fly a real short distance (i.e. ‘1 pixel’), we get a constant flickering of a black line in the center of the screen (reproduction case is below). This line can be horizontal or vertical, or both, depending on the coordinates.

The coordinates are related to the borders of the tile. We only found cases when the tile line is exactly in the center of the screen.

We did experiment with:

  1. Different locations (very limited to locations)

  2. Different heights (500 m, 1000m, 5000m). It is easier to get a reproduction case on 500m in comparison to 5000m, slightly different behaviour.

  3. Different map providers (Bing, ESRI)

  4. Different browsers (Edge, Internet Explorer 11, Chrome, all compatible with below code example, slightly different behaviour)

  5. Different hardware (4 laptops, 3 desktops, all compatible with below code example, slightly different behaviour)

  6. Different Screen Resolutions (1920 x 1080, 3840 x 2160, all compatible with below code example, slightly different behaviour)

The different behaviours are related to:

  1. The length of the black line

  2. The width of the black line (not completely verifyable, but sometimes it seems rather 2-3 pixels, instead of 1).

  3. The number of flickers (1-3).

We did not experiment with:

  1. other positions as North-up.

  2. Specific camera movements

Does anyone have a solution for this behaviour?

With regards,

Jeroen van Onzen

Steps to reproduce:

Copy the following code in a sand castle project:

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var clock = viewer.clock;

function FlyTo() {
viewer.camera.flyTo({
duration: 10,
complete: function() { FlyTo2(); },
destination : Cesium.Cartesian3.fromDegrees(0,14.7975, 500.0)});
// destination : Cesium.Cartesian3.fromDegrees(0, 14.7975, 5000.0)});
}

function FlyTo2() {
viewer.camera.flyTo({
duration: 10,
complete: function() { alert(‘End’); },
destination : Cesium.Cartesian3.fromDegrees(0.00001, 14.7975, 500.0)});
// destination : Cesium.Cartesian3.fromDegrees(0.0001, 14.7975, 5000.0)});
}

FlyTo();

``

2

Hello Jeroen,

Thanks for providing the code example! I did see the flickering a little bit, it wasn’t very noticeable on my machine though.

However, I think it may be related to this issue with terrain cracking: https://github.com/AnalyticalGraphicsInc/cesium/issues/3710

I’ve posted a link to your forum post in that issue so we can let you know if we have any updates.

Best,

Hannah

3

Hi Hannah,

thanks for your reply. Not entirely sure if it is completely related to terrain cracking as the crack seems wider then 1 pixel in certain cases.

With regards,

Jeroen van Onzen

4

Hannah,

is it possible to detect if the second destination is very close (in height / lon and lat) from the first destination? If so, we are able to shorten the duration to 0 seconds for those cases, and the problem is solved for our customers.

In our use-case: we call FlyTo (with those 3 parameters) from several ‘buttons’. We are not able to remove the call, and persons are able to interrupt One FlyTo with another button press.

Thanks in advance,

Jeroen

5

This problem is not related to MapProxy as MapProxy is not used in our reproduction.

6

It looks like this issue is fixed now with https://github.com/AnalyticalGraphicsInc/cesium/pull/5021 merged. It will be in the 1.32 release.

7

Hi Sean,

Thanks for the excellent news. Are we already able to verify these issues, or is it still work in progress?

Jeroen

8

Yes try it out on master and let us know if this fixes it for you.