O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Depth testing

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required