Overview

With version 1.25, Gameface supports Anti-Aliased Clipping. Until previous versions, all of the clipping in Cohtml has been performed through a Depth-Stencil buffer on the GPU. This included the clipping needed for CSS properties like clip-path and clip-mask. This means that given we are not using MSAA, we couldn't have got smooth edges around the clip region. This is no longer true With the introduction of the anti-aliased (AA) clipping feature.

The Gameface's rendering library can now use auxiliary single-channel textures that can be used as clip masks during clipping. This allows the clip region to contain real values between 0.0 and 1.0 and thus AA can be achieved. The visual effect is that the edges of the region defined, for example, by the clip-path CSS property won't be jagged but smooth.

Example

Here we'll present an example where the AA clipping makes a difference in the final visual result. We'll clip a shape with an ellipse through the clip-path property and see how the AA clipping affects the rendering.

<style>
.shape {
    width: 100px;
    height:100px;
    background-color: blue;
    padding: 7px;
    border: 20px solid black;
    margin: 5px;
    border-width: 20px 20px 20px 20px;
    border-color: red;
}
.ellipse-clip {
    clip-path: ellipse();
}
</style>
...
<body>
<div class="shape ellipse-clip"></div>
<&body>

This is how would the shape look without the AA clipping (the Gameface's behavior till now):

This is how would the shape look with the new AA clipping:

Enabling the feature

By default, the AA clipping feature is disabled. To enable it you can use the --enableAAClipping developer option. If the default shaders are in use, you'll also have to enable AA clipping support in the shaders by uncommenting the COH_AA_CLIPPING define in the RenoirBackends/dx11backend/Shaders/CohPlatform.ihlsl and recompiling all of the shaders.

Note: The clipping with AA is slightly more complicated than clipping with the depth-stencil buffer. The consequence is that Cohtml will have worst performance (by about 10%) on the render thread and when the AA clipping is enabled. The AA clipping will also have a negative impact on the GPU time needed to render a page.