To draw attention to a specific mesh or point cloud of a TileSet3DLayer, you can add an outline to it. You can also keep the 3D object visible when it’s obscured by another object.

Configure an outline

You can configure the outline on the TileSet3DLayer through the property:

  • outlineStyle: outline styling applied to the mesh or point cloud.

An OutlineStyle has the following properties:

  • outlineColorExpression: create an expression to decide the color of the outline.

  • outlineWidth: decide the width of the outline.

outlined house
Figure 1. TileSet3DLayer mesh of a house with a red outline

Keep an obscured mesh or point cloud visible

To visualize the part of the 3D object hidden by another layer, you can use the occlusionStyle property. You can set it directly on the TileSet3DLayer.

Occlusion means that one object hides another object.

You can configure the following parameters for OcclusionStyle:

  • bodyColorExpression: create an expression to decide the color for the body of the hidden part of the mesh or point cloud.

  • outlineStyle: outline styling applied on the obscured part of the mesh or point cloud.

You can apply the OcclusionStyle only to the parts of the 3D object that are hidden by objects of layers below the TileSet3DLayer in the LayerTree. LuciadRIA doesn’t consider transparent objects when it determines the occlusion.

partly occluded house
Figure 2. TileSet3DLayer mesh of a partly occluded house with a dark occlusion style

Creating the expressions

You must use ExpressionFactory to create the styling expressions. See Property-based styling and filtering of points on a WebGLMap for more information about styling through expressions. See the MeshStyle API reference documentation for example code.

You can’t use attribute expressions for the outlineColorExpression or the expressions on OcclusionStyle.

Using occlusion and outline styles for selected features

You can highlight selected features in a large dataset using occlusion and outline styles. These specific styles allow you to make sure that your selection doesn’t get occluded by other parts of the geometry. They also remove the need to add transparency to the non-selected parts.

Using these selection styles is similar to using the regular occlusion and outline styling. You add a selectedOcclusionStyle and a selectedOutlineStyle to your Tileset3DLayer.

If you want to highlight all selected features, but you want to differentiate between occluded and non-occluded selected features, you can use the combination in Program: Using a selection occluded style..

Program: Using a selection occluded style.
const selectedColorExpression = color("rgb(0,218,255)");
layer.meshStyle = {
  // When selecting a feature, it will get a blueish highlight color...
  selectedColorExpression: selectedColorExpression
};
layer.selectedOcclusionStyle = {
  // But the parts of the selected feature that are occluded will only get a blueish outline.
  outlineStyle: {
    outlineColorExpression: selectedColorExpression,
    outlineWidth: 2.0
  }
};

The visual result will be the same as in Figure 3, “TileSet3DLayer with partially occluded selected feature”, where you can easily see the sink and the toilet as selected elements that are visible from the camera. The piping is also a selected element, but it is occluded by the floor and the wall, and receives a different styling.

partially occluded selected feature
Figure 3. TileSet3DLayer with partially occluded selected feature