深度缓存(Depth Buffer)注:
当你命令WebGL绘制物体的时候,必须要经过某些必要的步骤。按等级高低排序:
- 在所有的顶点上运行顶点着色器以绘制出物体所在的位置。
- 线性地在顶点之间进行插值运算,这样做是告诉顶点哪些片元(这个时候,你可以把片元当做像素对待)需要上色。
- 对于每个片元来说,运行片元着色器以绘制出它的颜色。
- 把它写入帧缓冲。
最终,帧缓冲就是屏幕上显示出来的内容。但是当你需要绘制两个物体时,又会是怎样的呢?比如,当你需要绘制两个大小一样的正方形,一个中心位于(0,0,-5),另一个中心位于(0,0,-10),又会是怎样的呢?你肯定不希望第二个正方形覆盖在第一个正方形上,因为它距离更远,应当被挡住的。
WebGL正是运用深度缓存来处理这样的情况的。当片元着色器处理完片元以及RGBA颜色值,并把它们写入帧缓冲时,也会将与Z值相关的深度值储存在里面,但是这个值并不完全与Z值相同。(这不奇怪,因为深度缓存经常也被叫做Z缓存。)
WebGL总是将所有的Z值按从0到1顺序排列,0为最近,1为最远。现在,你所需要知道的就是,Z-buffer的值越大,物体距离就越远,与我们通常的坐标系统是相反的。
这时我们就该提到,深度缓存相应的代码了
gl.enable(gl.DEPTH_TEST);//提醒系统注意深度缓存
gl.depthFunc(gl.LESS);//如果片元的Z值小于当前值,将使用新的值,而不是原有的值。