Blending operations

There are many different ways to blend colors. If you have used an image editor or drawing software before, you will have seen a large number of blending modes for your layers.

We will adopt the model used by OpenGL here and implement the commonly used mode for transparent objects. There are many different modes and you can find them in the full code for this section.

The bascic idea about transparency is, that we will use the fourth channel after RGB in the colors to signify opaqueness, usually called the alpha channel. If α=1\alpha = 1, the object is fully opaque and if α=0\alpha = 0, it is fully transparent.

The OpenGL model seems a bit complicated, but it boils down to the following:

The color already in the buffer is the destination color cd\mathbf{c}_d. The color that is written by the fragment shader is the source color cs\mathbf{c}_s. Each color is weighted by some factor/weight fd,fsf_d, f_s. Then both colors are combined using an operation op⁡blend\operatorname{op}_{\text{blend}}. The final color that is written into the buffer is then:

cd′=op⁡blend(fscs,fdcs) \mathbf{c}_d' = \operatorname{op}_{\text{blend}}(f_s\mathbf{c}_s,f_d\mathbf{c}_s)

OpenGL (and we) will use a slight modification, in that we allow the weights to work per component. So as before, we use the componentwise multiplication ⨂\bigotimes.

cd′=op⁡blend(fs⨂cs,fd⨂cs) \mathbf{c}_d' = \operatorname{op}_{\text{blend}}(\mathbf{f}_s\bigotimes\mathbf{c}_s,\mathbf{f}_d\bigotimes\mathbf{c}_s)

When all components in the weight vectors fs\mathbf{f}_s and fd\mathbf{f}_d are equal, this corresponds to the scalar version above.

To get our fully opaque rendering, we can use the following settings:

op⁡blend=+fs=1fd=0cd′=op⁡blend(fscs,fdcd)=1cs+0cd=cs\begin{align*} \operatorname{op}_{\text{blend}} &= + \\ f_s &= 1 \\ f_d &= 0 \\ \mathbf{c}_d' &= \operatorname{op}_{\text{blend}}(f_s\mathbf{c}_s,f_d\mathbf{c}_d) \\ &= 1\mathbf{c}_s + 0\mathbf{c}_d \\ &= \mathbf{c}_s \end{align*}

To get transparency we can think about what should happen depending on the alpha value. For now, we just think about drawing a new surface on top of existing ones. Transparency means, that we can see through this new object, so our weights should only be based on the alpha value of this new object, αs\alpha_s.

If the object is fully opaque, we only want to see its color. If it is fully transparent, we only want to see the destination. If it has a certain percentage of transparency, we expect the color to be an mix between both colors corresponding to that percentage. This sounds a lot like a linear interpolation between the two colors based on the αs\alpha_s!

op⁡blend=+fs=αsfd=1−αscd′=op⁡blend(fscs,fdcd)=αscs+(1−αs)cd\begin{align*} \operatorname{op}_{\text{blend}} &= + \\ f_s &= \alpha_s \\ f_d &= 1-\alpha_s \\ \mathbf{c}_d' &= \operatorname{op}_{\text{blend}}(f_s\mathbf{c}_s,f_d\mathbf{c}_d) \\ &= \alpha_s\mathbf{c}_s + (1-\alpha_s)\mathbf{c}_d \end{align*}

We will add a new settings object to our pipeline.

function create_blend_options({
    enabled = false,
    source_function = BlendFunction.ONE,
    destination_function = BlendFunction.ZERO,
    blend_equation = BlendEquation.ADD,
    constant_color = vec4(1.0, 1.0, 1.0, 1.0)
  } = {}) {
    return {
      enabled,
      source_function,
      destination_function,
      blend_equation,
      constant_color
    };
}

class Pipeline {
  constructor({
    ...
    blend_options = create_blend_options(),

  }) {
    ...
    this.blend_options = blend_options;
  }
}

Like with the depth test, we add a variable enabled to disable blending if we don't need it. As we are mostly drawing opaque objects, we don't need the extra processing per pixel generally. The constant_color field corresponds to some of the blending modes defined for OpenGL, but we don't use it in the example code.

We will now implement a subset of the blending and see how it looks by just overlaying some rectangles on an image. The solution is below

Exercise:

Solution:

See the solution