webgl绘图顺序，模板缓冲

Question

我通过learningwebgl.com阅读，什么使我困惑的是，它绘制了我作为最后一个元素绑定的第一个缓冲区？

http://jsfiddle.net/Cx8gG/1/

red triangle 
green square 
blue square 

我期望看到只有蓝色正方形，因为一切变得透支，输出似乎是相反的顺序？

我也读过关于模板缓冲区，所以我试图做的是创建一个蒙版（红色），然后应该在蓝色方块上有一个绿色三角形。

面具的作品（http://jsfiddle.net/D3QNg/3/），但我不知道这是对的还是我只是幸运。

希望得到一些帮助。

Answer 1

它这样做是因为您启用了深度缓冲在行203

gl.enable(gl.DEPTH_TEST); 

深度缓冲适用于绘制的每个像素的深度。在默认模式下，当试图绘制一个像素时，WebGL将检查已经存在的像素的深度，只有当新像素的深度为LESS时，那么之前的像素才会绘制新的像素。

由于所有形状的深度均为0.0，因此第一个填充0.0的像素的深度缓冲区。您绘制的下一个形状的深度为0.0，对于每个不小于已有0.0的像素，因此这些像素不会被覆盖

如果您注释掉可启用深度测试的行，则会得到结果你在期待。

注意，用深度测试激活，您可以通过调用gl.depthFunc（docs）