Points not appearing at certain angles

[mramato]

As reported on the forum, the below code creates a view where the line of points are not visible until move the view to a different angle (middle-mouse move does it). Even if you add an altitude to fromDegrees to raise the points off the ground, the problem still occurs. I'm not sure what is going on but it happens in all browsers.

CC @emackey

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var coordinates = 
     [ [123.0274,30.9532],[123.0595,30.955],[123.0902,30.9558],[123.1241,30.9563],
     [123.1546,30.9513],[123.1823,30.9374],[123.2089,30.9238],[123.2362,30.9091],
     [123.2638,30.8938],[123.2909,30.8787],[123.317,30.864],[123.3463,30.847],
     [123.374,30.8308],[123.4015,30.8151],[123.4285,30.8],[123.4522,30.787],
     [123.4827,30.7703],[123.508,30.7568],[123.5357,30.742],[123.5595,30.7292],
     [123.5889,30.7137],[123.617,30.6982],[123.6427,30.6838],[123.6692,30.6695],
     [123.6964,30.6547],[123.7195,30.6416],[123.7441,30.6269],[123.77,30.611],
     [123.7917,30.5979],[123.8137,30.584],[123.8365,30.5684],[123.862,30.554],
     [123.8852,30.542],[123.9085,30.5305],[123.9345,30.5182],[123.96,30.5058],
     [123.9832,30.4934],[124.0064,30.4803],[124.0281,30.468],[124.0534,30.4532],
     [124.0743,30.4405],[124.0961,30.4276],[124.1183,30.4145],[124.1425,30.4003],
     [124.1566,30.392],[124.1865,30.3742],[124.2101,30.3605],[124.2352,30.3465],
     [124.2425,30.3423],[124.2701,30.3347],[124.2962,30.3278],[124.362,30.3017] ];

var pointCollection = scene.primitives.add(new Cesium.PointPrimitiveCollection());

for (var i = 0; i < coordinates.length; i++) {
    var position = Cesium.Cartesian3.fromDegrees(coordinates[i][0], coordinates[i][1]);
       pointCollection.add({
                pixelSize : 3,
                color : Cesium.Color.LIME,
                position : position,
                id : coordinates[i].toString()
    });
}

scene.camera.setView({
    destination:  new Cesium.Cartesian3(-4448384.84226208, 8847434.903068805, 5385593.024560826),
    orientation: {
        heading: 6.037857876846167,
        pitch: -1.5701076653988428,
        roll: 0
    }
});

[mramato]

@emackey thinks this may be a similar problem to #2130

[emackey]

Correct. The points have a thin "transparent" outline due to anti-aliasing built into the fragment shader. In the screenshot below I've made the points bigger and turned off scene.fxaa, and here the points appear to have a black outline. But the outline isn't black, it's transparent, and it's showing through to the black background because the render order for the points is backwards from this point of view.

When the points get close together, the transparent-to-background outlines stack up so densely that you can't see the core point color anymore.

[temesgen71]

Can you guys think of any temporary workaround for this? I am showing tracks of a ship's position and there are a lots of areas where the points can make closely packed lines similar to the data above. If there is a patch I can make to get around this even at cost of some performance it will good enough for me. Thanks!

• Tim

[emackey]

You can trade this problem for other problem(s), and see if the other ones are more subtle or more acceptable than this. Try turning off "depth masking" and see if it helps, by adding the following code to the above demo. This may introduce a different problem where points fail to obscure background objects of certain types.

// Warning: Use of _private variables is undocumented and may change without warning.
pointCollection._rs = scene.context.createRenderState({
    depthTest : {
        enabled : true
    },
    depthMask : false,
    blending : Cesium.BlendingState.ALPHA_BLEND
});

[temesgen71]

Thanks! That seems to work fine for me. I don't see any performance hit either. I am only showing points with a label on mouse over. I see that the label is showing on top of the points which is what I want anyways. I think this is a good work around for us for now. Thanks!!

[temesgen71]

Looks like scene.context.createRenderState is no longer available in 1.13 version. Is there any other work around I can use for this issue?

Thanks,
Tim

[emackey]

The code has changed a bit for this. Try this:

// Warning: Use of _private variables is undocumented and may change without warning.
pointCollection._rs = Cesium.RenderState.fromCache({
    depthTest : {
        enabled : true
    },
    depthMask : false,
    blending : Cesium.BlendingState.ALPHA_BLEND
});

[temesgen71]

That worked. Thanks!

[hpinkos]

Problem is way more visible in this code sample:

var viewer = new Cesium.Viewer('cesiumContainer');

for (var i=0; i<35000; i++) {
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-122.431297 +i/10, 37.773972+i/10),
        point : {
            pixelSize : 10,
            color : Cesium.Color.fromRandom({
                    alpha : 1.0,
                    minimumRed : 0.5,
                    minimumGreen : 0.5,
                    minimumBlue : 0.5
                })
        }
    });
}

[emackey]

Strange idea: If the point's fragment shader can write a depth value, maybe we write "sane" (normal) depth values for high alpha fragments, but tweak the written depth to be further away for low alpha values. The point written would become sort of a view of the pointy end of a cone, and the points would stick out in front of the fringes.

[hpinkos]

Looks like this user has a similar problem: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/5qv7Q_qudt8

[pjcozzi]

Closing as duplicate with #2130 (comment)