O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required