Interface BloomEffect

A BloomEffect allows you to configure the bloom effect of shapes styled with a BloomStyle on a WebGLMap.

Bloom is a way to convey intense brightness to the viewer by adding a glow to the bright object. The light then bleeds around these bright areas. This creates the illusion that they are intensely bright. This effect can greatly add to the perceived realism of a scene. It can also for example be used to draw focus to certain shapes.

Bloom
Left: Using a color to highlight an area, Right: Using bloom to highlight an area

The BloomEffect uses 2 properties:

  • the strength property defines how intense the bloom should be.
  • the radius property determines whether the bloom is more focused (values close to 0) or more spread out (values close to 1).

Bloom only has an effect on WebGLMaps.

Example

  map.effects.bloom = {
    strength: 3,
    radius: 0
  };

Since

2022.1

interface BloomEffect {
    radius?: number;
    strength?: number;
    threshold?: null | number;
}

Properties

radius? strength? threshold?

Properties

Optional radius

radius?: number

The radius is a value between 0 and 1, inclusive, that determines how focused or spread out the bloom effect should be. Lower values produce a more concentrated bloom. Higher values produce a more diffuse bloom.

Default

<code>0.5</code>

Optional strength

strength?: number

The strength is a non-negative number to make the bloom effect more or less pronounced.

Default

<code>1</code>

Optional threshold

threshold?: null | number

The threshold is a non-negative number that, if set, will cause any pixel more bright than the threshold to bloom. This is in addition to all shapes styled with a BloomStyle. If threshold is not set or null, only the shapes styled with a BloomStyle will bloom.

A typical value is 1. In most cases only objects styled with PBR shading will produce sufficiently bright pixels.

Default

<code>null</code>

Settings

Member Visibility

Theme

On This Page

radiusstrengththreshold