Let's cover an example showcasing culling in action:

1. Open the ch06_10_culling.html file in your browser.
2. You will see that the interface is similar to the blending workbench exercise. However, on the top row, you will see these three options:
   • Alpha Blending: Enables or disables alpha blending.
   • Render Front Face: If active, renders the front face.
   • Render Back Face: If active, renders the back face.

3. Remember that for blending to work, objects need to be rendered back to front. Therefore, the back face of the cube is rendered first. This is reflected in the draw function:

if (showBackFace) {
  gl.cullFace(gl.FRONT);
  gl.drawElements(gl.TRIANGLES, object.indices.length, 
   gl.UNSIGNED_SHORT, 0);
}

if (showFrontFace) {
  gl.cullFace(gl.BACK);
  gl.drawElements(gl.TRIANGLES, object.indices.length, 
   gl.UNSIGNED_SHORT, 0);
}

4. Going back to the web page, notice how the interpolative blending function produces the expected transparent effect. Move the alpha value slider that appears under the button options to adjust the scaling factor for interpolative blending.
5. Review the interpolative blending function. In this case, the destination is the back face (rendered first) and the source is the front face. If the alpha source equals 1, what would you obtain according to the function? Test the result by moving the alpha slider to zero.

6. Let's visualize the back face only. For that, disable the Render Front Face button. Increase the alpha value using the alpha value slider. Your screen should look like this:

7. Click and drag the cube on the canvas. Notice how the back face is calculated every time you move the camera around.
8. Click on the Render Front Face again to activate it. Change the blending function so you can obtain subtractive blending.
9. Try different blending configurations using the controls provided in this exercise.

What just happened?

We have seen how face-culling and the alpha-blending interpolative mode can help us properly blend the faces of translucent objects.

Now, let's see how to implement transparency when there are two objects on the screen. In this case, we have a wall that we want to make transparent. Behind it is a cone.