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

Lighting Effects

Lighting adds 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 become darker.

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’s a useful feature in applications where lighting can improve a user’s perception of shape. In this case, you don’t use lighting to represent the time of day. The user doesn’t need the whole of Earth to have a bright side and a dark side.

    The lighting affects the terrain — based on 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 simulates the presence of the sun as a light source at the given time.

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

    With a sunlight, you can also turn on shadows. This affects 3D maps only.

    The night side of the earth is also desaturated, in 2D and 3D.

  • No light: assign null. The application shows objects 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’s visible at the center of your screen at the moment

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

LuciadRIA 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 size of your dataset doesn’t affect performance.

Depth of field works on 3D maps only. 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 isn’t 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 with a greater sense of depth. It defines objects close to the ground more clearly. It’s 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
}

You can control the radius and the power of the ambient occlusion effect.

LuciadRIA supports the version of ambient occlusion called Screen Space Ambient Occlusion (SSAO). This implementation uses the GPU to calculate the effects of ambient occlusion on-the-fly based on what’s visible in your view. You can toggle it on and off at any time without extra 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. It also improves the visual quality of such datasets, and gives a better impression in general.

Ambient occlusion isn’t recommended for 3D datasets that were captured using real-life photography, such as reality meshes. Ambient occlusion already occurs naturally in the imagery of those datasets.

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

  • The pixel resolution of your map

  • The GPU of the client

The size of your dataset doesn’t affect performance.

Ambient occlusion works on 3D maps only. 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. It can 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’s useful for 3D datasets in particular, such as CAD and BIM models, or point clouds. Eye-dome lighting isn’t 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
};

You can 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’s visible in your view. You can toggle it on and off at any time without extra 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 size of your dataset doesn’t affect performance.

Eye-dome lighting works on 3D maps only. 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’s 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 size of your dataset doesn’t affect performance.

Anti-aliasing works on 3D maps only. 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’re painted, and icons can be smoothed upon creation.

Atmosphere

Using the effects.atmosphere property of a WebGLMap, you can control how the sky looks. You can toggle this look with a boolean value. By default, the effects.atmosphere property is set to true, and LuciadRIA displays a static atmosphere. The lighting effect doesn’t affect it.

You can also add a light scattering effect to the atmosphere to help make your scene look more natural, by setting the effects.atmosphere property to a LightScatteringAtmosphere. The lighting effects must be active on the map as well because its effects on the atmosphere are then simulated in the sky on the map.

atmo default
Figure 5. Default atmosphere
atmo sky
Figure 6. Light scattering atmosphere
Program: Setting the atmosphere
map.effects.atmosphere = new LightScatteringAtmosphere({
  brightness: 2.5,
  rayleighScatteringFactor: 2.0
});

You can control the light scattering atmosphere effect with these properties:

  • brightness: increase or decrease the intensity of the light.

  • rayleighScatteringFactor: increase or decrease the amount of Rayleigh scattering. This is the scattering of sunlight by air molecules. It is the reason for the blue color of the sky during the day, and its yellow-to-red color at dawn and dusk.

  • mieScatteringFactor: increase or decrease the amount of Mie scattering. This is the scattering of light by aerosols, such as dust, pollen, smoke, and microscopic water droplets. On a hazy day, Mie scattering causes the sky to look a bit gray and produces a large white halo around the sun.

  • affectsTerrain: indicate the presence or absence of an effect on the terrain. The terrain effect makes the terrain look brighter at higher altitudes:

atmo sky space
Figure 7. Light scattering atmosphere
atmo sky terrain space
Figure 8. Light scattering atmosphere with terrain option enabled

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