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. 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 leads to a reduced GPU memory footprint when the temporary textures are created only to render the transparent content. For more details, see the note in the next section of the documentation.

With Standard Opacity the opacity is applied to the whole hierarchy and the colors are preserved. With Simple Opacity the colors of the individual elements are blended. In the example below, we end up with purple where the red and blue overlap each other.

How to use #

The simple Opacity can be activated on a per-element basis with the coh-simple-opacity: on CSS property. The property value is not inherited. The coh-simple-opacity property makes sense only for elements with the opacity property. There is also a way to enable the simple opacity globally with the cohtml::ViewSettings::EnableGlobalSimpleOpacity setting for the cohtml::View. For more details, see the Property section

For best performance you can enable the feature globally with the cohtml::ViewSettings::EnableGlobalSimpleOpacity setting and then turn it off for specific elements with coh-simple-opacity: off when needed.

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.

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:

Property #

The coh-simple-opacity controls whether the simple opacity is enabled for a given element. The property is non-inherited and can have the following values:

• on – forces simple opacity for the element.
• off – forces standard opacity for the element.
• auto (default) – the simple opacity will be enabled based on the provided cohtml::ViewSettings::EnableGlobalSimpleOpacity during the initialization of the cohtml::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.