Layer

What is a "Layer" in Computer Graphics?

In image editors, video editors, and computer graphics in general, a "layer" is a digital image or graphical effect that is applied or merged with layers underneath it. The simples example is to have a layer that is a large background image at the bottom, and a second layer on top of it that is a smaller image with transparent areas, e.g. featuring a person or object. When the layers are composited into a final image, we'll be able to "see through" the transparent pixels of the upper layer, i.e. the pixels of the bottom layer will be visible behind the transparent areas of the upper layers.

This compositing step is very important to layers. In typical written algorithms, we'd do things in the same order as we write words, from left to right, top to bottom, in sequence. However, because layers are applied "one on top of the other," we need to start from the bottom of the layer stack. Conventional wisdom may tell us that it makes more sense to look at the top layer and see which pixels are transparent, and then fetch colors for those pixels from the layers below. However, what happens in practice is that programs first render the bottom layer fully, then render the rest of the layers from bottom to top.

The reason it works like this is that layers can have all sorts of effects that can't be skipped easily. For example, in most cases it's possible to set a blending mode for the layer. A common value is "addition." When a layer has an "addition" blend mode, the values of its RGB tuple are added to the values of the image composited so far underneath it. For example, if the layer is red (255, 0, 0 RGB), and the combined images of all layers underneath is results in a green color (0, 255, 0), the addition of these two values will be a yellow color (255, 255, 0). In this example, the values go from 0 to 255 because we're assuming 8 bits per pixel. Another common blending mode is "multiply." In this case, we need to normalize the values and then multiply them. Since it goes from 0 to 255, this means 255 will be 100% (or 1.0), and 127 will be more or less 50% (or 0.5). When we multiply red (1.0, 0, 0) with dark yellow (0.5, 0.5, 0), we get dark red (0.5, 0, 0) because each RGB color channel is multiplied separately. This multiplication blending mode always results in a darker color because the maximum value will always be 100%, and 100% of X is X. It can only go lower than that, and lower values will be closer to black.

Another typical feature of layers is clipping. Normally, a layer's transparency/opacity is determined by the values of its alpha channel. When alpha is 0%, it's fully transparent, and when alpha is 100%, it's fully opaque. In order to clip one layer with the alpha of another layer, it's necessary to create a temporary intermediary image where these layers are composited. In some applications, like Krita, this requires explicitly using a "layer group," which is like folder for organizing layers. In others, like Clip Studio Paint, a group isn't required, but internally the program does the same thing. Say, for example, that you want to clip a photo of a person to a circle. You will have a layer that has a transparent background with an opaque circle in it. The transparency is determined by its alpha channel. Then we'll have another layer on top of it that is "clipped" to the circle. Normally, when we have to opaque layers one on top of the other, the alpha value of the composited image changes with the RGB, so that pixels that should be opaque become opaque. However, this time we want to change only the colors of the image while keeping the alpha value constant. Let's say that we had a third layer at the bottom of the layer stack, a fully white, opaque layer. This layer has 100% alpha in all of its pixels. Since we need some pixels to have 0% alpha for clipping to work, we can't start the compositing process from the background layer, we need to start it from the circle layer, otherwise we'll get a black circle on a white background with all pixels having 100% alpha. This is why clipping requires creating a temporary image internally: so the program can remember what's the alpha of the clipping layer when it needs to clip layers.

There are many other cases where a program may generate a temporary internal image to handle layer effects that aren't exposed in its interface. For example, in Krita it's possible for a layer to apply a "blur" effect to another layer. If you do this with a rectangle, the edges of the rectangle will "expand" because they will get blurred outwards. This means the size of the rectangle is going to change. If the program is using a temporary image exactly the size of the rectangle for applying effects, having this size change in the middle of the process can lead to all sorts of unusual rendering bugs.