Time for Action: Culling

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...