<aside> 💡 Blending determines how we combine out output color with what’s already in our target buffer.

</aside>

• output = the color we output form our fragment shader (known as source)
  • i.e. blue square
• target buffer = the buffer our fragment shader is drawing to (known as destination)
  • i.e. red square

https://www.youtube.com/watch?v=o1_yJ60UIxs

Example 1:

glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

Blending equation is:

→ output = src_premult * 1 + dst_premult * (1 - src_a)

This can be separately split into RGB and A as:

output_rgb = src_rgb_premult + dist_rgb_premult * (1 - src_a)

output_a = src_a + dist_a * (1 - src_a)

If we have the following scenario:

dst = (1, 1, 1, 1) src = (0, 0, 0, 0.5)

Then output = (0.5, 0.5, 0.5, 1.0) which makes sense as it's drawing a half transparent black colour on top of a fully opaque white colour, resulting in a gray fully opaque colour.

Example 2:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);