This sample demonstrates how emissive material properties and Glow can be used in a Scene to support both realistic lighting and cartographic emphasis in 3D.

Emissive properties are configured on Symbol3DMaterial.emissive. You can control both the source and the strength of light emission.

Using emissive definitions from 3D models

Set source: "emissive" to use emissive information already defined on a 3D model (for example, a glTF with light-emitting details). This includes both emissive textures (emissive maps) and untextured emissive components (e.g. materials with an emissive color/factor). This is ideal for assets such as building façades, vehicles, or signage where specific parts are designed to emit light.

In this sample, the TheatreSign.glb model includes light-emitting letters. With source: "emissive", the model’s emissive elements display as authored; you can then control how much light they emit by changing the strength value.

// Create a MeshSymbol3D that displays emissive definitions from the model
const gltfSymbol = {
  type: "mesh-3d",
  symbolLayers: [
    {
      type: "fill",
      // The material drives the appearance of the fill layer
      material: {
        // Use emissive textures stored in the glTF
        emissive: {
          source: "emissive",
          strength: 1.0, // Display the emissive intensity defined in the model
        }
      }
    }
  ]
};

See the Import glTF 3D Models sample for examples of using glTFs in a scene.

Turning volumetric symbols into light emitters

Any volumetric symbol can be configured as a light emitter. Using source: "color" causes the symbol to emit light based on its material color. This is useful for emphasis, making selected features, points of interest, or stylized data layers stand out clearly in a scene.

In this sample, the bus lines in the transportation network layer are represented using path symbols and do not have intrinsic emissive information. Setting source: "color" makes the paths emit light using their existing symbol color, and you can then scale the effect using strength.

// Clone the layer's renderer
const renderer = transportationNetworkLayer.renderer.clone();

// Modify each symbol in the renderer to emit light based on its existing color
renderer.symbols.forEach((symbol) => {
  symbol.symbolLayers.forEach((layer) => {
    // Configure emissive properties to use the symbol's color
    layer.material.emissive = {
      source: "color", // The symbol's current color is used for emission
      strength: 1.0, // Adjust to control how much light is being emitted
    };
  });
});

// Assign the modified renderer to the layer
transportationNetworkLayer.renderer = renderer;

Controlling emissive strength

Emissive strength represents how much light the symbol is emitting. It can be updated dynamically:

• A strength value of 1 uses the emission as defined by the source: for source: "color", the symbol emits light based on its material color; for source: "emissive", the model uses its authored emissive texture/factor.
• Setting the strength to 0 effectively switches off light emission.
• Higher values increase the emitted light, making emissive areas appear brighter and shifting the color toward white.

Emissive strength is set per symbol and can be used as an additional visual aspect to communicate information.

In this sample, the strength slider updates the emissive strength for the theatre sign (a glTF model) and the bus line (PathSymbol3DLayer) that passes in front of it.

Enabling glow for additional emphasis

To customize the visual appearance of all emissive elements in a scene, you can enable the global Glow effect under webscene/Environment/Lighting. Enabling glow applies a stylized effect to the scene, emphasizing light-emitting features. The strength of this effect is controlled using the intensity parameter. Without glow, emissive elements display with a bright, natural appearance.

viewElement.environment.lighting.glow = enableGlow
  ? new Glow({
      intensity: glowIntensity, // Range: 0 – 1, from subtle to strong stylized glow
    })
  : null; // Turns off glow, restores natural appearance

Related samples and resources