Jagged edges on globe with transparent background

CesiumJS
1

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

I’m trying to make a small “overview” globe using the transparent background technique that’s been discussed here previously. It works well enough but has ugly jagged edges. It seems like anti-aliasing doesn’t work in conjunction with background transparency.

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

The jagged edges are especially visible on a lower-resolution device.

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

I have a mapping project built on Cesium and want to offer an “overview globe” – an optional second Viewer in the corner that provides an indicator of where on Earth the main viewer is currently looking. I do this by disabling mouse control of the overview globe, and hooking camera movement on the main viewer to reposition the overview.

I think maybe I need some kind of post-processing on the globe to soften the edges? I tried turning on atmosphere but that just gives the atmosphere rough edges instead. I think the outermost globe pixels need to somehow have a bit of transparency too?

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

1.55 / latest; this has been the case with every OS / browser combination I’ve tried it from.

2

This seems to be an issue even without the transparent background. I can still see these jaggedy edges even when commenting out the line:

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

``

It gets better with the sky atmosphere, but then with the transparent background that looks pretty bad because now there’s an extra layer of black pixels in the canvas before the transparent background comes in.

It almost looks to me like the problem is that it’s doing some kind of alpha cut off. I opened a GitHub issue here to see if others have any more thoughts/ideas:

https://github.com/AnalyticalGraphicsInc/cesium/issues/7671