Polyline shifting artifact with logarithmic depth buffer

[lyhkop]

when i use this code to add a line entity。

            var purpleArrow = viewer.entities.add({
                name : 'Purple straight arrow at height',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArrayHeights([start.longitude, start.latitude, start.height,
                    end.longitude, end.latitude, end.height]),
                    width : 10.0,
                    followSurface : false,
                    material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
                }
            });

The point of intersection with b3dm data will change when camera move! I think the causes of this problem is that we change the position in screenspace but depth is not change！

[OmarShehata]

@lyhkop can you post a full Sandcastle example that we can run to replicate this issue? Screenshots/gifs help too to explain exactly what you mean.

[lyhkop]

when i move the camera the point of intersection will change!
the code is:
` var viewer = new Cesium.Viewer('cesiumContainer', {
shadows: false,
});

    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
       url : 'http://localhost:8080/Data/svsdata/blyx/tileset.json',
       show : true,
       shadows : Cesium.ShadowMode.CAST_ONLY,
    }));

    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -1.57, 0.0));
    var projection = viewer.scene.mapProjection;
    var ellipsoid = projection.ellipsoid;

    // WGS84 转 地理坐标
    // pos is a Cesium.Cartesian3(x, y, z)
    function WGS84ToCartographic( pos )
    {
        var cartographic = Cesium.Cartographic.fromCartesian(pos);

        // 弧度转经纬度，Cesium中Cartographic为弧度表示（不易使用，我们自己定义一个经纬度对象）
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height;

        return {longitude : lng, latitude : lat, height : height};
    }

   // 输入地理坐标 pos 为 {longitude : longitude, latitude : latitude, height : height}
    function CartographicToWGS84( pos )
    {
        var car33 = Cesium.Cartesian3.fromDegrees(cartographic.longitude, cartographic.latitude, cartographic.height);
        var x = car33.x;
        var y = car33.y;
        var z = car33.z;
        return new Cesium.Cartesian3(x, y, z);
    }


    function  DrawLine( start, end )
    {
        var purpleArrow = viewer.entities.add({
            name : 'Purple straight arrow at height',
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArrayHeights([start.longitude, start.latitude, start.height,
                end.longitude, end.latitude, end.height]),
                width : 10.0,
                followSurface : false,
                material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
            }
        });
    }

    var p1, p2;
    // 鼠标左键，输入起点
    viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(event) {

        var cartesian = viewer.scene.pickPosition(event.position);
        if (Cesium.defined(cartesian)) 
        {
            var pos = WGS84ToCartographic(cartesian);
            //{longitude : longitude, latitude : latitude, height : height}
            p1 = {longitude : pos.longitude, latitude : pos.latitude, height : pos.height};
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	

    // 鼠标右键，输入终点
    viewer.screenSpaceEventHandler.setInputAction(function onRightClick(event) {

        var cartesian = viewer.scene.pickPosition(event.position);
        if (Cesium.defined(cartesian)) 
        {
            var pos = WGS84ToCartographic(cartesian);
            p2 = {longitude : pos.longitude, latitude : pos.latitude, height : pos.height};

            DrawLine(p1, p2);
        }
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

}`

[OmarShehata]

If I'm reading this right, the intersection point is sliding several meters? (It goes from being on one side of the extruded part of the building that's closest to the street, to the other side).

I'm unable to recreate this in a Sandcastle example though. Here's my Sandcastle.

Another way to confirm this is to place a sphere at this point and compare it to the line:

Can you please try this and let me know the result? If you are able to recreate this issue using this tileset in Sandcastle this will help a lot in determining the issue and fixing it.

[lyhkop]

thank for your reply! i jsut delete the first point in your Sandcastle code，like this：
var positions = [ //new Cesium.Cartesian3(1215109.9600761002, -4736392.535961681, 4081477.0043532723), new Cesium.Cartesian3(1215022.8075977303, -4736412.89683736, 4081573.274188337), new Cesium.Cartesian3(1214935.934294598, -4736148.115230538, 4081810.5153159215) ];

[wtfgecko]

I'm having a very similar issue with my polylines, although I can't provide a sandbox example as the terrain tiles are generated and served by my application in CesiumTerrainProvider format but the polyline is not testing correctly against the terrain.

viewer.scene.globe.depthTestAgainstTerrain = true;

var newEntity = connectionsCollection.entities.add({
                                id: connection.id,
                                name: connection.name,
                                polyline: {
                                    positions: Cesium.Cartesian3.fromDegreesArrayHeights([connection.siteALocation.x, connection.siteALocation.y, connection.siteALocation.z,
                                        connection.siteBLocation.x, connection.siteBLocation.y, connection.siteBLocation.z]),
                                    width: 5,
                                    material: new Cesium.PolylineDashMaterialProperty({
                                        color: Cesium.Color.PINK
                                    })
                                }
                            });

[OmarShehata]

Ok, I definitely see what you mean here.

Sandcastle

@wtfgecko thanks for providing the additional case. I think this can be worked around by doing a raycast to get the actual point of intersection and adding that point to the polyline, which is why it didn't happen in my first case.

@likangning93 do you have any insight here? Is this expected behavior?

[likangning93]

This might be an artifact of linearly interpolating log depth, I can't seem to reproduce the effect with viewer.scene.logarithmicDepthBuffer = false.

[wtfgecko]

This might be an artifact of linearly interpolating log depth, I can't seem to reproduce the effect with viewer.scene.logarithmicDepthBuffer = false.

That fixes it for my issue. I'm reading in to the consequences of turning this off at the moment, but I would assume this isn't an intended consequence of the feature.

As per https://cesium.com/blog/2018/05/24/logarithmic-depth/

[OmarShehata]

I believe this indeed a bug, and I've labelled it as such.

I'm reading in to the consequences of turning this off at the moment

I think you should be fine turning this off for now. You might see a slightly lower performance or you may need to adjust the near/far planes if you're seeing any Z-fighting (see https://cesiumjs.org/Cesium/Build/Documentation/Camera.html?classFilter=Camera).