Simple Opacity
Overview
‘Simple Opacity’ is a non-standard way of rendering elements with applied opacity. At the cost of a changed visual result, Prysm can render transparent elements without needing separate textures and thus saves GPU memory as well as some CPU performance. The simple Opacity can be activated on a per-element basis with the coh-simple-opacity: on/off/auto CSS property. When the simple opacity is enabled, the transparency from the opacity property will be applied to the colors of all child elements. In this case, Prysm won’t need to create temporary textures where the transparent content has to be rendered separately. This may reduce the required GPU texture memory.
Details
Prysm supports the standard opacity CSS property and renders content with applied opacity according to the web standards. This standard rendering, however, comes with some disadvantages. Every time an element in the DOM uses the opacity property, Prysm has to render all of its contents to a separate texture and then draw the rasterized content “together” using the given opacity. The idea behind this is that the transparent element and all of its children are treated as a separate wholistic image and the transparency is applied to this image and not its individual elements. This can potentially lead to the allocation of many temporary GPU textures.
A typical case of opacity is fading in some big hierarchy of DOM elements. This is what happens in the following animation:
In the example, the whole hierarchy of elements has to be rendered on a separate texture and then drawn in the main viewport with transparency which is animated.
Simple Opacity
With the Simple Opacity feature of Prysm we can avoid the usage of a separate texture when rendering elements with opacity. If we enable it – with coh-simple-opacity: on – the value of the opacity property will be “transferred” to all of the content inside of its hierarchy. The result is equivalent to multiplying the opacity with the alpha value of every color we use to draw the hierarchy. This is non-standard behavior and will result in different visuals. However, under certain circumstances, this can be an acceptable trade-off. For instance, the following animation is the same fade-in as before but with simple opacity enabled:
Note that the Simple Opacity might not necessarily lead to fewer GPU textures needed for an element. The Simple Opacity is relevant only for the cases where the opacity is the only reason the rendering logic requires GPU textures. The temporary textures are still required, if the element has other effects like
- usage of the
filterCSS property - usage of the
backdrop-filterCSS property - usage of the
mix-blend-modeCSS property isolation: isolate- uses custom effects or goes through the [Prysm’s Compositor flow]({{ref “Compositor.md”}}).
Property
The coh-simple-opacity controls whether the simple opacity is enabled for a given element. The property is not inherited and can have the following values:
on– the simple opacity will be enabled for the element.off– the simple opacity will be disabled for the element.auto(default) – the simple opacity will be enabled based on the providedcohtml::ViewSettings::EnableGlobalSimpleOpacityduring the initialization of thecohtml::View
The cohtml::ViewSettings::EnableGlobalSimpleOpacity setting is there to provide an easy way of enabling global simple opacity where all elements with opacity will be rendered with simple opacity unless coh-simple-opacity: off is specified.