CSS3 added the ability to use filters directly from CSS. Coherent GT extends the HTML5 standard by adding new CSS properties which allow you to define custom filters (effects).

See Sample - Custom filters for a full example on how to use this feature.

On the CSS side of things, you must use Coherent GT's extensions which are in total 13 new CSS properties. You don't need to specify all options, only those you are using. The options are split in 3 categories:

the effect's name -coherent-custom-effect: BlurFilter;
up to 8 numeric parameters - -coherent-custom-effect-param1: 1;
up to 4 string parameters - -coherent-custom-effect-string1: DiagonalBlur;

Here's a full example:

#filtered-element {
    /* Use a convolution kernel of the type
        1 0 0 0 0
        0 1 0 0 0
        0 0 1 0 0
        0 0 0 1 0
        0 0 0 1 0
        Where param1 specifies the weight across the
        direction of the blur and the param2 specifies
        the size of the kernel.
    */
    -coherent-custom-effect: BlurFilter;
    -coherent-custom-effect-param1: 1;
    -coherent-custom-effect-param2: 5;
    -coherent-custom-effect-string1: DiagonalBlur;
}

Use -coherent-custom-effect to specify the name of your custom effect and use the others to specify any parameters that effect has. The numeric properties (-coherent-custom-param*) are animatable so you can use as them just as you would use the usual filters.

Note that applying custom effects to elements will cause the creation of a new layer backed by a GPU texture.

When implementing the feature you only need to override DrawCustomEffect method for the backends you are using. The command itself gives you access to all values - the name of the effect and its parameters, the rectangle at which the layer will be drawn and the texture itself. You need to bind whatever pixel shader & GPU resources you need and draw the texture with that setup. You don't need to worry about generating geometry or writing a vertex shader at all - Coherent GT will pass the generated vertices and indices.

On the C++ side, custom effects require you to extend the provided rendering backends. When rendering a layer Coherent GT will issue a DrawIndexedCmd to the backend (see Dx11Backend::ExecuteRendering for example) and this is handled by the provided backends. When rendering a layer which uses custom effects, the issued command will be DrawCustomEffectCmd which by default will assert to remind you that it needs to be implemented.

See the Sample - Custom filters for a demonstration of the technique. Note: The sample only works on Windows. To see it working on the Xbox One see the provided sample application for Xbox One.