Lesson 3 : Blending

•  Introduction on Blending

Blending is used to make objects translucent. Blending often use the alpha component of the color (RGBA).

We will see in this Lesson how OpenGl computes Blending to understand how to achieve specials effects with it.
At the end of this lesson, I will introduce differents exemples of the use of Blending. Some of these exemples will be used in Tutorial 9.

This lesson requieres a few learning on buffers. I will told about the Color Buffer and Depth Buffer. You can look at the Lesson 5 to have more complete explanations on these two buffers.
 

•  Introduction on Buffers

At each drawing of a frame, OpenGl store informations on all pixels of this frame into differents buffers.
These informations are for exemple the color and depth of the pixel.
 

•  Color Buffer

This buffer store the color for each pixels of the current frame drawn.

The color is in RGBA mode that is to say Red Green Blue and Alpha.
The 3 first components (RGB) can be considered as the color of the pixel. The Alpha value can be considered as the opacity of the pixel.

Without blending, when a pixel is drawn, its color overwrites the existing color of the buffer.
With blending, the resulting color is a combination of the color of the pixel drawn and the existing one in the buffer.
 

•  Depth Buffer

This buffer store the depth of each pixels of the frame.

This buffer is used to know if the current pixel drawn is closer or farther than the existing pixel on the buffer. So, when we try to draw an object behind an object already drawn in the buffer : the farther object don't overwrite the closer object (that is to say that farther object is not drawn).
 

•  How Blending works

We have seen in the introduction that blending combine the color of the pixel that is drawn and the existing one on the buffer.

Blending control this combination. Now, we will see how this combination is done.
 

•  Process of the Blending

In the following, we will use these terms :
   fragment           : set of pixels
   source (src)       : incoming fragment, pixels that is being drawn
   destination (dest) : existing fragment in buffers, pixels that are already drawn in buffers

Blending combine the source and destination being processed.
The combination is done using source and destination factors that are multiplied by their corresponding source and destination colors.

Suppose that we have for the current pixel processed these :
    source color       = (srcR, srcG, srcB, srcA)         //pixel drawn
    source factor      = (sFR, sFG, sFB, sFA)              //src factor
    destination color  = (destR, destG, destB, destA)     //color in the buffer
    destination factor = (dFR, dFG, dFB, dFA)             //dest factor

The color obtained by the combination is the sum of products between the color and its associated factor, this is the Blending Formula :
    srcColor*srcFactor + destColor*destFactor
equivalent to :
    (srcR*sFR + destR*dFR, srcG*sFG + destG*dFG, srcB*sFB + destB*dFB, srcA*sFA + destA*dFA)

We know the src and dest colors but we don't know the factor. We have to define the two factors properties.
Factors determine which effect blending will creates.
 

•  Source and Destination Factors

These two properties are defined using the folowing method :
    gl.glBlendFunc(srcFact, destFact)

srcFactor and destFactor are one of these OpenGl constant :

We will see in the sample part how to use these differents constants.
 

•  Activating Blending mode

Blending is a mode like texture, light ... So, we need to activate it :
    gl.glEnable(GL_BLEND)
 

•  Drawing many translucent objects

Do draw a scene that contains translucide object (using blending), we have to draw first all opaque objects.
After this, we have do draw the translucent objects from the farther to the closer.

If the scene contains a lot of object, it should be difficult to determine which object is behind the other.
You can let OpenGl doing this by using the depth buffer.
After you have drawn all opaque objects, make the depth buffer read-only by passing false in this method :
    gl.glDepthMask(writable)
Then draw all translucent object in any order you would.
To finish, make the depth buffer writable with the same method that you use to make it read-only.

Making depth buffer read-only has the effect that the depth of all pixels in the buffercan't be change. So, when a translucent object is drawn, the depth of this object is compared with the depth value setted before making the buffer read-only
 

•  Set the Alpha value

To current alpha value is setted with the current RGBA color :
    gl.glColor4f(r, g, b, a)
 

•  Sample use of Blending

We have seen how to blending works in the previous part. To see how to ue it, look at the Tutorial 9.
We will see these differents applications in Tutorial 9 :
  Make an object translucent
  Mixing Pictures
  Filter effect