How to make Cesium background be transparent

[wjt123125]

I have created 2 CesiumViewer on my pages because I want another 3d overviewmap like Google Earth, and i have configued my CesiumJS like the following codes, to make 3d overviewmap’s background be transparent. but which cannot works

      overviewViewer.scene.highDynamicRange = false
      overviewViewer.scene.globe.enableLighting = false
      overviewViewer.scene.globe.showWaterEffect = false
      overviewViewer.scene.globe.depthTestAgainstTerrain = false
      overviewViewer.scene.skyAtmosphere.show = false
      overviewViewer.scene.fog.enabled = false
      overviewViewer.scene.skyBox.show = false
      overviewViewer.scene.sun.show = false
      overviewViewer.scene.moon.show = false
      overviewViewer.scene.highDynamicRange = false
      overviewViewer.scene.globe.showGroundAtmosphere = false
     //Set the background of the scene to transparent
     overviewViewer.scene.backgroundColor = Cesium.Color.TRANSPARENT
     //HDR needs to be disable for transparent backgrounds
     overviewViewer.scene.highDynamicRange = false

what should i do to remove the black background
Thanks, Levi

[jjhembd]

Hi @wjt123125, welcome to the community!

There are two additional things you need to set for the overview map:

1. Enable alpha blending in the context. You can turn this on in the Viewer constructor options via the contextOptions.webgl object.
2. Disable the skyBox which renders the stars behind the globe.

const viewer = new Cesium.Viewer("cesiumContainer");
const inset = new Cesium.Viewer("insetCesiumContainer", {
  // ...
  skyBox: false,
  contextOptions: {
    webgl: {
      alpha: true,
    },
  },
});
inset.scene.backgroundColor = Cesium.Color.TRANSPARENT;

Here’s my Sandcastle example showing an overview map in the corner with a transparent background.

(Note: I didn’t link the cameras in this example, so the overview doesn’t track the main Viewer position.)

[Gabby_Getz]

Here’s an example of synced camera views to complete the mini-map functionality.

[wjt123125]

Thanks for your reply. It is indeed feasible after practice.
Wish you have a nice day！