Each fragment that has been processed by the fragment shader carries an associated depth value. Though fragments are two-dimensional as they are going to be displayed on the screen, the depth value keeps the information of how distant 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 is eligible 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:
gl.enable(gl.DEPTH_TEST)
The depth test takes into consideration the depth value of a fragment and it compares it to the depth value for the same fragment coordinates already stored in the depth buffer. The...