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 depth test determines whether or not that fragment is accepted for further processing in the rendering pipeline.
Only the fragments that pass the depth test will be processed. Otherwise, any fragment that does not pass the depth test will be discarded.
In normal circumstances when the depth test is enabled, only those fragments with a lower depth value than the corresponding fragments present in the depth buffer will be accepted.
Depth testing is a commutative operation with respect to the rendering order. This means that no matter which object gets rendered first, as long as depth testing is enabled, we will always have a consistent scene.
Let's see this with an example. In the following diagram, there is a cone and a sphere. The depth test is disabled using the following code:
gl.disable(gl.DEPTH_TEST)
The sphere is rendered first. As it is expected, the cone fragments that overlap the cone are not discarded when the cone is rendered. This occurs because there is no depth test between the overlapping fragments.
Now let's enable the depth test and render the same scene. The sphere is rendered first. Since all the cone fragments that overlap the sphere have a higher depth value (they are farer from the camera) these fragments fail the depth test and are discarded creating a consistent scene.
In some applications, we could be interested in changing the default function of the depth-testing mechanism which discards fragments with a higher depth value than those fragments in the depth buffer. For that purpose WebGL provides the gl.depthFunc(function) function.
This function has only one parameter, the function to use:
|
Parameter |
Description |
|---|---|
|
|
The depth test always fails |
|
|
Only fragments with a depth lower than current fragments on the depth buffer will pass the test |
|
|
Fragments with a depth less than or equal to corresponding current fragments in the depth buffer will pass the test |
|
|
Only fragments with the same depth as current fragments on the depth buffer will pass the test |
|
|
Only fragments that do not have the same depth value as fragments on the depth buffer will pass the test |
|
|
Fragments with greater or equal depth value will pass the test |
|
|
Only fragments with a greater depth value will pass the test |
|
|
The depth test always passes |