Each fragment that has been processed by the fragment shader carries an associated depth value. Though fragments are two-dimensional since they’re rendered on the screen, the depth value keeps the information of how far the fragment is from the camera (screen). Depth values are stored in a special WebGL buffer named depth buffer or z-buffer. The z comes from the fact that x and y values correspond to the screen coordinates of the fragment, while the z value measures distance perpendicular to the screen.

After the fragment has been calculated by the fragment shader, it becomes available for depth testing. This only occurs if the depth test is enabled. Assuming that gl is the JavaScript variable that contains our WebGL context, we can enable depth testing by writing the following:

gl.enable(gl.DEPTH_TEST);

The depth test takes the depth value of a fragment...