A WebGLMap has an object dedicated for map-wide effects. This article gives you an overview of all of the available effects and how they can be used in your application.

Lighting Effects

Lighting can add important visual cues about the size and shape of 3D objects to a view. Without it, objects are always drawn at full brightness. When you enable the lighting effect, the object sides facing the light are brighter, whereas the sides facing away from the light are darkened.

You can control lighting using the effects.light property of a WebGLMap. Program: Assigning a "sun light" demonstrates how to assign a light.

You have three options, demonstrated in Program: Assigning a "sun light":

  • Head light: created by the createHeadLight function from the LightEffect module.

    The head light direction is linked to the orientation of the camera in 3D. That is a useful feature in many applications where lighting can improve a user’s perception of shape. In this case, lighting is not used to represent the time of day. The user does not need the whole earth to have a bright side and a dark side.

    The lighting affects terrain (based on the elevation data), draped shapes, and non-draped shapes such as extruded shapes and mesh icons.

    This type of light is the default for a 3D map. It has no effect on a 2D map.

  • Sun light: created by the createSunLight function from the LightEffect module.

    This light will simulate the presence of the sun as a light source at the specified given time.

    The lighting affects the same map aspects as a head light.

    In addition, a sunlight also allows you to enable shadows. This only affects 3D maps.

    In addition, the night side of the earth is desaturated, in 2D as well as 3D.

  • No light: assign null. Objects are displayed at full brightness.

Program: Assigning a "sun light"
//Use the createSunLight function from the LightEffect module
const sunLight = createSunLight({
  time: new Date()
});
//Install it on the map
map.effects.light = sunLight;
lighting
Figure 1. Lighting: (1) no light, (2) head light, (3) sun light in 2D

Depth of field effect

You can use the depth of field effect for blurring parts of a map based on distance to the viewer. It mimics the behavior of a typical camera focus. This effect serves two main purposes:

  • Increase the visual quality of your map.

  • Focus the attention of the user on a specific area of your map.

Some examples of the latter use case are:

  • Automatically focus the area around your mouse, and blur out the rest of your map

  • Put emphasis on a selected object

  • Automatically focus on the area that is currently visible at the center of your screen

effects dof
Figure 2. Depth of field: no depth of field applied on the left - on the right, a depth of field was applied with a focus on foreground
Program: Setting the depth of field effect
map.effects.depthOfField = {
  focalDepth: 200,
  focusRange: 300
};

LuciadRIA offers offers several parameters to tweak the depth, range and the amount of blur of the depth of field effect. All parameters are optional. You can change them on-the-fly at any time.

The depth of field effect has a fixed performance overhead that depends on two factors:

  • The pixel resolution of your map

  • The GPU of the client

The performance is not affected by the size of your dataset.

The effect only works on 3D maps. It has no effect on 2D maps.

Ambient occlusion effect

Ambient occlusion is an effect that mimics the natural phenomenon of shadows appearing on surfaces where objects are close to each other. The difference between shadows and ambient occlusion is that ambient occlusion is not dependent on light sources. It operates solely on the geometry of your dataset.

effects ssao
Figure 3. Ambient occlusion: no ambient occlusion on the left - ambient occlusion applied on the right

You can use ambient occlusion to enhance your map by more clearly defining objects that are close to the ground. This gives your map a greater sense of depth. It is highly recommended for data sets that were computer-generated, such as 3D CAD and BIM models.

Program: Setting the ambient occlusion effect
map.effects.ambientOcclusion = {
  radius: 25,
  power: 1
}

LuciadRIA allows you to control the radius and the power of the ambient occlusion effect.

The version of ambient occlusion supported by LuciadRIA is called Screen Space Ambient Occlusion (SSAO). This implementation uses the GPU to calculate the effects of ambient occlusion on-the-fly based on what is visible in your view. You can toggle it on and off at any time with no additional overhead.

Ambient occlusion is recommended for cases in which 3D datasets with simple colors are visualized. For these types of datasets, ambient occlusion can help give the dataset more depth and make it easier to understand how geometry relates to each other. In addition, it improves the visual quality of such datasets, and gives an overall better impression.

Ambient occlusion is not recommended for 3D datasets that were captured using real-life photography, such as reality meshes. These datasets will already have ambient occlusion occur naturally in their imagery.

Ambient occlusion has a fixed performance overhead that depends on two factors:

  • The pixel resolution of your map

  • The GPU of the client

The performance is not affected by the size of your dataset.

Ambient occlusion only works on 3D maps. It has no effect on 2D maps.

Eye-dome lighting effect

Eye-dome lighting (EDL) is a non-photorealistic lighting model that accentuates the shapes of objects by shading their outlines. Eye-dome lighting is similar to ambient occlusion, in the sense that it can help give the dataset more depth and make it easier to understand how geometries relate to each other.

effects edl
Figure 4. Eye-dome lighting: no EDL occlusion on the left - EDL applied on the right

EDL can help to interpret datasets that have little or no visual variance. It is useful for 3D datasets in particular, such as CAD and BIM models, or point clouds. Eye-dome lighting is not recommended for 3D datasets that were captured using real-life photography, such as reality meshes.

Program: Setting the eye-dome lighting effect
map.effects.eyeDomeLighting = {
  window: 1,
  strength: 0.5
};

LuciadRIA allows you to control the:

  • window: to increase the thickness of the applied EDL shade

  • strength: to soften or harden the applied EDL shade

  • color: to change the color of the applied EDL shade

Technically, the lighting model applies a shade to each pixel, based on the depth difference between that pixel and its surrounding pixels. This implementation uses the GPU to calculate the effects on-the-fly based on what is visible in your view. You can toggle it on and off at any time with no additional overhead.

Eye-dome lighting has a fixed performance overhead that depends on two factors:

  • The pixel resolution of your map

  • The GPU of the client

The performance is not affected by the size of your dataset.

Eye-dome lighting only works on 3D maps. It has no effect on 2D maps.

Anti-aliasing effect

The anti-aliasing post-processing effect smooths hard edges of data that shows staircase pixels.

It is useful for 3D datasets in particular, such as CAD and BIM models with sharp edges and high-contrast colors.

Program: Setting the anti-aliasing effect
map.effects.antiAliasing = true;

LuciadRIA applies the FXAA algorithm for anti-aliasing.

Anti-aliasing has a fixed performance overhead that depends on two factors:

  • The pixel resolution of your map

  • The GPU of the client

The performance is not affected by the size of your dataset.

Anti-aliasing only works on 3D maps. It has no effect on 2D maps. In 2D views, most content is typically already anti-aliased: imagery can be smoothed up-front, lines are smoothed while they are painted, and icons can be smoothed upon creation.