Artifacts on globe with transparent background

[OmarShehata]

The goal here is to render the Cesium globe on a web page with a transparent background. You can do this by setting the background to transparent:

var viewer = new Cesium.CesiumWidget('cesiumContainer', {
    skyBox: false,
    skyAtmosphere: false,
    contextOptions: {
        webgl: { alpha: true },
    },
});

viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;

Sandcastle

But then you can see these aliasing artifacts on the edges of the globe:

Note that the red here is the underlying webpage, NOT the canvas. I think this is actually just how the globe looks in this particular case. Here's with the viewer.scene.backgroundColor commented out:

The globe doesn't have these artifacts with the sky atmosphere turned on, but then there's an extra layer of black pixels rendered before the background goes transparent:

So I think making this look nice is just a matter of making the alpha gradually decrease instead of cut off with the background so it blends better with the underlying web page? I'm not sure if it's a very common situation, so perhaps just a workaround that developers can do in their applications would suffice.

[sparkyspider]

I seem to have the same problem...