Black stroke around the globe with transparent background

CesiumJS
1

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

When I select a transparent background, a black stroke appears on the globe. https://www.screencast.com/t/V4ZGTFTbutmq
How can I get rid of this without changing the background ?

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

const viewer = new CesiumViewer(‘globe’, {

animation: false,

baseLayerPicker: false,

fullscreenButton: false,

geocoder: false,

homeButton: false,

infoBox: false,

sceneModePicker: false,

selectionIndicator: false,

timeline: false,

useDefaultRenderLoop: true,

navigationHelpButton: false,

scene3DOnly: true,

shouldAnimate: true,

sun: false,

globe: ellipsoid,

skyBox: false,

skyAtmosphere: false,

terrainShadows: CesiumShadowMode.DISABLED,

requestRenderMode: true,

imageryProvider: mapbox,

contextOptions: {

webgl: {

alpha: true,

},

},

});
const { scene, camera, canvas, entities } = viewer;

scene.backgroundColor = CesiumColor.clone(CesiumColor.TRANSPARENT);

scene.requestRenderMode = true;

scene.highDynamicRange = false;

scene.creditContainer = false;

scene.creditViewport = false;

scene.fxaa = false;

scene.screenSpaceCameraController.enableZoom = false;

scene.screenSpaceCameraController.inertiaSpin = .6;

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

I would like to achieve a smooth picture, as with the rest of the background

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

Cesium v1.60 / Windows 10 / Chrome 76

2

Hi,

I suspect the problem you’re seeing comes from double-blending along the limb of the Earth. The Earth is rendered onto a WebGL canvas with a limb or edge, and then that canvas is composited onto the page background.

But there may be a quick hack that can fix this for you. Give this a try:

scene.backgroundColor = CesiumColor.clone(CesiumColor.WHITE).withAlpha(0.0);

What I’m doing here is making a transparent version of WHITE (whereas the default Color.TRANSPARENT is actually transparent BLACK). So then, when the colors of the limb of the Earth blend against the WebGL canvas internally, the RGB channels are blending against white, even while the alpha channel is being set low on the fringes. Later, that blended canvas pixel is composited into the web page, you don’t have hints of black coloring sneaking in there.

This only works because your screenshot shows a mostly-white background, of course. You should choose a background color that represents a good average of what you’ll be blending into, to minimize this effect.

–Ed.

3

Hi! Thanks for your help!
That works pretty well, but actually, website has a background image and white color not suitable. Can i choose a background image for scene ?

4

Not an image, unfortunately. It’s clearing the WebGL canvas, and it doesn’t know the relationship of that to the page background at the time it clears.

Maybe pick a the color of the ocean from the globe, and make a transparent version of that?

–Ed.