A DepthOfFieldEffect allows you to apply a Depth of Field effect on a 3D WebGLMap.

Depth of Field is an effect that blurs out parts of your map, based on distance to the camera. This mimics the effect of a camera-wide aperture: objects you are focusing on are sharp, while the background is blurred.

Depth Of Field
Left: Depth of Field disabled, Right: Depth of Field enabled, with focus on the church

This implementation uses the GPU to calculate the effects of depth of field on-the-fly for your active view. You can toggle it on and off, as well as change any of its parameters at any time, with no additional overhead.

Depth of field has two main uses:

  • Increase the visual quality of your map.
  • Focus on a specific area of your map, so that it draws the attention of a user more effectively.
Depth of Field only has effect on 3D WebGLMaps.

  map.effects.depthOfField = {
focalDepth: 300,
focusRange: 400
}

Since

2019.0

interface DepthOfFieldEffect {
    focalDepth?: number;
    focusRange?: number;
    noFocusRange?: number;
    scale?: number;
}

Properties

focalDepth?: number

The distance in meters from the camera at which objects should be perfectly in focus.

Default

200
focusRange?: number

The range (in meters) around the focal depth at which objects should be perfectly in focus.

Default

half the noFocusRange if provided, else 200
noFocusRange?: number

The threshold in meters around the focal depth at which objects become fully unfocused. Objects between focusRange and noFocusRange are gradually blurred out of focus. NoFocusRange should be larger than focusRange.

Default

twice the focusRange if provided, else 400
scale?: number

A scale to increase or decrease the blur effect. It does not affect the other properties.

Default

1