Custom background for SceneView

By default, a WebScene has a realistic sky with atmosphere, stars, and a black color in the background to simulate the space. This works great in web scenes with realistic visualizations like textured buildings, integrated mesh layers or point clouds with RGB symbology.

Thematic visualizations go well with abstract representations of the world, so most of the time a background color is more suitable than a realistic sky. At other times you want to integrate the globe with your web page, so you need a transparent background. This sample shows you how to do that.

1. Replace the sky with a custom color

The background property in SceneView.environment can be used for setting a custom color. The atmosphere covers the background color at high zoom levels and in local webscenes, so it's important to disable it. Here is the code snippet for this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const view = new SceneView({
  container: "viewDiv",
  map: map,
  environment: {
    background: {
      type: "color", // autocasts as new ColorBackground()
      color: [255, 252, 244, 1]
    },
    // disable stars
    starsEnabled: false,
    //disable atmosphere
    atmosphereEnabled: false
  }
});

2. Make the sky transparent

To make the sky transparent you first need to set the alpha in the background color to 0. Then enable transparency on the view by setting the SceneView.alphaCompositingEnabled property to true. This property can only be set once at construction time. When alpha compositing is enabled, web scenes might be less performant. It's important to set this property to true only when you need to apply transparency on the view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const view = new SceneView({
  container: "viewDiv",
  map: map,
  // enable transparency on the view
  alphaCompositingEnabled: true,
  environment: {
    background: {
      type: "color", // autocasts as new ColorBackground()
      // set the color alpha to 0 for full transparency
      color: [255, 252, 244, 0]
    },
    // disable stars
    starsEnabled: false,
    //disable atmosphere
    atmosphereEnabled: false
  }
});

3. Bonus: change the ground color

Sometimes you don't really need a basemap. By default when the basemap is disabled, a grid is displayed as the ground surface. Now you can change the ground to be displayed with a single color, using the Ground.surfaceColor property:

1
2
3
4
5
6
const webscene = new WebScene({
  basemap: null,
  ground: {
    surfaceColor: [226, 240, 255]
  }
});