Spinel Layer Styling — Knockout Groups

Spinel Effect Scripts implement group and layer effects using short sequences of styling operators.

This post will focus on the knockout group operator.

A knockout group takes a collection of layers and accumulates layer color contributions from front to back proportional to subpixel coverage.

When the frontmost layer completely covers a pixel then its color contribution will “knockout” any contribution from a lower layer.

If the frontmost layer only partially covers a pixel then the layer’s color contribution is proportional to coverage and lower layers can contribute color proportional to the pixel’s remaining uncovered area.

More simply, layers in a knockout group don’t show through each other even if they’re transparent.

Here’s an example of 12 overlapping shapes with 70% opacity blended with the OVER blend mode:

As expected, the transparent layers blend with each other and all are partially visible.

But sometimes you don’t want overlapping transparent layers to interact with each other.

This is where Spinel’s knockout group operator is useful.

Here’s the same scene with the knockout group enabled on the non-opaque shapes:

The accumulated result of the knockout group for each pixel is the color value of the frontmost layer at 70% opacity and all lower layers are knocked out.

An animated GIF of the OVER vs. knockout blend shows that non-overlapping layers retain the same color:

Finally, here’s a video of Spinel rendering the same shapes as before while toggling the group’s knockout operator on and off. Colors are cycled between the 12 shapes and both affine and perspective transforms are applied to the scene.

(video removed)