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 the following color spaces that make the most sense for game development – srgb, srgb-linear, display-p3, display-p3-linear and rec2020. srgb 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(srgb 2.0 2.0 2.0 / 1.0)
}
...

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

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 spaces, the color defined in them 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 in the Player application

The Player application supports displaying HDR UI content on HDR-enabled monitors. The following CLI options control the HDR behaviour:

  • --hdr scrgb - starts the Player in scRGB mode, where the backbuffer color values will use Rec709 primaries and be in a linear space
  • --hdr hdr10 - starts the Player in HDR10 mode where the backbuffer color values will be in Rec2020 colorspace and encoded with the PQ transfer function
  • --display-referred-tonemapping - if given, the UI content will be tonemapped in the reported display capabilities about maximum reproducible luminance.

In HDR mode, all of the content in the displayed HTML document is treated as HDR content. Also, in HDR mode, the Prysm’s view is using wide textures in renoir::PF_R16G16B16A16 format. All used colors are then in linear space, and all calculations done with them are in linear space.

← HDR Primer
HDR Sample →