The main class for styling mesh data is MeshStyleMeshStyleMeshStyle. You can use it to define several expressions to visualize, filter, and change your dataset:

  • colorExpression: use an expression to choose the color of your mesh. You can also use the color encoded in your dataset by using StyleExpressionFactory::defaultColor. A color expression overrides any texture color in the dataset.

  • visibilityExpression: use an expression to make meshes partly visible or invisible based on available attributes and parameters.

  • displacementExpression: use an expression to partly displace meshes based on available attributes and parameters.

Benefits of style expressions

Style expressions are expressive and powerful tools to style your data. Using the StyleExpressionFactoryStyleExpressionFactoryStyleExpressionFactory, you can create a variety of expressions, from basic constant expressions to expressions that combine other expressions. By combining expressions, you can tune the result exactly to your liking.

Using style expressions

You can create various expressions with the StyleExpressionFactoryStyleExpressionFactoryStyleExpressionFactory, from basic constant expressions to expressions that combine other expressions.

Using basic expressions

These are basic style expressions you can make use of:

  • Constant expressions: always evaluate to the given value.

  • Attribute expressions: evaluate to the value of a particular property of your data, referenced by the property name. You must make sure that the attribute or property that you’re referencing actually exists in your data set. You can then specifyspecifyspecify the ones that you’re using in your style expression when you’re building your 3D tiles layer.
    To discover which attributes you can use, see the reference documentation for the model decoder of the format you’re working with. For example:

Defining constant expressions and an attribute expression
    auto minParameter = Expr::constant(95.0);
    auto maxParameter = Expr::constant(115.0);
    auto height = Expr::doubleAttribute("Height");
var minParameter = Constant(95.0);
var maxParameter = Constant(115.0);
var height = DoubleAttribute("Height");
val minParameter = StyleExpressionFactory.constant(95.0)
val maxParameter = StyleExpressionFactory.constant(115.0)
val height = StyleExpressionFactory.doubleAttribute("Height")

Using parameter expressions for dynamic values

Sometimes, the value of an expression depends on a value that changes dynamically during the lifetime of a layer. You want to make the styling dynamically adjustable through a UI, for example. You could create a new expression to reflect the new result every time the value changes. An easier option with better performance is using a parameter expression.

To use a parameter expression for a dynamic value:

  1. Wrap the value into an ObservableObservableObservable object.

  2. Create an expression using StyleExpressionFactory::parameterStyleExpressionFactory::parameterStyleExpressionFactory::parameter with the observable.
    As a result, any change made to the ObservableObservableObservable through its setValuesetValuesetValue method is reflected in the expression.

Defining parameter expressions
  StyleExpression<double> createPointSizePixelsExpression() {
    // Creates an expression that allows you to change its value at runtime by using a parameter expression
    return Expr::parameter(TileSet3DLayerFactory::getPointSizePixelsObservable());
  }
const std::shared_ptr<Observable<double>>& TileSet3DLayerFactory::getPointSizePixelsObservable() {
  static std::shared_ptr<Observable<double>> pointSize = Observable<double>::create(2.0);
  return pointSize;
}
public static readonly Observable<double> PointSizePixelsObservable = Observable<double>.Create(2.0);

private static StyleExpression<double> CreatePointSizePixelsExpression()
{
    // Creates an expression that allows you to change its value at runtime by using a parameter expression
    return Parameter(PointSizePixelsObservable);
}
val pointSizePixelsExpression: StyleExpression<Double> by lazy { createPointSizePixelsExpression() }

private fun createPointSizePixelsExpression(): StyleExpression<Double> {
    // Creates an expression that allows you to change its value at runtime by using a parameter expression
    return StyleExpressionFactory.parameter(pointSizePixelsObservable)
}

Combining expressions

You can use various functions to combine style expressions into a new expression. Each function accepts a combination of style expression types and results in a specific type of style expression. For these combined expressions, you can use common functions such as arithmetic, boolean, and comparison operators, as well as conditional operations.

This code snippet demonstrates how to create the intensity-based gradient styling in the OGC 3D Tiles sample:

Program: Creating intensity-based gradient styling for point clouds using expressions.
  StyleExpression<Color> createIntensityColorExpression() {
    auto minParameter = Expr::constant(0.0);
    auto maxParameter = Expr::constant(65535.0);

    auto minIntensityColor = Expr::constant(Color{0, 0, 80});
    auto maxIntensityColor = Expr::constant(Color::white());

    auto intensity = Expr::doubleAttribute("Intensity");
    auto intensityFraction = Expr::fraction(std::move(intensity), std::move(minParameter), std::move(maxParameter));

    std::vector<StyleExpression<Color>> colorExpressions{minIntensityColor, maxIntensityColor};

    return Expr::mixMap(std::move(intensityFraction), std::move(colorExpressions));
  };
private static StyleExpression<Color> CreateIntensityColorExpression()
{
    var minParameter = Constant(0.0);
    var maxParameter = Constant(65535.0);

    var minIntensityColor = Constant(Color.FromArgb(255, 0, 0, 80));
    var maxIntensityColor = Constant(Color.White);

    var intensityFraction = Fraction(DoubleAttribute("Intensity"), minParameter, maxParameter);
    return MixMap(intensityFraction, new List<StyleExpression<Color>> { minIntensityColor, maxIntensityColor });
}
private fun createIntensityColorExpression(): StyleExpression<Color> {

    val minParameter = StyleExpressionFactory.constant(0.0)
    val maxParameter = StyleExpressionFactory.constant(65535.0)

    val minIntensityColor =
        StyleExpressionFactory.constant(Color.valueOf(Color.rgb(0, 0, 80)))
    val maxIntensityColor = StyleExpressionFactory.constant(Color.valueOf(Color.WHITE))

    val intensity = StyleExpressionFactory.doubleAttribute("Intensity")
    val intensityFraction =
        StyleExpressionFactory.fraction(intensity, minParameter, maxParameter)

    val colorExpressions = listOf(minIntensityColor, maxIntensityColor)

    return StyleExpressionFactory.mixMap(intensityFraction, colorExpressions)
}

This example illustrates how to use expressions to filter out points between two height values:

Program: Creating a point filter expression that limits visibility of points between a minimum and maximum value using expressions.
  StyleExpression<bool> createVisibilityExpression() {
    auto minHeight = TileSet3DLayerFactory::getMinVisibleHeightObservable();
    auto maxHeight = TileSet3DLayerFactory::getMaxVisibleHeightObservable();
    auto minParam = Expr::parameter(minHeight);
    auto maxParam = Expr::parameter(maxHeight);

    return Expr::between(std::move(minParam), std::move(maxParam), Expr::doubleAttribute("Height"));
  }
private static StyleExpression<bool> CreateVisibilityExpression()
{
    // Creates an expression that makes points invisible when they are above the height in MaximumHeightObservable
    var maxHeight = Parameter(MaxVisibleHeightObservable);
    return Gt(maxHeight, DoubleAttribute("Height"));
}
private fun createHeightFilterExpression(): StyleExpression<Boolean> {
    val minParam = StyleExpressionFactory.parameter(minVisibleHeightObservable)
    val maxParam = StyleExpressionFactory.parameter(maxVisibleHeightObservable)

    return StyleExpressionFactory.between(
        minParam,
        maxParam,
        StyleExpressionFactory.doubleAttribute("Height")
    )
}

If your expression results in transparent colors, see Transparent colors how to enable transparency support.