The shader decorator serves as a customization point in RCSS style sheets for users to render their own effects. The decorator passes its specified value through to the render interface, so that it can be interpreted by users and rendered how they like.

decorator: shader( <value> ) <paint-area>?;

Some examples where this decorator might serve useful include animated backgrounds, minimaps, glowing effects, creatively drawn borders, fluid simulations, and anything else you might be inspired to create.

In order to display shader decorators, the backend renderer must support advanced effects. In particular, this decorator requires shader support, and that users themselves implement their desired effects.

Properties

value

Specifies the value to pass through to the renderer. The built-in OpenGL3 renderer implements a shader for demonstration purposes (creation), which can be seen in the rmlui_sample_effects sample.

paint-area

Declares the box area to render the decorator onto.

Examples

The following RCSS declares a shader effect.

.creation {
    decorator: shader("creation");
    border-radius: 20px;
    border: 3px #ddd;
}

Additional examples.

.shader1 {
    decorator: shader("my_shader") border-box;
}
.shader2 {
    decorator: shader("snake and rabbit");
}