Polyline position wrong on iPhone

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

Polyline positions are wrong on iPhone XS. (and maybe on all iOS devices, we think Android works fine)

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

This example slowly animates camera and on desktop it works smoothly. On iPhone XS you will see bad jitter on polyline position!

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

var line = viewer.entities.add({

name : “Test line”,

polyline : {

positions : Cesium.Cartesian3.fromDegreesArrayHeights([-154, 60.4, 1, -154.0002, 60.4, 1]),

width : 2,

material : Cesium.Color.RED

}

});

viewer.zoomTo(viewer.entities);

viewer.clock.onTick.addEventListener(function(clock){

viewer.scene.camera.moveDown(0.01);

});

Sandcastle:

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

This prevents the proper usage of polylines on mobile. Totally critical bug for us!

4. The Cesium version you’re using, your operating system and browser.

Newest, Chrome on win10 and safari on iphone xs.

2

A better test case with link to sandcastle:

var farOrigin = 10000 * 1000; // If this line is changed to “var farOrigin = 10000”, also iPhone works ok!

for (var i = 0; i < 20; ++i)

{

var offset = i / 7.0;

viewer.entities.add({

polyline : {

positions : [new Cesium.Cartesian3( 0 + farOrigin, 0, farOrigin + offset),

new Cesium.Cartesian3(10 + farOrigin, 10, farOrigin + offset)],

material : Cesium.Color.BLACK

}

});

}

viewer.zoomTo(viewer.entities);

On Windows we get this image with 20 polylines:

image (5).png

But on iPhone XS the wrong image with only 4 lines:

Image from iOS.png
Image from iOS.png897×591 5.3 KB

Sandcastle:https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=bZLBTsMwDIZfxfRCx6p0gwMSKxPShAQSEkggOBAOoU03a2k8JVmngfbuuO0Q25gvTmx/f22ntXJQo15pB9dg9Qom2uOyEq9tLD7N2+uEbFBotTvtjaSVtmaqVO7R4RQtg8MBG5y1fgRpCvclhBl6MAwB+3ym7FQXEAhkdJSWUQLKeAJ8mhFDK3JzDzQ/kbYkB3EDIRezPkIG5+z7fexJ+y0tsDV5KkuvAxchpHApBm2vbbKdRmgbMKD2QhVFvOUaW5BZt51ewU60y3gmyHpOve+sZ6Jc4JOyFzEMoP83TgIwSHam62+b6iX7wnt2XHh4IDw8LvxxoFypoB0qwx3/apIhJ97u7l9u/0o33XHTPOimfdNuR19E1QvFBxvrjUDaKIkyH9ZGjzv2BqsFuQBLZ2Ih0qCrheGP+/Rzmc91ELn3jXqW/kJZgTVgcS2jg99KRpAb5T1nyqUxz/ilZTTOUq7fwwypAu30sdbOqHVTMhuOH7qgECJL+fqfCkTmU7kdxR8

3

By setting result.high = 0; in EncodedCartesian3.js the iPhone XS gets fixed!:o

4

Same modification fixes this issue:
https://github.com/AnalyticalGraphicsInc/cesium/issues/7100

5

My final solution for now: Modify shader by adding the following line:

vec4 czm_translateRelativeToEye(vec3 high, vec3 low)

{

vec3 highDifference = high - czm_encodedCameraPositionMCHigh;

if (length(highDifference) == 0.0) highDifference = vec3(0);

vec3 lowDifference = low - czm_encodedCameraPositionMCLow;

return vec4(highDifference + lowDifference, 1.0);

}

It is a bit unclear still why this happens, but I guess iPhone XS ends up having NaN values in the highDifference at some cases? And now the length calculation “notices” this.

6

Thanks for the additional test cases and for investigating a fix! Would you be able to open a pull request for this? Then we can have someone on the team review and determine if this is the right fix or if it reveals an underlying issue. Having a PR would help move this along faster.

7

I posted your findings for now in that distorted vertices GitHub issue. Feel free to add anything I missed there.