webgl坐标转换_WebGL绘制详解之六：Depth Buffer

在这小节中，我们来看另一个Buffer：Depth Buffer(深度缓冲区)，你将了解到：

深度缓冲区的作用和原理

深度缓冲区的用法

深度缓冲区的实际运用

作用和原理

在观察三维世界的时候，物体之间总会存在前后的遮挡关系，既然是3D渲染，那么渲染出的场景也应该和实际情况一样：靠近眼睛的物体会遮挡远离眼睛的物体。深度缓冲区就是用来实现这个效果的。

当启用深度检测的时候，WebGL会将深度信息(深度信息位于Z轴方向，所以也叫Z-Buffer)写入深度缓冲区，在绘制阶段便会根据缓冲区深度信息大小来决定物体的某个部分是否需要画出来。深度值小则距离眼睛近，深度值大则距离眼睛远。在深度检测过程中，物体被遮挡的部分通常是检测失败的，因此也就无需绘制出来，进而实现了前面物体遮挡后面物体的效果。

在了解深度检测和深度缓冲区原理之后，还可以利用它实现很多其他效果。

用法

前面提到，在使用深度缓冲区前一定要开启深度检测，这需要在初始化WebGL环境时确保depth属性为true(默认为true，确保没有设置为false就行了)，并调用gl.enable方法开启(默认是关闭的)：

gl.enable(gl.DEPTH_TEST);

通过gl.depthFunc可以指定深度检测的参数，即什么情况算失败、什么情况算作通过。默认为gl.LESS，意思是当前处理的像素深度值如果小于目前深度缓冲区的值则通过，显然这样做是为了让靠近眼睛的物体遮挡在远离眼睛的物体前。depthFunc允许的值如下所示：

gl.NEVER (总不通过)

gl.LESS(如果新值