Transparent billboards/points not working as expected.

[mramato]

From the mailing list: https://groups.google.com/d/msg/cesium-dev/_RSvkl1M9d8/fDV7_ZgBBXkJ

1. Pase this gist into Sandcastle: https://gist.github.com/rlittlefield/e7ee65ccf3f103fcc78d
2. Select "add polyline to old collection"
3. Select "add polyline to new collection"

Orient the camera so that the billboard is visual in front of both lines, you'll see a screenshot similar to the below. I would expect both lines to behave like the line on the left.

Here's a screenshot

[bagnell]

The problem here is that billboards write depth for any fragments with 0 < alpha < 1. The polyline on the left is drawn first, then the billboard so the translucent fragments are properly blended. The polyline on the right is drawn last and fails the depth test where the billboard has fragments with 0 < alpha < 1.

This could be fixed with multiple passes. @pjcozzi thoughts?

[mramato]

This also causes problem with KML (since we use the NearFarScalar to fade out text). The labels in the below image are practically invisible, but because of the problem the underlying Geometry does not show through. They also cut into the earth (I assume that's because of writing depth as well)

[pjcozzi]

@bagnell check Real-Time Rendering starting with Section 10.6. We could render the opaque part in one pass and then the translucent in another (each using a different fragment shader to discard), but this is going to hurt performance, increase complexity, and just feels like hitting a thumb tab with a sledgehammer. Perhaps this is our only reasonable option and we provide some fast paths or perhaps we only consider these cases: (1) opaque billboard, (2) opaque billboard with texture where alpha is 0 or 1, and (3) billboard with constant translucency throughout. Then we handle the case of non 0 or 1 texture alpha separately. Not sure that it matters here, but long-term, text may be rendered with signed distance functions like this.

Also, the render state should depend on billboard alpha (including the translucency based on distance), right now it always write depth.

[bagnell]

The billboard-transparency branch has a hacked in fix for this. If we decide to go with two passes, I could clean it up.

[mramato]

On my laptop, I'm seeing odd borders behind label billboards, do you think it's related to this? Or perhaps another bug? In the below shot, the G is obviously this bug, but the odd border on the 1 seems like something different.

[mramato]

I think #3011 fixes the border issue, but I need to test it out on more machines.

[mramato]

Recently brought up again on the mailing list: https://groups.google.com/d/msg/cesium-dev/LAeE70CWecs/Y_BtC_u4DwAJ

[pjcozzi]

Could be the problem: http://www.realtimerendering.com/blog/gpus-prefer-premultiplication/

[pjcozzi]

Or part of the problem.

[mramato]

Brought up again in #3550

[haisapan]

Hi guys, I also got this issue, anybody can help or can give us a time to fix? @mramato @bagnell @

[hpinkos]

possibly related issue: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/Mlqw0pR8jvg
there is a weird transparency effect when the billboard is scaled

[mramato]

Also causes #3782

[hpinkos]

Also reported here: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/gipZ4pITQOs
Labels transparency is incorrect over models

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

var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model : {
        uri : '../../SampleData/models/CesiumAir/Cesium_Air.glb',
        minimumPixelSize : 128,
        maximumScale : 20000
    },
    label: {
        text: 'cesium test name',
        scale:1,
        font: '15px Verdana',           
        fillColor : Cesium.Color.BLUE,
        horizontalOrigin : Cesium.HorizontalOrigin.RIGHT,
        eyeOffset: new Cesium.Cartesian3(0,0,-50)
    }
});

viewer.trackedEntity = entity;

[hpinkos]

Also reported here: https://groups.google.com/d/msg/cesium-dev/vEJZ8cgoz1A/wtP3-54CBQAJ
See post for code sample

[nikakhov]

As a temporary fix, would it be possible to merge branch master into billboard-transparency? This way billboard-transparency will be up to date.

[hpinkos]

Also seen here: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/ElkPcTGhTwo

[hpinkos]

Also reported here: #4720

[billwritescode]

Some more appearances:

[pjcozzi]

This also happens for points. From #2885:

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
                })
        }
    });
}

Forum post: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/5qv7Q_qudt8

[pjcozzi]

Also mentioned here: https://groups.google.com/forum/#!topic/cesium-dev/uoxSFmYmhi8

[pjcozzi]

Thanks all for the input, @haisapan, @nikakhov, @billwritescode.

@bagnell fixed this in #4886, which will be in Cesium 1.30 next Wednesday.

Let us know if you run into anything else.

[billwritescode]

This is fantastic! Thanks @pjcozzi @bagnell and @hpinkos.