0

我正在阅读 learningwebgl.com，令我困惑的是它绘制了我绑定为最后一个元素的第一个缓冲区？

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

red triangle
green square
blue square

我希望只看到蓝色方块，因为其他所有内容都被透支了，输出似乎是相反的顺序？

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

面具有效（http://jsfiddle.net/D3QNg/3/），但我不知道它是否正确，或者我只是幸运。

将不胜感激一些帮助。

4

1 回答 1

6

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

gl.enable(gl.DEPTH_TEST);

深度缓冲区保存绘制的每个像素的深度。在默认模式下，当尝试绘制像素时，WebGL 会检查已经存在的像素的深度，只有当新像素的深度是LESS前一个像素时，才会绘制新像素。

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

如果您注释掉启用深度测试的行，您将得到您期望的结果。

gl.depthFunc请注意，启用深度测试后，您可以设置 WebGL 用于通过调用函数（docs）来决定是否绘制像素的比较

于 2014-01-18T04:06:58.153 回答