webgl 绘图顺序，模板缓冲区 [英] webgl drawing order, stencil buffer

问题描述

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

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

红色三角形绿色广场蓝色方块

我希望只看到蓝色方块，因为其他一切都被透支了，输出似乎是相反的顺序?

我还阅读了有关模板缓冲区的内容，所以我尝试做的是创建一个蒙版(红色)，然后蓝色方块上应该有一个绿色三角形.

面具工作( http://jsfiddle.net/D3QNg/3/ )但我不知道是对还是我运气好.

希望得到一些帮助.

解决方案

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

gl.enable(gl.DEPTH_TEST);

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

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

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

注意，启用深度测试后，您可以通过调用函数 gl.depthFunc (文档)

I'm reading through learningwebgl.com and what confuses me is that it draws the first buffer I bound as last element?

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

red triangle
green square
blue square

I expected to see only the blue square because everything else gets overdrawn, the output seems to be in reverse order?

I've also read about stencil buffers, so what I tried to do is create a mask (red) and then there should be a green triangle on the blue square.

the mask works ( http://jsfiddle.net/D3QNg/3/ ) but I don't know if it's right or if I'm just lucky.

Would appreciate some help.

解决方案

It does this because you enabled the depth buffer at line 203

gl.enable(gl.DEPTH_TEST);

The depth buffer holds the depth for each pixel drawn. In the default mode, when trying to draw a pixel WebGL will check the depth of the pixel already there, only if the new pixel's depth is LESS then the previous pixel will the new pixel be drawn.

Since all your shapes have a depth of 0.0 the first one fills in the depth buffer for those pixels with 0.0. The next shape you draw also has a depth of 0.0 for each pixel which is not LESS than the 0.0 already there so those pixels do not get overwritten

If you comment out the line that enables depth testing you'll get the results you were expecting.

Note, with depth testing enabled you can set the comparison WebGL uses to decide whether or not to draw the pixel by calling the function gl.depthFunc (docs)

这篇关于webgl 绘图顺序，模板缓冲区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！