webgl 绘图顺序，模板缓冲区

Posted 2023-02-22

【中文标题】webgl 绘图顺序，模板缓冲区

【英文标题】：webgl drawing order, stencil buffer

【发布时间】：2014-01-18 00:01:02

【问题描述】：

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

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

red triangle
green square
blue square

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

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

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

不胜感激。

【问题讨论】：

你能把模板部分拆分成一个单独的问题吗？

【参考方案1】：

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

gl.enable(gl.DEPTH_TEST);

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

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

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

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