Let's cover an example of these various blending functions in action:

1. Open the ch06_09_blending.html file in your browser. You will see an interface like the one in the following screenshot:

2. This interface has most of the parameters that allow you to configure alpha blending. The default settings are source gl.SRC_ALPHA and destination gl.ONE_MINUS_SRC_ALPHA. These are parameters for interpolative blending. Which slider do you need to use to change the scaling factor for interpolative blending? Why?

3. Change the sphere alpha slider to 0.5. You will see some shadow-like artifacts on the surface of the sphere. This occurs because the sphere back face is now visible. To get rid of the back face, click on Back Face Culling.
4. Click on the Reset button.
5. Disable the Lambert Term and Floor buttons.
6. Enable the Back Face Culling button.
7. Let's implement multiplicative blending. What values do source and destination need to have?
8. Click and drag the canvas. Check that the multiplicative blending creates dark regions where the objects overlap.
9. Change the blending function to gl.FUNC_SUBTRACT using the provided drop-down menu.
10. Change Source to gl.ONE and Destination to gl.ONE.
11. What blending mode is this? Click and drag the canvas to check the appearance of the overlapped regions.
12. Try different parameter configurations. Remember you can also change the blending function. If you decide to use a constant color or constant alpha, please use the color widget and the respective slider to modify the values of these parameters.

What just happened?

You have seen how the additive, multiplicative, subtractive, and interpolative blending modes work with a simple exercise.

You have seen that the combination of gl.SRC_ALPHA and gl.ONE_MINUS_SRC_ALPHA produces transparency.