HDR

With version 1.14 Cohtml becomes capable of rendering HDR content and using wider colors in the scRGB color space. With that, several new features are being introduced.

Before reading about the Prysm support for HDR, you may want to familiarize yourself with the key concept in HDR from the HDR primer.

Floating-point color

With the support for HDR content, the internal representation of color changes to four floating-point numbers. This increases the accuracy of the colors and allows color values above 1.0 to be represented.

HDR CSS color definition

Per standard, color values above 255 defined through rgb()`rgba()` in CSS are clamped in the range [0.0-1.0]. This is obviously undesirable for HDR colors.

In order for the HDR rendering to be usable through CSS, we’ve introduced a new way of defining color values. We base the color definition on the Working Draft for the CSS Color Module Level 4.

The new way for defining colors with values that can go over 1.0 is through color(color-space r g b [a]). color-space is a string defining the color space and how the color values should be interpreted. The color values themselves are floating-point numbers and depending on the color space will or will not be clamped.

Currently, Cohtml supports only two color spaces that make the most sense for game development – scRGB and Rec.2020. scRGB is compatible with the standard sRGB and simply allows color above 1.0 without doing any transformations on them. You can use this color space in CSS like:


.hdr-block {
    background-color: color(coh-scrgb 2.0 2.0 2.0 1.0)
}
...

<div class="hdr-block">The background has HDR color.</div>

The prefix coh- is there because the scRGB space is not in the CSS Draft for the color definitions.

In the example, if a 16-bit texture is used as a render target for the corresponding view, the color (2.0, 2.0, 2.0, 1.0) will be used to render the element and this will be the color value written in the render target.

When it comes to the other supported color space, Rec.2020, the color defined in it will be first transformed into scRGB through the appropriate linear transformation. Example usage of this color space is:

.hdr-block {
    background-color: color(rec2020 2.0 3.5 2.0 1.0)
}

...

<div class="hdr-block">The background has HDR color.</div>

The wide color render targets can be activated through the "Wide Color Textures" checkbox in the "Rendering" section of the settings for any `CohtmlView` component. When the option is enabled, all render targets used internally by Prysm will be with the `RGBA16F` (16- bit floating point per pixel per channel) format which is suitable for rendering HDR content.
← HDR Primer
HDR Sample →