Blending in OpenGL - hls333555/OpenGL GitHub Wiki

If you replace the texture with a translucent one, you will see a dirty result something like below:

image

That's because blending is not set properly.

What is blending?

image Blending determines how we combine our output color with what is already in our target buffer. Output = the color we output from our fragment shader (known as source) Target buffer = the buffer our fragment shader is drawing to (known as destination)

How do we control blending?

  • glEnable(GL_BLEND)/ glDisable(GL_BLEND)
  • glBlendFunc(src, dest)
    • src = how the src RGBA factor is computed (default is GL_ONE)
    • dest = how the dest RGBA factor is computed (default is GL_ZERO) The default glBlendFunc() is to throw away the destination and overwrite with the source.
  • glBlendEquation(mode)
    • mode = how we combine the src and dest colors (default is add) So what this means by default is:
    • 1 + 0 = 1
    • Use the source value

How to draw a translucent texture properly?

  • We used:

    • src = GL_SRC_ALPHA
    • dest = GL_ONE_MINUS_SRC_ALPHA

  • So if the pixel we’re rendering from our texture is transparent:

    • src alpha = 0

    • dest = 1 - 0 = 1

    • Which means “Use the destination color” - the color that’s already in the buffer:

      image

  • Another example:

    • Our pixel is partially transparent, let’s say (1.0, 1.0, 1.0, 0.5) (RGBA):

    • So it’s white but translucent

    • Let’s say our destination buffer is cleared to magenta(1.0, 0.0, 1.0, 1.0)

    • So using our blending settings:

      image

To fix the issue related to transparent png file, add the following code:

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Here's the result with transparency being blended properly:

image