Depth Test Overlap

Two overlapping triangles draw out of order, but the depth test keeps the closer triangle visible where they overlap.

Program

The depth buffer stores a depth value per pixel. With depth testing enabled, WebGL can reject fragments that are farther away.

depth_test_overlap.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  gl.enable(gl.DEPTH_TEST);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  gl.drawArrays(gl.TRIANGLES, 3, 3);
</script>

depth buffer The depth buffer stores the current depth value for each pixel.

depth test The depth test decides whether a fragment is close enough to update a pixel.