Depth and Blending

Cull Face Winding

Face culling removes back-facing triangles so only geometry with the configured winding remains visible.

Program

WebGL classifies triangle orientation from vertex winding. Culling can skip back faces before fragment shading.

cull_face_winding.html
Visuals: generated teaching cards from captured state
  • state written by this keyframe
cull_face_winding.html · full logical source
1<canvas id="stage" width="360" height="210"></canvas>
2<script>
3  gl.enable(gl.CULL_FACE);
4  gl.frontFace(gl.CCW);
5  gl.cullFace(gl.BACK);
6  gl.drawArrays(gl.TRIANGLES, 0, 6);
7</script>

  1. Enable face culling

    kf: 1event 0kind: lifecycle

    Enable face culling.

    3gl.enable→ enabled(gl.CULL_FACE);
    WebGL will discard configured triangle faces.
    Culling happens before fragments are shaded.
    State after this keyframedisabled → enabledculling

  2. Treat counter-clockwise winding as front-facing

    kf: 2event 1kind: lifecycle

    Treat counter-clockwise winding as front-facing.

    4gl.frontFace→ CCW(gl.CCW);
    Counter-clockwise triangles are classified as front faces.
    Vertex order determines the visible side of a triangle.
    State after this keyframedefault → CCWfront face

  3. Cull back-facing triangles

    kf: 3event 2kind: lifecycle

    Cull back-facing triangles.

    5gl.cullFace→ back(gl.BACK);
    Clockwise triangles will be skipped.
    Back-face culling is common for closed 3D meshes.
    State after this keyframenone → backculled face

  4. Draw one CCW and one clockwise triangle

    kf: 4event 3kind: lifecycle

    Draw one CCW and one clockwise triangle.

    6gl.drawArrays→ only CCW triangle(gl.TRIANGLES, 0, 6);
    Only the front-facing triangle remains visible.
    The clockwise triangle is culled before rasterization.
    State after this keyframeclear color → only CCW trianglepixels
winding Winding is the order of triangle vertices as seen on screen.
face culling Face culling discards front or back faces based on winding classification.