WebGL Beginner's Guide

Time for action – culling

1. Open the ch6_Culling.html file using your HTML5 Internet 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

   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); //renders the back face gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0); } if (showFrontFace){ gl.cullFace(gl.BACK); //renders the front ...