Simple Filters

Overview

“Simple Filters” is an optimization technique in Gameface for the CSS filter property and its values such as coh-color-matrix(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), saturate(), and sepia(). Similar to Simple Opacity, this feature optimizes rendering performance by skipping offscreen layer creation and applying the filter directly to the pixel color of every element within a DOM hierarchy.

When using “Simple Filters”, Gameface avoids allocating temporary GPU textures for filtered content, resulting in a reduced GPU memory footprint and improved CPU performance.

With standard filter rendering, Gameface draws the element and all its children into a separate temporary texture before applying the filter to the resulting image. With Simple Filters, the filter transformation is evaluated inline for each individual element’s pixel color during rasterization.

The Simple filters optimization applies the filter to each element in a hierarchy independently, before the elements are composited together. Standard CSS filters apply to the hierarchy as a whole, after its contents have been composited. For most content, the result is the same. Differences can appear where elements overlap or use transparency, because a standard filter also affects the colors produced by compositing those elements together, while a simple filter does not. Conceptually, using a simple filter on a parent is similar to moving the same CSS filter from the parent onto each of its leaf elements.

Simple Filters

Text

Standard Filter

Text

The example shows how in the Simple Filters case the text and the elements’ transparency is rendered incorrectly according to the web standard. In both cases, a filter: brightness(2.1); is applied to the hierarchy of two transparent rectangles with text on top. With the Simple Filters, the blue transparent rectangle is blended with the red one in a different way as the applied filter affects the colors separately prior to blending. In the Standard Filter case, the blending happens before the color filter is applied and this results in different visuals. In other words, the visual difference occurs because:

The Simple Filters optimization applies the filter on every element individually. That is: “filter each element, then blend”
The Standard Filters scheme applies the filter on the elements hierarchy as a whole. That is: “blend elements first, then filter”

How to use

The Simple Filters optimization is enabled by default for all supported CSS filter functions. You do not need to configure extra flags or initialization parameters to benefit from the performance savings.

If you require standard CSS filter composition for a specific element (for example, to prevent child blending artifacts across complex hierarchies), you can disable the optimization on that element by applying isolation: isolate;.

/* Disables Simple Filters and forces offscreen texture layer creation */
.filtered-element {
    filter: brightness(2.1);
    isolation: isolate;
}

Details

According to web standards, applying a CSS filter requires treating the target element and all of its descendants as a single unified rasterized image. With standard rendering Gameface handles this by creating an offscreen temporary GPU texture, rendering the DOM subtree into it, and then applying the filter effect as a post-processing pass when drawing the texture back to the screen.

How Simple Filters Work

Just like the Simple Opacity optimization, Simple Filters eliminates the need for temporary GPU textures. When enabled, it pushes the filter calculation directly into the drawing passes of every child element within the hierarchy. Instead of capturing the element tree on an offscreen layer, each color used to render the hierarchy is modified on the fly using the active filter function (such as color matrix transformations for brightness, contrast, or hue adjustments).

Limitations

While color manipulation filters benefit directly from per-pixel inline calculations, complex effect filters require more complex rendering logic and cannot be evaluated in isolation. Therefore, the Simple Filters optimization does not affect the rendering of the following filters:

filter: drop-shadow(...)
filter: blur(...)

Elements containing blur() or drop-shadow() will automatically fall back to standard layer creation.